the grid: client handbook - responsive design

7/30/2019 The Grid: Client Handbook - Responsive Design

1/27

iii the grid client handbook: responsive design

the cliehan

respon

the grid

Copyright 2013 The Grid

All rights reserved. This book or any portion thereomay not be reproduced or used in any manner whatsoever

without the express written permission o the publisher

except or the use o brie quotations in a book review.

Published by The Grid

www.gridresponsively.com

[email protected]

Additional copies are available at store.gridresponsively.com


2/27

v the grid client handbook: responsive design

tableof contents

1what is respon

2why: the impac

3facts & statist

4showcase of s

responsive we


3/27

vii the grid client handbook: responsive design

the webis everywhere

an introduction

ON JUNE 29, 2007, Apple

which transormed the sm

Mobile Phones and Blackand captivating devices. T

smartphone in history. Th

the iPhone. There are ma

systems and with diere

The web is changing. Peo

ways than ever thought p

anymore; people are usin

the web to fnd inormati

The need or a website th

a ad or something that wable to use your website o


4/27

ix the grid client handbook: responsive design

now what?

This book will discuss res

technique that aims to cre

laptops, tablets, smartphon

type. Responsive design is

that are uture-ocused and

As a small business owne

to build a responsive webs

money? Is it really necess

mobile site? Will it take m

Why does it matter?

That is what this book wi

website and its demos and

and reerence. To gain an u

relevant statistics. To see rand benefts. When youre

business owners, so they c

everywhere. The web is ev

the web is more thanjust the desktop


5/27

xi the grid client handbook: responsive design

there ito discThis book is only ais available on The

The website featur

chapters, interactiv

showcase of succe

Start for free and t

subscription to unl

You can try a Pro s

gridresponstart today f


6/27

2 the grid client handbook: responsive design

what isresponsivedesign?

1

one


7/27


one siteanywhere.

this is responsiveweb design.

RESPONSIVE DESIGN me

adapts to the device it is

by web designer/develope

evolved considerably sinwebsites. Responsive web

ew years because o the

rom smartphones to tabl

your customers to make p

company, or fnd contact

i they are on a desktop, s

creates better experiences

possible experience regar

It is the uture o the web

outnumber traditional de

where your customers are


8/27


responsive designis 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.

aaaaaa

aaaaaaaa aaaa

aaaaaak

aaaa

the grid


9/27


one site for all devices

foodsense on a desktop

foodsense on a tablet


10/27


responsive design visualized

responsive grid on a desktop

responsive grid on a tablet


11/27


online interac

Visit The Grid onlinexamples about gr

and the results.

Start with the free

for the Pro subscr

interactive content

You can try a Pro s

gridresponexplore the d


12/27


why:impacts &benefits

2

r

r


13/27


it doesntjust look great

it is also greatfor your business

Websites no Your custome

and smartph

seeking infor

a transaction

mobile needs

alhan keser, inc. maga


14/27


MORE AND MORE WEBSIT

small companies to even t

Microsot. Its a growing tr

As a small business own

design. You may not know

eel it would be costly or

application to the real wo

time, money, and resource

But the impacts are clear

design, sites such as Tim

tremendous increases in

Responsive design isnt ju

tangible benefts or a bu

responsive designisnt just a fad.

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


15/27


the impact: time inc.

After adopting aon October 21, 2seen tremendou

23%Increasein mobilefrom whereit waspreviously

Iivhwit

luke wroblewski

time inc. website


16/27


the impact: oneill clothing

After adopting aONeill Clothing in conversion ra

101.7%Growth inrevenue oniPod andiPhonedevices

r

luke wroblewski

oneill clothing website


17/27


factsandstatistics

3

will jus


18/27


a person has theattention span

of a gold fish.

According to The Associated Press,the average attention span in 2012 was8 seconds. The average attention spanof a gold fish is 9 seconds.

17% oflast l

four s

4% of last m

ten mi

the associated press


19/27


there are moresmartphones

activated dailywordwide thanare child births

1.4m

smartphones

activatedper dayworldwide

317k

babies born

per dayworldwide

usersrespon

In a 2013 survey confeel that a site shou

question

what do you expit on a mobile de

That the site fits th

To clearly be able

as I would be able t For it to have the s


20/27


smartphone use overall

51.4%I use my smartphone or all the unctions, its my lie.

44.8%I use my smartphone or basic unctions and someapplications (e.g. Facebook, Twitter, or weather).

3.9%I use my smartphone or basic applications.

According to Prosper Mobile Insights Mobile User Surveys:

by 2013mobile p

will ovepcs as tcommondevice w

Although a growing nu

offer support for small-

Websites not optimize

a market barrier for th

will need to be reforma

gartner inc.


21/27


showcaseof successfulresponsivedesign

4

uncov


22/27


the boston globe

the boston globe on a desktop

the boston globe on a table


23/27


microsoft

microsoft on a desktop

microsoft on a tablet


24/27


time inc.

time inc. on a desktop

time inc. on a tablet


25/27


starbucks

starbucks on a desktop

starbucks on a tablet


26/27


barack obama

barack obama on a desktop

barack obama on a tablet


27/27


build oeveryw

You know what You know the be

You know why it

Youve seen the

So what are y

gridrespotry gridsite. o

build one sitefast. easy. effortless.

sign up t

the grid: client handbook - responsive design

Documents