So last Wednesday I returned from Australia after two years of work and travelling; it’s gone so quick! I guess time flies when you are having fun and building websites! In that time one reoccurring word I’ve come across is “responsive”. When I left the UK responsive design and responsive development was an emerging methodology; but that’s all changed and now everybody wants a responsive website!
The responsive dust has now settled, and, as always happens in development two prominent responsive frameworks have emerged. Bootstrap, originally developed by two developers at Twitter and Foundation by Zurb. Now I’ve had previous experience with Bootstrap (which uses LESS) but only passing experience with Foundation (which uses Sass). I’ve been meaning to make the website responsive for quite a while, so I may as well kill two birds with one stone; learn something new and responsivise (is that a word?) the website, so Foundation looks to be the obvious choice.
Foundation has just reached version 4 and I must say you can really tell. It’s a very mature framework with an excellent set of documentation. As a bonus if you need to get up to speed quickly and have a spare bit of cash lying around they even offer training sessions once a month where you get to ask the original developers questions. What a fantastic way to learn a new framework!
I’ve updated the site today with the basic functionality I need but I have a few issues I still need to resolve:
- Responsive images using the interchange.js add-on. The add-on works really well but it’s figuring out how best to generate the different images automatically using WordPress that is the issue.
- Adding a “medium” grid layout to target tablet size devices. Version 4.2 has an experimental version that works, but has a few quirks.
- Working with Sass is fantastic but I’m sure there are a few optimisation that I can make to my workflow when using it Sublime Text 2. SublimeOnSaveBuild looks like a handy plug-in but unfortunately it doesn’t seem to be working for me at the moment.
There we have it, converting a standard website to a responsive layout is quick and easy with Zurb Foundation. I’m looking forward to learning lots more about this excellent framework in the future. I may even have to sign up to their online training too!