RESPONSIVE WEB
responsive design http://www.flickr.com/photos/dwonderwall/3341419492 pragmatic making the best of old and new techniques This presentation is • part case study • part lessons learned • part future-thinking browser.nokia.com A small campaign site introducing three new web browsers for Nokia devices. THE CASE STUDY sadly no longer online as of February 2013 :-( iPad Chrome Opera Mini Nokia N97 Site goals: • Inform end-users and industry • Prompt end-users to update their browser • Experiment with responsive design to support a global audience and wide range of target devices. Call to action: Update your browser! THE CASE STUDY 70+ target Nokia devices Symbian^3/Anna/MeeGo Touch (+ many w/ keyboards) 2008-present WebKit browser 11 devices Series 60 Touch and non-touch 2006-present (S60 3rd FP 1/2) WebKit browser 45 devices Series 40 Touch and non-touch 2008-present (~S40 6th Edition) WebKit browser or Nokia proxy browser 23 devices new browser being promoted + all the usual suspects v. 7+ mobile desktop many Nokia users on S40 feature phones still use Opera Mini v 6.0+ legacy and/or XHTML-MP browsers Internet Browser Obigo Windows Mobile UC Web < v 5.0 no support was planned for initially Nokia S40 Lite Browser popular Chinese proxy browser Part 1: The design process http://www.flickr.com/photos/jordanfischer/63832583 You can’t get there from here Designing only pixel perfect mock-ups makes it difficult near-impossible to then think responsively. [...]... “live” responsive mockup more sketches “live” responsive mockup no ok? yes “live” responsive small visual mockups mockup to “reality check” to discuss specific performance and stylistic issues progressive enhancement message/ brand/ strategy copy draft 2 copy draft 1 content first etc sketches/IA basic visual mockups “live” responsive mockup more sketches “live” responsive mockup no ok? yes “live” responsive. .. the belief that with enough data you can design for each device etc Part 2: The CSS strategy http://www.flickr.com/photos/wscullin/3770015203 TECHNIQUE Mobile first Design for (the simplest) mobile browser first the fact that it may be mobile doesn’t really maer “ The absence of a media query is in fact, the first media query Bryan Rieger, Rethinking the Mobile Web begin with a lightweight default A B... performance and stylistic issues progressive enhancement If it’s layout prototype it ( on real devices to clarify changes in context and the impact of native capabilities and viewport conditions) If it’s visual design mock it up ( but then prototype to determine performance, impact of native fonts and em values, viewport conditions etc.) PAIN POINT Too many to mention Mental models in particular are getting in... known as everyone has ‘partners’ Source: Luma Partners Example: 1 line of code spawns 49 server calls (including 21 redirects) “What happens next is the scary part: You effectively lose all control.” - Web Performance Today, Fourth Party Calls Conclusion Each http request should add value! If a few well chosen http requests enable you to improve the experience-go for it (then take a long hard look at