responsive web design

responsive

Web designhow to adapt websites to any browser or screen size?

presented by Vu Tran LamSaturday, March 9, 13

2

when...?

Saturday, March 9, 13

computer evaluation...


the beginning of an answer through this man...


...in 1980 Steve Jobs recounted the following story...

a few years before the Macintosh…


released 1984

...and that’s exactly what we’re doing here“Saturday, March 9, 13

the computer was just the beginning...


8

Steve timeline...


Steve timeline...


10

Steve timeline...


Steve timeline...Steve timeline...


to be continue...


2007

the iPhoneoriginal

era begins...the smartphone


brings touch, gestures

iPhone 3Gweb

touch

and the real web...

iPhone

2007 2008


20082007 2009

3GiPhoneiPhone 3GS

native apps and

android apps

the rise of Android...


iPhone

2007

iPhone 4

2010

3GS

whither feature phones,

htcg-five

samsung

and the further rise of Android...

2008

web os

3G

2009


2008 2009

3G

2010

3GS

2011

4

blackberry kindle nook

devices go mainstream

iPhone 5...

with great expectations...

samsungmotorola

htcLG


opportunity

the bleeding edge...

'ish via China+


welcome to the future


http://www.flickr.com/photos/_dchris/4652995362

today’s digital

and connected things

may feel incredibly diverse...


http://www

http://www

large stationary

Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).

public short use

(sweaty) touch


stationarysocial

lean-back powerful (enough)remote (voice, gesture, app)

One of many Smart (internet enabled) TVs now shipping. Includes apps and a browser. Some can be paired with a smartphone or tablet.

low-ish ppi

large


The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser.

small touch, voice

fixed (but not stationary)

bandwidth constrained


Quantas A380 first class with 17” flat panel display.(Tethered tablets will likely appear soon).

manipulation unknown

large(r)

fixed (but not stationary)

bandwidth constrained

public

Source: PC Mag


Shipping spring 2012 in EuropeLG’s EPD is a 6-inch, 1024×768 e-ink plastic screen. It’s 0.7mm thick, it weighs 14g, and LG claims it’s resistantto scratches and drops from a 1.5 meter height.

constrained

flexible

small(-ish)

many unknown unknowns


+

+=

+connectivity

software

oldthing(or media,

or tool)

thingsmart

old thing(just a bit smarter)

user interface


what...?


Responsive Web Design (RWD) is an approach to web design in which a site is created to provide an optimal viewing experience - easy reading and navigation -

adapt to a wide range of devices (from desktop computer monitors to mobile phones)


responsive websites

respond

to their environment


30

small + medium + large


31

one site for every screen


why...?


the web is less than

9000 days old

http://wwwflickr.com/photos/psd/3149878971


http://www

http://www

1/3

2012 estimates put the population at about 7 billion inhabitants...

Internet

ofpeople

onplanet

using


1/3 people has a smartphone

of


Source: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/wonderdawg777/662293238

76% use mobile while waitingin queues or for appointments


37

how many... in Q4/2012?

22.9M

47.8M


yesterday

“go to the computer”to use the web/Internet


yesterday

“go to the computer”to use the web/Internet

today

“use mobile” to use the web/Internet


Inte

rnet

Use

rs (M

M) E

stim

ated

1000

2007 2008 2009 2010 2011 2012 2013 2014 2015

Desktop users

Source: Morgan Stanley Associates Internet Trends 2010 (PDF)

mobile users = desktop users

2000

1500

500

Mobile users

the mobility era

0

2013 is the year of responsive web design


1984 1990 1994 1998 2004 2007

display size/width

512 x 342

in the beginningwe had computers...


1984 1990 1994 1998 2004 2007

640

800 1024 x 768 512 x 342

1024

512

we came to expectmore and more every year...

display size/width


240

320 x 480

1984 1990 1994 1998 2004 2007

640

800 1024 x 768 512 x 342

1024

512

..one day in 2007less became much more

display size/width


768 x 1024

240

320 x 480

1984 1990 1994 1998 2004 2007

640

800 1024 x 768 512 x 342

1024

512480 x 800

today we seem to have

a lot less more...

display size/width


1990 1994 1998 2004 2007 2011 2015

640800

1280

1024 x 768

240

1440600 x 1024

768 x 1024

with a lot more lesson the horizon...

public displays

1920 x 10801920

1024 320 x 480480 x 800 360 x 640

display size/width


how to adapt websites to these varied screens...?


you could not build all websites

http://www.flickr.com/photos/handwrite/3460075040

UNDESIRABLE

suitable for every devices...


many sites for all devices


many sites for all devices

mobile website


http://www.flickr.com/photos/farleyj/2768941171

responsive web design


50

how...?


http://www.flickr.com/photos/clairity/1449248189

...we still can't seethe forest for the trees...


