Turning a Static Website Responsive

At some point you either realize you probably need to start building websites for all devices, or you have some old websites that need to be converted to work on mobile devices. Either way, it isn't as hard as you think. I'll go over the basics of converting your static layout to be responsive and try to show where the problems may occur.

In part 2 (coming soon) I’ll go over converting this site from static to responsive. So stay tuned for that.

First thing to do is duplicate your homepage html file and your main css file. Just rename it test.html and test.css or whatever you feel is easiest. You don’t want to mess up your website’s static layout while you’re working on the new breakpoints.

Also, don’t forget to update the link to your new css file (test.css) in your test.html file.

Now all you need to do is add in the Meta Tag in between your Header tags.
 

By default most smartphones will pick a view that would be look best, so it tends to zoom out to capture the whole page. We want to override this, by using the meta tag above to make sure all devices are zoomed into 100% by default.

Finding Breakpoints

Now it’s time to begin. For most people the hardest part is knowing where to start, luckily, your design should show you. Wherever the design breaks down, is where you’ll need to do some work.

The most obvious place to look is the default width of your layout. If you made your website 960 pixels wide and you narrow your browser window to be say, 600 pixels, you’ll get a horizontal scrollbar at the bottom of the page. So that will be your first breakpoint (960), as it is the place where you find the first problem.

We aren’t trying to make totally new layouts for different breakpoints, the goal is to simply fix the website where it breaks down. Anywhere you see a horizontal scrollbar when you reduce the width of your browser window, that needs to be fixed. Any time text or images overlap, become hard to read, or the usability of the website breaks down, you need to fix that too.

So it really isn’t about making totally new designs for different devices, you’re just fixing the little things that break, as the browser window gets narrower. 

In your test css file, add the markup for your first breakpoint, using a media query.


@media only screen and (max-width: 960px) {

}


If your static design was built at 960 pixels wide that will be the first breakpoint. If it was 1024 pixels or some other number, change the max-width above accordingly.

If you feel ambitions you could make a larger breakpoint (expanding your fixed layout) but it isn’t necessary. We’re just going to leave the layout as is for devices viewing at 961 pixels or above.

To test that it is working, add some css in between the brackets. I usually just do a quick:


@media only screen and (max-width: 960px) {
  body { background: red; color: blue; }
}


Test to see if it’s working by narrowing your browser window down below 961 pixels and the background and text should change color.

Usually the next thing to break down, is the navigation, so it may or may not require more breakpoints. Typically, your logo is on the left and the navigation is on the right and it takes up most of the header. When the browser window gets narrower, links either start to fall down below where they’re supposed to be, are hidden, or the nav generally breaks in some other way.

Brad Frost has done a good job covering navigation with Responsive Navigation Patterns
and Complex Navigation Patterns. Most sites don’t really need anything this fancy but they’re worth a look over.

For a simple site you may just want to have the navigation clear the logo, center it, and be on it’s own line.

Fixed Widths & Heights

Anywhere you have a width set in your css it will probably become an issue at some point. Same goes for heights. There are a few things you may need to do.

For your main layout you probably have a wrapper div or some other element set to a fixed width. If your website has a wrapper div set to 960 pixels, you’ll want to add a new width for it in your media query.


.wrap { width: 960px; } // the fixed width of your static site

@media only screen and (max-width: 960px) {
  .wrap { width: 100%; }
}


When the width of the browser is 960 pixels or less, the width of .wrap is now 100%, or as wide as the browser window. This should get rid of the horizontal scrollbar and allow your layout to become narrower as the browser window gets narrower.

Of course you’ll need to adjust some of the content within that wrapper div, but the steps are the same. See if/when the layout breaks down, or if it would be better if the layout changed (something like 3 columns vs 1 column) and make the changes as needed.

Float & Clear

You will be doing two basic things with most elements, regardless of the size of the browser window. Elements will either float (left or right) so that they retain their width but are pushed down the page as the browser window gets narrower, or, you can (float: none;) and/or (clear: both) to make sure an element remains on it’s own line.

At 960 pixels you may want a three column layout but at 460 pixels, those same three columns will be too narrow to remain next to each other, so it is probably best to have those three columns stacking on top of each other.

Remember there is nothing stopping you from going from fixed 3 columns, to three fluid columns, down to two columns and finally down to one column. Do whatever makes the most sense with the time you have.

Height, Display & Overflow

 
Another issue you’ll end up running into is that your content might float down to the next line as the browser window gets smaller but the background doesn’t play as nicely.

If an element has a fixed height, you’ll need to override that in your media query, wherever the content begins to float down. This can be as simple as adding a (height: auto;)

Of course all the other little issues that happen with a fixed layout still apply when going responsive. That means you’ll need to pay attention to clear (clear: none; clear: both;), elements that are not set to block (display: block; display: inline;) and elements with overflow set (overflow: hidden; overflow: auto; and overflow: visible;).

If you’re content is cut off or hidden when it floats down to a new line it is probably a fixed height, and/or an overflow issue.

If your content floats down to a new line and the background doesn’t, it may be a display issue and/or an overflow issue. Sometime a clear may be necessary as well.

Images

 

If you have a large 960pixel wide banner image, you’ll need to change the width to 100% to scales down. You also may need to override the height if it is set. Set the height to auto (height: auto;) so that as the image scales up or down it retains the proper dimensions.

Background images can be especially troublesome. It isn’t ideal but if you have to, remember you can set (background-image: none;) if you just can’t get it to work and use a background color or gradient you specify with css instead. Many times a complicated background image isn’t going to be all that visible at 360 pixels wide anyway, so a background color will work fine.

Be thinking usability over design always.

Text-align & Margin: Auto

 
Many times, as the widow gets smaller, you’ll want to change the alignment of text and other elements. Left aligned doesn’t always look as good on a really narrow display. At 360 pixels for example, you may want to center your navigation, or headings with text-align: center.

Thumbnail images at this browser size also tend to look better when centered, verse being offset to the left. You can do with by setting the images to display: block; and then adding margin: 0 auto; so they are centered. If the images where floated, you’ll also need to remove that (float: none;). 

A Working Example

 
 
Since it’s easier to work by example, and I need to convert this site, I’m going to put together a follow up to this post, going over the whole process. So if you’re interested in that, subscribe to the RSS feed or follow me on Twitter.