Responsive Design Best pRactices

Tips and Tricks for building beTTer siTes

Responsive design best pRactices
Table of conTenTs

table of contents
inTroducTion 3

parT 1: understanding the Mobile audience 4

parT 2: content strategy 5

parT 3: design comping 7

parT 4: Media Queries 8

parT 5: fluid grids 11

parT 6: images 12

parT 7: Typography 14

parT 8: navigation 16

parT 9: data Tables 17

parT 10: feature detection 18

parT 11: performance 21

parT 12: Testing 22

conclusion 24

references 25

page 2
Responsive design best pRactices
inTroducTion

intRoduction
Theres no question that responsive design is the future but not all responsive sites are created

impressive
new mobile devices are being invented every day, which means websites must be designed with
multiple contexts in mind With responsive sites, one url will work on any and every device

to make your content look perfect on anything from a three-inch smartphone screen to a 30-inch
widescreen monitor
but responsive design isnt just about screen width its about device capabilities a good respon-
sive site will work just as nicely on a decade-old feature phone as it will on the newest tablet-laptop
hybrid

we believe this approach is undeniably superior, its only superior when its well executed This re-
-
tect you from pitfalls every step of the way from the design approval process to page load time

page 3
Responsive design best pRactices
undersTanding THe Mobile audience

parT 1
undeRstanding the Mobile audience
Dont take mobile too literally.
so your users have gone mobile: 60% of online devices are now mobile1 and 34% of us adults go online mostly
with their phones Youll want to cater to their needs by serving up content tailored to mobile activities so what are
mobile users up to?

Meet the stereotypical mobile user.

crowded city streets as she walks, shes checking for nearby restaurants that will accept an impromptu happy-hour
gathering

in his article The Mobile context, british web developer Mark kirby provides common examples of how businesses act
on these misperceptions2:
im an airline My user is on a mobile They must be checking in ill remove access to booking and focus on check-
in features
im a shop My user is on a mobile They must be looking for a store ill serve up the address and a map, and ill
remove access to the shop
im a newspaper My user is on a mobile They must be on the move, so they only want to know the top three
stories

Meet the real mobile user.

The term mobile is a misnomer in a study of 1,000 smartphone users, data showed that 68% of smartphone use
occurred in the home3 This implies that even if your users have access to larger screens, they often still prefer to view
your content on their phones

do it on their terms so make them feel at home if your site is frustrating to use on a small screen, you may never get
a second chance to show them what it looks like on a widescreen display
Mobile sometimes means mobile, but often it means stationary The real mobile user can often be found sitting on a
couch in front of his TV

Let the user decide.

regardless of a users location or context, you still dont know what the user wants to do if you can never know the exact
context of your users, how can you create a site that provides what theyre looking for?

stephen Hay, a dutch web designer, suggests letting the user decide what they want4 if you present your users with a

and what isnt

1 brennan 2013
2 kirby 2011
3 philogene 2012
4 Hay 2013 page 4
Responsive design best pRactices
conTenT sTraTegY

parT 2
content stRategy
three Rules of Mobile content
Mobile content should be three things: complete, simple, and clean

by complete -
plained in the previous section, its foolish to make assumptions about how your mobile users are interacting with your
site

Well get to simple in just a minute

and when we say clean, we mean that your content should be encoded semantically but not styled keeping your con-
tent separate from your style means that your content is ready to be reused anywhere

Keep it simple.
unnecessary complexity hurts your contents usability and not just because it takes up space on small mobile screens
complexity isnt what your users are after in fact, studies show that your users arent reading every word of your content
from top to bottom theyre scanning

This has been common knowledge in the tech writing community since the 90s just ask Jakob nielsen His research
found that 79% of users scan new web pages and only 16% of users read the content word by word5

in that same study, nielsen points out three ways of making your content work better for web users:

1. be concise. concise content doesnt mean leaving out any important information; it means removing unnecessary
words, ramblings and information your users dont need

