Making the Six Feet Up Site Responsive

You can read and see plenty of articles about mobile and responsive development, but this is quite different than actually making an existing production site fully responsive. Here's how I went at it for our own Six Feet Up site, which is powered by the open source CMS Plone.

The idea was to take our existing design and modify it to look good on mobile browsers.  Previously, the site was using a fixed width at 980px wide. The decision of how the site would look on narrow browsers first went to the marketing team. They decided how the elements would rearrange, and which would be dropped, if any. They came up with a wireframe of the narrow design.

I then chose how everything would fall in to place for all the in-between widths. The site continues to be fixed for browsers greater than 980px, but becomes fluid as you get narrower than that. I then set break points at widths when either something broke the layout, or a column became too narrow.

The biggest code changes in the site happened to the main_template. Still being on Plone 3, we were using the tabled version of the site. The table cells were converted to divs, and the divs were arranged to match how they would appear for the narrowest view. The order became content column, right column, left column. Nearly all other site changes were done in CSS, including those for the global navigation.

A common challenge for developers working on a responsive design can be to get it to actually work in a mobile browser. You can do all your testing using Firefox, and get a decent responsive design together, but it will not work in any other browser.  You may need to add a meta tag for viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

As far as I am concerned, I ran into an unusual problem - the media queries were not working for me when put inline into the CSS. I ended up creating a separate stylesheet for each breakpoint, so the media query is on the style tag that imports each file.

<style type="text/css" media="screen and (max-width: 690px)">@import url(690.css);</style>

Once you know those two tricks, future experiences with responsive design should be much faster.  For me, writing the CSS was the easiest part. One of the most time-consuming parts will likely be getting the client and designer to decide how the site should display at various break points.

Are you working on a responsive design project yourself? Feel free to email me with questions and/or comments.