declan bright

Content Focused, Mobile First & Responsive Web Design

Responsive Web Design

This web site has been through several incarnations over the years and for this latest version I wanted to focus on making the site more mobile and tablet compatible. This also gave me the opportunity to get up to speed with several relatively new concepts: content focused, mobile first and responsive web design. This isn't a particularly complex web site in terms of layout but there is enough detail to cover these concepts.

Why do we need all of these new concepts?

When web browsers first began to appear on PDA's a few years ago the browsing experience wasn't exactly good, in fact it was terrible, most web sites weren't designed with such a small form factor in mind and no thought was given to touch events. Some web sites had companion sites developed as dedicated mobile sites and there was plenty of talk about the mobile web. The rise in popularity of the tablet form factor created some difficult decisions for web designers and developers, should a full size tablet be regarded as a desktop? should a small size tablet be regarded as a phone? how should we treat a medium sized device? how should we handle orientation changes? Developing a dedicated web site for each form factor would be too time consuming so a fresh approach was needed.

Mobile First Web Design

Shrinking down an existing desktop sized web site to a fit nicely on a phone is not as easy as you might expect, elements tend to get shoved into place rather awkardly and the result doesn't look quite right. Just like Edward De Bono's Reversal Method, approaching a problem from the opposite direction can help lead to a solution and this is the basis of the thinking behind Mobile First web design. Starting small forces you to think about every element on the page and asking yourself if it is really necessary, scaling up for larger form factors is relatively easy.

If you would like to read more about Mobile First web design then I recommend this book: Mobile First by Luke Wroblewski.

Responsive Web Design

Media Queries

If you apply the mobile first technique and make your site look good on a mobile form factor then how do you scale it up? Media queries are a core part of responsive web design, they are used to apply sections of a style sheet when the web browser meets certain criteria, such as when the size passes a particular threshold or break point. For instance, on this site the header and navigation elements are centre aligned by default, when the browser has a minimum width of 840px the header element is floated left and the navigation element is floated right, here is some CSS which demonstrates a min-width media query:

header, nav	{ text-align: center; }

@media screen and (min-width: 840px) {
	header	{ float: left; }
	nav	{ float: right; }
}

Viewport Meta Tag

The default viewport size used by mobile browsers has been choosen to accommodate the most common web page layouts, as these layouts were originally intended for the desktop browser this does not always give the desired result when viewing a responsive design. Thankfully the viewport settings can be configured by adding a viewport meta tag to the header of you page. Using the content attribute we can set the width and scaling properties, if a responsive design has been applied well then the user will not need to zoom, this example will set the viewport width to the device width and prevent the user from zooming: 

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

If you would like to read more about Responsive web design then I recommend this book: Responsive Web Design by Ethan Marcotte.

(Both books can be purchased as a bundle)

Content Focused Web Design

With all the hype about the latest gadgets it is very easy to fall into the trap of designing to a specific form factor. We have no idea what the next cool gadget will be so it does not make sense to design this way. Our designs should focus on making our content look good on any web enabled device instead of perfecting it for the most popular gadget today.

For example, when using media queries with min-width you should choose your break points based on how your content looks, don't make these decisions based on the screen width of current phone's or tablet's.

If you would like to read more about Content Focued web design then I recommend these articles:

Testing

There are several tools available to assist you with testing your responsive design:

How can I make an existing site responsive?

If you want to refactor an existing web site then I advise you to replace your existing stylesheet with an empty file, shrink your viewport down to 300px by 400px and start adding styles from there, as you increase the viewport size you can copy and paste relevant parts of your original stylesheet into the new one.

What have I left out?

This web site upgrade doesn't cover all of the recent trends in web design (no upgrade could) and here are some things that I decided to pass on, at least for now.

CSS Grids: As this site has a relatively simple layout I decided not to apply a CSS grid layout as I thought it would be over kill.

Responsive Images: the basic idea behind responsive images is that you serve up smaller images by default and if the device screen size is large enough or the screen resolution is high enough or the network bandwith is fast enough then serve up larger images. The thinking being that mobile devices on slower networks are not left waiting for large images to download.

I have always compressed my photos to a relatively small size anyway, less than 300kb and since there is no standard way of serving responsive images at the time of writing I decided to pass on this for now.

If you would like to read more about Responsive Images then I recommend this article:

Other Resources

View Comments