2. scannable layout. nielsen added bullets in his study, but this also means adding formatting (for example, bold
and italic), breaking up large paragraphs, and adding clear sections

3. objective language. nielsen recommends removing marketeseby which he means promotional writing avoid-
ing marketese is really about being concise promotional text done poorly is full of information that users dont
want

another thing to consider: keeping it simple means ditching anything unnecessarily complicated browser-based plug-ins
are an obvious no, but you might also want to consider how you incorporate video or audio content

its possible to make these features work on mobile, but include a description of what information theyll cover, and keep
these presentations short

5 nielsen 1997 page 5

Responsive design best pRactices
conTenT sTraTegY

Mobile content gone Wrong

a successful mobile content strategy requires consideration of your user experience While you should give your mobile
users access to all the information they might want, you cant simply provide them with a scaled-down version of your full

in order to provide your mobile users with the best experience possible, it can be helpful to examine cases of weak
responsive design

according to seo expert bryson Meunier6 -

tract from their user experience although starbucks, disney and Microsoft were all listed on net Magazines 2012 list of

The architecture of the starbucks site seems to ignore commonly searched keywords, making it harder for users

Many disney games are impossible to play on a mobile device

although the Microsoft mobile site allows you to select downloads in its menu, you cant actually download any-
thing instead, youre taken to a page about getting the Most out of Your pc which is irrelevant, because youre
on a mobile device

6 How common are seo problems with responsive Web design? page 6
Responsive design best pRactices
design coMping

parT 3
design coMping
the problem with comping
The traditional design process is pretty straightforward: first, an interview Then some design research and some

feedback, its applied, and the design cycle is complete

responsive design requires a more sophisticated approach You have to think about how your site is going to render on
a variety of devices, and no client has the budget or the patience to go through a pixel-perfect comp process for every

plus, theres no great way to accurately depict the behavior of your responsive site in photoshop comps

a Better alternative
comping isnt going to work for your responsive site so heres what we recommend instead:

1 start by gathering information through interviews and research the same way you always do, and then move into

2 but rather than producing a series of comps, present something more abstract, like a style guide or mood
board You can assure the customer youll get them to about 90% accuracy on their vision of the site

3 once theyre happy with the look and feel of what youre presenting to them, youll create live responsive
screens

page 7
Responsive design best pRactices
Media Queries

parT 4
Media QueRies
Responsive design is powered by media queries.
You cant talk about responsive design without talking about media queries media queries are the main technology

The term media is a bit vague, but the most common application of media queries is to test for screen width for exam-
ple, for a screen thats 1200px wide, you might want a four-column layout for your site, but at 320px, you probably want
a one-column layout Media queries make these kinds of customizations possible

screen width is just the beginning You can also use media queries to test for things like type of device (such as TV,
smartphone or tablet) and even the orientation of the device (portrait or landscape)

Media Query examples

in your HTMljust as you would link to any css stylesheet for example:

<link rel=stylesheet media=(max-width: 800px)

href=example.css />

The media href is where you add the link to

your separate stylesheet based on that HTMl snippet, if the browser viewing the site has a screen width of 800px or
below, then the site loads example.css Well talk more about other types of queries later

as far as linking a media query is concerned, you can also add a media query directly to a css stylesheet:

@media (max-width: 800px) {

.sidebar {
display: none;
}
}

in this example, if the browser has a screen width of 800px or below, then the sidebar class has the property display:
none

page 8
Responsive design best pRactices
Media Queries

now that you know how to add a media query to your site, here are some common examples of types of media queries
to get you started

Targeting screen width is probably the most common usage for a media query To target screens at a certain width and
below, use max-width:

@media (max-width: 320px) { ... }

You can use that method to apply custom css when your site is viewed on smaller screens such as phones or tablets

To target screens at a certain screen width and above, use min-width:

@media (min-width: 1200px) { ... }

The min-width method is good for giant widescreen displays

To target screens between certain widths, combine min-width and max-width with the and operator:

@media (min-width: 321px) and (max-width: 479px) { ... }

Targeting screens between certain widths is useful when you have several media queries

for more information on media queries check out the Mozilla Developer network and the Moboom Blog

Layout and breakpoints

of course, you couldnt have media queries without breakpoints breakpoints are browser widths that have a media
query declaration to call new styles and change the layout when a browser is within the declared range

some common breakpoints are:

320px
480px
768px
992px
1200px

The corresponding media queries:

@media (max-width: 320px) { ... }
@media (min-width: 321px) and (max-width: 479px) { ... }
@media (min-width: 480px) and (max-width: 767px) { ... }
@media (min-width: 768px) and (max-width: 991px) { ... }
@media (min-width: 992px) and (max-width: 1199px) { ... }
@media (min-width: 1200px) { ... }

page 9
Responsive design best pRactices
Media Queries

are all these queries and breakpoints really necessary for responsive design?

web experiences for your users doesnt mean you should Too many designers create websites with all the responsive

Web designer brad frost puts it nicely when he says: dont feel like you need to include 750 media queries and jump

do whatever is necessary to create a great user experience

and often, all that means is a couple of simple media queries nothing fancy Just enough to make sure your text is com-
fortable to read on a mobile device

4 tips for setting Breakpoints

1. dont create layouts for devices or pixels. basing your layout on popular devices or screen sizes isnt so future-
proof consider the endless fragmentation among android devices We cant count on todays popular device
being tomorrows7 popular device

2. instead, create layouts based on content. The most future-proof breakpoints are based on content consider

readers eye move through the text?) and more

3. theres no need to break your site. Media queries are powerfulthey can make major changes in your sites
layout but in most cases, a little goes a long way: small, subtle changes can take your site from web to mobile for
example, maybe all you need to do is condense the navigation menu

4. use the awkwardness rule.

based on awkwardness That is, whenever your content looks a little awkward, thats a signal for you to apply
breakpoints

7 open signal 2013 page 10

Responsive design best pRactices
fluid grids

parT 5
fluid gRids
a Better Resolution solution

with media queries fluid grids are composed of columns, and they use percentages to determine what the width of
each column should be While 20% of a desktop-sized monitor might look okay, 20% of a phone screen probably looks
-
umns for a desktop-sized resolution and one column for phone-sized resolution

You can read more in ethan Marcottes excellent Fluid grids article for A List Apart

pick a framework.
Theres no need to reinvent the wheel: unless you want an incredibly customized site, you dont have to design your

Bootstrap

page 11
Responsive design best pRactices
iMages

parT 6
iMages
some Basic image tips
critics of responsive web design point to the poor performance of some responsive sites These performance problems
are almost always a result of lazy image handling images are one of the trickiest parts of responsive design, but these
recommendations can help you handle them:

Whenever possible, use icon fonts This is the most scalable solution for icons and non-content images keep in
mind, though, that icon fonts may not work on lower-end devices

find a solution that will let you tailor the image

Youre aiming for pixel-perfect results, so it doesnt make sense to let a browser randomly scale your images You
should have complete control over the experience

images should be resized properly that is, on the server You cant rely on just the browser to scale big images
on a smartphone

Flexible images

max-width to 100%8:

img { max-width: 100%; }

That way, the image will never be wider than the browser scaling up doesnt work as well as scaling down, so youll want
to start with a larger image and scale it down

The max-width property doesnt work for older versions of ie, so add:

img { width: 100%; }

scaled-down images look choppy in older versions of ie To make these images look pretty in ie, add9:

img { -ms-interpolationmode: bicubic; }

Mobooms image widget automatically uses these tricks

8 smashing Magazine
9 (css Tricks) page 12
Responsive design best pRactices
iMages

and phone screens in some cases, that makes sense but sometimes you might want to crop instead of resize an image
for a smaller screen or you might want to use a smaller image because of bandwidth concerns

