Copyright 2013 The Grid All rights reserved.

This book or any portion thereof may not be reproduced or used in any manner whatsoever without the express written permission of the publisher except for the use of brief quotations in a book review. Published by The Grid www.gridresponsively.com info@gridresponsively.com Additional copies are available at store.gridresponsively.com

the grid client handbook

responsive design
the grid team

iii the grid client handbook: responsive design

iv

table of contents

what is responsive design?

2 3

why: the impact & benefits facts & statistics

14 24

showcase of successful responsive websites

32

v the grid client handbook: responsive design

vi

ON JUNE 29, 2007, Apple Inc, released the original iPhone. A device

which transformed the smartphone landscape from bulky Windows Mobile Phones and Blackberry devices to usable, always-connected, and captivating devices. The iPhone would then become the most used smartphone in history. That was then. Now in 2013, its more than just the iPhone. There are many new phones running different operating systems and with different screen sizes. 3.5, 4, and even 5.5 inches. The web is changing. People are accessing content online in more ways than ever thought possible. Its not just desktops and laptops anymore; people are using smartphones and tablets as well to access the web to find information, shop, and manage their everyday lives. The need for a website that is easily accessible on mobile devices isnt a fad or something that will go away. Users expect it and want to be able to use your website on any device they use.

the web is everywhere

an introduction

vii the grid client handbook: responsive design

viii

now what?
This book will discuss responsive design, a recent website design technique that aims to create one website which works across desktops, laptops, tablets, smartphones, and theoretically any other future device type. Responsive design is the future of the web, because it creates sites that are future-focused and modern. As a small business owner, you may be concerned about the cost or time to build a responsive website. What is it? Will it cost my business more money? Is it really necessary? Wouldnt it be easier to build a separate mobile site? Will it take more time to build a responsive site?

the web is more than just the desktop

Why does it matter? That is what this book will discuss. It is a complement of The Grid website and its demos and examples. It is designed for quick reading and reference. To gain an understanding of responsive design. To see relevant statistics. To see responsive design used today. To see impacts and benefits. When youre finished, recommend it to other small business owners, so they can to see the benefits of a website that works everywhere. The web is everywhere. Are you ready?

ix the grid client handbook: responsive design

there is more to discover

This book is only a small sampling of what is available on The Grid. The website features extended sections, additional chapters, interactive demos, and an always updating showcase of successful responsive websites. Start for free and then sign up for the Pro subscription to unlock member-only content. You can try a Pro subscription free for 30 days.

start today for free at

xi the grid client handbook: responsive design

gridresponsively.com/handbook
xii

what is responsive design?

2 the grid client handbook: responsive design

one site fits all

what is responsive design? 3

RESPONSIVE DESIGN means creating one site which resizes and adapts to the device it is being viewed on. First described in 2010 by web designer/developer Ethan Marcotte, responsive design has evolved considerably since then, becoming a near-requirement for new websites. Responsive web design has become very important in past few years because of the proliferation and variety of mobile devices, from smartphones to tablets, and anything in-between. It allows your customers to make purchases easily, keep up to date about your company, or find contact information easily for your company, whether if they are on a desktop, smartphone, or tablet. Responsive design creates better experiences for your customers by delivering the best possible experience regardless of the device. It is the future of the web. A web where smartphones and tablets may outnumber traditional desktops and laptops. Your business needs to be where your customers are. Take the first step with responsive design.

one site anywhere.

this is responsive web design.

4 the grid client handbook: responsive design

what is responsive design? 5

responsive design is based on a grid.

As the width of the browser window or the screen size decreases, different parts of the grid move down or resize. For example, if a two column layout becomes too narrow, the two columns will adjust and instead become two stacked rows, which take up the full width of the page. If there is an image that fills the browser width, it will resize with the browser window or screen.

aaaaaaaa aaaa

aaaaaaaaaaaiia aaaaaakaaaaaa

aaaaaaaa aaaa

aaaaaaaaaaaa
the grid + responsive design

6 the grid client handbook: responsive design

what is responsive design? 7

one site for all devices

foodsense on a desktop
8 the grid client handbook: responsive design

foodsense on a tablet

foodsense on a smartphone
what is responsive design? 9

responsive design visualized

responsive grid on a desktop

10 the grid client handbook: responsive design

responsive grid on a tablet

responsive grid on a smartphone

what is responsive design? 11

online only interactive demos

Visit The Grid online for interactive demos and examples about grids, responsive design, and the results. Start with the free interactive demos, then sign up for the Pro subscription to unlock member-only interactive content and demonstrations. You can try a Pro subscription free for 30 days.

explore the demos at

gridresponsively.com/hdemos
12 the grid client handbook: responsive design what is responsive design? 13

why: impacts & benefits

