In my last post, I touched on the importance of responsive layouts in site designs so that all devices can display digital content correctly and improve the end user experience. My research into this ever-expanding web design trend / neccesity has continued over the last month and I’ve had great pleasure in sharing my learning with the rest of the team. All the things I have learnt have recently been put into practice with the creation of a sustainable responsive framework for the beta.devon and new.devon multisites that we are currently in the process of setting up.
We started the project by accessing some of the most popular CSS frameworks that have been released and are available as free downloads on the net. The goal was to find one that we could easily work with and turn into a WordPress parent theme which could be cascaded down into child themes for all the microsites that needed to be migrated. We had a fair idea of the pre-reqisites and they were as follows:
- Column based design / structure to ease the design process between ourselves and the graphic design team.
- Rapid prototyping capabilities for demonstrating page layouts. Built in components for navigations, buttons, alerts, popovers, dropdowns, breadcrumbs, pagination, inline labels, badges, typography, thumbnails and progress bars.
- Built in JQuery for effects and validation.
- Allow both fixed width and fluid width inner row construction
- A solid online development community.
- Easily transformed into a WordPress theme.
- It needed to be free!
We downloaded and had a play around with some of the most popular frameworks and those were:
All of them did an excellent job in terms of creating responsive page layouts and the majority of them had also already been transferred into free WordPress themes which we also installed and tested. The framework that appealled the most though was Twitter Bootstrap. It seemed to be the most feature packed and easy to work with in terms of backwards browser compatibility, built-in features and creating complex page layouts should that need ever arise. It also seemed to the one that had already been transferred into WordPress themes the most and this would be a bonus in terms of looking at how other developers had created them and then attempting to create our own. I’m a great believer in not re-inventing the wheel when it comes to coding but there’s also a big advantage in knowing what makes something ‘tic’ so creating our own theme from scratch was essential.
At the time of writing this, we’ve just finished creating the multi-site parent theme and a bare bones example child theme which is being put through its paces to come up with responsive versions of Coaver Club and Local Choices . The idea was to start off with a few small to medium scale sites which used various layouts and navigation elements to make sure that it was all achievable by just using the underlying twitter bootstrap framework and then additional CSS site specific styles layered on top.
We have also just finished creating our own responsive second level main navigation elements which has been used in the 3 sites mentioned above. I’m sure that there are still lots of changes needed to the framework but the most important (and as expected thing) is that site layout design time seems to be decreasing for each new site we tackle.