Responsive Web Design - but for real!

CSS3 Media Queries (and Responsive Web Design) but for real! The truth, the lies, and the legend! Rudy Rigot [email_address] @rudyrigot http://rudyonweb.net Clever Age

Responsive Web Design

Adaptive Web Design? Responsive Layouts? Mediaqueries? Fluid grid? Responsive Web Design That's my word!

"Whatever is well conceived is clearly said" - Nicolas Boileau SOME TRUTH

Responsive Web Design "i'm a webpage, and i care about your display!"

? Responsive Web Design "i'm a webpage, and i care about your display!"

Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

See: Progressive Enhancement client 1 client 2 Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

http://www.londonandpartners.com Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

http://www.prevention-medicale.org Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

Responsive Web Design "i'm a webpage, and i care about your display!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

? Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

http://w3qualite.net Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are" Wait! I read something, and i thought Responsive Web Design was this thing!

Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Yep, it used to be, and now it's blurry! Adaptive Web Design "i'm a webpage, and i care about whoever you are" Wait! I read something, and i thought Responsive Web Design was this thing!

Used to be the one called Responsive Web Design between May 2010 and July 2011!! Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

From now on, let's speak about this! Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

Wait! How about the mediaqueries ?

Mediaqueries = technical tool Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"

Let's get some hands dirty a little SOME TECH

Why mediaqueries?

The problem Server Client Webpage (html, css, js, and all that stuff)

The problem Server Client Webpage (html, css, js, and all that stuff) Monochrome, tiny e-book Same webpage (same css& js ?)

Two solutions!

Solution 1: the serves sends different files Server Client Monochrome, tiny e-book Wait! How the hell do i know who i'm talking to?

Solution 1: the serves sends different files Server Client Monochrome, tiny e-book HTTP headers (User-Agent) HTTP headers (User-Agent)

Browser sniffing is NOT an ideal solution!

1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Broken! Browser sniffing is NOT an ideal solution!

1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Broken! Browser sniffing is NOT an ideal solution! http://www.allocine.fr

1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Yeay, fixed! Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution!

1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Yeay, fixed! Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution! But...

1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Oops? Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution!

1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Oops? Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution! http://www.state.gov

1- User Agent parsing is error-prone 2- Browsers are liars! IE8: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0 (...) Wait, what?! Browser sniffing is NOT an ideal solution!

1- User Agent parsing is error-prone 2- Browsers are liars! 3- You're sure you know ALL the browsers? Browser sniffing is NOT an ideal solution!

1- User Agent parsing is error-prone 2- Browsers are liars! 3- You're sure you know ALL the browsers ? 4- And you're sure you know ALL the browsers... from the future?! Browser sniffing is NOT an ideal solution!

Solution 2: the serves sends everything, the client decides what to use Server Client Monochrome, tiny e-book

But how? some other usual css stuff... some usual css stuff... If you're a regular 1024x768 multi-color display, then... If you're a tiny and monochrome E-book, then...

But how? CSS3 mediaqueries! @media screen { } @media handheld and (min-monochrome: 1) { } some other usual css stuff... some usual css stuff... If you're a regular 1024x768 multi-color display, then... If you're a tiny and monochrome E-book, then...

So... mediaqueries are not only about mobile! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width

So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width

So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! CC BY – Yusuke Kawasaki monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width

So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width

Truth and lies, you said? SOME MYTHS

Every website should be responsive MYTH #1

Could be one page Could be another page Could be another other page http://www.facebook.com

Browser sniffing...

Responsive Web Design is awful for front-end performance MYTH #2

Truth because... USELESS ! some css for another device some css for one device

Truth because... USELESS ! … but there may be solutions? <link rel="stylesheet" type="text/css" media=" min-width : 600px " href="styles-600.css" /> some css for another device some css for one device

Truth because... USELESS ! … but there may be solutions? <link rel="stylesheet" type="text/css" media=" min-width : 600px " href="styles-600.css" /> Ouch, browsers download them all anyway ! (for now...) some css for another device some css for one device

Truth because for some browsers... USELESS ! some css for another device some css for one device png jpg jpg png jpg png

Truth because for some browsers... USELESS ! … but this is being fixed! some css for another device some css for one device png jpg jpg png jpg png

Truth because for all browsers... <img class="hide_me" src="image.png" /> USELESS ! img.hide_me { display: none; } img.hide_me { display: inline; } png

Truth because for all browsers... <img class="hide_me" src="image.png" /> USELESS ! … but there are solutions to come !! css rule "content" media query listener dedicated javascript img.hide_me { display: none; } img.hide_me { display: inline; } png Meh... Meh... Meh...