http://www.flickr.com/photos/dnorman/3590132503

as rubbish with no value...we treat our content

our assets


http://www.flickr.com/photos/pasteberlusconi/5352932503

what would happenif we designed content...


http://www.flickr.com/photos/stephi2006/4428932249

to how we design software...?in a manner similar


CONTENTSTRATEGY

SCREENS

VISUALDESIGN

USER RESEARCH

DEV

TEST

formal web design process


...to adapt to many types of screen


USERRESEARCH

CONTENTSTRATEGY

DESIGNIN TEXT

VISUALSTYLE

CONVERTTO HTML

VISUALDESIGN

PROTOTYPE

TEST

SKETCH

SCREENS

responsive web design process


USERRESEARCH

CONTENTSTRATEGY

DESIGNIN TEXT

VISUALSTYLES

CONVERTTO HTML

VISUALDESIGN

PROTOTYPE

TEST

SKETCH

SCREENS

HTML STYLE GUIDE

RWDPROTOTYPE

responsive web design process


59

ways...?


bún đậu mắm tôm

http://www.flickr.com/photos/_ppo/2393063853

a client makes a request to a server...


bún bòphở trà đá cà phê

cơm

many clients could make

belong to the context

nước cam

http://www.flickr.com/photos/_ppo/2393063853

varied requests...


45K, nước cam...

5K, trà đá...

the server tailors each request to each client...

30K, bún...

50K, cơm...

http://www.flickr.com/photos/_ppo/

2393063853Saturday, March 9, 13

what they needensuring they get exactly


http://www.flickr.com/photos/fpat/3692425154

how.. mobileaccess web on Internet?


q

http://www.flickr.com/photos/sporst/3999795549

...let's first deal withwhat we mean by 'context'...

mobile


http://www.flickr.com/photos/izzyplante/4009893952

in all of these varied devices?how do we make content meaningful

the hell


stuff you know and stuff youwish you didn't...

features constraints+ • screen size • local storage • touch • canvas • SVG • etc

• screen size• no touch• poor JavaScript• no canvas• isMSIE• etc

http://www.flickr.com/photos/katerha/4330199412


http://www.flickr.com/photos/donkeyhotey/5527263186

the client

and the server

working together...with both client & server

feature detection

device database

"first-run"


http://www.flickr.com/photos/wscullin/3770015203

first load...


fontsJavaScriptimagesvideo

initial request

1

Hmm, Huston - we have a problem...

HTML stylesheets Flash

no idea what we can deliver to this client...



http://www

http://www


$wurfl->getDevice($id);

PHP, Java, etc.

...or another dB!


width: 320 px... use what you can...

create profile2

{width:{

screen:320 }}

a cookie


PHP, Java, etc.


fontsJavaScriptimagesvideo reduce images


we could send smaller images...

include only those resourcessuitable for device context...

HTML

Flashstylesheets images

{width:{

screen:320 }}



be sure to compress them if you can...

{width:{

screen:320 }}



initial response

{width:{

screen:320 }}


detectFeatures();3

JavaScript


{width:{

screen:320 }}


update profile

subsequent request

4

...now with more chips!


{width:{

screen:320, document:320

},xhr:true,canvas:true,flash:false,video:true,formats:{

h264:probably,ogg:false,webm:false

},offline:true

}


sync profile5{

width:{screen:320,

document:320},xhr:true,canvas:true,flash:false,video:true,formats:{


},offline:true

} same profile on bothclient & server



http://www

http://www

fontsimagesimages

video


https://github.com/bryanrieger/profile

now, send only what's required6

HTML

videoFlash

JavaScriptstylesheetsstylesheets

HTML Javascript

sample code* available *fyi the code currently uses a simple profile db idea we're playing with instead of WURFL...

{width:{

screen:320, document:320

},xhr:true,canvas:true,flash:false,video:true,formats:{


},offline:true

}






















Ogg

dpiisBrowserLamescreen size

HTML5

WebM

colour depth

javascriptstorage

doctypecanvas

json@font-face

H.264

WebGL

input methodsor profile

the device context is defined via

xhr

isTouch

media formats

features & constraints...


isTablet

appcache

CSS

custom propertiesbased on your owntacit knowledge...


81


82


83


device profile

Flash embed

http://www.flickr.com/photos/dullhunk/4422952742

JavaScript

to usactually relevant...

but only those that arefeatures & constraints

HTML5

screen size


http://www.flickr.com/photos/aturkus/4040454167


this is rhetorical...


87


88


89


90


91


perhaps a bit ambitious?

...a bit late, no?

every stylesheet is not required

device detect early

typicallydesktop scripts aren't suitable for mobile

@font support varies

3 columns, really?

...what about scripts & stylesheetsthat aren't suitable?


...too many HTTP requests

provide alternates?

unsupportedmedia formats...

