Mobile friendly sites
with responsive design

Rupert Breheny
September, 2012

Your future audience …

… is not on a desktop

So how do we get there from here?

Mobile devices (smartphones and tablets) are our fastest growing visitor segment. And yet we’re still building site layouts like it’s 1999.

We should be utilizing mobile-compliant best-practice techniques to ensure the optimum user experience, and making a habit of testing our new pages at narrow widths and on a variety devices.

The past …

The present …

The future …

Testing on the Toilet

Best practice for mobile support

Exemplar sites

Workshop

Identifying mobile rendering issues

Zeitgeist

Include viewport meta tag

Include viewport meta tag

Does the site zoom in to a readable level by default?

Most mobile phone browsers will render a standard web page as if at 800px width or higher, but the text becomes too small to read without zooming in. Adding a viewport meta tag makes the site more legible.

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

Workshop

Creating your own liquid layout

Liquid layout

Liquid layout

Do the copy and images reflow in a narrower page layout?

Never use a fixed pixel value on the width or height property of a container element. Instead max-width and min-height will do exactly what you need:

body {max-width: 978px;}
.boxout {min-height: 200px;}

If you do require legacy support for IE6 then use an IE6 specific syntax hack:

* html body {width: 978px;}

However it is advised to refrain from doing so in order that IE6 may preserve the flexible layout.

Use percentages for column widths

Use percentages for column widths

Do your columns resize proportionally with the browser width?

Rather than specifying pixel widths for columns, choose percentages for both the column and gutter such that they total 100%.

.column {
  float: left;
  margin-right: 2%;
  width: 32%;
}

.column.last {
  margin-right: 0;
}

No horizontal scrollbars

No horizontal scrollbars

Are horizontal scrollbars avoided?

Sometimes images or other page elements can clog up otherwise liquid container elements. A simple fix that prevents this behaviour is as follows:

img, iframe {
  max-width: 100%;
  box-sizing: border-box;
}

The "broken" Box Model

The "fixed" Box Model

Preserve layout

Preserve layout

Does content behave itself at different screen sizes?

Sometimes layout issues are triggered at narrower screen widths. Always check your site at different window sizes, as not everyone has the luxury of 30” monitors. Often adding an overflow property is a fix for escaped content:

.container {overflow: hidden;}

Media queries

Caution should be observed when using media queries as a proportion of browsers still do not support them, but for those that do, they can be a useful method of tailoring content for different classes of browsing device.

@media screen and (max-width: 600px) {
  /* rules for narrower viewports */
}

Media queries

As a set of basic triggers, the following widths are worth targetting:

Linearize columns and floats

Linearize columns and floats

Do multiple columns become stacked to maintain readability?

Narrow columns can be very hard to read at narrow screen widths. By turning inline elements to block, or unfloating containers, this can be avoided. Using media queries to trigger this linearized content is a great technique, but bear in mind this won’t work for the currently 30% of browsers represented by IE8 and below.

@media screen and (max-width: 480px) {
  div, li {
    display: block;
    float: none;
    width: 100%;
  }
}

Use CSS multiple column layout

Use CSS multiple column layout

Would content benefit from reflowing across columns?

Line lengths can be kept more readable in generic blocks of text using CSS3 columns. They are supported in most modern browsers and degrade gracefully in IE9 and below.

.container {
  column-count: 2;
  column-gap: 32px;
}

@media screen and (max-width: 480px) {
  .container {
    column-count: 1;
  }
}

Increase navigation hit area

Increase navigation hit area

Are all nav links clickable and large enough for fingertips?

Compact lists of links can be quite fiddly on a touch interface. It is recommended to make the minimum hit area at least 44px square. Instead of putting margins between link list items, consider adding padding to the anchor tag itself and linearize the list at low page widths.

@media screen and (max-width: 480px) {
  #nav a {
    display: block;
    padding: 5px 10px;
  }
}

Remove irrelevant content

Remove irrelevant content

Is all your content useful for users on different devices?

Many of your users wil be viewing your site with limited screen size, or on an expensive data plan. Rather than force them to download extraneous details, consider what content may be optional, and remove it at narrower page widths.

@media screen and (max-width: 480px) {
  .optional {
    display:none;
  }
}

Increase image resolution

Small image 2.9kb | Large image 3.9kb

Increase image resolution

Do your images look fuzzy on mobile devices?

Many modern smartphones have a native resolution approaching double that of desktop displays. For crisper images you can make the original twice the size, then scale it down again with CSS. Desktop browsers will display the image at the reduced size, but a mobile device will render it at around its native pixel density.

h1 img {width: 200px;}

This would work for a 400px wide logo in the header. There is no need to specify a height value.

Remember – mobile users may be on a data plan, so use this technique wtih caution.

Mobile specific pages

Mobile specific pages

Does the content warrant a mobile-only site?

This approach requires more resources, and can be a maintenance headache, but sometimes a bespoke mobile site can be of real merit.

References

I'm proud to say that I think it's now the joint project of all of us to make mobile the answer to pretty much everything.
Eric Schmidt

Mobile First

Points to remember

Best practice for mobile support

Thank You

Rupert Breheny

rb@google.com
about.me/rupertbreheny