responsive web design

responsive

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

presented by Vu Tran LamSaturday, March 9, 13

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

Steve timeline...

Steve timeline...Steve timeline...

to be continue...

the iPhoneoriginal

era begins...the smartphone

brings touch, gestures

iPhone 3Gweb

and the real web...

iPhone

2007 2008

20082007 2009

3GiPhoneiPhone 3GS

native apps and

android apps

the rise of Android...

iPhone

iPhone 4

whither feature phones,

htcg-five

samsung

and the further rise of Android...

web os

2008 2009

blackberry kindle nook

devices go mainstream

iPhone 5...

with great expectations...

samsungmotorola

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

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

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

small + medium + large

one site for every screen

why...?

the web is less than

9000 days old

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

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

Internet

ofpeople

onplanet

1/3 people has a smartphone

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

76% use mobile while waitingin queues or for appointments

how many... in Q4/2012?

yesterday

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

yesterday

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

“use mobile” to use the web/Internet

2007 2008 2009 2010 2011 2012 2013 2014 2015

Desktop users

Source: Morgan Stanley Associates Internet Trends 2010 (PDF)

mobile users = desktop users

Mobile users

the mobility era

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

800 1024 x 768 512 x 342

we came to expectmore and more every year...

display size/width

320 x 480

1984 1990 1994 1998 2004 2007

800 1024 x 768 512 x 342

..one day in 2007less became much more

display size/width

768 x 1024

320 x 480

1984 1990 1994 1998 2004 2007

800 1024 x 768 512 x 342

512480 x 800

today we seem to have

a lot less more...

display size/width

1990 1994 1998 2004 2007 2011 2015

640800

1024 x 768

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

mobile website

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

responsive web design

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

formal web design process

...to adapt to many types of screen

USERRESEARCH

CONTENTSTRATEGY

DESIGNIN TEXT

VISUALSTYLE

CONVERTTO HTML

VISUALDESIGN

PROTOTYPE

SKETCH

SCREENS

responsive web design process

USERRESEARCH

CONTENTSTRATEGY

DESIGNIN TEXT

VISUALSTYLES

CONVERTTO HTML

VISUALDESIGN

PROTOTYPE

SKETCH

SCREENS

HTML STYLE GUIDE

RWDPROTOTYPE

responsive web design process

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ê

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?

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

Hmm, Huston - we have a problem...

HTML stylesheets Flash

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

$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...

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

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

fontsimagesimages

https://github.com/bryanrieger/profile

now, send only what's required6

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

dpiisBrowserLamescreen size

colour depth

javascriptstorage

doctypecanvas

json@font-face

input methodsor profile

the device context is defined via

isTouch

media formats

features & constraints...

isTablet

appcache

custom propertiesbased on your owntacit knowledge...

device profile

Flash embed

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

JavaScript

to usactually relevant...

but only those that arefeatures & constraints

screen size

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

this is rhetorical...

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

fsdfffSaturday, March 9, 13

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

...a selection of content

filtering + transformation prototypes

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!

resolution_width: 240

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

device property

resolution_width: 240

<img />

device property

<img />

panda.jpg panda@320.jpg

based on...

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

panda@240.jpg

resolution_width: 240 device property

replace each image with a

more suitable alternate...

...how many images are required?

other elements?

..what about slightly

"fuzzier" DOM elements?

...related elements?

panda@320.jpg panda@240.jpg

resolution_width: 240 device property

FAILpanda.jpg

...an interesting idea

{{mustache}} inspired...

quickly got out of control...

yet revolting

*HACK*

{{mustache}} inspired...

slippery slope

toXSLT!

...apologies to @stephenhay

...an interesting idea that

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

almost reinvented...

written in

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

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

found massive inspirationfor XSLT here!

...we honestly tried,

but we @$*#& XSLT!

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

the CSS strategy

fixed width layouts

flexible grids layouts

adaptive(multiple fixed width layouts)

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

76.5957447%

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.

mobile first

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

begin with a lightweight default

embrace the cascade

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

each style sheet augments the others

augment once for another device

xx px to xxx px

breakpoint

max xx px wide (or unable to

understand further instructions)

style sheet 1

breakpoint

xx px to xxx px

min xxx px wide

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

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%; }}

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)

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

some tabletsmost NetBooksmany DesktopsiPhone (P)

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

major breakpointsmajor layout changes

nothing ishere...butthat’s ok!

(media query in document head)

responsive content

create responsive text, media, data table and navigation

technique

responsive imagessuitable for any screen

<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 */

max-‐width: 100%;}

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

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>

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

data fit into each screenresponsive data table

navigation suitable for each screen

responsive navigation

horizontal menu for desktop screen

drop down list menu for mobile device

where...?Saturday, March 9, 13

references

Ethan MarcotteAuthor of Responsive Web Design

Brains behind the Boston Globe redesignunstoppablerobotninja.com

Tuts+Great web design tutorials and articles

webdesign.tutsplus.com

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

frameworks

Simple, fluid HTML/CSS/JS framework from Twitter

Bootstrap

Flexible 6 and 12-grid framework.Foundation

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

...and plenty more

thank youlamvt@fpt.com.vn

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

flickr

http://.yiibu.com

xin chào

responsive web design

new tesla x

steve timeline

android apps iphone

desktop computer

iphone 3g3gs

originalthe iphone

panel display

real web

Technology

responsive web design

responsive web design · responsive web design keywords...

responsive (web)design

course outline - responsive web design · responsive web...

techniques for flexible responsive visualization design ·...

responsive web design€¦ · responsive web design 14...

what is responsive web design? the responsive web design...

reach more customers with responsive web design! - atlanta...

being responsive to responsive web design

responsive web design & mobile first -...