...that's a lot of JavaScript!

requests...

...is Flash even supported?

does every device get the sameFlash – if they support Flash?

...ah, that is Flash!

the right version of


http://www.w3.org/TR/html5/video.html

this only deals with codecs - not context*...

...screen size?

...available bandwidth?

you just can't detect...or factors that

...is orthogonal to...

c.2000...

Text

fsdfffSaturday, March 9, 13

http://www.flickr.com/photos/digger_twit/1353837770

...a selection of content

filtering + transformation prototypes


96


begin with someexisting HTML content...


Raw user agent: Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 ...Device identified as: Nokia N73

Actual Root Device ID: nokia_n73_ver1WURFL ID: nokia_n73_ver1_submozilla50

physical_screen_height: 49columns: 21dual_orientation: falsephysical_screen_width: 37rows: 6max_image_width: 229resolution_height: 320resolution_width: 240max_image_height: 260..

$wurfl->getDevice($id);

http://www.tera-wurfl.com/explore/

this is what we're after!


http://www.tera-wur

http://www.tera-wur

resolution_width: 240

$html->find('img[src]');

device property


resolution_width: 240

<img />

device property

<img />

<img />


panda.jpg [email protected]

based on...

repeat process for each <img> found in document...

[email protected]

resolution_width: 240 device property

replace each image with a

more suitable alternate...


mailto:[email protected]



















...how many images are required?

other elements?

..what about slightly

"fuzzier" DOM elements?

...related elements?

[email protected] [email protected]

resolution_width: 240 device property

FAILpanda.jpg





















103


...an interesting idea

{{mustache}} inspired...


quickly got out of control...

yet revolting

*HACK*

PHP

{{mustache}} inspired...

slippery slope

toXSLT!

...apologies to @stephenhay

FAIL

...an interesting idea that

hacked together in PHP(should have been C for speed)...

almost reinvented...

written in


106


...use XSLT – after all it was made to style content!?

WTF?

yup, that's "99Bottles of Beer"in XSLT...?

found massive inspirationfor XSLT here!

FAIL

...we honestly tried,

but we @$*#& XSLT!


108


http://www.flickr.com/photos/vauvau/3466024918

responsive design & one web

really bloody difficult...the mobile web is


http://www.flickr.com/photos/seatbelt67/502255276

hmm...


http://www.flickr.com/photos/colindunn/4479309983

content.app

content asapplications...


http://www.flickr.com/photos/aubergene/970367879

make it usableand meaningful...


http://www.flickr.com/photos/aubergene/970367879

add structure toenable manipulation...


115


119


the CSS strategy


fixed width layouts


flexible grids layouts


adaptive(multiple fixed width layouts)

or

responsive(multiple fluid grid layouts)


• fixed width for large and medium• fluid width for small

solution

mixed approach


12 column grids layout


target ÷ context = result940

100%

720

76.5957447%

220

23.40425535%


/* layout: two columns description: responsive 940 = 720 + 220 100% = 76.5957447% + 23.40425535%*/#container{

float:left;margin:0 -‐25.5319149% 0 0;width:99%;

}#content{

width:685957447%;margin:0 29.787234% 0 20px;

}#primary, #secondary{

overflow:hidden;width:23.40425535%; /* 200px / 940px */

}#site-‐tite, #site-‐into{

width:74.4680851%; /* 700px / 940px */}#footer-‐widget-‐area .widget-‐area, #site-‐generator, #site-‐description{

width:23.40425535%; /* 200px / 940px */}


design for (the simplest) mobile browser first.

note

mobile first


fully flexible with defaultstyles for navigation,fonts, content andno media query

begin with a lightweight default

B

C

A


embrace the cascade

don’t swap style sheets...let it cascade.

note


demo


each style sheet augments the others

augment once for another device

A BC

xx px to xxx px

breakpoint

A

BC

max xx px wide (or unable to

understand further instructions)

style sheet 1

breakpoint


A BC

xx px to xxx px

B

min xxx px wide

A

BC

max xx px wide (or unable to

understand further instructions)

augmentonceagain forTVs etc.

breakpoint

each style sheet augments the others

breakpoint

style sheet 1

breakpoint

style sheet 2

C

A


using breakpoints

create breakpoints using media queries for various screens

technique

http://www.w3.org/TR/css3-mediaqueries/




a single css file is networkefficient, but includesunnecessary style data thatall devices end up downloading

a common approach

@media {(min-width: 320px)

styles.css

one style sheet with mediaqueries on the inside


}


}


}


MAJORBREAKPOINTSIN DOCUMENTHEAD mobile.css

@media {(min-width: 640px) }

desktop.css basic.css

typically) no media queries


}


}

MINORBREAKPOINTSWITHIN EACHSTYLE SHEET

a more robust optionmultiple style sheets withmedia queries on the inside


