Why should I care about Responsive Design?

Why should I care about Responsive Design? Fabricio Teixeira @fabriciot

If a given website is not ready for beingaccessed on a mobile device, it needs some serious bug fixing.

Who shall I blame?

QA Developer Deadlines Budget UXD Producer ClientVisual Designer Fate

QA Developer Deadlines Budget UXD Producer ClientVisual Designer Fate Users

Data traffic on mobile devices will bemultiplied by 26 between 2012 and 2015.

In 2015 there will be one mobile device per person on Earth.

People arebuying moresmartphones.

Owning asmartphonechanges whatpeople do.

Owning asmartphonechanges whatpeople expect.

28% of all Facebook users access it on their smartphones before even leaving bed.

Teenagers are texting in their sleep.

“Disruption will only accelerate. The quantity and diversity of connected devices - many of which we havent imagined yet - willexplode, as will the quantity and diversity of the people around the world who use them. Ourexisting standards, workflows, and infrastructure wont hold up. Todays onslaught of devices is already pushing them to the breaking point. They cant withstand whats ahead.” http://futurefriend.ly/

“Proprietary solutions will dominate at first. Innovation necessarily precedes standardization. Technologists will scramble to these solutions before realizing (yet again) that a standardized platform is needed to maintain sanity. The standards process will be painfullyslow. We will struggle with (and eventually agree upon) appropriate standards.” http://futurefriend.ly/

If a given website is not ready for beingaccessed on a mobile device, it needs some serious bug fixing.

If a given website is not ready for beingaccessed on a mobile device, it needs some serious bug fixing. How do I fix it?

Do I really need to fix it?

“The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.”

• Responsive Web Design• Device-Dedicated Delivery • Mobile First

Responsive Web Design

Different devices, same website

Device-Dedicated Delivery

Hands Per Device http://www.slideshare.net/HugoMNL/hands-per-device-hpd

Hands Per Device Single task + quick response http://www.slideshare.net/HugoMNL/hands-per-device-hpd

Hands Per Device Content quality + time http://www.slideshare.net/HugoMNL/hands-per-device-hpd

IA and functionalities need to be thought for each context http://www.slideshare.net/HugoMNL/hands-per-device-hpd

Mobile First

“Loading...”

22kb“Loaded.”

22kb“Oops, the device is wider than 400px.”

101kb“In this case, I’ll load that box and that image too.”

239kb“Loaded.”

239kb“Oops, the device is wider than 700px.”

754kb“I’ll also load that chunk of text and that video.”

It’s not about simply “hiding” contentif the device is narrower than 400px.

754kb“Fully loaded.”

754kb“Now let me hide what they won’t see.”

Progressive Enhancement vs. Graceful Degradation

Designing for theMulti-Device Generation

The Sofa Effect.

http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies

Coherence Sync Sharing Shifting Complem. Simult.

10 steps to promoting that shift

01 For the user, there’s no“mobile version” and “desktop version”. There is only “website”.

02You spend 14 hours in front of a computer. Your users don’t.

03 You cannot charge extra ($$$)to design a mobile-ready website.Your sites must be mobile-ready.

04 A website cannot go live withoutbeing tested in different screen resolutions.

05 A website cannot go live withoutbeing tested in different monitors.

06 If it has a social output,it needs to be ready for mobile.

07UX has to be thought on mobile since the very beginning.

08 Mobile has to be part of your templates.Same thing for every department.

09Message changeswhen context does.

10You cannot “postpone” the mobile version or leave it to the next phase. Next phases never happen.

Next Chapter:You’re not designing for TV?

Obrigado.“The reason for designing new media is simple - to subtly and quietly change the world.” (Hillman Curtis, 1961-2012) Fabricio Teixeira @fabriciot Special thanks to @diegotres

http://arquiteturadeinformacao.com	3105
http://fabricio.nu	1723
http://www.iphone-entreprise.com	338
https://fabricio-teixeira.squarespace.com	224
https://twitter.com	7
https://si0.twimg.com	5
http://fabricio-teixeira.squarespace.com	3
http://www.linkedin.com	2
http://fabricio-teixeira.sqsp.com	2
http://www.seara.com.br	2
http://translate.googleusercontent.com	1
https://twimg0-a.akamaihd.net	1
http://us-w1.rockmelt.com	1
http://julianaconstantino.wordpress.com	1
http://webcache.googleusercontent.com	1

Why should I care about Responsive Design?

by Fabricio Teixeira on Aug 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

15 Embeds 5,416

Statistics

Why should I care about Responsive Design? Presentation Transcript