css
tricks10 article for some help picking one out We like the method proposed by Harry roberts11 because it avoids Java
script, which isnt always mobile friendly

Use css instead of images.

as recently as a few years ago, in order to make a box with rounded corners, you had to create the corners with images
nowadays, the major browsers support rounded corners12 and a variety of other css3 techniques such as opacity, gra-
dients, drop shadows and even animations

besides making designing your site simpler, using css instead of images whenever possible will decrease your sites load

any background that isnt a screenshot or an actual photograph

for icons, though, you probably still want to use sprites

10 csstricks com
11 csswizardry com
12 W3schools com page 13
Responsive design best pRactices
TYpograpHY

parT 7
typogRaphy
vertical Rhythm

work for you is by considering vertical rhythm

Vertical rhythm refers to the spacing and organization of text as experienced by viewers as they read a webpage There
are three factors that determine vertical rhythm:

font size. Youll start by choosing a font size; lets say its 12px

spacing between lines. To ensure readability, the body text will need some leading a line-height of 1 5em would
give 6px spacing between the lines of body copy 13

line height. You can determine a basic line height unit once you know the font size of the body copy and the line
spacing in this example, you have a total line height of 18px

24ways blog; on the drewish

that helps you write css with a consistent vertical rhythm

Keep gestalt principles in mind.

When thinking about spacing, consider concepts like the gestalt law of proximity: That is, people psychologically group
things that are close together

The image below is from Wikipedias page on the principles of grouping notice how your mind decides that the dots on
the left are one group and the dots on the right are three groups

13 Mobile future in focus page 14

Responsive design best pRactices
TYpograpHY

With the law of proximity in mind, youll be able to design your site in a way that takes advantage of peoples natural hab-
its of perception for example, youll be sure to position headings closer to the text that they describe

lets also consider the gestalt law of similarity, which states that people tend to psychologically group things that re-
semble each other

This image shows you how your mind automatically groups the dots into separate horizontal lines by color

techniques

page 15
Responsive design best pRactices
naVigaTion

parT 8
navigation
navigation challenges
navigation menus are crucialthis is the primary place where users interact with your site navigation menus can be
especially challenging for mobile design because of small screen sizes

navigation solutions

common navigation patterns that are easy to implement:

simple Top
Toggle
block dropdown
Hidden shelf
priority plus
footer
select Menu

pattern:

Try to avoid hiding or pushing down all the content on your mobile homepage This is particularly a concern with
simple top, toggle, and block dropdown patterns

if you choose not to provide prominent links to certain areas of your site, make sure your analytics support your
decision to make this content less visible

desktop users want links that were built for a mouse, while phone and tablet users want links that were built for a
touch screen so design mobile navigation for touch, and be sure to test on actual devices

check out some gorgeous navigation menus in our blog post, and learn more about patterns at adventures in Respon-
sive navigation

page 16
Responsive design best pRactices
daTa Tables

parT 9
data tables
Data table challenges & solutions

for smaller devices can be a nightmare

fortunately, there are a number of solutions our favorite is chris coyiers approach: reformatting the data so that each
row of a table appears as a table itself whenever a smaller screen is detected

Here are a few other solutions to consider:

coyier presents a collection of other ideas

tables on their sides

Zurb has created a solution

side of the screen and lets you scroll through the other columns

David Bushells approach experiments with horizontal scrolling

page 17
Responsive design best pRactices
feaTure deTecTion

parT 10
featuRe detection
Modernizr
adapting your site to features along with layout is the next stage of responsive web design, and Modernizr provides you
with plenty of tools to get started

Modernizr is a Javascript library that detects the HTMl5 and css3 that are in the users browser Modernizr has two
important functions:

1. Modernizr tells you which css3 features the users browser supports. This means that you can customize

2. Modernizr enables styling for htMl5 elements in older browsers such as ie 6 through 8 This means that you
can write css for HTMl5 elements without worrying about what an older browser can support

Limitations of Media Queries

