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?
(paperback)
Here is the most important book
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.
From WikiPedia: http://en.wikipedia.org/wiki/Freakonomics
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.
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 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
The (Mythical?) “Mobile Context”
Is there such thing as a mobile context?(answer: yes, with caveats)
Minimize Payload: Should we go out of our way to minimize a page’s payload?
(answer: it depends)
Usability: Should the tail wag the dog?(answer: probably not anymore)
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.
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...
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)
URL Uniqueness
Want URL Uniqueness? you probably do.
It may come with a price.
Source: http://xkcd.com/869/
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?
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.
Common Strategies to Build a Mobile-Aware Web Site
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
Do NothingNever 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
Transcoding (1 of 2)
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,...
Responsive Web Design (RWD)• Introduced by Ethan Marcotte in 2010
o A List Apart Article: http://alistapart.com/article/responsive-web-design
• Three Founding Elementso Media Queries (conditional CSS sort of)o Fluid Grids o Flexible Images
• Powerfulo Client-Side Adaptation
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”
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/responsive-web-design-missing-the-point/
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
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 Queries, jQuery, Ajax, Modernizer.js and, generally, specific RWD experience.
Multiserve: Site Tailored for Mobile
http://m.facebook.com
Multiserving Facebook to
Mobile Users:
Multiserve your pages. Quintessential “Mobile Context” Aware Approach
RESS (RWD + Server Side) - 1 of 2
Vendors: RWD, WhateverWeb.com
• 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
Strategy vs.Price of
Do Nothing
TranscodingDon’t-Touch-me RWD
Custom- Made RWD
Multiserve(Assumes DDR)
RESS (RWD + Server-Side Components, assumes DDR)
Mobile Context N/Anot a lot of control usually
Feature Detection
Quintessential Mobile-Context
Burden of Failure N/A not a lot of control usually
Device Classes Support N/A
may need separate view for legacy devices
Granularity of Device Detection N/A
not a lot of control usually
Feature Detection
URL Uniqueness not a lot of control usually
Route HTTP Request to separate view
may need separate view for legacy devices
Cost of Integration Typically an external component
Only impacts presentation layer
Specialized resources needed
DDR needed DDR needed + RWD expertise
Cost of Maintenance
varies rather wildly. Can be pretty bad.
ExpensiveRather ExpensiveAverage
Rather CheapCheap
Thank You