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.

1. Luca Passani | CTO @ScientiaMobile | WURFL Inventor
If Responsive Web Design is the Answer,
What Was the Question?

2. Most Important Book in the History of Computer
Science?

3. Or this?

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. 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. Aspects to Consider When Choosing a
Strategy to Support the Mobile Web

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. 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. 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. 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. 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. URL Uniqueness
Source: http://xkcd.com/869/
Want URL Uniqueness? you probably do.
It may come with a price.

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. 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. Common Strategies to Build a MobileAware Web Site

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. 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. Transcoding (1 of 2)

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

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

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

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

25. Don’t-Touch-Me RWD (2 of 2)
Mind the Gap!
ScientiaMobile.com on Nexus 7 (Android 4.2)

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

27. Multiserve: Site Tailored for Mobile
Multiserving Facebook to
Mobile Users:
http://m.facebook.com
Multiserve your pages.
Quintessential “Mobile Context” Aware Approach

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

29. RESS - 2 of 2
http://scientiamobile.com/wurflCapability

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

31. Thank You