@media screen and (min-‐width:1024px) { section ul li { width:20%; }}

<link rel="stylesheet" type="text/css" href="stylesheets/base.css"media="screen,handheld" />

<link rel="stylesheet" type="text/css" href="stylesheets/desktop.css"media="only screen and (min-‐width:720px)" />

<link rel="stylesheet" type="text/css" href="stylesheets/mobile.css"media="only screen and (min-‐width:320px)" />

MAJOR BREAKPOINTS IN DOCUMENT HEAD

MINOR BREAKPOINTSWITHIN EACH STYLE SHEET


(which will affect performance)

don’t multiple style sheets

cause multiple http requests?


min 320 px wide and/or unable to

understand further

instructions

Major Breakpoint 1(media query in document head) Major Breakpoint 3

320 px to 720 px wide 720 px to 1024 px

Example

Major Breakpoint 2(media query in document head)

720

(P) = Portrait(L) = Landscape(L*) = Landscape w/ native viewport adaptation

some tabletsmost NetBooksmany DesktopsiPhone (P)

many Android (P)many BlackBerryS60 QWERTYMost S60 (L)

320

major breakpointsmajor layout changes

nothing ishere...butthat’s ok!

(media query in document head)

1024


demo


responsive content

create responsive text, media, data table and navigation

technique


146

responsive imagessuitable for any screen


HTML

CSS

<div class="figure"><p>

<img src="robot.jpg" alt="" /> <b class="figcaption">Lo, the robot walks</b>

</p></div>

.figure{float: right;margin-‐bottom: 0.5em;margin-‐left: 2.53164557%; /* 12px / 474px */width: 48.7341772%; /* 231px / 474px */

}img{

max-‐width: 100%;}

img, embed, object, video{width: 100%;height: auto;

}


149


HTML

JAVASCRIPT

<picture width="500" height="500"> <source media="(min-‐width: 45em)" srcset="l1.jpg 1x, l2.jpg 2x"> <source media="(min-‐width: 18em)" srcset="m1.jpg 1x, m2.jpg 2x"> <source srcset="s1.jpg 1x, s2.jpg 2x"> <img src="s1.jpg" alt=""> <p>Accessible Text</p></picture>

<script src=="picturefill.js"></script>


151

62.5% rule

• modern browsers have a 16px font default size• body {font-size: 62.5%;} --> 16 x 62.5 = 10px• p {font-size: 1.3em;}• top and line-height should be em’s• avoid nested em definitions

em2px


demo


153

data fit into each screenresponsive data table


demo


navigation suitable for each screen

responsive navigation

horizontal menu for desktop screen

drop down list menu for mobile device


demo


where...?Saturday, March 9, 13

158

references


158

references

Ethan MarcotteAuthor of Responsive Web Design

Brains behind the Boston Globe redesignunstoppablerobotninja.com

Tuts+Great web design tutorials and articles

webdesign.tutsplus.com


http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/


http://www.abookapart.com/products/responsive-web-design


http://unstoppablerobotninja.com/


158

references

TreehouseWeb Design and Development Learning Site

teamtreehouse.com

This Is ResponsivePatterns, resources and news

bradfrost.github.com/this-is-responsive

Ethan MarcotteAuthor of Responsive Web Design

Brains behind the Boston Globe redesignunstoppablerobotninja.com

Tuts+Great web design tutorials and articles

webdesign.tutsplus.com


http://bradfrost.github.com/this-is-responsive/

http://bradfrost.github.com/this-is-responsive/

http://teamtreehouse.com/library/design-foundations/rwd-foundations

http://teamtreehouse.com/library/design-foundations/rwd-foundations







frameworks


frameworks

Simple, fluid HTML/CSS/JS framework from Twitter

Bootstrap

Flexible 6 and 12-grid framework.Foundation


http://foundation.zurb.com/


http://stuffandnonsense.co.uk/projects/320andup/


frameworks

Simple, fluid HTML/CSS/JS framework from Twitter

Bootstrap

Flexible 6 and 12-grid framework.Foundation

Fixed width for medium & large screens, fluid single column for small

goldilocksapproach.com

Minimal responsive framework. Includes Wordpress theme.

Skeleton






http://www.getskeleton.com/

http://www.getskeleton.com/

http://goldilocksapproach.com/

http://goldilocksapproach.com/

...and plenty more


http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

thank [email protected]

pleasesay

@yiibu

the font usedis

many thanks to

http://www.flickr.com/photos/tinou/453593446

http://www.exljbris.com/museo.html

http://www.flickr.com/creativecommons/by-2.0

Museo

flickr

http://.yiibu.com

xin chào




http://www

http://www

http://www

http://www

http://www

http://www

responsive web design

Technology

new tesla x

steve timeline

android apps iphone

desktop computer

iphone 3g3gs

originalthe iphone

panel display

real web