Responsive Web Design is awful for front-end performance True, not great, but will get better! MYTH #2

My Responsive Web Design is going to look like crap on IE6... MYTH #3

Falling back is easy some css for old browsers who don't get CSS3 Mobile first? respond.js! some css for another device some css for one device

… but....

Falling broken is very easy too! some css for old browsers who don't get CSS3 fixing and testing stuff here... … what am i breaking there? some css for one device some css for another device

As a graphist, thinking Responsive will ruin my creativity MYTH #4

As a graphist, thinking Responsive will ruin my creativity MYTH #4 Brandon Baunach CC BY

A perfect Responsive Web Design makes you want never to leave your smartphone MYTH #5

A perfect Responsive Web Design responds perfectly to ALL devices

So, why do we say "Mobile first"?

So, why do we say "Mobile first"? Minimalist as a user experience design constraint is good Market share is already massive, will get even better!

A good Responsive designer who doesn't know HTML flow is not that good MYTH #6

A good fixed-width designer who doesn't know HTML flow is not that good...

A good fixed-width designer who doesn't know HTML flow is not that good... … a Responsive designer who doesn't know HTML flow is USELESS!

Methodology ideas, for projects supposedly too big for responsive SOME WAYS

Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development

Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development HUHG!!

Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development And mostly here, because we don't have tools.

What do we know?
We're dealing with something that "moves" depending on a context
We know how to prototype for one size
There are only so many technical ways to "extend" or "reduce" elements
Non-useless "responsive" designers can be hard to find

Dealing with something that moves depending on context? It's all about the key-frames ! (and what's in between)

Dealing with something that moves depending on context? For each template Prototype 1 Prototype 2 Prototype 3 Remember, we know how to prototype for one size!

Extra question: when is the design supposed to break down? Prototype 1 Prototype 2 Prototype 3

Two approaches

You know your content : content-driven Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Only works if you know your content really well, and if it doesn't vary too much accross the site or in time... Content content content content content content content content content content content content content content content content

You don't know your content well: market-driven Prototype 1 Prototype 2 Prototype 3 1024 screen iPad (portrait) iPhone (portrait)

What do we know?

Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title How to symbolize content adjustment from a slide to its next slide? Stretching? Fixed size? Or even rotating? Cropping? Content content content content content content content content content content content content content content content content

Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Content content content content content content content content content content content content content content content content How to symbolize content adjustment from a slide to its next slide? Cropping? Stretching? Fixed size? Or even rotating?

What do we know?

Responsive Designer? = Fixed-width Designer + Front-end Developer

Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Content content content content content content content content content content content content content content content content Responsive Designer? = Fixed-width Designer + Front-end Developer ?

Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development Layout front-end testing (just to check!)

Well now... what did we learn here today? SOME OUTCOME

Technically chill Righto!

But design process hard to industralize CC-BY Hayden "H Dragon"

But we are getting there, little by little... CC BY-NC-ND Victor Roblas

To be continued in your projects... Thanks for listening, folks! If you feel like there's something you should ask me, come talk to me, i'm a human being! (also, i'm still hanging in Krakow tomorrow, so tweet me, and we'll hang out and speak about it!)

http://graphism.fr	5506
http://www.uzful.fr	455
http://rudyonweb.net	445
http://www.conseilsmarketing.fr	230
http://www.ig.gmodules.com	64
http://paper.li	56
http://www.scoop.it	49
http://storify.com	41
http://veillete.blogspot.com	36
http://www.conseilsmarketing.com	31
http://feeds.feedburner.com	30
http://prisma-labs.intranet.prisma-presse.com	11
http://voyelle.tumblr.com	9
http://veillete.blogspot.fr	6
http://us-w1.rockmelt.com	6
http://blog.uzful.fr	5
https://twimg0-a.akamaihd.net	5
http://a0.twimg.com	4
http://doku.oeamtc.at	3
http://safe.tumblr.com	2
http://tweetedtimes.com	2
http://www.twylah.com	2
http://translate.googleusercontent.com	1
http://www.blagactu.com	1
http://twiddle.heyhey.fr	1
http://127.0.0.1	1
https://si0.twimg.com	1
http://www.newsblur.com	1

Responsive Web Design - but for real!

by Rudy Rigot

Accessibility

Categories

Upload Details

Usage Rights

28 Embeds 7,004

Statistics

Responsive Web Design - but for real! Presentation Transcript