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

RESS - 2 of 2

http://scientiamobile.com/wurflCapability

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