The typical responsive approach is to create media queries that make the site more mobile-friendly at lower resolutions
The media query approach assumes that a device has particular features based on its resolution or its device type for
example, one assumption might be that because a device has a large resolution, it doesnt use a touch screen but with
the recent slew of touch screen displays, laptops and laptop-like tablets, this assumption fails

a better approach is to detect the features of a device and customize the content based on those features Thats where
Modernizr comes in

How Modernizr Works

Modernizr detects which css3 features a users browser supports, and tells you that information in two ways:

by adding css classes to the pages root <html> element

by creating a global Javascript object (Modernizr)

Moboom com runs Modernizr so if you view its source, youll see that the <html> element starts out with the class no-js:

<html class=no-js>

page 18
Responsive design best pRactices
feaTure deTecTion

next, if you view the rendered HTMl, youll see that the <html> element has additional classes, and the element prob-
ably looks something like:

postmessage websqldatabase indexeddb hashchange history draganddrop

websockets rgba hsla multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations csscolumns cssgradients

Modernizr is a Javascript library, so if the device running your site doesnt support Javascript, then no-js remains un-
changed (you can create css styles for that class)

if the device does support Javascript, Modernizr runs tests to detect which features are supported The results of these
tests are returned as classes in the example above, you can see that the browser supports the flexible box Model

returned)

for detailed information on which feature corresponds with which class, check out the Modernizr documentation

Writing css incrementally

The way to take advantage of the Modernizr classes is to add css styles incrementally first, start with some simple
HTMl:
<ul class=wrapper>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

next, apply basic styling:

.wrapper {
padding: 0;
list-style: none;

justify-content: space-around;
}

page 19
Responsive design best pRactices
feaTure deTecTion

.wrapper li {
margin: .5rem;
color: SteelBlue;
font-size: 3rem;
font-weight: bold;
text-align: center;
}

To create two separate looks, just add styles for the touch class remember that if the browser supports touch events,
then Modernizr will add the touch class to the <html> element so to create touch-friendly buttons, just add:
html.touch .wrapper li {
height: 10rem;
line-height: 10rem;
background-color: SteelBlue;
color: white;
}

