loading

Building my first responsive website using Foundation

ericpaulsnowden.com

When I redesigned my website earlier this year I made a decision to optimize it for mobile, but not to build a mobile website. I tested heavily on iOS and Android devices, used Modernizr to make my rollovers work on touch devices, and set up the proper meta tags and touch icons.

In the last few months the type of traffic I get to my blog began to change. I now get more mobile views than all versions of Internet Explorer combined. Mobile is about 2x IE8 traffic, 5x IE9 traffic and 9x IE7 traffic. IE also has 3x the bounce rate as mobile phones and 50% less time spent. iPad traffic alone is higher than IE9.

It was time to put more energy into mobile. I’m glad I waited.

A few weeks ago Zurb announced Foundation, a framework for responsive design and development, and I instantly decided to evaluate it using my site as a guinea pig. Zurb has always produced great products (including Notable which we use heavily at Atlantic) and Foundation is no exception. For anyone new to the concept, responsive design (oversimplification) is the ability of your website to scale and respond with different options for different screen sizes and types of input. One site, everywhere.

Foundation is a responsive grid system where 14 columns flex to fit larger devices and reflow the page to fit mobile devices. You can specify parts of your site to show on phones, tablets or desktop. Out of the box it does a lot, but since I wasn’t starting with a new site, it took some finessing.

Getting Started

First off, my site was already built on top of a sixteen column grid using 960.gs. I had to rename all of my rows and columns to match the Foundation conventions, and completely rewrite part of their grid system to support 16 columns.

Second, Foundation isn’t meant to be the end all be all of responsive design – I had to add a few other libraries to the mix. Respond.js was used to fix issues with older browsers that don’t understand css media queries, the basis for a lot of the magic of Foundation. Respond.js didn’t seem to like the fact that I was using LESS, so I had to strip out the LESS code to make Respond function. Modernizr remained crucial for detecting touch devices and making sure they don’t see rollovers.

Third, I ended up customizing the css to show and hide elements on different devices, change the nav for each screen size and maximize screen real estate for each device.

All in all it was a great, and relatively painless experience. Check it out! You’re looking at it now, so send it to your phone, or just shrink your browser window. Don’t worry, I’ll wait.

I’ve already started using Foundation on a second website, and being responsive from the start has made a huge difference in productivity. Comment below if you have any questions and feel free to share!

Click here to find out more about Foundation.

Update

After launching these updates last month, I went back in a second time and made a few additional enhancements. I wrote a custom responsive images script, removed several javascript libraries that would occasionally conflict with each other, and used the version of Foundation on Github and was able to customize my install to only use the code I need and not the entire library. I also delayed the loading of all social network buttons until after the initial page load, which sped up the perceived load time. All in all I was able to remove nearly 40 server calls and the initial page load is less then 40% of what it was when I first launched my responsive website.

--

Posted on: 12/13/2011

Comments

up arrow