14 the grid client handbook: responsive design

real world. real value.

why: impacts & benefits 15

it doesnt just look great

it is also great for your business

Websites no longer live on the desktop. Your customers are on their tablets and smartphones browsing the Web, seeking information, often with a transactional intent--serving their mobile needs has become paramount.
alhan keser, inc. magazine

16 the grid client handbook: responsive design

why: impacts & benefits 17

MORE AND MORE WEBSITES are adopting responsive designs from

responsive design isnt just a fad.

small companies to even the most conservative of corporations, namely Microsoft. Its a growing trend and will only continue to increase. As a small business owner, you may be concerned about responsive design. You may not know if responsive design is really necessary or feel it would be costly or time consuming. You may even question its application to the real world and why it is something worth spending time, money, and resources on. But the impacts are clear and proven. Since adopting a responsive design, sites such as Time Inc. and ONeill Clothing have seen tremendous increases in pages per visit and conversion rates. Responsive design isnt just a for designers; it offers value and tangible benefits for a business.

It cant be ignored and wont go away. In fact, it is the future of the web and has many real world benefits.

18 the grid client handbook: responsive design

why: impacts & benefits 19

the impact: time inc.

After adopting a responsive website on October 21, 2012, Time Inc. has seen tremendous increases:

23%

Increase in mobile from where it was previously

15%

Increase in unique visits to homepage, with a 7.5% increase in time spent

26%

Decrease in the bounce rate on mobile devices

(Users which enter the site, then leave the site)

time inc. website

20 the grid client handbook: responsive design

luke wroblewski

why: impacts & benefits 21

the impact: oneill clothing

After adopting a responsive website ONeill Clothing has seen increases in conversion rates and sales:

101.7% 407.3% 41.1%

Growth in revenue on iPod and iPhone devices Conversion rate increase on Android devices Increase in revenue on non-mobile devices

oneill clothing website

22 the grid client handbook: responsive design

luke wroblewski

why: impacts & benefits 23

facts and statistics

will your audience just swim away?

facts and statistics 25

24 the grid client handbook: responsive design

a person has the attention span of a gold fish.

According to The Associated Press, the average attention span in 2012 was 8 seconds. The average attention span of a gold fish is 9 seconds.

17% of page views last less than four seconds.

4% of page views last more than ten minutes.

the associated press

facts and statistics 27

26 the grid client handbook: responsive design

there are more smartphones activated daily wordwide than are child births

users expect responsive design

In a 2013 survey conducted by The Grid, 94% of respondents feel that a site should adapt or resize based on screen size.

question

1.4m

smartphones activated per day worldwide

317k
babies born per day worldwide

what do you expect from a website when viewing it on a mobile device?

That the site fits the device it is being viewed on. To clearly be able to see and click on everything just as I would be able to on a regular computer. For it to have the same features as it does on my desktop.

28 the grid client handbook: responsive design

facts and statistics 29

smartphone use overall

According to Prosper Mobile Insights Mobile User Surveys:

by 2013,

51.4%

I use my smartphone for all the functions, its my life.

44.8%

I use my smartphone for basic functions and some applications (e.g. Facebook, Twitter, or weather).

3.9%

I use my smartphone for basic applications.

mobile phones will overtake pcs as the most common web access device worldwide.
Although a growing number of websites and Web-based applications offer support for small-form-factor mobile devices, many still do not. Websites not optimized for the smaller-screen formats will become a market barrier for their owners much content and many sites will need to be reformatted/rebuilt.

30 the grid client handbook: responsive design

gartner inc.

facts and statistics 31

showcase of successful responsive design

uncovering the best

32 the grid client handbook: responsive design

responsive design examples 33

the boston globe

the boston globe on a desktop

34 the grid client handbook: responsive design

the boston globe on a tablet

the boston globe on a smartphone

responsive design examples 35

microsoft

microsoft on a desktop
36 the grid client handbook: responsive design

microsoft on a tablet

microsoft on a smartphone
responsive design examples 37

time inc.

time inc. on a desktop

38 the grid client handbook: responsive design

time inc. on a tablet

time inc. on a smartphone

responsive design examples 39

starbucks

starbucks on a desktop
40 the grid client handbook: responsive design

starbucks on a tablet

starbucks on a smartphone
responsive design examples 41

barack obama

barack obama on a desktop

42 the grid client handbook: responsive design

barack obama on a tablet

barack obama on a smartphone

responsive design examples 43

build one site everywhere.

You know what responsive design is. You know the benefits. You know why it is important for your business. Youve seen the examples.

fast. easy. effortless.

build one site

So what are you waiting for? Start today.

try gridsite. one site. all devices. gridresponsively.com/handbook

sign up today
44 the grid client handbook: responsive design

responsive design examples 45