Personal tools
Contact Us 24/7 > 1 866.SIX FEET
Sections

Skip to content. | Skip to navigation

Home > Blog > How We Made our Site Responsive

Blog

How We Made our Site Responsive

written by Chrissy Wainwright on Thursday February 19, 2015
Comments | Filed under: , , ,

 

responsive design header

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.

Six Feet Up's mobile drop-down menu

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 1280px, 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. Having been 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 then 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.

 
Posted by Daniel on Mar 05, 2015 05:24 AM
Recent issue (#389) has suggested that maximum-scale=1 is bad for accessibility, do you concur?
Posted by chrissy on Mar 05, 2015 02:53 PM
Hi Daniel, you bring up a good point, especially since I find it annoying when I can't zoom into a site when I want. I have updated the article to remove that parameter (after testing that the design still worked as expected without it). This article was written when I was first learning responsive design, and I suppose with the designs I had, I never noticed that I couldn't zoom because I didn't need to. Thank you for bringing this to my attention.
Add comment

You can add a comment by filling out the form below. Plain text formatting.

puzzle
Chrissy Wainwright
Senior Developer
Chrissy's Recent Posts:
How We Made our Site Responsive (02/19/2015)

Next Steps


Select a type of support:

Contact our sales team

First name:
Last name:
Email:
Phone Number:
Message:
Fight spam:
What is + ?
 
Call Us 1 866.SIX FEET
Sections