Luca Passani | CTO @ScientiaMobile | WURFL Inventor

If Responsive Web Design is the Answer,
What Was the Question?
Most Important Book in the History of Computer
Science?
Or this?
The book is a collection of 'economic'
articles written by Levitt, an expert
who has already gained a reputation
for apply...
Study of Incentives
When adopting technologies, tools and
programming resources, make sure you
understand what the project...
Aspects to Consider When Choosing a
Strategy to Support the Mobile Web
Aspects to Consider When Choosing a
Strategy to Support the Mobile Web
● Mobile Context (Usability): important / not impor...
The (Mythical?) “Mobile Context”
Is there such thing as a mobile context?
(answer: yes, with caveats)

Usability:Should th...
Who Carries
the Burden of Failure?
A user with a Nokia N8 device reports that
she is unable to access your page.
1. You te...
Which Devices to Support
●
●
●
●
●
●

Tablets? Most probably yes
Smartphones? Sounds like a good idea.
Feature phones? It ...
Granularity of Client Detection
Will you care that a user has iOS6 vs a
Samsung Galaxy S4 vs a Nokia Lumia
920?
If you do,...
URL Uniqueness

Source: http://xkcd.com/869/

Want URL Uniqueness? you probably do.
It may come with a price.
Cost of Integration of Mobile
Support
●
●
●
●

Revisiting Architecture of Back-End?
Revisiting of Front-End?
Revisiting of...
Cost of Maintenance
As new devices and browser arrive on the
market, your mobile-aware web site is
likely to need fine tun...
Common Strategies to Build a MobileAware Web Site
Strategies to Build a Mobile-Aware Site
● Do nothing
○ desktop web site hereby declared good enough for mobile users
● Tra...
Do Nothing
Never underestimate the power
of a user who knows how to
pan and zoom websites on
their LTE smartphones.

WARNI...
Transcoding (1 of 2)
Transcoding (2 of 2)

• Quick Win (typically used to create for
m.* sites)

