#rwd:

KRAKÓW 21.02.2013Wojtek Zając

Buzzword or revolution?

Hi!@theanxyDesigninclusive.com

X-Team.comXHTMLized.com

BUZZ·WORDnoun

HTML5

next generationWeb 2.0

Cloud computing

AJAX

MVP

long tail

Flash

Is #RWD*the new one?

* Responsive Web Design

Czy #RWD*to kolejny z nich?

* Responsive Web Design

no

mobilerevolution

46%of population has access

to a mobile phone (of any kind)

http://www.economist.com/blogs/babbage/2012/10/global-mobile-usage?fsrc=scn/tw_ec/sim_earth

http://www.flickr.com/photos/captain_die/7697183522/

1,083billion of smartphones

used worldwide

http://www.lukew.com/ff/entry.asp?1644

http://www.flickr.com/photos/lng0004/7881151510/

59%of smartphone owners

use them every day

http://www.thinkwithgoogle.com/mobileplanet/en/

content strategy

http://www.flickr.com/photos/yourdon/2715583000/

http://xkcd.com/1174/

context != intent

http://blogs.forrester.com/sarah_rotman_epps/12-04-11-the_tablet_tv_connection

85%of US tablet owners

use them while watching tv

“Mobile must never be a dumbed-down,

limited experience.”

— Steven Hoober

http://www.flickr.com/photos/chrisjl/5664339020/

Content parityhttp://alistapart.com/article/your-content-now-mobile

Designingfor people,not devices

http://www.flickr.com/photos/epsos/5644801034/

InclusiveDesign

http://www.flickr.com/photos/adforce1/4425475660/

embracelong tail

of devices

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

CANVAS-INvs

Content-out

ProgressiveEnhancement

http://www.flickr.com/photos/aigle_dore/4089511514/

• dedicated mobile websites

• Responsive Web Design

• “Mobile last”

• Mobile first

• RESS

Possible approaches

``````````````````towards responsive website

steps3

@media screen and (min-width: 50em) { article { float::left; }}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1. Media Queries

@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { /* CSS styles */}

Detecting high density displays

checkbackwards

compability(caniuse.com)

2. adapt your interface

1. linearize your content

http://www.flickr.com/photos/stuartpilbrow/3565808509/

2. adapt to mobile screen size

http://www.flickr.com/photos/stuartpilbrow/3565808509/

3. input device independence

http://www.flickr.com/photos/stuartpilbrow/3565808509/

4. utilize touch events

http://www.flickr.com/photos/stuartpilbrow/3565808509/

5. common html

http://www.flickr.com/photos/stuartpilbrow/3565808509/

DEMO

3. responsive media

1.25MBaverage page weight (2012)

http://wpdaily.co/responsive-server-side/

86%of responsive websites

don’t optimize resources

http://www.lukew.com/ff/entry.asp?1681

http://mobile.httparchive.org/

Images are often the biggest part

responsive images

adaptive-images.com

optimizefront-end

performance!

xui,a lightweight

js libraryxuijs.com

responsivedesign

process

responsiveprototyping

(uxpin.com)

testingbreakpoints

quirktools.com/screenfly

css style guides

http://www.starbucks.com/static/reference/styleguide/

creatinga css style guide

(.net magazine)

CSS frameworks

Mobile emulatorshttp://www.mobilexweb.com/emulators

preview allyour devicessimultaneously(Adobe Edge Inspect)

Stayfuture

friendly.

@rwd,

Books:

…Learn more

http://mobile.smashingmagazine.comWEB:http://bradfrost.github.com/this-is-responsive/

Q & AWojtek Zając (@theanxy)http://www.slideshare.net/wojciechzajac

This work is licensed under a Creative

Commons Attribution 3.0 Unported License

Thanks!