html.touch .wrapper {

if you open the page on a touchscreen device, Modernizr applies the touch class if your browser doesnt support touch
events, Modernizr applies the no-touch class With Modernizr and some basic css, you can quickly create pages that
adapt based on the supported features

How the Javascript object Works

Youre not limited to cssModernizr creates a global Javascript object The object, Modernizer feature, returns a bool-
ean that tells you if the feature is supported

for example, to test if touch events are supported, you could use:
if (Modernizr.touch) {
$touchy=Touch me!
} else {

page 20
Responsive design best pRactices
perforMance

parT 11
peRfoRMance
page Load time
When youre designing a site that will run on mobile devices, page load time is a huge issue Mobile connections may be
spotty and slow, but users wont accept that as an excuse studies show that more than half of users will abandon14 a
site after waiting three seconds for it to load

and as the folks at Walmart.com

strategies for improving page Load time

Reduce the size of your pages.

1. eliminate the unnecessary: start with what is absolutely essential, and progressively enhance from there

2. separate secondary content: put your core content on one page, and link to separate pages for secondary con-
tent

3. dont hide elements: This is a common practice on a lot of responsive sites but if something isnt going on the
page, why download it? use conditional loading15: load items only when requested, or when the conditions are
right

optimize your code. steve souders has some excellent solutions, and also consider:

1. Minify any Javascript that youve added

2. optimize your css by following a list of recommendations that include: avoid a universal key selector, make rules

3. Remove duplicate scripts -

ably

4. Dont add css directly onto a page: instead, add any css through the site styles page, the Widget styles page
or in the styles tab of a widget When you add css directly onto a page, the css wont load in the pages Head,
which means the page will take longer to load

use a cdn: global content delivery networks bring more users closer to servers, which has a direct impact on load
times

14 strangeloopnetworks com
15 24Ways com page 21
Responsive design best pRactices
TesTing

parT 12
testing
take your site for a test drive.
The best way to make sure your website is ready for users is to imagine that youre a user and explore your site inside
and out, in every context imaginable from a user who has lots of questions and is accessing your site on a desktop
using ie to a user whos in a big hurry and is accessing your site on the latest android device, youve got a lot of roles to
play

test in multiple browsers.

Your users are accessing your site on a variety of browsers and you want your content to look good on all of them
from antique options like internet explorer 6 to the latest version of chrome

test on multiple devices.

wide variety of screens

Mobooms sitestudio can give you an idea of how your site will look on various devices preview the layout on
tablets, laptops, iphones and more
preview your site with the preview button, which links to a separate preview url (yoursite preview moboom com)
where you can test the site:
on any physical device
at any resolution
and very thoroughly you should test every unique feature (css animations, responsive navigation menus,
etc ) on physical devices

an open device lab is a great resource for real-device testing if youre in the san francisco bay area, come check
out Mobooms own oDL
Youll want to test on common mobile browsers like the android default browser, firefox for android and the ios
browser

page 22
Responsive design best pRactices
TesTing

test it yourself.
no matter what browser or device theyre using, everyone needs a smoothly functioning site thats easy to read so make
sure to:

check every link: navigation links, external links, internal links

proofread
voice, make sure any lorem ipsum has been replaced by actual copy and make sure information is up to date
search for terms in your search box
fill out any forms, such as surveys or newsletter submission forms
Make sure you can purchase every product in your shop

and do some usability testing.

While usability testing isnt always possible on a short deadline, its a great move if you can manage it usability tests are
the best way to catch bugs you wouldnt have noticed otherwise

come up with typical use cases for your site

Test a variety of users with various needs, visiting your site in various contexts
use standard usability testing methods: in person and survey

page 23
Responsive design best pRactices
conclusion

conclusion
thank you for reading!
Weve covered a lot in this ebook among many other things, weve established that:

its foolish to make too many assumptions about what mobile users want to do on your website

Keep your content clean, that is, separate from the structure of your site

comping has outlived its usefulness When designing responsively, use a combination of mood boards and live
responsive screens instead

Media queries are powerful tools but that doesnt mean you should load your site with them use them intel-
ligently and sparingly

its important to resize images on the server not on the browser

vertical rhythm and gestalt principles are still relevant typography principles

There are lots of navigation options to suit your content, but keep all content accessible and design for touch

data tables can be a pain We recommend chris coyiers approach

keep device features and input in mind Modernizr makes it easy to adapt your content

Minimizing your page load time is crucial more than half of users leave a web page after waiting three seconds
for it to load

before your site goes live, testing is a must on various browsers, on various devices, and with various users

responsive design, check out Moboom University Were always updating our tutorials

Try Mobooms ground-breaking responsive design platform for yourself claim your free site now to get started

page 24
Responsive design best pRactices
references

RefeRences
1 How common are seo problems with Responsive Web Design? brian Meuner, 2013

2 responsive Web design: Missing the point brad frost, 2013

3 the Future of Digital: 2013 business insider, 2013

4 global mobile statistics 2012, & global mobile statistics 2013 part a Mobithinking, 2012

5 global trends in tablet and smartphone use while watching tv nielsen, 2012

6 guidelines for Responsive Design kayla knight, smashing Magazine, 2012

7 Responsive images Right now Harry roberts

8 Mozilla Developer network Mozilla, 2013

9 css: W3schools com

10 Which responsive images solution should you use? chris coyier, 2012

11 Website abandonment Happens after 3 seconds strangeloopnetworks com

12 Fluid grids ethan Marcotte, a list apart, 2010

13 Mobile Future in Focus comscore, 2012

14 cell internet Use pew, 2012

15 Just-in-time information through Mobile connections pew, 2012

16 How to optimize Your Headlines for google and Humans Jonathan rick, Mashable

17 android Fragmentation visualized open signal, 2013

page 25