• External (does not disrupt existing
•
•
•

i...
Responsive Web Design (RWD)
•

Introduced by Ethan Marcotte in 2010
o

•

A List Apart Article:
http://alistapart.com/arti...
Important Aspects of RWD (1 of 2)
“But most importantly, responsive web design isn’t intended to
serve as a replacement fo...
Important Aspects of RWD (2 of 2)
Your visitors don’t give a shit if your site is responsive.
They don’t care if it’s a se...
Don’t-Touch-Me RWD (1 of 2)
Buy a ready-made
template from one of
many vendors on the
Internet and adapt your
existing sit...
Don’t-Touch-Me RWD (2 of 2)
Mind the Gap!

ScientiaMobile.com on Nexus 7 (Android 4.2)
Custom-Made RWD
Custom-Made
RWD is tough.
Make sure a
kick-ass RWD
developer is in
Da House

Technology: CSS, Media
Querie...
Multiserve: Site Tailored for Mobile
Multiserving Facebook to

Mobile Users:
http://m.facebook.com

Multiserve your pages....
RESS (RWD + Server Side) - 1 of 2

•
•
•
•

From an idea of Luke Wroblewski: REsponsive web
design and Server-Side compone...
RESS - 2 of 2

http://scientiamobile.com/wurflCapability
Strategy vs.
Price of

Do
Nothin
g

Transcoding

Mobile Context

N/A

not a lot of control
usually

Burden of Failure

N/A...
Thank You
If Responsive Web Design is the Answer, What Was the Question?
Upcoming SlideShare
Loading in …5
×

If Responsive Web Design is the Answer, What Was the Question?

1,184 views

Published on

Luca Passani's Keynote at the Webtech and PHP International conference in Munich, Germany. October 2013.

Promoters of Responsive Web Design constantly remind us that RWD is not intended as a replacement for mobile web sites. This is nice to hear, but the reality is that companies adopt RWD as a replacement for mobile web sites. Luca Passani, inventor of WURFL, will show how RWD can be a new solution to an old problem, will bow to the merits of RWD, but will explain organizations should first focus on what they really intend to achieve, before the tools to achieve it are selected.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,184
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

If Responsive Web Design is the Answer, What Was the Question?

  1. 1. Luca Passani | CTO @ScientiaMobile | WURFL Inventor If Responsive Web Design is the Answer, What Was the Question?
  2. 2. Most Important Book in the History of Computer Science?
  3. 3. Or this?
  4. 4. The book is a collection of 'economic' articles written by Levitt, an expert who has already gained a reputation for applying economic theory to diverse subjects not usually covered by "traditional" economists; he does, however, accept the standard neoclassical microeconomic model of rational utility-maximization. In Freakonomics, Levitt and Dubner argue that economics is, at root, the study of incentives. Here is the most important book (paperback) From WikiPedia: http://en.wikipedia.org/wiki /Freakonomics
  5. 5. Study of Incentives When adopting technologies, tools and programming resources, make sure you understand what the project goals are and the budget to achieve them. Far too often technologies are chosen for technology‟s sake.
  6. 6. Aspects to Consider When Choosing a Strategy to Support the Mobile Web
  7. 7. Aspects to Consider When Choosing a Strategy to Support the Mobile Web ● Mobile Context (Usability): important / not important ○ If important: cost of support. ● Burden of Failure: user / service provider ○ If service provider: Cost of support ● Device Type Support: tablets? smartphones? feature phones? Smart TVs? ○ Cost of support ● Granularity of Client Detection: important / not important ○ If important: Cost of support ● URL Uniqueness: Important / Not Important ○ If important, cost of implementation ● Cost of Integration: low, medium, high ● Cost of Maintenance: low, medium, high
  8. 8. The (Mythical?) “Mobile Context” Is there such thing as a mobile context? (answer: yes, with caveats) Usability:Should the tail wag the dog? (answer: probably not anymore) Minimize Payload: Should we go out of our way to minimize a page‟s payload? (answer: it depends)
  9. 9. Who Carries the Burden of Failure? A user with a Nokia N8 device reports that she is unable to access your page. 1. You tell the user to change phone. 2. You ignore the report and hope that the problem disappears. 3. You tell the engineering team to fix the issue with the site they have built. If you answered 3, it comes with a price.
  10. 10. Which Devices to Support ● ● ● ● ● ● Tablets? Most probably yes Smartphones? Sounds like a good idea. Feature phones? It would be nice, but cost? Smart TVs and Consoles? Now you are pushing it kid. Google Glasses? yes...no...maybe… Wristwatches? ….. Smartphones and Tablets can be supported relatively cheaply, but opening up to Feature Phones and other HTTP-clients makes the nut harder to crack...
  11. 11. Granularity of Client Detection Will you care that a user has iOS6 vs a Samsung Galaxy S4 vs a Nokia Lumia 920? If you do, you need a DDR (a Device Description Repository, such as WURFL). It comes with a price (primarily integration and maintenance)
  12. 12. URL Uniqueness Source: http://xkcd.com/869/ Want URL Uniqueness? you probably do. It may come with a price.
  13. 13. Cost of Integration of Mobile Support ● ● ● ● Revisiting Architecture of Back-End? Revisiting of Front-End? Revisiting of HTML/CSS/Javascript? Introduce strategy to resize pictures on the server?
  14. 14. Cost of Maintenance As new devices and browser arrive on the market, your mobile-aware web site is likely to need fine tuning. This may come with a price.
  15. 15. Common Strategies to Build a MobileAware Web Site
  16. 16. Strategies to Build a Mobile-Aware Site ● Do nothing ○ desktop web site hereby declared good enough for mobile users ● Transcoding ○ Proxy of some kind picks relevant bits from desktop site and presents them in a more mobile-friendly manner. ● Don’t-touch-me Responsive Web Design. ○ Buy a ready-made RWD template on the Internet for $20. „Fill in the blanks‟ with your content. Replace with your logo and colors. ● Custom-Made Responsive Web Design. ○ Develop your own responsive site from the ground up. Use Feature Detection (Mordenizr.js and similar) ● Multiserving (usually, but not necessarily, a M-Dot (m.*) site) ○ Develop one or more separate sites that assume user have a mobile device ● RESS (RWD + Server-Side) ○ Essentially RWD, but with Server-Side components optimizing payloads and other aspects of Mobile UX
  17. 17. Do Nothing Never underestimate the power of a user who knows how to pan and zoom websites on their LTE smartphones. WARNING: make sure Adobe Flash is not in the Critical Path note: I cheated slightly. CNN does serve a mobile UI as a default for mobile users
  18. 18. Transcoding (1 of 2)
  19. 19. Transcoding (2 of 2) • Quick Win (typically used to create for m.* sites) • External (does not disrupt existing • • • infrastructure) Fine-tuning quickly expensive Frail (changes to web site can break mobile) Vendors: Moovweb, UsableNet, Opera Mini,...
  20. 20. Responsive Web Design (RWD) • Introduced by Ethan Marcotte in 2010 o • A List Apart Article: http://alistapart.com/article/responsive-webdesign Three Founding Elements Media Queries (conditional CSS sort of) o Fluid Grids o Flexible Images o • Powerful o Client-Side Adaptation
  21. 21. Important Aspects of RWD (1 of 2) “But most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites. Responsive design is, I believe, one part design philosophy, one part front-end development strategy. And as a development strategy, it‟s meant to be evaluated to see if it meets the needs of the project you‟re working on. Perhaps there‟s a compelling reason to keep your site‟s desktop and mobile experiences separate, or perhaps your content would be better served by a responsive approach. Only you and your users know for certain.” - page 108 of Ethan Marcotte’s “Responsive Web Design”
  22. 22. Important Aspects of RWD (2 of 2) Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done. They do give a shit when your site takes 20 seconds to load. They do care when interactions are awkward and broken. Brad Frost, http://bradfrostweb.com/blog/web/responsiveweb-design-missing-the-point/
  23. 23. Don’t-Touch-Me RWD (1 of 2) Buy a ready-made template from one of many vendors on the Internet and adapt your existing site: generally cheap, some free. Effort to make existing content fit in new restrictions. Technology: HTML 101
  24. 24. Don’t-Touch-Me RWD (2 of 2) Mind the Gap! ScientiaMobile.com on Nexus 7 (Android 4.2)
  25. 25. Custom-Made RWD Custom-Made RWD is tough. Make sure a kick-ass RWD developer is in Da House Technology: CSS, Media Queries, jQuery, Ajax, Modernizer.js and, generally, specific RWD experience.
  26. 26. Multiserve: Site Tailored for Mobile Multiserving Facebook to Mobile Users: http://m.facebook.com Multiserve your pages. Quintessential “Mobile Context” Aware Approach
  27. 27. RESS (RWD + Server Side) - 1 of 2 • • • • From an idea of Luke Wroblewski: REsponsive web design and Server-Side components) Unite the power of RWD with the ability to multiserve parts of the page based on device features determined on the server Image Resizing is the primary use case (greatly decrease payload => improve Mobile Context) Many more Mobile Context Improvements Vendors: RWD, WhateverWeb.com
  28. 28. RESS - 2 of 2 http://scientiamobile.com/wurflCapability
  29. 29. Strategy vs. Price of Do Nothin g Transcoding Mobile Context N/A not a lot of control usually Burden of Failure N/A Don’tTouch-me RWD N/A Feature Detection Quintessential Mobile-Context may need separate view for legacy devices N/A Granularity of Device Detection Multiserve (Assumes DDR) RESS (RWD + Server-Side Components, assumes DDR) not a lot of control usually Device Classes Support CustomMade RWD not a lot of control usually URL Uniqueness not a lot of control usually Cost of Integration Typically an external component Cost of Maintenance Feature Detection varies rather wildly. Can be pretty bad. Cheap Rather Cheap Route HTTP Request to separate view Only impacts presentation layer Average Specialized resources needed Rather Expensive Expensive may need separate view for legacy devices DDR needed DDR needed + RWD expertise
  30. 30. Thank You

×