Designing For Multiple Devices - Dublin Web Summit, Oct 2013
61 likes30,592 views
The document discusses the increasing significance of mobile devices in accessing the internet, highlighting that mobile phones are expected to surpass PCs as the most common web access device. It emphasizes the need for a responsive design that provides a uniform user experience across diverse devices, as users increasingly expect consistency in functionality and accessibility. Various strategies for mobile design, including defining mobile strategies and app development, are also outlined to enhance user engagement and experience.
![“ D!"#$% & )!v!('p3!%+ "0'*() r!"p'%) to the
user’s behaviour & environment based on screen size,
platform & orientation. [It’s]...a mix of flexible grids &
layouts, images & an intelligent use of media queries. “
- S3,"0#%$ M,$7#%!
www.flickr.com/photos/adactio/5818096043](https://image.slidesharecdn.com/dwsdesigningformultipledevicesoct2013-131031044256-phpapp02/85/Designing-For-Multiple-Devices-Dublin-Web-Summit-Oct-2013-70-320.jpg)
Designing For Multiple Devices - Dublin Web Summit, Oct 2013
- 1. D!"#$%#%$ for multiple devices DUBLIN WEB SUMMIT & GENERAL ASSEMBLY by Anna Dahlström | @annadahlstrom
- 2. &! w'r() we design for has become more complex www.flickr.com/photos/pagedooley/2121472112
- 3. W! *"!) +' only have to deal with different browsers, and the fold www.flickr.com/photos/jorgeq82/4732700819
- 4. T'),- #+’" br'w"!r" AND endless numbers of devices & screen sizes www.flickr.com/photos/adactio/6153481666
- 5. I% 2009 1% of global internet traffic came from mobiles. By the end of 2012 it had risen to 13% and by 2015 #+’" .p!/+!) +' b! ,b'v! 50%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile www.flickr.com/photos/nasamarshall/6289116940
- 6. A" 'f Q3 2012 we passed 1 billion smartphones in use www.flickr.com/photos/raincitystudios/95234968
- 7. I 0,v! , 1'b +0,+ #" *%2%'w% +' 3,%F'r !v!r- 0*3,% that enters the world, five mobile I’devices are created.*UX designer m a freelance IA & * Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx www.flickr.com/photos/hlkljgk/5764422581 www.flickr.com/photos/helga/3952984450/
- 8. 41% 'f !3,#(" are now opened on mobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices www.flickr.com/photos/jayfresh/3388253576
- 9. B- +0! !%) 'f 2013, mobile phones will overtake PCs as the most common web access device worldwide* Source: www.gartner.com/newsroom/id/2429815 www.flickr.com/photos/miuenski/3127285991
- 10. The average person looks at their phone 150 +#3!" , ),-.* * Source: www.textually.org/textually/archives/2012/02/030229.htm www.flickr.com/photos/jorgeq82/4732700819
- 11. 40% 'f p!'p(! use their phone in the bathroom. * * Source: http://www.lukew.com/ff/entry.asp?1500 www.flickr.com/photos/exlibris/2552107635
- 12. W! $' '%(#%! everywhere and anywhere www.flickr.com/photos/lencioni/5580154551
- 13. &! '() 3-+0 that mobile users are rushed & on the go doesn’t hold true www.flickr.com/photos/chicitoloco/8468592748/in/photostream
- 14. A (,r$! pr'p'r+#'% of our usage happens when we have time to kill www.flickr.com/photos/edduddiee/4307943164
- 15. &#" 0," #3p(#/,+#'%" for UX & design thinking. www.flickr.com/photos/eyesore9/3206408088
- 16. B!f'r! +0! 4r"+ #P0'%! the mobile use case was limited www.flickr.com/photos/frantaylor/4296536332
- 17. W! b*#(+ separate sites for mobile & desktop DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
- 18. I% f,/+, we still do but we’re noticing something www.flickr.com/photos/demandaj/7287174776
- 19. U"!r" .p!/+ an equal & continuous experience across devices www.flickr.com/photos/joachim_s_mueller/7110473339
- 20. “ 7 '*+ 'f 10 smartphone and tablet users expect the same quality of experience on all devices. ” * * Source: www.vibrantmedia.co.uk/press/press.asp?section=press_releases&id=256 www.flickr.com/photos/pandiyan/4550066009
- 21. &!r! ,r! a number of reasons for this www.flickr.com/photos/martinteschner/4569495912
- 22. P!'p(! /,rr- '*+ the same tasks on mobiles as they do on desktops www.flickr.com/photos/philippe/2462550872
- 23. D!v#/!" & "!rv#/!" are getting more advanced & optimised for complex tasks www.flickr.com/photos/joeybones/6791201819
- 24. W! %' ('%$!r 'w% just one device but multiple & use them interchangeably www.flickr.com/photos/soyproject/6066959891
- 25. W! w,%+ +' find what we’re looking for irrespectively of the device we use www.flickr.com/photos/visualpunch/7351572896
- 26. M'b#(! /'%+.+ ≠ 3'b#(! *"! /,"! The latter is about the task, the former about the total sum of the user’s mobile experience www.flickr.com/photos/icedsoul/2486885051
- 27. H,v#%$ "!p,r,+! sites does, for the most part, not make sense DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
- 28. S', w0,+ should we do? www.flickr.com/photos/tomitapio/4053123799/in/photostream
- 29. T'),- w!’(( (''2 ,+... 1. Defining your mobile strategy 2. App design 3. Responsive design 4. Input, orientation & touch screens across devices 5. Practice 6. Q & A
- 30. O*r 3,#% 'p+#'%" are bespoke mobile sites, responsive sites and apps www.flickr.com/photos/martinteschner/4569495912
- 31. B!"p'2! 3'b#(! "#+!" have a separate url & means maintaining different sites DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
- 32. R!"p'%"#v! "#+!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
- 33. App", well we all know they come from app stores www.flickr.com/photos/paul-r/217948368
- 34. H'w do we know when to do what? www.flickr.com/photos/tomitapio/4053123799/in/photostream
- 35. B!"p'2! 3'b#(! "#+!" should be avoided, if we can www.flickr.com/photos/edenandjosh/2892956576
- 36. Tw' 3,#% ./!p+#'%": technical limitations to the CMS, or if required for the audience www.flickr.com/photos/st3f4n/3476036180
- 37. &! ,(+!r%,+#v! #" messy & costly: means maintaining multiple technical solutions & content www.flickr.com/photos/ericconstantineau/5618576278
- 38. I+ 3!,%" maintaining multiple technical solutions... www.flickr.com/photos/nikio/3899114449
- 39. ...,%) ,("' maintaining multiple versions of your content www.flickr.com/photos/sharynmorrow/127184319
- 40. R!,(#"+#/,((- that means making cuts & frustrating users www.flickr.com/photos/bulldogsrule/187693681
- 41. F'r +0! 4r"+ +#3! smartphones and tablets made up more than one-third of total clicks on Google in Q3* * Source: http://econsultancy.com/uk/blog/63605-us-mobile-paid-search-spend-up-66-year-on-year-stats www.flickr.com/photos/antoniolas/4367543346
- 42. P''r 3'b#(! experiences result in the same thing - drop offs www.flickr.com/photos/sixmilliondollardan/2493495506
- 43. W0,+ w! "0'*() )' is keep the core content the same & optimise the experience, display & interactions to the device www.flickr.com/photos/jmtimages/2883279193
- 46. W0!+0!r +' do an app or not comes down to... www.flickr.com/photos/martinteschner/4569495912
- 48. If -'* %!!) to utilise device specific capabilities... www.flickr.com/photos/cindyli/3784225848
- 49. If 'ffl#%! r!,)#%$ is required... www.flickr.com/photos/arjencito/6531640463
- 51. A%,(-+#/" of entry points can also provide some guidance www.flickr.com/photos/andwhynot/2946734025
- 52. M,#%(- )#r!/+ +r,ffi/: could be an argument for an app www.flickr.com/photos/haagsuitburo/5349040355
- 53. M,#%(- "0,r!) (#%2": ensure your site is optimised for mobile www.flickr.com/photos/soundslogical/4255801733
- 54. 2. App design
- 55. App" are focused & personal www.flickr.com/photos/jdhancock/4354438814
- 56. N'+ ," !,"- ," just doing an app for e.g. iOS or Android www.flickr.com/photos/nrkbeta/3906687294/in/photostream
- 57. N!!) +' /'%"#)!r fragmentation across different versions & backwards compatibility www.flickr.com/photos/aforgrave/6168689222
- 58. R!(,+#v! %*3b!r of active Android devices across different versions Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
- 59. C'3p,r#"'% 'f adoption rate of iOS7, iOS6 and iOS5 Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker www.flickr.com/photos/blakespot/4773693893
- 60. Ev!r- p(,+f'r3 has their own ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
- 61. #P0'%! r!"'*r/!" help & inspiration well documented
- 62. A%)r'#) r!"'*r/!" help & inspiration a little less well documented for earlier versions
- 63. S+,r+ b- sketching screenflows, navigation & content www.flickr.com/photos/saucef/7184615025
- 64. Av'#) using the home screen as a stepping point. Instead deliver value from first view www.flickr.com/photos/lindzgraham/5605911999
- 65. T!"+#%$ ,pp" flow, navigation, interactions, transitions
- 66. Fr'3 testing sketches as paper prototypes or as clickable prototypes... www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
- 67. ...+' iterations of wireframes & designs www.flickr.com/photos/fluent_methods/6961802861
- 69. R!"p'%"#v! "#+!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
- 70. “ D!"#$% & )!v!('p3!%+ "0'*() r!"p'%) to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. “ - S3,"0#%$ M,$7#%! www.flickr.com/photos/adactio/5818096043
- 71. &! b,/2b'%! #" your grid & breakpoints http://foundation.zurb.com/docs/layout.php
- 72. C'(*3%" & $*++!r" can be fluid or fixed, or a combination. http://foundation.zurb.com/docs/layout.php
- 73. &! $r#) 0!(p" w#+0 defining modules for pages & views www.flickr.com/photos/donsolo/2136923757
- 74. “ C'%+!%+ %!!)" +' b! /0'r!'$r,p0!) to ensure the intended message is preserved on any device and at any width “ www.flickr.com/photos/theaftershock/2811382400 - Tr!%+ W,(+'%
- 75. D!4%! -'*r content stacking strategy across devices & orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
- 76. S' +0,+ #+’" /,r!8((considered, like this http://thenextweb.com/
- 77. M'b#(! 'r )!"2+'p 4r"+, the key is considering the content & how it will work across devices
- 78. “ M'b#(! %,v#$,+#'% should be like a good friend: there when you need them but cool enough to give you your space. “ * Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns www.flickr.com/photos/melodramababs/2766765248
- 79. Br,) Fr9+ has written 2 excellent posts on Responsive navigation patterns xxx http://bradfrostweb.com/blog/web/responsive-nav-patterns http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
- 80. C'%"#)!r -'*r pr'1!/+: assess the depth needed as well as pros & cons of approaches www.flickr.com/photos/inpivic/5205918163/
- 81. D!4%! & w'r2 w#+0 +:!" of navigation: primary, secondary, tertiary, footer & contextual http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
- 82. T!"+ as early as possible & then continuously
- 83. I% +0! br'w"!r by resizing the browser window & checking the display of content http://thenextweb.com
- 84. I% +0! br'w"!r by designing in the browser & creating a working HTML prototype www.flickr.com/photos/jorgeq82/4732700819
- 85. U"#%$ +''(" that help you style & test your typography before implementing it http://responsive.is/typecast.com
- 86. http://screenqueri.es/ http://quirktools.com/screenfly/ U"#%$ !3*(,+'r" that allow you to view your site across devices & orientations www.responsinator.com/ http://mattkersley.com/responsive/
- 87. O% ,/+*,( )!v#/!", though expensive there are ways around it www.flickr.com/photos/arne/5835855777/in/photostream
- 88. 4. I%p*+, 'r#!%+,+#'%, touch screens across devices
- 89. “ T'*/0 has landed on the desktop. “ - J90 C(,r2 www.flickr.com/photos/patdavid/9391602153
- 90. ‘N!w r*(!: every desktop design has to go finger-friendly’* * Source: http://globalmoxie.com/blog/desktop-touch-design.shtml www.flickr.com/photos/66327170@N07/7296381856
- 92. “ T'*/0 "/r!!% (,p+'p ",(!" have jumped 52% in the last quarter. 5 years from now you will you not be able to buy a Windows computer without a touch screen. ”* * Source: http://www.lukew.com/ff/entry.asp?1750 Screenshot from www.currys.co.uk
- 93. W! "0'*() consider touch across all devices & screen sizes. Not just smartphones & tablets www.flickr.com/photos/adactio/6153481666
- 94. www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/janitors/9968676044 &! w,- we use touch screens differ based on device, but also across the same device www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
- 95. 49% 'f *"!r" hold their phone in one hand, but how they hold it differs www.flickr.com/photos/jorgeq82/4732700819
- 96. ONE HAND (R: 66% L: 33%) O+0!r v,r#,+#'%" based on 1,333 observations during 2 months 72% 28% CRADLING (L: 79% R: 21%) 90% 10% TWO HANDS Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
- 97. H'()#%$ our devices is not a static stage. It changes Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
- 98. C!r+,#% 'r#!%+,+#'%" are better for certain tasks Reading Watching Typing
- 99. &!r! ,r! three main approaches for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
- 100. W! %!!) +' consider precise (e.g. mouse) v.s imprecise (e.g. fingers) input means www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jmtimages/2883279193
- 101. 5. ;3! +' practice
- 102. &! BRIEF A major dating site has asked you to create a campaign for Valentines day 2014 focused on "unexpected moments". The purpose is to facilitate encounters & dates between people in Dublin looking to find that special someone. The site/app should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The following should also be included: • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
- 103. 01 BESPOKE MOBILE SITE VS. RESPONSIVE VS. AN APP The client has come to you with their idea and are asking for your advice on what they should be doing and considering. W0,+ w'*() -'* r!/'33!%) #% +!r3" 'f 3'b#(! pr!"!%/! & w0-? A bespoke mobile site, responsive design, an app or a combination? Consider: HOW WOULD MOST PEOPLE ACCESS IT? • Direct traffic vs. shared links? WHAT DO YOU NEED IT TO DO? • Device specific capabilities needed? • Is offline reading/ usage required? www.flickr.com/photos/pinkpurse/5355919491 WHAT ARE THE OBJECTIVES & PRACTICALITIES? • The budget • The current technical platform • Could an app be re-used later • The marketing value of an app
- 104. 02 CONTENT STACKING STRATEGY Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work. F'r +0! 0'3! p,$! '%(-, w'r2 +0r'*$0 ("2!+/0#%$) 0'w +0! /'%+!%+ "0'*() b! )#"p(,-!) ,%) pr#'r#+#"!) (/'%+!%+ "+,/2#%$) Consider desktop, mobile, smartphone The site should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The following should also be included: • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
- 105. S+,r+ b- identifying the main module types & common elements between pages
- 106. D!4%! your content stacking strategy across devices & orientations Mobile Desktop/ tablet 1 Logo 1 Logo 2 Header 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
- 107. D'%’+ 1*"+ work with columns but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
- 108. D!4%! display variations as well as the elements they are made up of Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
- 109. I"'(,+! !(!3!%+" that need to be able to break out to meet your content stacking strategy Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 4 Bath section intro 1 Logo 5 Ad 3 Nav 8 Store locator 6 Types of baths 2 Header 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
- 110. A),p+ +' the device & screen in question; both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
- 111. Desktop/ Tablet Desktop/ tablet 1 Logo Mobile Mobile 2 Header 1 Logo 2 Header L#++(! b- (#++(! you build up a module library of defined components for your views, across devices & orientations 4 Bath section intro 5 Ad 3 Nav 8 Store locator 6 Types of baths 3 Nav 4 Bath section intro 5 Ad 7 Related products 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store locator 9 Tools 10 Footer
- 112. 02 CONTENT STACKING STRATEGY Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work. F'r +0! 0'3! p,$! '%(-, w'r2 +0r'*$0 ("2!+/0#%$) 0'w +0! /'%+!%+ "0'*() b! )#"p(,-!) ,%) pr#'r#+#"!) (/'%+!%+ "+,/2#%$) Consider desktop, mobile, smartphone The site should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The following should also be included: • • • • About page Search (people, activities) Activity suggestions Notifications www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
- 113. A f!w final words www.flickr.com/photos/martinteschner/4569495912
- 114. A#3 +' make it more future proof by moving away from specific devices www.flickr.com/photos/byte/8282578241
- 115. &#" brings us back to the importance of modularity in responsive design www.flickr.com/photos/donsolo/2136923757/
- 116. L!"" ,b'*+ p,$!" & more focus on the building blocks that makes up those views www.flickr.com/photos/boltofblue/4418442567
- 117. N' 3'r! is it about beautiful page designs... www.flickr.com/photos/miuenski/3127285991
- 118. ...b*+ ,b'*+ v#!w" that will look different across browsers, screen sizes & devices www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
- 119. &! 3'r! you reuse, the less modules there will be to design, define and develop www.flickr.com/photos/boltofblue/4418442567
- 120. B,"#%$ br!,2p'#%+" on screen sizes isn’t wrong, but it is a temporary work around www.flickr.com/photos/gozalewis/3249104929
- 121. W'r2 w#+0 breakpoints & tweakpoints, focus on content layout & EMS instead of px www.slideshare.net/yiibu/pragmatic-responsive-design
- 122. H'w w! ,ppr',/0 #+ depends on your project, budget and time frame & if it’s being built externally www.flickr.com/photos/75905404@N00/7126146307
- 123. W0,+ w! /,%%'+ )' is take a waterfall approach with responsive design where we hand over from to the other www.flickr.com/photos/bingisser/154452815
- 124. W! 0,v! +' work together across disciplines
- 125. &#" #%/(*)!" /(#!%+" both in terms of what they can expect & what will be expected of them www.flickr.com/photos/martinteschner/4569495912
- 126. R!"p'%"#v! )!"#$% means giving up some control to ensure it works for as many devices as possible xxx www.flickr.com/photos/byte/8282578241
- 127. E%"*r#%$ that we do what’s best for our clients, our users & us as a company www.flickr.com/photos/stickkim/7491816206
- 128. “ Every time you redesign God kills a kitten “ - L'*#" R9!%f!() www.flickr.com/photos/matterphotography/2739799786
- 129. &,%2 -'*! @annadahlstrom | anna.dahlstrom@gmail.com www.annadahlstrom.com