It only seems like yesterday that we decided upon using Twitter Bootstrap as our main responsive grid framework to offer the users both desktop and mobile layouts for all of our public facing websites. The reality is that 2 years have now passed and like all things web development related, things have progressed at an alarming rate.
When we first adopted Bootstrap, mobile versions of sites were still more of a nicety than a necessity but the reality now is that mobile versions of our sites are far more important than desktop versions. Users not only expect to see nicely formatted content but ultra-fast page loading times. Statistics indicate that if a page takes longer than 4 -5 seconds to load, users will go elsewhere to look for the information and 75% of those users will not attempt to revisit previously slow loading sites in the future.
Twitter Bootstrap allowed us to create mobile-friendly versions of our sites using the built in grid system and assistive styles. All members of our development team quickly picked up the syntax and the results were satisfactory. There were always a few things that needed ‘tweaking’ with the CSS though such as corrective padding and spacing and from time to time, the need for jQuery scripting to achieve the desired layouts.
Back in November when I set about creating a fully customizable responsive WordPress theme (to be outlined in a future blog post), using the brilliant Advanced Custom Fields plugin, I decided to do a bit of homework into what new frameworks were available as a basis. Zurb Foundation had kept popping up in various web development blogs and forums that I follow so I decided to download a vanilla install to see what all the fuss was about.
I found that it was a breeze to integrate into existing WordPress themes and the custom download page allowed me to configure the exact grid and components I was looking for. More importantly, it was a ‘mobile first’ framework meaning that layouts are created initially for mobile devices and can then expand to meet the needs of desktop users secondly. The syntax was nice and easy to understand and naming conventions such as ‘show-for-medium-up’ and ‘show-for-small-only’ made it extremely easy to create page layouts without the constant need for diving back into CSS media queries to do such simple things as hide and show elements of the page.
Other built in features such as ‘data-equalizer’ enabled me to easily match column heights within rows and without the need for additional jQuery scripting. The default modal windows, block grids for list elements and the ‘push’ and ‘pull’ features for content ordering allowed me to create truly mobile first content layouts quickly and easily. There was also a wealth of tutorials and online forum discussions covering all things Foundation related which is always nice to have when making the move over to a new framework.
It didn’t take me long to come to the conclusion that Zurb Foundation was certainly the way to go and that Twitter Bootstrap was slowly being left behind. There was only one thing for it and that was to change our underlying framework for all of our public facing DCC sites. Retro-fitting of our existing Bootstrap based sites was out of the question so a cut-off point was decided upon.
The first major build we will be using it for will be the redesign of our new DCC homepage. The ease of development was quickly highlighted when the main 3 layout pages were created in working wireframes in less than 2 days. All that has been left for us to do is the underlying server-side scripting to bring through posts from our Newscentre site and then the remaining aesthetics. As clean as the layout is, I think we would certainly have struggled to achieve the desired layout using just Bootstrap alone.
If you’re on the lookout for a new responsive mobile framework, I highly recommend Zurb Foundation 5 as well as the Foundation for Apps framework for application interface design. I can see myself using Foundation for a very long time no matter how big or small the job may be.