Design beyond your monitor

In this talk I'm giving an introduction the concepts of Mobile First and Responsive web design. We take a look at the techniques, benefits and caveats.
I take both those approaches and showcase how they affect our daily work as UX professionals and how they relate to the concept of content.

This talk was held at our local meetup organised by IXDA Oslo on Nov.16 2011.

Transcript

1. http://www.flickr.com/photos/chesh2000/2465710741/ Eric Haidara @stratosferik The challenges of being responsive and mobile in the Multi-Size Web. Design beyond your monitor:
2. 2 Intro Little bit about me STATIC 960 Works on ipad though
3. 3 640x480 Intro A matter of size
4. 3 1024x768 640x480 800x600 1440x900 Intro A matter of size
5. 3 1024x768 640x480 800x600 1440x900 320 x 480 Intro A matter of size
6. 3 1024x768 640x480 800x600 1440x900 320 x 480 1024x768 640 x 960 480 x 272 1024 x 600 480 x 800 Intro A matter of size
7. 4 We’ve got the coolest job in the world. We have to figure out how to use these platforms. It’s one of the most exciting times in the history of our culture.” Josh Clarke FWOD NYC Intro Some say http://www.flickr.com/photos/chesh2000/2465710741/
8. 5 What in the @#*$# is “the context” ? New kid in town: Responsive Web Design and what is that mobile first thingy? A few challenges Intro We’ll cover http://www.flickr.com/photos/chesh2000/2465710741/
9. http://www.flickr.com/photos/winni3/4616803552/ Context
10. http://www.flickr.com/photos/31525431@N00/4328160674/ I’m on the move, thus I ONLY need: Context Map Time Less content
11. http://www.flickr.com/photos/58402751@N00/2657011662/ Got all the time in the world So feed me some more content Users review Image gallery Online Chat Polls Audio slide show CONTENT FEATURE BLOAT Context
12. http://www.flickr.com/photos/tambako/3593686294/ It (was) simple really! Hummmm mmmmm mm... Context
13. http://www.flickr.com/photos/laurenmanning/2979574719/ Source: www.internetworldstats.com/ In the world 7 billions 30 % =2,110,765,810 Context is connected
14. http://www.flickr.com/photos/houghtonregis/4371208302/ Source: www.regjeringen.no In Norway has internet connection 84% uses internet daily 76% uses online banking 77% connect wirelessly outside of home or work 1 2 / Context
15. http://www.flickr.com/photos/38305415@N00/5873954634/ uses mobile while shopping 69% Context
16. http://www.flickr.com/photos/joebustillos/5413847585/ While watching TV 72% Some studies say 84% Context
17. http://www.flickr.com/photos/15734079@N00/397345394/ In the little boys’ room 39% Context
18. 15 http://www.flickr.com/photos/micahrr/5393939935/ is NOT the INTENT Why Context How
19. http://www.flickr.com/photos/95046608@N00/5470303560/ Home or Office ? Context
20. http://www.flickr.com/photos/53844278@N04/5631891766/ No map, but I’ll take time to fill an online poll Context
21. http://www.flickr.com/photos/b-tal/163450213/ The context is hard to define Let’s tidy it up a bit and there’s intent too Context
22. Source: http://precious-forever.com/ Context The Screen Ecosystem
23. http://www.flickr.com/photos/steffenz/3100246315/ Web is really Multi-sized Do not think that context = Intent Difficult NOT to make assumptions Make some research & talk to your customers Go further http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies http://yiibu.com/articles/wider-context/ In a nutshell Context
24. http://www.flickr.com/photos/wasabicube/5864797151/ Responsive Web Design GO BUY IT
25. 22 An example RWD www.fucking-windows.com
26. Smartphone Tablets Desktops Widescreen frontend2011.com OK, another one then RWD
27. http://www.flickr.com/photos/andrec/2893549851/ How to adapt a website’s layout for multiple screen resolutions. H o w t o a d a p t a website’s layout for m u l t i p l e s c r e e n resolutions. How to adapt a website’s l a y o u t f o r m u l t i p l e s c r e e n resolutions. What is responsive web design? URL 1 WEB 1 RWD
28. http://www.flickr.com/photos/lendog64/5174151519 Start big Adapt to smaller viewport and also an approach RWD
29. http://www.flickr.com/photos/71776414@N00/4835208029/ The elements of RWD Fluid Grids Flexible Images & Media Media Queries Mr Responsive Web Design RWD
30. http://www.flickr.com/photos/bre/552152780/ Based on some proven tools Graceful degradation Flexible Layouts CSS 2.1 Media Types RWD
31. http://www.flickr.com/photos/39718079@N00/172647550/ #nav { float: left; width: 25%; #content { float: left; margin-left: 5%; Fluid Grids RWD
32. http://www.flickr.com/photos/x1brett/6049667982/ Flexible Images & Media fit a 500px media How to 800px container In a 100px container or a RWD
33. http://www.flickr.com/photos/30145139@N07/5299081893/ @media screen and (max-width: 1160px) { #drapeRight, #drapeLeft, #award { display: none; } } /* Horizontal limits */ @media screen and (max-width: 1540px) { #teo, #balloons { display: none; } } Media Queries RWD
34. http://www.flickr.com/photos/11777427@N05/1184491822/ Split up vertical & horizontal breakpoints Fixed positioned elements are important to test Tips & Advices RWD Display:none = not mobile friendly
35. http://www.flickr.com/photos/steve0_f/416266654/ Media Queries: Fool’s Gold I pity the FOOL!!! All you need to do to transform your desktop web design into something optimized for devices with smaller screens, less powerful CPUs, and slower network connections is to add more code. * Jason Grigsby RWD
36. http://www.flickr.com/photos/steve0_f/416266654/ Media Queries: Fool’s Gold I pity the FOOL!!! RWD
37. http://www.flickr.com/photos/steffenz/3101130384/ Build from the top-down Doesn’t solve the “context” Give flexibility over the viewport Hot right now http://pinchzoom.com/posts/a-mobile-magazine-prototype/ http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ Only one content/URL In a nutshell RWD Go further:
38. http://www.flickr.com/photos/17927408@N07/2322337810/ Mobile First Start with me
39. http://www.flickr.com/photos/83346641@N00/3383629917/ Is there a mobile context? Mobile First
40. Anywhere http://www.flickr.com/photos/adactio/6150683333/ Devices capabilities Constraints Everywhere & Some think that, Yes there is Mobile First Luke W
41. http://www.flickr.com/photos/imaphotog/205492402/ Mobile First Unique User Experience Mobile First
42. http://www.flickr.com/photos/imaphotog/205492402/ Mobile First “they create a truly Personalized and Responsive user experience regardless of the situation.” Tim Kadlec Unique User Experience Mobile First
43. http://www.flickr.com/photos/86009833@N00/2771273050/ Understand the Mobile Contexts when creating UX What is it then? Holding a beer Holding is phone Ridding a train Mobile First
44. http://www.flickr.com/photos/86009833@N00/2771273050/ Danger of assumptions Mobile First Get only this
45. http://www.flickr.com/photos/86009833@N00/2771273050/ Mobile First I really wanted this Danger of assumptions
46. http://www.flickr.com/photos/90963248@N00/299066758/ Content Priorities Why mobile 1st then? Mobile First FOCUS
47. http://www.flickr.com/photos/90963248@N00/299066758/ Why mobile 1st then? Mobile First
48. http://www.flickr.com/photos/90963248@N00/299066758/ Why mobile 1st then? Mobile First
49. http://www.flickr.com/photos/90963248@N00/299066758/ Why mobile 1st then? Mobile First
50. http://www.flickr.com/photos/boston_public_library/5712631379/ Why mobile 1st then? Mobile First Agreement
51. http://www.flickr.com/photos/arselectronica/4959753845/ GPS Multi-touch / Gestures Accelerometer Camera Take advantage of new technologies Mobile First
52. http://www.flickr.com/photos/boston_public_library/6303112003 (Many web users are mobile-only) mobile subscribers = To reach more people Mobile First 5,3 Billion Of world population 77% Source: www.internetworldstats.com/ www.lukew.com/ff/entry.asp?1426
53. http://www.flickr.com/photos/boston_public_library/6303112003 (Many web users are mobile-only) mobile subscribers = To reach more people Mobile First 5,3 Billion Of world population 77% Source: www.internetworldstats.com/ www.lukew.com/ff/entry.asp?1426 Need more data? 2015 $4 Billion 3 x 20 %
54. http://www.flickr.com/photos/paulr/2978291797 Scale up, not down How Mobile First Start small
55. (if you want to support more than smartphones superstars) http://www.flickr.com/photos/steffenz/3100246315/ Build from the small to large Focus on what matters Why not having a separate url .m / mobile. http://www.cloudfour.com/on-mobile-context/ http://www.lukew.com/ff/entry.asp?933 http://www.lukew.com/ff/entry.asp?1333 http://yiibu.com/ http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ SUPER DUPER HARD In a nutshell Mobile First Go further:
56. http://www.flickr.com/photos/lazzeresky/5200654959 Challenges
57. http://www.flickr.com/photos/djou/260839373/ Developement cost & time Is the team ready? How long until they are? How much trial & error? Challenges
58. http://www.flickr.com/photos/glsims99/1404828286/ Breaking point is a defined size at which the design changes How many breaking points 1 2 More ? Challenges
59. http://www.flickr.com/photos/golitlee/270342959/ How many prototypes / mockups / design? Challenges
60. http://www.flickr.com/photos/45940879@N04/5421517469/ Consistency? Missing content? What about UX? New navigation Challenges
61. You see it the sidebar You don’t It changes What about UX? Challenges
62. We removed […] the sidebar because […] posting a job from a tablet or mobile is pretty unlikely given how much input is involved Localization: Only Mobile …Filtering bar changes substantially on desktop vs. tablet A matter of choices What about UX? Cameron Moll Authentic Jobs Challenges
63. http://www.flickr.com/photos/26121794@N07/4049957908/ Advertising money What of the real-estate on smaller screens? Is smaller ads = less revenue? Maybe smart to keep a separate mobile site Challenges
64. http://www.flickr.com/photos/26121794@N07/4049957908/ Advertising money Challenges The main challenge associated to a new responsive design was the advertising. (...) we didn't work on a new revenue model, we are basically just resizing the images as we go down to mobile Vitaly Friedman
65. http://www.flickr.com/photos/paloetic/4928290705/ Where to now?
66. http://www.flickr.com/photos/41185766@N03/4760692715/ Closer teams Where to now? Yum... javascript image resizing Nam nam, More UX flavor
67. http://www.flickr.com/photos/huasonic/1443767744/ Rapid iterations More flexibility HTML prototyping Where to now?
68. http://www.flickr.com/photos/huasonic/1443767744/ Rapid iterations More flexibility HTML prototyping Where to now? Foundation by Zurb
69. http://www.flickr.com/photos/luc/6217776582/ Less static design = bye Photoshop ? Should we let go of our habits? Let go of the past Where to now?
70. http://www.flickr.com/photos/evalottchen/4666617453 Content Stack CMS not ready yet Content First Where to now?
71. http://www.flickr.com/photos/astique/85164557/ Content First Where to now?
72. 4 Where to now? Content First Clever Web One web Future Friendly Multisize Web Responsive Enhancement We have to make content that endures – that lives through those shifts, not loses its meaning.* http://endlesslycontent.com/2011/08/04/structured-content-shifting-context-responsive-design/
73. 4 And here we are Where to now? There's a digital evolution taking place - one with exciting implications for Web designers. Heard that before ? http://www.flickr.com/photos/vox_efx/3501000840/
74. 4 And here we are Where to now? 12 years ago http://www.flickr.com/photos/vox_efx/3501000840/
75. http://www.flickr.com/photos/jonworth/105842934/ Stephanie & Bryan Rieger Luke Wroblewski Ethan Marcotte Jason Grigsby Brad Frost Precious-Forever And many more... Based on the work of The Multisize web
76. http://www.flickr.com/photos/chesh2000/2465710741/ http://www.flickr.com/photos/31525431@N00/4328160674/ http://www.flickr.com/photos/58402751@N00/2657011662/ http://www.flickr.com/photos/tambako/3593686294/ http://www.flickr.com/photos/laurenmanning/2979574719/ http://www.flickr.com/photos/houghtonregis/4371208302/ http://www.flickr.com/photos/38305415@N00/5873954634/ http://www.flickr.com/photos/joebustillos/5413847585/ http://www.flickr.com/photos/15734079@N00/397345394/ http://www.flickr.com/photos/95046608@N00/5470303560/ http://www.flickr.com/photos/47610090@N07/4389698869/ http://www.flickr.com/photos/53844278@N04/5631891766/ http://www.flickr.com/photos/b-tal/163450213/ http://www.flickr.com/photos/b-tal/163450213/ http://www.flickr.com/photos/steffenz/3100246315/ http://www.flickr.com/photos/wasabicube/5864797151/ http://www.flickr.com/photos/andrec/2893549851/ http://www.flickr.com/photos/81445502@N00/4365152223/ http://www.flickr.com/photos/99983307@N00/4299377933/ http://www.flickr.com/photos/58944004@N00/2542795166/ http://www.flickr.com/photos/71776414@N00/4835208029/ http://www.flickr.com/photos/roland/4305223929/ http://www.flickr.com/photos/glsims99/1404828286/ http://www.flickr.com/photos/mondayne/3410286069/ http://www.flickr.com/photos/45940879@N04/5421517469/ http://www.flickr.com/photos/26121794@N07/4049957908/ http://www.flickr.com/photos/steve0_f/416266654/ http://www.flickr.com/photos/steffenz/3101130384/ http://www.flickr.com/photos/17927408@N07/2322337810/ http://www.flickr.com/photos/83346641@N00/3383629917/ http://www.flickr.com/photos/localcelebrity/4831362933 http://www.flickr.com/photos/imaphotog/205492402/ http://www.flickr.com/photos/86009833@N00/2771273050/ http://www.flickr.com/photos/90963248@N00/299066758/ http://www.flickr.com/photos/boston_public_library/5712631379/ http://www.flickr.com/photos/arselectronica/4959753845/ http://www.flickr.com/photos/laurenmanning/2979574719/ http://www.flickr.com/photos/paulr/2978291797 http://www.flickr.com/photos/fritish/3423037412/ http://www.flickr.com/photos/fritish/3423037412/ http://www.flickr.com/photos/crazyeddie/2888389000/ http://www.flickr.com/photos/lazzeresky/5200654959 http://www.flickr.com/photos/41185766@N03/4760692715/ http://www.flickr.com/photos/huasonic/1443767744/ http://www.flickr.com/photos/evalottchen/4666617453 http://www.flickr.com/photos/evalottchen/4666617453 http://www.flickr.com/photos/scatterbrein/5533360139 http://www.flickr.com/photos/chris-fritz/2409491374 http://www.flickr.com/photos/jonworth/105842934/ http://www.flickr.com/photos/16865477@N07/5492830078/ http://www.flickr.com/photos/39718079@N00/172647550/ http://www.flickr.com/photos/x1brett/6049667982/ http://www.flickr.com/photos/30145139@N07/5299081893/ http://www.flickr.com/photos/11777427@N05/1184491822/ http://www.flickr.com/photos/chris-fritz/2409491374 Links ;-) The Multisize web http://bagcheck.com/bag/4986-the-multi-size-web
77. http://www.flickr.com/photos/scatterbrein/5533360139 Takk for meg The Multisize web Eric Haidara @stratosferik erich@ixd.no