How We Made our Site Responsive

The following post was pulled from our Sixie's author archive and has been updated to reflect current practice and standards. Written by our Senior Template Developer, check out how we added Responsive Design the Six Feet Up website and learn a few tricks along the way!

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.

Then, I chose how everything would fall into place for all the in-between widths. The site continues to be fixed for browsers greater than 1280px, but becomes fluid as you get narrower than that. I set breakpoints 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. Having upgraded from old versions of Plone, we were still 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 may 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" />

If you are working with a newer version of Plone, this tag is already part of the main_template.

For the CSS, I prefer to keep all my responsive styles in their own stylesheet so they are easier to find and don't bloat the primary stylesheet. This can be added to the registry as its own entry. The media field should be set to all or set the max-width, if all the responsive styles fit in that restriction: screen and (max-width: 1280px). You can check out this site's responsive styles at http://www.sixfeetup.com/responsive.css.

Once you know these 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.

Do you have questions about how to integrate responsive design into your site? Leave us a message in the comments section below or feel free to contact us with any questions.