Three part series: Designing for multiple devices - GA, London, 20 Jan 2014
Upcoming SlideShare
Loading in...5
×
 

Three part series: Designing for multiple devices - GA, London, 20 Jan 2014

on

  • 3,330 views

Slides from my three-part series Designing for Multiple Devices class run on the 20th of January with General Assembly in London. ...

Slides from my three-part series Designing for Multiple Devices class run on the 20th of January with General Assembly in London.

The rise in mobiles and tablets have not only changed the way we consume and interact with content, but also the way we design and what we base our design approach on.

This series of classes will cover how user expectations as well as behaviour and consumption patterns have shifted—and what that means for designing products that will be used on multiple devices. Coming out of these classes, you'll be equipped with the essential principles and tools to tackle the multiple device jungle.

Statistics

Views

Total Views
3,330
Slideshare-icon Views on SlideShare
3,328
Embed Views
2

Actions

Likes
9
Downloads
513
Comments
0

2 Embeds 2

https://twitter.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Three part series: Designing for multiple devices - GA, London, 20 Jan 2014 Three part series: Designing for multiple devices - GA, London, 20 Jan 2014 Presentation Transcript

    • 3 classes in 1 AN EVENING OF D!"#$%#%$ for multiple devices 20 January 2014 Anna Dahlström www.annadahlstrom.com annadahlstrom
    • I’& A%%' IA & UX designer | freelance since 2011 Swedish | in London since 2006 www.flickr.com/photos/dahlstroms/4411448782
    • (#" !v!%#%$ 6.00 pm P'r) 1: Understanding the multiple device landscape Practice 7.00 pm Break 7.15 pm P'r) 2: Practicalities of multiple device projects Practice 8.15 pm Break 8.30 pm P'r) 3: Adapting to input, orientation & the future Practice Q&A
    • P'r) 1: Understanding the multiple devices landscape Introduction & defining your mobile strategy
    • (! w*r+, we design for has become more complex www.flickr.com/photos/pagedooley/2121472112
    • W! -"!, )* only have to deal with different browsers, and the fold www.flickr.com/photos/jorgeq82/4732700819
    • T*,'. #)’" br*w"!r" AND endless numbers of devices & screen sizes www.flickr.com/photos/adactio/6153481666
    • I% 2009 1% of global internet traffic came from mobiles. By the end of 2012 it had risen to 13% and by 2015 #)’" /p!0)!, )* 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
    • A" *f Q3 2012 we passed 1 billion smartphones in use www.flickr.com/photos/raincitystudios/95234968
    • I 1'v! ' 2*b )1') #" -%3%*w% )* &'%. F*r !v!r. 1-&'% 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/
    • 41% *f !&'#+" 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
    • B. )1! !%, *f 2013, mobile phones will overtake PCs as the most common web access device worldwide* Source: www.gartner.com/newsroom/id/2429815 Image courtesy of Shutterstock
    • The average person looks at their phone 150 )#&!" ' ,'..* * Source: www.textually.org/textually/archives/2012/02/030229.htm www.flickr.com/photos/jorgeq82/4732700819
    • 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
    • W! $* *%+#%! everywhere and anywhere Image courtesy of Shutterstock
    • (! *+, &.)1 that mobile users are rushed & on the go doesn’t hold true Image courtesy of Shutterstock
    • A +'r$! pr*p*r)#*% of our usage happens when we have time to kill www.flickr.com/photos/edduddiee/4307943164
    • (#" 1'" #&p+#0')#*%" for UX & design thinking. www.flickr.com/photos/eyesore9/3206408088
    • B!f*r! )1! 4r") #P1*%! the mobile use case was limited www.flickr.com/photos/frantaylor/4296536332
    • 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
    • I% f'0), we still do but we’re noticing something www.flickr.com/photos/demandaj/7287174776
    • U"!r" /p!0) an equal & continuous experience across devices www.flickr.com/photos/joachim_s_mueller/7110473339
    • “ 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
    • (!r! 'r! a number of reasons for this www.flickr.com/photos/martinteschner/4569495912
    • P!*p+! 0'rr. *-) the same tasks on mobiles as they do on desktops www.flickr.com/photos/philippe/2462550872
    • D!v#0!" & "!rv#0!" are getting more advanced & optimised for complex tasks www.flickr.com/photos/joeybones/6791201819
    • W! %* +*%$!r *w% just one device but multiple & use them interchangeably www.flickr.com/photos/soyproject/6066959891
    • W! w'%) )* find what we’re looking for irrespectively of the device we use www.flickr.com/photos/visualpunch/7351572896
    • M*b#+! 0*%)/) ≠ &*b#+! -"! 0'"! The latter is about the task, the former about the total sum of the user’s mobile experience www.flickr.com/photos/icedsoul/2486885051
    • 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
    • S*, w1') should we do? www.flickr.com/photos/tomitapio/4053123799/in/photostream
    • O-r &'#% *p)#*%" are bespoke mobile sites, responsive sites and apps www.flickr.com/photos/martinteschner/4569495912
    • B!"p*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
    • R!"p*%"#v! "#)!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
    • App", well we all know they come from app stores www.flickr.com/photos/paul-r/217948368
    • H*w do we know when to do what? www.flickr.com/photos/tomitapio/4053123799/in/photostream
    • B!"p*3! &*b#+! "#)!" should be avoided, if we can www.flickr.com/photos/edenandjosh/2892956576
    • “T*,'.’" p*p-+'r ,!v#0!" 'r! %*) )*&*rr*w'" so building something which works on any device is better than building something which works on today's devices“ - C*&b#%!, w#"! w*r," fr*& @*%!/)r'p5!+ & @)r!%)w'+)*% www.flickr.com/photos/lastquest/1472794031
    • Tw* &'#% /0!p)#*%": technical limitations to the CMS, or if required for the audience www.flickr.com/photos/st3f4n/3476036180
    • (! '+)!r%')#v! is messy & costly www.flickr.com/photos/ericconstantineau/5618576278
    • I) &!'%" maintaining multiple technical solutions... www.flickr.com/photos/nikio/3899114449
    • ...'%, '+"* maintaining multiple versions of your content www.flickr.com/photos/sharynmorrow/127184319
    • R!'+#")#0'++. that means making cuts & frustrating users www.flickr.com/photos/bulldogsrule/187693681
    • F*r )1! 4r") )#&! 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
    • P**r &*b#+! experiences result in the same thing - drop offs www.flickr.com/photos/sixmilliondollardan/2493495506
    • K!!p )1! 0*r! content the same & optimise the experience, display & interactions to the device Image courtesy of Shutterstock
    • M!!) responsive design www.flickr.com/photos/taytom/5277657429
    • B-)... what about apps? www.flickr.com/photos/tomitapio/4053123799/in/photostream
    • W1!)1!r )* do an app or not comes down to... www.flickr.com/photos/martinteschner/4569495912
    • U"!r & b-"#%!"" objectives... Image courtesy of Shutterstock
    • If .*- %!!, to utilise device specific capabilities... www.flickr.com/photos/cindyli/3784225848
    • If *ffl#%! r!',#%$ is required... www.flickr.com/photos/arjencito/6531640463
    • A%, *f 0*-r"! budget Image courtesy of Shutterstock
    • A%'+.)#0" of entry points can also provide some guidance www.flickr.com/photos/andwhynot/2946734025
    • M'#%+. ,#r!0) )r'ffi0: could be an argument for an app www.flickr.com/photos/haagsuitburo/5349040355
    • M'#%+. "1'r!, +#%3": ensure your site is optimised for mobile www.flickr.com/photos/soundslogical/4255801733
    • “ D*%’) b-#+, '% 'pp f*r )1! "'3! *f #). Focus on the goal of your mobile initiatives, prioritize your company’s needs, and choose a solution that can best address these needs now and into the future.* ” * Source: http://success.adobe.com/en/na/programs/products/digitalmarketing/offers/apr/1304-32060-2013-optimization-survey-results.html www.flickr.com/photos/dougbelshaw/4360008898
    • App design
    • App" are focused & personal www.flickr.com/photos/jdhancock/4354438814
    • N*) '" !'". '" just doing an app for e.g. iOS or Android www.flickr.com/photos/nrkbeta/3906687294/in/photostream
    • N!!, )* 0*%"#,!r fragmentation across different versions & backwards compatibility www.flickr.com/photos/aforgrave/6168689222
    • R!+')#v! %-&b!r of active Android devices across different versions Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
    • C*&p'r#"*% *f adoption rate for iOS7, iOS6 and iOS5 Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker www.flickr.com/photos/blakespot/4773693893
    • Ev!r. p+')f*r& has their own ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
    • ” M*%!. "p!%) developing a pretty but limited iPhone app only benefits [...] the few, but money spent on the website UI would have benefitted everyone. ” - G'r. M'r"1'++ *% ‘(! 'pp )r'p’ #% .%!) M'$8#%! www.flickr.com/photos/dougbelshaw/4360008898
    • (!r! 'r! different types of apps NATIVE APPS (e.g. Instagram) • MOST OPTIMISED USER EXPERIENCE • ACCESS TO DEVICE CAPABILITIES & APIs • BUT REQUIRES PLATFORM SPECIFIC CODE BASE HYBRID (e.g. First Facebook, Basecamp) • USE OF HTML5 & JAVASRIPT • WRAPPER TO PROVIDE NATIVE CAPABILITIES • FEWER “VERSIONS” TO MAINTAIN • BUT CAN BE TIME CONSUMING TO CREATE APP LIKE INTERACTIONS • CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES
    • R!"p*%"#v! design
    • R!"p*%"#v! "#)!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
    • “ D!"#$% & ,!v!+*p&!%) "1*-+, 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. “ - S&'"1#%$ M'$8#%! www.flickr.com/photos/adactio/5818096043
    • (! b'03b*%! #" your grid & breakpoints http://foundation.zurb.com/docs/layout.php
    • C*+-&%" & $-))!r" can be fluid or fixed, or a combination. http://foundation.zurb.com/docs/layout.php
    • (! $r#, 1!+p" w#)1 defining modules for pages & views www.flickr.com/photos/donsolo/2136923757
    • “ C*%)!%) %!!," )* b! 01*r!*$r'p1!, to ensure the intended message is preserved on any device and at any width “ www.flickr.com/photos/theaftershock/2811382400 - Tr!%) W'+)*%
    • D!4%! .*-r content stacking strategy across devices & orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
    • I,!%)#f. '%, pr#*r#)#"! the content 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
    • D*%’) 2-") work with columns but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
    • S* )1') #)’" 0'r!9++. considered, like this http://thenextweb.com/
    • M*b#+! *r ,!"3)*p 4r"), the key is considering the content & how it will work across devices
    • :&! )* practice
    • (! BRIEF A big retail store has asked you to come up with a Easter Hunt across London where offers and give aways are hidden at certain locations. There will only be a certain number of items available each day & they want to be able to notify people when an item has been found. The site/app should support finding offers nearby, and location should be a key The following should also be included: • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • 01 BESPOKE MOBILE SITE VS. RESPONSIVE VS. AN APP The client has come to you with the Easter hunt idea and are asking for your advice on what they should be doing. W1') w*-+, .*- r!0*&&!%, #% )!r&" *f &*b#+! pr!"!%0! & w1.? A bespoke mobile site, responsive site, 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
    • 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 )1! 1*&! p'$! *%+. ,* ' r*-$1 "3!)01 *f w1') )1! p'$! "1*-+, 0*%)'#% & 1*w )1! 0*%)!%) "1*-+, b! pr#*r#)#"!,. U"#%$ 0*%)!%) ")'03#%$ &!)1*,*+*$. ,!4%! 1*w )1! 0*%)!%) "1*-+, b! pr#*r#)#"!, *% ,!"3)*p & &*b#+!. The client’s requirements were: • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • 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
    • D*%’) 2-") work with columns but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
    • 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 )1! 1*&! p'$! *%+. ,* ' r*-$1 "3!)01 *f w1') )1! p'$! "1*-+, 0*%)'#% & 1*w )1! 0*%)!%) "1*-+, b! pr#*r#)#"!,. U"#%$ 0*%)!%) ")'03#%$ &!)1*,*+*$. ,!4%! 1*w )1! 0*%)!%) "1*-+, b! pr#*r#)#"!, *% ,!"3)*p & &*b#+!. The client’s requirements were: • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • P'r) 2: Practicalities of multiple device projects Common challenges, content strategy, structures, navigation patterns, testing
    • S*&! *f )1! most common challenges with responsive design are... www.flickr.com/photos/helga/3952984450
    • 1. K%*w#%$ where to start... • Define your mobile strategy • Start sketching • And work across disciplines www.flickr.com/photos/pinkpurse/5355919491
    • 2. H*w &'%. versions to wireframe... • Depends on your project, budget & team as well as who’s building it • Focus on identifying key templates & then the modules that make up the views www.flickr.com/photos/jorgeq82/4732700819
    • 3. H*w )* 'ppr*'01 visual design • Less static designs • Focus on modules & modularity • Continuously prototype to test how the content behaves www.flickr.com/photos/donsolo/2136923757
    • 4. W1') "0r!!% ";!" & which resolutions? • Use analytics as a guidance • Ensure it works for the most common ones • Design as device agnostic as possible www.flickr.com/photos/dpstyles/3448453466
    • 5. H*w )* define breakpoints • As much possible let the content be the guide • Use breakpoints & tweakpoints & EMS instead of px • Consult analytics for devices to identify most important screen sizes & ensure content displays properly for those • If all things fail, use screen sizes for mayor layout changes www.slideshare.net/yiibu/pragmatic-responsive-design
    • 6. H*w &'%. devices to test on • As many as possible • Prioritise based on your audience • Use research & analytics for guidance www.flickr.com/photos/nomadic_lass/5598218199
    • “ 80% *f .*-r )r'ffi0 in your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.* Source: * Source: www.slideshare.net/yiibu/pragmatic-responsive-design www.flickr.com/photos/adactio/6153481666
    • 7. H*w )* handle images • • • • xxx Images & icons should be as flexible as possible Consider load times & page weight Look at ways for loading smaller images first Take the image in question into consideration
    • R!"p*%"#v! navigation patterns
    • “ 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
    • Br', Fr<) 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
    • L!)’" take a closer look... www.flickr.com/photos/suttonhoo22/2070700035
    • S#&p+! navigation patterns 1) Top nav or “do nothing” 2) The toggle 3) The left nav flyout http://bradfrostweb.com/blog/web/responsive-nav-patterns
    • Via B ra d Fro st (th T*p %'v *r “D* %*)1#%$” keeps the navigation at the top ank y ou!) PROS Simple to implement Less design & development implications CONS Not scalable Potential height issues http://skinnyties.com
    • Via B ra d Fro st (th (! )*$$+! hides navigation items in a menu PROS Optimises screen use Recognised from apps Scalable CONS Possible animation performance problems Javascript dependent www.smashingmagazine.com ank y ou!)
    • Via B ra d Fro st (th (! +!= %'v >.*-) menu items are accessed from a tray sliding in ank y ou!) PROS Space generous Recognised nav pattern from apps CONS More advanced and doesn’t work on all devices Images from Barack Obama via Brad Frost
    • C*&p+/ navigation patterns 1) The multi toggle 2) Right to left 3) Skip the sub-nav 4) Priority+ 5) The carousel+ http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
    • (! &-+)# )*$$+! nested navigation grouped under a menu Via B ra d Fro st (th PROS Scannable Scalable CONS Animation performance Javascript dependent http://thenextweb.com Barack Obama - image via Stephanie Rieger ank y ou!)
    • Via B ra d Fro st (th R#$1) )* +!= the next level navigation slides in right to left ank y ou!) PROS Nice looking Follows mobile conventions Scalable CONS More complex to implement Animation performance www.sony.com
    • Via B ra d Fro st (th S3#p )1! "-b-%'v next level navigation is displayed on that level PROS Simple Removes complexities around sub-navigation CONS Re-quires page refresh & visit for access http://worldwildlife.org ank y ou!)
    • Via B ra d Fro st (th Pr#*r#).+ shows most important & hides the rest in a menu ank y ou!) PROS Simple Supports (supposedly) most used) Scalable CONS Hides potentially important items www.bbc.co.uk/sport
    • Via B ra d Fro st (th (! 0'r*-"!++ carousel for main sections, sub-nav when in focus ank y ou!) PROS Easy to navigate Suitable for touch CONS Doesn’t display all parent categories at once Less good for non-touch devices Not suitable for multi-level sub-navs Image from Intel via Brad Frost
    • (!r!"' N!#+’" Mobile Design Pattern Gallery www.mobiledesignpatterngallery.com
    • U"! &*b#+! as a reason to re-consider your navigation & prioritise search www.flickr.com/photos/martinteschner/4569495912
    • C*%"#,!r .*-r pr*2!0): assess the depth needed as well as pros & cons of approaches www.flickr.com/photos/inpivic/5205918163/
    • D!4%! & w*r3 w#)1 )?!" of navigation: primary, secondary, tertiary, footer & contextual http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
    • L'") b-) %*) +!'"), consider navigation across products & keep it similar to aid familiarity BBC Sport - mobile site BBC Sport - desktop BBC Sport - app
    • App structures
    • Ev!r. p+')f*r& has their own ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
    • #P1*%! r!"*-r0!" help & inspiration well documented
    • A%,r*#, r!"*-r0!" help & inspiration a little less well documented for earlier versions
    • B'"#0 iOS app structure CONSISTENT ACROSS VERSIONS NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.
    • B'"#0 Android app structure DIFFERENT BETWEEN VERSIONS: NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
    • S)'r) b. sketching screenflows, navigation & content www.flickr.com/photos/saucef/7184615025
    • R!"!'r01 common approaches www.uxarchive.com
    • Av*#, using the home screen as a stepping point. Instead deliver value from first view www.flickr.com/photos/lindzgraham/5605911999
    • T!")#%$ apps & responsive designs
    • T!") as early as possible & then continuously
    • I% )1! br*w"!r by resizing the browser window & checking the display of content http://thenextweb.com
    • I% )1! br*w"!r by designing in the browser & creating a working HTML prototype www.flickr.com/photos/jorgeq82/4732700819
    • U"#%$ )**+" that help you style & test your typography before implementing it http://responsive.is/typecast.com
    • http://screenqueri.es/ http://quirktools.com/screenfly/ U"#%$ !&-+')*r" that allow you to view your site across devices & orientations www.responsinator.com/ http://mattkersley.com/responsive/
    • O% '0)-'+ ,!v#0!", though expensive there are ways around it www.flickr.com/photos/arne/5835855777/in/photostream
    • B-.#%$ b-%,+!" and sharing, hereby helping each other www.flickr.com/photos/adactio/6800969243/in/photostream
    • W#)1 -"!r" define your objectives, audience, test cases, consider expectations & limitations www.flickr.com/photos/jorgeq82/4732700819
    • T!")#%$ 'pp" flow, navigation, interactions, transitions
    • Fr*& testing sketches as paper prototypes or as clickable prototypes... www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
    • ...)* iterations of wireframes & designs www.flickr.com/photos/fluent_methods/6961802861
    • :&! )* practice
    • 03 APP STRUCTURE With a better idea of the content for the Easter Hunt campaign, work also begins on the app. Based on the content & functionality requirements as well as what you know, consider what would be suitable to include in the app. F*0-"#%$ *%+. *% )1! 'pp %'v#$')#*% 1*w w*-+, .*- ")r-0)-r! )1#" #f .*- w!r! )* ,* '% #OS 'pp & '% A%,r*#, 'pp? Look at the Tab bar items respectively Action bar items & what would go in them as well as the ‘More’ respectively ‘Overflow menu’. • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • B'"#0 iOS app structure CONSISTENT ACROSS VERSIONS NAVIGATION BAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar.
    • B'"#0 Android app structure DIFFERENT BETWEEN VERSIONS: NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UP VS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
    • 03 APP STRUCTURE With a better idea of the content for the Easter Hunt campaign, work also begins on the app. Based on the content & functionality requirements as well as what you know, consider what would be suitable to include in the app. F*0-"#%$ *%+. *% )1! 'pp %'v#$')#*% 1*w w*-+, .*- ")r-0)-r! )1#" #f .*- w!r! )* ,* '% #OS 'pp & '% A%,r*#, 'pp? Look at the Tab bar items respectively Action bar items & what would go in them as well as the ‘More’ respectively ‘Overflow menu’. • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • 04 SIMPLE RESPONSIVE NAVIGATION Now that you have a good understanding of the content and the main sections, it’s time to tackle the navigation for the responsive site. B'"!, *% w1') .*-’v! #,!%)#4!, "* f'r, ,!4%! 1*w )1! %'v#$')#*% w#++ w*r3 f*r ,!"3)*p '%, "&'r)p1*%! '%, /p+'#% 1*w .*- 0'&! )* #) Consider what you need, future aspects, cross device patterns and the client’s requirements: • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • Via B ra d Fro st (th T*p %'v *r “D* %*)1#%$” keeps the navigation at the top ank y ou!) PROS Simple to implement Less design & development implications CONS Not scalable Potential height issues http://skinnyties.com
    • Via B ra d Fro st (th (! )*$$+! hides navigation items in a menu PROS Optimises screen use Recognised from apps Scalable CONS Possible animation performance problems Javascript dependent www.smashingmagazine.com ank y ou!)
    • Via B ra d Fro st (th (! +!= %'v >.*-) menu items are accessed from a tray sliding in ank y ou!) PROS Space generous Recognised nav pattern from apps CONS More advanced and doesn’t work on all devices Images from Barack Obama via Brad Frost
    • 04 SIMPLE RESPONSIVE NAVIGATION Now that you have a good understanding of the content and the main sections, it’s time to tackle the navigation for the responsive site. B'"!, *% w1') .*-’v! #,!%)#4!, "* f'r, ,!4%! 1*w )1! %'v#$')#*% w#++ w*r3 f*r ,!"3)*p '%, "&'r)p1*%! '%, /p+'#% 1*w .*- 0'&! )* #) Consider what you need, future aspects, cross device patterns and the client’s requirements: • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • 05 COMPLEX RESPONSIVE NAVIGATION The client loves the work that you’ve done so far and other cities in the UK wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing offers and give aways by store (e.g. Marks & Spencers) and type (e.g. restaurants, fashion, entertainment). H*w w*-+, )1#" 01'%$! .*-r %'v#$')#*% r!0*&&!%,')#*% '%, w1.? Define the navigation for desktop and smartphone. • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • (! &-+)# )*$$+! nested navigation grouped under a menu Via B ra d Fro st (th PROS Scannable Scalable CONS Animation performance Javascript dependent http://thenextweb.com Barack Obama - image via Stephanie Rieger ank y ou!)
    • Via B ra d Fro st (th R#$1) )* +!= the next level navigation slides in right to left ank y ou!) PROS Nice looking Follows mobile conventions Scalable CONS More complex to implement Animation performance www.sony.com
    • Via B ra d Fro st (th S3#p )1! "-b-%'v next level navigation is displayed on that level PROS Simple Removes complexities around sub-navigation CONS Re-quires page refresh & visit for access http://worldwildlife.org ank y ou!)
    • Via B ra d Fro st (th Pr#*r#).+ shows most important & hides the rest in a menu ank y ou!) PROS Simple Supports (supposedly) most used) Scalable CONS Hides potentially important items www.bbc.co.uk/sport
    • Via B ra d Fro st (th (! 0'r*-"!++ carousel for main sections, sub-nav when in focus ank y ou!) PROS Easy to navigate Suitable for touch CONS Doesn’t display all parent categories at once Less good for non-touch devices Not suitable for multi-level sub-navs Image from Intel via Brad Frost
    • 05 COMPLEX RESPONSIVE NAVIGATION The client loves the work that you’ve done so far and other cities in the UK wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing offers and give aways by store (e.g. Marks & Spencers) and type (e.g. restaurants, fashion, entertainment). H*w w*-+, )1#" 01'%$! .*-r %'v#$')#*% r!0*&&!%,')#*% '%, w1.? Define the navigation for desktop and smartphone. • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • P'r) 3: Adapting to input, orientations & the future Touch across devices, device orientation, mobile context, device agnostic design
    • “T*,'.’" p*p-+'r ,!v#0!" 'r! %*) )*&*rr*w'" so building something which works on any device is better than building something which works on today's devices“ - C*&b#%!, w#"! w*r," fr*& @*%!/)r'p5!+ & @)r!%)w'+)*% www.flickr.com/photos/lastquest/1472794031
    • W!’r! already facing two particular challenges... www.flickr.com/photos/david_a_lea/3247217194
    • 1. Br!'3p*#%)" based on popular devices puts us into a corner www.flickr.com/photos/michale/210536054
    • 2. T*-01 is no longer limited to smartphones & tablets www.flickr.com/photos/lokan/8843464852
    • I%p-) & touch across devices
    • “ T*-01 has landed on the desktop. “ - J<1 C+'r3 www.flickr.com/photos/patdavid/9391602153
    • ‘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
    • A" '+w'."... ...it depends
    • “ T*-01 "0r!!% +'p)*p "'+!" have jumped 52% in the last quarter. 5 years from now you will 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
    • W! "1*-+, consider touch across all devices & screen sizes. Not just smartphones & tablets www.flickr.com/photos/adactio/6153481666
    • 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
    • 49% *f -"!r" hold their phone in one hand, but how they hold it differs www.flickr.com/photos/jorgeq82/4732700819
    • ONE HAND (R: 66% L: 33%) O)1!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
    • 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
    • “ D!"#$%#%$ f*r )*-01 means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. ” - J<1 C+'r3 Image courtesy of Shutterstock
    • I&p'0)" controls, placement & interactions
    • 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
    • O-r 0-rr!%) 'ppr*'01 to navigation is based on the mouse as input Source: Luke W - www.lukew.com/ff/entry.asp?1649
    • F*r 1.br#," we tend to rest arms & grab bottom corners www.flickr.com/photos/intelfreepress/6837427202
    • C*%"#,!r reach & obscuring content & adjust navigation accordingly From... ...towards Source: Luke W - www.lukew.com/ff/entry.asp?1649
    • “ L**3#%$ ') the Polar interface on a laptop can be a bit disconcerting because we’ve essentially left the middle of the page “blank”. ” - L-3! W Screenshot from http://polarb.com/polls/tags/mobiledesign
    • B'"!, *% the context & use case, posture, grip & orientation varies www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164
    • C!r)'#% *r#!%)')#*%" are better for certain tasks Reading Watching Typing
    • (!r! 'r! three main approaches for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
    • M*b#+! context
    • S#)-')#*%'+ 0*%)/) impacts firm vs. loose grip www.flickr.com/photos/kalexanderson/6716348037
    • M*b#+! 0*%)/) ≠ &*b#+! -"! 0'"! The latter is about the task, the former about the total sum of the user’s mobile experience www.flickr.com/photos/icedsoul/2486885051
    • (! 0*%)/) differs based on situation, attitudes & preferences www.flickr.com/photos/hoyvinmayvin/5873697252
    • (! "'&! 0*%)/) doesn’t equal the same situation www.flickr.com/photos/hoyvinmayvin/5873139941
    • O)1!r '"p!0)" to consider for the mobile context are... www.flickr.com/photos/icedsoul/2486885051
    • A))!%)#*% "p'% data snacking vs. focused usage www.flickr.com/photos/nadiya95/7217734288/
    • S#$%'+ 0*v!r'$! speed & reliability of the connection www.flickr.com/photos/arjencito/6531640463/
    • L*0')#*% moving about vs. in one location www.flickr.com/photos/garry61/3191250682
    • (! "0r!!% small, medium, large & of course touch or not www.flickr.com/photos/adactio/6153481666
    • P<)-r! & $r#p how we sit/ stand as well as interact with the device www.flickr.com/photos/helga/3545310740
    • A,'p)#%$ )* orientation AND different devices can become a bit of a mindfield www.flickr.com/photos/cayusa/534070358
    • M*v! 'w'. from devices www.flickr.com/photos/martinteschner/4569495912
    • D!v#0! agnostic design
    • R!&!&b!r 1*w we can’t successfully tell what devices users are using www.flickr.com/photos/adactio/6153481666
    • (! w!b is after all about content. Not what device we are using Image courtesy of Shutterstock
    • “ G!) .*-r 0*%)!%) to go anywhere, because it’s going to go everywhere. ” - Br', Fr<) www.flickr.com/photos/mirafoto/494444094
    • A#& )* make it more future proof by moving away from specific devices www.flickr.com/photos/byte/8282578241
    • U"! %')-r'+ breakpoints based on content layout rather than focusing on devices www.flickr.com/photos/sharynmorrow/127184319
    • L**3 ') what’s suitable for your content & best practice for layout principles www.flickr.com/photos/visualpunch/7351572896
    • I)’" %*) without challenges, but challenges are meant to be overcome Image courtesy of Shutterstock
    • “ B. ,!f'-+) the web has no optimal width, optimal height, optimal font-size or optimal anything really. ” - E,w'r, O’R#*r,'% www.flickr.com/photos/nikio/3899114449
    • “ (! w!b has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. ” - E++#*) J S)*03" www.flickr.com/photos/soundslogical/4255801733
    • B'"#%$ br!'3p*#%)" on screen sizes is a temporary work around www.flickr.com/photos/gozalewis/3249104929
    • W*r3 w#)1 breakpoints & tweakpoints, focus on content layout & EMS instead of px www.slideshare.net/yiibu/pragmatic-responsive-design
    • (! "'&! with columns, opt for fluid as much possible http://foundation.zurb.com/docs/layout.php
    • (#" brings us back to the importance of modularity www.flickr.com/photos/donsolo/2136923757/
    • L!"" 'b*-) p'$!" & more focus on the building blocks that makes up those views www.flickr.com/photos/boltofblue/4418442567
    • N* &*r! is it about beautiful page designs... www.flickr.com/photos/miuenski/3127285991
    • ...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
    • (! &*r! you reuse, the less modules there will be to design, define and develop www.flickr.com/photos/boltofblue/4418442567
    • E""!%)#'+ f*r pr!v!%)#%$, ending up with too many pieces www.flickr.com/photos/akrabat/9085299639
    • (#" 1!+p" meeting requirements across screen sizes and page views www.flickr.com/photos/webatelier/5929299679
    • A%,, it minimises design & development efforts www.flickr.com/photos/webatelier/5929855686
    • G**, f*r the future & the budget Image courtesy of Shutterstock
    • R!"p*%"#v! ,!"#$% is based on modular views rather than static pages www.flickr.com/photos/techsavvyed/5926978939
    • N!!, )* 3%*w what you design for in order to identify & define what modules to use where www.flickr.com/photos/songzhen/4893025042
    • A" w!++ '" w1') content variations & sizes you need for different pages & devices www.flickr.com/photos/songzhen/4893025042
    • S)'r) b. identifying the main module types & common elements between pages
    • 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
    • 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
    • I"*+')! !+!&!%)" 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
    • A,'p) )* the device & screen in question; both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
    • 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
    • “ W#)1 )1*-"'%," and thousands of pages on the Crayola site, it wasn’t efficient to wireframe every single page and state. We created a system of components that could be assembled in different configurations to accommodate the unique content needed for each type of page. ” - D'%#!+ M'++ Screenshot: www.crayola.co.uk/
    • H*w w! 'ppr*'01 #) depends on your project, budget and time frame & if it’s being built externally www.flickr.com/photos/75905404@N00/7126146307
    • W1') w! 0'%%*) ,* is take a waterfall approach with responsive design where we hand over from to the other www.flickr.com/photos/bingisser/154452815
    • W! 1'v! )* work together across disciplines
    • (#" #%0+-,!" 0+#!%)" both in terms of what they can expect & what will be expected of them www.flickr.com/photos/martinteschner/4569495912
    • R!"p*%"#v! ,!"#$% means giving up some control to ensure it works for as many devices as possible www.flickr.com/photos/byte/8282578241
    • E%"-r#%$ that we do what’s best for our clients, our users & us as a company www.flickr.com/photos/stickkim/7491816206
    • :&! )* practice
    • 06 MODULAR, DEVICE AGNOSTIC DESIGN The client have asked you to look at doing their new responsive site with breakpoints based on content rather than devices. For that we need to really understand the content and how it’s going to flow I,!%)#f. )1! &'#% 0*%)!%) )?!" '0r<" )1! "#)!’" p'$!" '%, "3!)01 *-) 1*w )1!. 'r! $*#%$ )* b! ,#"p+'.!, '%, ','p)!, '0r<" "0r!!% ";!". Think about natural breakpoints and good practice for display of content as well as how to reuse as much as possible. • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • S)'r) b. identifying the main module types & common elements between pages
    • 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
    • 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
    • I"*+')! !+!&!%)" 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
    • A,'p) )* the device & screen in question; both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
    • 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
    • 06 MODULAR, DEVICE AGNOSTIC DESIGN The client have asked you to look at doing their new responsive site with breakpoints based on content rather than devices. For that we need to really understand the content and how it’s going to flow I,!%)#f. )1! &'#% 0*%)!%) )?!" '0r<" )1! "#)!’" p'$!" '%, "3!)01 *-) 1*w )1!. 'r! $*#%$ )* b! ,#"p+'.!, '%, ','p)!, '0r<" "0r!!% ";!". Think about natural breakpoints and good practice for display of content as well as how to reuse as much as possible. • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • 07 ADAPTING TO DEVICE ORIENTATION The client has asked you to consider how the content is going to adapt based on device orientation, i.e. from portrait to landscape. P#03 *%! *f .*-r p'$!" '%, ,#"0-"" 'ppr*'01!" f*r 1*w )1! 0*%)!%) 0*-+, ','p) b'"!, *% ,!v#0! *r#!%)')#*%. Consider desktop, tablet and smartphone • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • 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
    • C!r)'#% *r#!%)')#*%" are better for certain tasks Reading Watching Typing
    • (!r! 'r! three main approaches for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
    • 07 ADAPTING TO DEVICE ORIENTATION The client has asked you to consider how the content is going to adapt based on device orientation, i.e. from portrait to landscape. P#03 *%! *f .*-r p'$!" '%, ,#"0-"" 'ppr*'01!" f*r 1*w )1! 0*%)!%) 0*-+, ','p) b'"!, *% ,!v#0! *r#!%)')#*%. Consider desktop, tablet and smartphone • • • • About page List of offers Product pages Notifications www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
    • A f!w final words...
    • A%. "0r!!% should be your starting point www.flickr.com/photos/byte/8282578241
    • “ Ev!r. r!"p*%"#v! ,!"#$% pr*2!0) is also a content strategy project. ” - K'r!% M0Gr'%! Image courtesy of Shutterstock
    • (!r! #" %* right way & the following is just one way of approaching it www.flickr.com/photos/jtravism/2417205289
    • S)!p" f*r responsive & modular design 1. Define target audiences, goals & needs (user & business) 2. Identify key user journeys 3. Identify key pages 4. Identify the content & functional requirements for each key page 5. Across all pages identify common content module types, e.g. featured product 6. Re-visit, list & prioritise the content for each page 7. From this Identify the variations that are needed for each content module type 8. Lay out the content modules across key pages (mobile or desktop first) 9. Work through layout and content stacking strategy across devices 10. Define templates for the content module types (variations & across devices) 11. Iteratively work through your pages, test & adjust modules & variations as needed www.flickr.com/photos/poetatum/3335900523
    • I)’" %*) 2-") about the smaller screens but also the big ones www.flickr.com/photos/jolives/2889944573/
    • I)"’" 'b*-) thinking & planning ahead www.flickr.com/photos/jolives/2889944573
    • I) ,*!"%’) have to break the bank. Maintaining different versions will www.flickr.com/photos/gi/5537770007
    • B! 0r!')#v! & challenge what exists today www.flickr.com/photos/oter/5090592214
    • R!&!&b!r )* test & iterate, sketch as much as possible & work collaboratively www.flickr.com/photos/jdhancock/4354438814
    • “ Every time you redesign God kills a kitten “ - L*-#" R<!%f!+, www.flickr.com/photos/matterphotography/2739799786
    • U"!9+ resources
    • R!"p*%"#v! design 1 http://bradfrost.github.io/this-is-responsive/resources.html http://mediaqueri.es/popular/ http://www.alistapart.com/articles/responsive-web-design/ http://designmodo.com/responsive-design-examples/ http://jamus.co.uk/demos/rwd-demonstrations/ http://bradfrostweb.com/blog/web/responsive-navpatterns/ http://www.gridsetapp.com/ http://grid.mindplay.dk http://goldengridsystem.com/ http://foundation.zurb.com/docs/layout.php www.flickr.com/photos/st3f4n/4387291247
    • R!"p*%"#v! design 2 http://www.netmagazine.com/opinions/designingbrowser http://www.businessinsider.com/html5-vs-apps-whythe-debate-matters-and-who-will-win-2012-11 http://ia.net/blog/responsivetypography-the-basics/ http://daverupert.com/2013/04/ responsive-deliverables http://alistapart.com/article/ future-ready-content www.flickr.com/photos/st3f4n/4387291247
    • R!"p*%"#v! design 3 www.slideshare.net/yiibu/pragmatic-responsivedesign http://stephanierieger.com/on-designing-content-outa-response-to-zeldman-and-others/ http://bradfrostweb.com/blog/mobile/support-vsoptimization/ http://stuffandnonsense.co.uk/blog/about/ we_need_a_standard_show_navigation_icon_for_resp onsive_web_design http://bradfrostweb.com/blog/mobile/anatomy-of-amobile-first-responsive-web-design/ www.flickr.com/photos/st3f4n/4387291247
    • N'v#$')#*% for responsive design http://bradfrostweb.com/blog/web/responsive-navpatterns/ http://bradfrostweb.com/blog/web/complexnavigation-patterns-for-responsive-design/ http://palantir.net/blog/scalable-navigation-patternsresponsive-web-design www.flickr.com/photos/st3f4n/4387291247
    • D!v#0!" & sizes http://www.google.com/analytics/features/mobilesite-traffic.html http://en.wikipedia.org/wiki/ List_of_displays_by_pixel_density http://opensignal.com/reports/fragmentation-2013/ https://deviceatlas.com/device-data/devices Slide 37: http://www.slideshare.net/yiibu/pragmaticresponsive-design www.flickr.com/photos/st3f4n/4387291247
    • D!v#0! interaction www.uxmatters.com/mt/archives/2013/02/how-dousers-really-hold-mobile-devices.php http://globalmoxie.com/blog/desktop-touchdesign.shtml www.uxbooth.com/articles/designing-for-mobilepart-2-interaction-design/?goback= %2Egde_79272_member_226720034 www.flickr.com/photos/st3f4n/4387291247
    • M-+)#p+! devices & touch input www.lukew.com/ff/entry.asp?1649 http://www.lukew.com/ff/entry.asp?1721 http://www.uxmatters.com/mt/archives/2013/03/ common-misconceptions-about-touch.php Examples: http://polarb.com/polls/tags/mobiledesign www.flickr.com/photos/st3f4n/4387291247
    • Br!'3p*#%)" 1 http://www.lukew.com/ff/entry.asp?1714 http://elliotjaystocks.com/blog/ responsive-web-design-the-war-has-not-yet-beenwon http://stephanierieger.com/ondesigning-content-out-a-response-to-zeldman-andothers http://www.markboulton.co.uk/ journal/theinbetween http://adactio.com/journal/6044/ http://seesparkbox.com/foundry/ there_is_no_breakpoint www.flickr.com/photos/st3f4n/4387291247
    • Br!'3p*#%)" 2 http://www.smashingmagazine.com/ 2013/03/01/logical-breakpointsresponsive-design/ www.slideshare.net/yiibu/pragmaticresponsive-design http://alistapart.com/article/designing-forbreakpoints http://dmolsen.com/2013/03/05/media-query-lessdesign-content-based-breakpoints-tweakpoints/ www.flickr.com/photos/st3f4n/4387291247
    • D!&*, sketching & workflow www.thismanslife.co.uk/projects/lab/ responsivewireframes/ www.thismanslife.co.uk/projects/lab/ responsiveillustration/ http://nocturnalmonkey.com/archive/responsivesketching http://jeremypalford.com/arch-journal/responsiveweb-design-sketch-sheets http://danielmall.com/work/crayola/ www.flickr.com/photos/st3f4n/4387291247
    • P+')f*r& guidelines https://developer.apple.com/library/ios/ documentation/UserExperience/Conceptual/ MobileHIG/index.html#//apple_ref/doc/uid/ TP40006556 http://mrgan.tumblr.com/post/10492926111/ labeling-the-back-button http://developer.android.com/design/index.html www.flickr.com/photos/st3f4n/4387291247
    • P'))!r% libraries http://pttrns.com/ http://mobile-patterns.com/ http://www.patternsofdesign.co.uk/ http://www.mobiledesignpatterngallery.com/mobilepatterns.php http://www.androidpatterns.com/ http://androidpttrns.com/ http://android.inspired-ui.com/ www.flickr.com/photos/st3f4n/4387291247
    • T!")#%$ http://bradfrostweb.com/blog/mobile/test-on-realmobile-devices-without-breaking-the-bank/ http://www.welcomebrand.co.uk/thoughts/websitetesting-phone-bundles/ https://bagcheck.com/blog/22-mobile-device-testingthe-gear www.flickr.com/photos/st3f4n/4387291247
    • T!")#%$ your responsive design http://responsive.is/typecast.com http://screenqueri.es/ http://www.responsinator.com/ http://quirktools.com/screenfly/ http://mattkersley.com/responsive/ http://responsivepx.com/ http://protofluid.com/ http://responsiveviewport.com/ http://www.browserstack.com/ www.flickr.com/photos/st3f4n/4387291247
    • T!")#%$ apps & mockups http://popapp.in/ http://fieldtestapp.com/ https://www.fluidui.com/ http://www.plunkapp.com/ http://bjango.com/mac/skalapreview/ http://proto.io/ www.flickr.com/photos/st3f4n/4387291247
    • ('%3 .*-. Questions? @annadahlstrom | anna.dahlstrom@gmail.com www.annadahlstrom.com