If Responsive Web Design is the Answer, What Was the Question?
Download as PPTX, PDF2 likes1,275 views
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.
More Related Content
Similar to If Responsive Web Design is the Answer, What Was the Question? (20)
Recently uploaded (20)
![Fast Screen Recorder v2.1.0.11 Crack Updated [April-2025]](https://cdn.slidesharecdn.com/ss_thumbnails/dataanalysisforbusiness-250322061148-eeff8a831-250401123246-f36be9ca-250401141614-87b01766-thumbnail.jpg?width=560&fit=bounds)
If Responsive Web Design is the Answer, What Was the Question?
- 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