three part series: designing for multiple devices - ga, london, 20 jan 2014
DESCRIPTION
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.TRANSCRIPT
Anna Dahlström www.annadahlstrom.com
annadahlstrom
3 classes in 1
AN EVENING OFDesigning for multiple devices 20 January 2014
www.flickr.com/photos/dahlstroms/4411448782
I’m Anna IA & UX designer | freelance since 2011Swedish | in London since 2006
(is eveningPart 1: Understanding the multiple device landscape
Practice
Break
Part 2: Practicalities of multiple device projects
Practice
Break
Part 3: Adapting to input, orientation & the future
Practice
Q & A
6.00 pm
7.00 pm
7.15 pm
8.15 pm
8.30 pm
Part 1: Understanding the multiple devices landscapeIntroduction & defining your mobile strategy
www.flickr.com/photos/pagedooley/2121472112
(e world we design for has become more complex
www.flickr.com/photos/jorgeq82/4732700819
We used to only have to deal with different browsers, and the fold
www.flickr.com/photos/adactio/6153481666
Today it’s browsers AND endless numbers of devices & screen sizes
www.flickr.com/photos/nasamarshall/6289116940
In 2009 1% of global internet traffic came from mobiles. By the end of 2012 it had risen to 13% and by2015 it’s /pected to be above 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/raincitystudios/95234968
As of Q3 2012 we passed 1 billion smartphones in use
www.flickr.com/photos/helga/3952984450/
I have a job that is unknown to many I’m a freelance IA & UX designer
www.flickr.com/photos/hlkljgk/5764422581
For every human that enters the world, five mobile devices are created.** 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/jayfresh/3388253576
41% of emails are now opened on mobile devices ** Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices
By the end of 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
www.flickr.com/photos/jorgeq82/4732700819
The average person looks at their phone 150 times a day.** Source: www.textually.org/textually/archives/2012/02/030229.htm
www.flickr.com/photos/exlibris/2552107635
40% of people use their phone in the bathroom. ** Source: http://www.lukew.com/ff/entry.asp?1500
We go onlineeverywhere and anywhere
Image courtesy of Shutterstock
Image courtesy of Shutterstock
(e old myth that mobile users are rushed & on the go doesn’t hold true
www.flickr.com/photos/edduddiee/4307943164
A large proportion of our usage happens when we have time to kill
www.flickr.com/photos/eyesore9/3206408088
(is has implicationsfor UX & design thinking.
www.flickr.com/photos/frantaylor/4296536332
Before the first iPhone the mobile use case was limited
http://desktopwallpaper-s.com/19-Computers/-/Future
DESKTOP FULL WEBSITE
BESPOKE CUT
DOWN WEBSITE
BESPOKE CUT
DOWN WEBSITE
We built separate sites for mobile & desktop
www.flickr.com/photos/demandaj/7287174776
In fact, we still do but we’re noticing something
www.flickr.com/photos/joachim_s_mueller/7110473339
Users /pect an equal & continuous experience across devices
www.flickr.com/photos/pandiyan/4550066009
“ 7 out of 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/martinteschner/4569495912
(ere are a number of reasons for this
www.flickr.com/photos/philippe/2462550872
People carry out the same tasks on mobiles as they do on desktops
www.flickr.com/photos/joeybones/6791201819
Devices & services are getting more advanced & optimised for complex tasks
www.flickr.com/photos/soyproject/6066959891
We no longer own just one device but multiple & use them interchangeably
www.flickr.com/photos/visualpunch/7351572896
We want to find what we’re looking for irrespectively of the device we use
www.flickr.com/photos/icedsoul/2486885051
Mobile cont/t ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience
http://desktopwallpaper-s.com/19-Computers/-/Future
DESKTOP FULL WEBSITE
BESPOKE CUT
DOWN WEBSITE
BESPOKE CUT
DOWN WEBSITE
Having separate sites does, for the most part, not make sense
www.flickr.com/photos/tomitapio/4053123799/in/photostream
So, what should we do?
www.flickr.com/photos/martinteschner/4569495912
Our main options are bespoke mobile sites, responsive sites and apps
http://desktopwallpaper-s.com/19-Computers/-/Future
DESKTOP FULL WEBSITE
BESPOKE CUT
DOWN WEBSITE
BESPOKE CUT
DOWN WEBSITE
Bespoke mobile sites have a separate url & means maintaining different sites
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
Responsive sites have the same url & is basically “one site”
http://desktopwallpaper-s.com/19-Computers/-/Future
www.flickr.com/photos/paul-r/217948368
Apps, well we all know they come from app stores
www.flickr.com/photos/tomitapio/4053123799/in/photostream
How do we know when to do what?
www.flickr.com/photos/edenandjosh/2892956576
Bespoke mobile sitesshould be avoided, if we can
www.flickr.com/photos/lastquest/1472794031
“Today’s popular devices are not tomorrow's so building something which works on any device is better than building something which works on today's devices“
- Combined wise words from @one/trap5el & @trentwalton
www.flickr.com/photos/st3f4n/3476036180
Two main /ceptions:technical limitations to the CMS, or if required for the audience
www.flickr.com/photos/ericconstantineau/5618576278
(e alternative is messy & costly
www.flickr.com/photos/nikio/3899114449
It means maintaining multiple technical solutions...
www.flickr.com/photos/sharynmorrow/127184319
...and also maintaining multiple versions of your content
www.flickr.com/photos/bulldogsrule/187693681
Realistically that means making cuts & frustrating users
For the first time 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
www.flickr.com/photos/sixmilliondollardan/2493495506
Poor mobile experiences result in the same thing - drop offs
Keep the core content the same & optimise the experience, display & interactions to the device
Image courtesy of Shutterstock
Meet responsive design
www.flickr.com/photos/taytom/5277657429
www.flickr.com/photos/tomitapio/4053123799/in/photostream
But...what about apps?
www.flickr.com/photos/martinteschner/4569495912
Whether to do an app or not comes down to...
Image courtesy of Shutterstock
User & business objectives...
If you need to utilise device specific capabilities...
www.flickr.com/photos/cindyli/3784225848
www.flickr.com/photos/arjencito/6531640463
If offline reading is required...
Image courtesy of Shutterstock
And of course budget
www.flickr.com/photos/andwhynot/2946734025
Analytics of entry points can also provide some guidance
www.flickr.com/photos/haagsuitburo/5349040355
Mainly direct traffic: could be an argument for an app
www.flickr.com/photos/soundslogical/4255801733
Mainly shared links: ensure your site is optimised for mobile
www.flickr.com/photos/dougbelshaw/4360008898
“ Don’t build an app for the sake of it. 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
App design
www.flickr.com/photos/jdhancock/4354438814
Apps are focused & personal
www.flickr.com/photos/nrkbeta/3906687294/in/photostream
Not as easy as just doing an app for e.g. iOS or Android
www.flickr.com/photos/aforgrave/6168689222
Need to consider fragmentation across different versions & backwards compatibility
Source: http://developer.android.com/about/dashboards/index.html
Relative number of active Android devices across different versions
www.flickr.com/photos/blakespot/4773693893
www.flickr.com/photos/blakespot/4773693893
Comparison of adoption rate for iOS7, iOS6 and iOS5
Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker
www.flickr.com/photos/gadl/3570118243
Every platform has their own ui guidelines that their users are used to
www.flickr.com/photos/dougbelshaw/4360008898
” Money spent developing a pretty but limited iPhone app only benefits [...] the few, but money spent on the website UI would have benefitted everyone. ”
- Gary Marshall on ‘(e app trap’ in .net Mag8ine
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
(ere are different types of apps
Responsive design
FULL WEBSITE
FULL WEBSITE
FULL WEBSITE
Responsive sites have the same url & is basically “one site”
http://desktopwallpaper-s.com/19-Computers/-/Future
www.flickr.com/photos/adactio/5818096043
“ Design & development should respond 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. “
- Smashing Mag8ine
http://foundation.zurb.com/docs/layout.php
(e backbone is your grid & breakpoints
Columns & gutters can be fluid or fixed, or a combination.
http://foundation.zurb.com/docs/layout.php
www.flickr.com/photos/donsolo/2136923757
(e grid helps with defining modules for pages & views
“ Content needs to be choreographed to ensure the intended message is preserved on any
device and at any width “- Trent Walton
www.flickr.com/photos/theaftershock/2811382400
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
Define your content stacking strategy across devices & orientation.
Identify and prioritise the content across devices & orientations
Desktop/ tablet Mobile
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
www.flickr.com/photos/garrettc/6260768486/
Don’t just work with columns but think of the narrative of the views
http://thenextweb.com/
So that it’s care9lly considered, like this
Mobile or desktop first, the key is considering the content & how it will work across devices
:me to practice
www.flickr.com/photos/pinkpurse/5355919491
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:
(eBRIEF
• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
www.flickr.com/photos/pinkpurse/5355919491
01
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?
WHAT ARE THE OBJECTIVES & PRACTICALITIES?• The budget• The current technical platform• Could an app be re-used later• The marketing value of an app
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.
What would you recommend in terms of mobile presence & why? A bespoke mobile site, responsive site, an app or a combination?
Consider:
www.flickr.com/photos/pinkpurse/5355919491
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.
For the home page only do a rough sketch of what the page should contain & how the content should be prioritised.
Using content stacking methodology define how the content should be prioritised on desktop & mobile.
The client’s requirements were:• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
Define your content stacking strategy across devices & orientations
Desktop/ tablet Mobile
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
www.flickr.com/photos/garrettc/6260768486/
Don’t just work with columns but think of the narrative of the views
www.flickr.com/photos/pinkpurse/5355919491
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.
For the home page only do a rough sketch of what the page should contain & how the content should be prioritised.
Using content stacking methodology define how the content should be prioritised on desktop & mobile.
The client’s requirements were:• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
Part 2: Practicalities of multiple device projectsCommon challenges, content strategy, structures, navigation patterns, testing
www.flickr.com/photos/helga/3952984450
Some of the most common challenges with responsive design are...
www.flickr.com/photos/pinkpurse/5355919491
1. Knowing where to start...• Define your mobile strategy• Start sketching• And work across disciplines
www.flickr.com/photos/jorgeq82/4732700819
2. How many 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/donsolo/2136923757
3. How to approach visual design• Less static designs• Focus on modules & modularity• Continuously prototype to test how the content behaves
www.flickr.com/photos/dpstyles/3448453466
4. What screen s;es & which resolutions?• Use analytics as a guidance• Ensure it works for the most common ones• Design as device agnostic as possible
www.slideshare.net/yiibu/pragmatic-responsive-design
5. How to 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.flickr.com/photos/nomadic_lass/5598218199
6. How many devices to test on• As many as possible• Prioritise based on your audience• Use research & analytics for guidance
www.flickr.com/photos/adactio/6153481666
“ 80% of your traffic 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
xxx
7. How to handle images• 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
Responsive navigation patterns
www.flickr.com/photos/melodramababs/2766765248
“ Mobile navigation 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
Brad Fr<t has written 2 excellent posts on Responsive navigation patterns
xxxhttp://bradfrostweb.com/blog/web/responsive-nav-patterns
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design
www.flickr.com/photos/suttonhoo22/2070700035
Let’s take a closer look...
Simple navigation patterns 1) Top nav or “do nothing”
2) The toggle
3) The left nav flyout
http://bradfrostweb.com/blog/web/responsive-nav-patterns
Top nav or “Do nothing” keeps the navigation at the top
Via Brad Frost (thank you!)
http://skinnyties.com
PROSSimple to implement
Less design & development implications
CONSNot scalable
Potential height issues
(e togglehides navigation items in a menu
Via Brad Frost (thank you!)
www.smashingmagazine.com
PROS
Optimises screen use
Recognised from apps
Scalable
CONS
Possible animation performance problems
Javascript dependent
(e le= nav flyoutmenu items are accessed from a tray sliding in
Via Brad Frost (thank you!)
Images from Barack Obama via Brad Frost
PROS
Space generous
Recognised nav pattern from apps
CONS
More advanced and doesn’t work on all devices
Compl/ 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
(e multi togglenested navigation grouped under a menu
Via Brad Frost (thank you!)
http://thenextweb.com
PROS
Scannable
Scalable
CONS
Animation performance
Javascript dependent
Barack Obama - image via Stephanie Rieger
Right to le=the next level navigation slides in right to left
Via Brad Frost (thank you!)
www.sony.com
PROS
Nice looking
Follows mobile conventions
Scalable
CONS
More complex to implement
Animation performance
Skip the sub-navnext level navigation is displayed on that level
Via Brad Frost (thank you!)
http://worldwildlife.org
PROS
Simple
Removes complexities around sub-navigation
CONS
Re-quires page refresh & visit for access
Priority+shows most important & hides the rest in a menu
Via Brad Frost (thank you!)
www.bbc.co.uk/sport
PROS
Simple
Supports (supposedly) most used)
Scalable
CONS
Hides potentially important items
(e carousel+carousel for main sections, sub-nav when in focus
Via Brad Frost (thank you!)
Image from Intel via Brad Frost
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
(eresa Neil’sMobile Design Pattern Gallery
www.mobiledesignpatterngallery.com
www.flickr.com/photos/martinteschner/4569495912
Use mobile as a reason to re-consider your navigation& prioritise search
www.flickr.com/photos/inpivic/5205918163/
Consider your project: assess the depth needed as well as pros & cons of approaches
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
Define & work with t?es of navigation: primary, secondary, tertiary, footer & contextual
BBC Sport - desktop
Last but not least, consider navigation across products & keep it similar to aid familiarity
BBC Sport - mobile site
BBC Sport - app
App structures
www.flickr.com/photos/gadl/3570118243
Every platform has their own ui guidelines that their users are used to
iPhone resources help & inspiration well documented
Android resources help & inspiration a little less well documented for earlier versions
CONSISTENT ACROSS VERSIONS
NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTONShould always take the user one step back from where they came from & be descriptive.
TAB BARCan often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEMUsed to hold & provide access to all other sections of the app that don’t fit in the tab bar.
Basic iOS app structure
DIFFERENT BETWEEN VERSIONS:
NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BARHolds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTONThe 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.
Basic Android app structure
www.flickr.com/photos/saucef/7184615025
Start by sketching screenflows, navigation & content
Research common approaches
www.uxarchive.com
www.flickr.com/photos/lindzgraham/5605911999
Avoid using the home screen as a stepping point. Instead deliver value from first view
Testing apps & responsive designs
Test as early as possible& then continuously
In the browser by resizing the browser window & checking the display of content
http://thenextweb.com
www.flickr.com/photos/jorgeq82/4732700819
In the browser by designing in the browser & creating a working HTML prototype
http://responsive.is/typecast.com
Using tools that help you style & test your typography before implementing it
www.responsinator.com/
http://quirktools.com/screenfly/
http://screenqueri.es/
Using emulators that allow you to view your site across devices & orientations
http://mattkersley.com/responsive/
www.flickr.com/photos/arne/5835855777/in/photostream
On actual devices, though expensive there are ways around it
www.flickr.com/photos/adactio/6800969243/in/photostream
Buying bundles and sharing, hereby helping each other
www.flickr.com/photos/jorgeq82/4732700819
With users define your objectives, audience, test cases,consider expectations & limitations
Testing apps flow, navigation, interactions, transitions
From testing sketches as paper prototypes or as clickable prototypes...
www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
...to iterations of wireframes & designs
www.flickr.com/photos/fluent_methods/6961802861
:me to practice
www.flickr.com/photos/pinkpurse/5355919491
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.
Focusing only on the app navigation how would you structure this if you were to do an iOS app & an Android app? 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
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
CONSISTENT ACROSS VERSIONS
NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTONShould always take the user one step back from where they came from & be descriptive.
TAB BARCan often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEMUsed to hold & provide access to all other sections of the app that don’t fit in the tab bar.
Basic iOS app structure
DIFFERENT BETWEEN VERSIONS:
NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BARHolds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTONThe 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.
Basic Android app structure
www.flickr.com/photos/pinkpurse/5355919491
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.
Focusing only on the app navigation how would you structure this if you were to do an iOS app & an Android app? 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
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
www.flickr.com/photos/pinkpurse/5355919491
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.
Based on what you’ve identified so far, define how the navigation will work for desktop and smartphone and /plain how you came to it
Consider what you need, future aspects, cross device patterns and the client’s requirements:
• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
Top nav or “Do nothing” keeps the navigation at the top
Via Brad Frost (thank you!)
http://skinnyties.com
PROSSimple to implement
Less design & development implications
CONSNot scalable
Potential height issues
(e togglehides navigation items in a menu
Via Brad Frost (thank you!)
www.smashingmagazine.com
PROS
Optimises screen use
Recognised from apps
Scalable
CONS
Possible animation performance problems
Javascript dependent
(e le= nav flyoutmenu items are accessed from a tray sliding in
Via Brad Frost (thank you!)
Images from Barack Obama via Brad Frost
PROS
Space generous
Recognised nav pattern from apps
CONS
More advanced and doesn’t work on all devices
www.flickr.com/photos/pinkpurse/5355919491
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.
Based on what you’ve identified so far, define how the navigation will work for desktop and smartphone and /plain how you came to it
Consider what you need, future aspects, cross device patterns and the client’s requirements:
• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
www.flickr.com/photos/pinkpurse/5355919491
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).
How would this change your navigation recommendation and why?Define the navigation for desktop and smartphone.
• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
(e multi togglenested navigation grouped under a menu
Via Brad Frost (thank you!)
http://thenextweb.com
PROS
Scannable
Scalable
CONS
Animation performance
Javascript dependent
Barack Obama - image via Stephanie Rieger
Right to le=the next level navigation slides in right to left
Via Brad Frost (thank you!)
www.sony.com
PROS
Nice looking
Follows mobile conventions
Scalable
CONS
More complex to implement
Animation performance
Skip the sub-navnext level navigation is displayed on that level
Via Brad Frost (thank you!)
http://worldwildlife.org
PROS
Simple
Removes complexities around sub-navigation
CONS
Re-quires page refresh & visit for access
Priority+shows most important & hides the rest in a menu
Via Brad Frost (thank you!)
www.bbc.co.uk/sport
PROS
Simple
Supports (supposedly) most used)
Scalable
CONS
Hides potentially important items
(e carousel+carousel for main sections, sub-nav when in focus
Via Brad Frost (thank you!)
Image from Intel via Brad Frost
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
www.flickr.com/photos/pinkpurse/5355919491
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).
How would this change your navigation recommendation and why?Define the navigation for desktop and smartphone.
• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
Part 3: Adapting to input, orientations & the futureTouch across devices, device orientation, mobile context, device agnostic design
www.flickr.com/photos/lastquest/1472794031
“Today’s popular devices are not tomorrow's so building something which works on any device is better than building something which works on today's devices“
- Combined wise words from @one/trap5el & @trentwalton
www.flickr.com/photos/david_a_lea/3247217194
We’re already facing two particular challenges...
www.flickr.com/photos/michale/210536054
1. Breakpoints based on popular devices puts us into a corner
www.flickr.com/photos/lokan/8843464852
2. Touch is no longer limited to smartphones & tablets
Input & touch across devices
www.flickr.com/photos/patdavid/9391602153
“ Touch has landed on the desktop. “- J<h Clark
www.flickr.com/photos/66327170@N07/7296381856
‘New rule: every desktop design has to go finger-friendly’** Source: http://globalmoxie.com/blog/desktop-touch-design.shtml
As always... ...it depends
“ Touch screen laptop sales 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
www.flickr.com/photos/adactio/6153481666
We should consider touch across all devices & screen sizes. Not just smartphones & tablets
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
(e way we use touch screens differ based on device, but also across the same device
www.flickr.com/photos/janitors/9968676044
www.flickr.com/photos/jorgeq82/4732700819
49% of users hold their phone in one hand, but how they hold it differs
ONE HAND (R: 66% L: 33%)
CRADLING (L: 79% R: 21%)
TWO HANDS
72% 28%
90% 10%
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Other variationsbased on 1,333 observations during 2 months
Holding 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
Image courtesy of Shutterstock
“ Designing for touch means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. ”
- J<h Clark
Impacts controls, placement & interactions
www.flickr.com/photos/jmtimages/2883279193www.flickr.com/photos/ljrmike/7675757042
We need to consider precise (e.g. mouse) v.s imprecise (e.g. fingers) input means
Our current approach to navigation is based on the mouse as input
Source: Luke W - www.lukew.com/ff/entry.asp?1649
www.flickr.com/photos/intelfreepress/6837427202
For hybrids we tend to rest arms & grab bottom corners
Source: Luke W - www.lukew.com/ff/entry.asp?1649
From...
...towards
Consider reach & obscuring content & adjust navigation accordingly
Screenshot from http://polarb.com/polls/tags/mobiledesign
“ Looking at the Polar interface on a laptop can be a bit disconcerting because we’ve essentially left the middle of the page “blank”. ”
- Luke W
www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164
Based on the context & use case, posture, grip & orientation varies
Reading Watching Typing
Certain orientations are betterfor certain tasks
(ere are three main approaches for adapting to orientation
RE-POSITION REVEAL/ HIDESCALE
Mobile context
www.flickr.com/photos/kalexanderson/6716348037
Situational cont/t impacts firm vs. loose grip
www.flickr.com/photos/icedsoul/2486885051
Mobile cont/t ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience
(e cont/t differs based on situation, attitudes & preferences
www.flickr.com/photos/hoyvinmayvin/5873697252
www.flickr.com/photos/hoyvinmayvin/5873139941
(e same cont/t doesn’t equal the same situation
Other aspects to consider for the mobile context are...
www.flickr.com/photos/icedsoul/2486885051
www.flickr.com/photos/nadiya95/7217734288/
Attention span data snacking vs. focused usage
www.flickr.com/photos/arjencito/6531640463/
Signal coverage speed & reliability of the connection
www.flickr.com/photos/garry61/3191250682
Location moving about vs. in one location
www.flickr.com/photos/adactio/6153481666
(e screen small, medium, large & of course touch or not
www.flickr.com/photos/helga/3545310740
P<ture & grip how we sit/ stand as well as interact with the device
www.flickr.com/photos/cayusa/534070358
Adapting to orientation AND different devices can become a bit of a mindfield
www.flickr.com/photos/martinteschner/4569495912
Move away from devices
Device agnostic design
www.flickr.com/photos/adactio/6153481666
Remember how we can’t successfully tell what devices users are using
(e web is after all about content. Not what device we are using
Image courtesy of Shutterstock
www.flickr.com/photos/mirafoto/494444094
“ Get your content to go anywhere, because it’s going to go everywhere. ”
- Brad Fr<t
www.flickr.com/photos/byte/8282578241
Aim to make it more future proof by moving away from specific devices
www.flickr.com/photos/sharynmorrow/127184319
Use natural breakpoints based on content layout rather than focusing on devices
www.flickr.com/photos/visualpunch/7351572896
Look at what’s suitable for your content & best practice for layout principles
It’s not without challenges,but challenges are meant to be overcome
Image courtesy of Shutterstock
www.flickr.com/photos/nikio/3899114449
“ By default the web has no optimal width, optimal height, optimal font-size or optimal anything really. ”
- Edward O’Riordan
www.flickr.com/photos/soundslogical/4255801733
“ (e web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. ”
- Elliot J Stocks
www.flickr.com/photos/gozalewis/3249104929
Basing breakpoints on screen sizes is a temporary work around
www.slideshare.net/yiibu/pragmatic-responsive-design
Work with breakpoints & tweakpoints, focus on content layout & EMS instead of px
(e same with columns, opt for fluid as much possible
http://foundation.zurb.com/docs/layout.php
www.flickr.com/photos/donsolo/2136923757/
(is brings us back to the importance of modularity
www.flickr.com/photos/boltofblue/4418442567
Less about pages & more focus on the building blocks that makes up those views
www.flickr.com/photos/miuenski/3127285991
No more is it about beautiful page designs...
www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
...but about views that will look different across browsers, screen sizes & devices
www.flickr.com/photos/boltofblue/4418442567
(e more you reuse, the less modules there will be to design, define and develop
www.flickr.com/photos/akrabat/9085299639
Essential for preventing, ending up with too many pieces
www.flickr.com/photos/webatelier/5929299679
(is helps meeting requirements across screen sizes and page views
www.flickr.com/photos/webatelier/5929855686
And, it minimises design & development efforts
Image courtesy of Shutterstock
Good for the future & the budget
www.flickr.com/photos/techsavvyed/5926978939
Responsive design is based on modular views rather than static pages
www.flickr.com/photos/songzhen/4893025042
Need to know what you design for in order to identify & define what modules to use where
www.flickr.com/photos/songzhen/4893025042
As well as what content variations &sizes you need for different pages & devices
Start by identifying the main module types & common
elements between pages
Define your content stacking strategy across devices & orientations
Desktop/ tablet Mobile
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Define display variations as well as the elements they are made up of
Desktop/ tablet Mobile
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Isolate elements that need to be able to break out to meet your content stacking strategy
Desktop/ tablet Mobile
www.flickr.com/photos/katherinekenny
Adapt to the device & screen in question; both order & priority as well as interactions, how much to show & how
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Desktop/ tablet Mobile
Little by little you build up a module library of defined components for your views, across devices & orientations
Screenshot: www.crayola.co.uk/
“ With thousands 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. ”
- Daniel Mall
www.flickr.com/photos/75905404@N00/7126146307
How we approach it depends on your project, budget and time frame & if it’s being built externally
www.flickr.com/photos/bingisser/154452815
What we cannot do is take a waterfall approach with responsive design where we hand over from to the other
We have to work together across disciplines
www.flickr.com/photos/martinteschner/4569495912
(is includes clients both in terms of what they can expect & what will be expected of them
www.flickr.com/photos/byte/8282578241
Responsive design means giving up some control to ensure it works for as many devices as possible
www.flickr.com/photos/stickkim/7491816206
Ensuring that we do what’s best for our clients, our users & us as a company
:me to practice
www.flickr.com/photos/pinkpurse/5355919491
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
Identify the main content t?es acr<s the site’s pages and sketch out how they are going to be displayed and adapted acr<s screen s;es.
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
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
Start by identifying the main module types & common
elements between pages
Define your content stacking strategy across devices & orientations
Desktop/ tablet Mobile
3 Nav
7Related products
2 Header
4Bath
section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1 Logo
5Ad3
Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Define display variations as well as the elements they are made up of
Desktop/ tablet Mobile
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Isolate elements that need to be able to break out to meet your content stacking strategy
Desktop/ tablet Mobile
www.flickr.com/photos/katherinekenny
Adapt to the device & screen in question; both order & priority as well as interactions, how much to show & how
Desktop/ Tablet Mobile
3 Nav
7Related products
2Header
4Bath section intro
6Types of baths
9 Tools
10Footer
8 Store locator
1Logo
5Ad
3 Nav
7Related products
2 Header
9 Tools
10Footer
8 Store locator
1 Logo
5Ad
4Bath
section intro
6Types of baths
Desktop/ tablet Mobile
Little by little you build up a module library of defined components for your views, across devices & orientations
www.flickr.com/photos/pinkpurse/5355919491
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
Identify the main content t?es acr<s the site’s pages and sketch out how they are going to be displayed and adapted acr<s screen s;es.
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
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
www.flickr.com/photos/pinkpurse/5355919491
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.
Pick one of your pages and discuss approaches for how the content could adapt based on device orientation.Consider desktop, tablet and smartphone
• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
(e way we use touch screens differ based on device, but also across the same device
www.flickr.com/photos/janitors/9968676044
Reading Watching Typing
Certain orientations are betterfor certain tasks
(ere are three main approaches for adapting to orientation
RE-POSITION REVEAL/ HIDESCALE
www.flickr.com/photos/pinkpurse/5355919491
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.
Pick one of your pages and discuss approaches for how the content could adapt based on device orientation.Consider desktop, tablet and smartphone
• About page• List of offers• Product pages• Notifications
• Share (on Facebook & Twitter)• Login & registration• Overview of number of found & not found item
A few final words...
www.flickr.com/photos/byte/8282578241
Any screen should be your starting point
“ Every responsive design project is also a content strategy project. ”
- Karen McGrane
Image courtesy of Shutterstock
www.flickr.com/photos/jtravism/2417205289
(ere is no right way & the following is just one way of approaching it
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
Steps for responsive & modular design
It’s not just about the smaller screens but also the big ones
www.flickr.com/photos/jolives/2889944573/
Its’s about thinking & planning ahead
www.flickr.com/photos/jolives/2889944573
It doesn’t have to break the bank. Maintaining different versions will
www.flickr.com/photos/gi/5537770007
Be creative & challenge what exists today
www.flickr.com/photos/oter/5090592214
www.flickr.com/photos/jdhancock/4354438814
Remember to test & iterate, sketch as much as possible & work collaboratively
www.flickr.com/photos/matterphotography/2739799786
“ Every time you redesign God kills a kitten “- Louis R<enfeld
Use9l resources
www.flickr.com/photos/st3f4n/4387291247
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-nav-patterns/
http://www.gridsetapp.com/
http://grid.mindplay.dk
http://goldengridsystem.com/
http://foundation.zurb.com/docs/layout.php
Responsive design 1
www.flickr.com/photos/st3f4n/4387291247
http://www.netmagazine.com/opinions/designing-browser
http://www.businessinsider.com/html5-vs-apps-why-the-debate-matters-and-who-will-win-2012-11
http://ia.net/blog/responsive-typography-the-basics/
http://daverupert.com/2013/04/responsive-deliverables
http://alistapart.com/article/future-ready-content
Responsive design 2
www.flickr.com/photos/st3f4n/4387291247
www.slideshare.net/yiibu/pragmatic-responsive-design
http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others/
http://bradfrostweb.com/blog/mobile/support-vs-optimization/
http://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
Responsive design 3
www.flickr.com/photos/st3f4n/4387291247
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
Navigation for responsive design
www.flickr.com/photos/st3f4n/4387291247
http://www.google.com/analytics/features/mobile-site-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/pragmatic-responsive-design
Devices & sizes
www.flickr.com/photos/st3f4n/4387291247
www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
http://globalmoxie.com/blog/desktop-touch-design.shtml
www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/?goback=%2Egde_79272_member_226720034
Device interaction
www.flickr.com/photos/st3f4n/4387291247
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
Multiple devices & touch input
www.flickr.com/photos/st3f4n/4387291247
http://www.lukew.com/ff/entry.asp?1714
http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won
http://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others
http://www.markboulton.co.uk/journal/theinbetween
http://adactio.com/journal/6044/
http://seesparkbox.com/foundry/there_is_no_breakpoint
Breakpoints 1
www.flickr.com/photos/st3f4n/4387291247
http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
www.slideshare.net/yiibu/pragmatic-responsive-design
http://alistapart.com/article/designing-for-breakpoints
http://dmolsen.com/2013/03/05/media-query-less-design-content-based-breakpoints-tweakpoints/
Breakpoints 2
www.flickr.com/photos/st3f4n/4387291247
www.thismanslife.co.uk/projects/lab/responsivewireframes/
www.thismanslife.co.uk/projects/lab/responsiveillustration/
http://nocturnalmonkey.com/archive/responsive-sketching
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
http://danielmall.com/work/crayola/
Demo, sketching & workflow
www.flickr.com/photos/st3f4n/4387291247
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
Platform guidelines
www.flickr.com/photos/st3f4n/4387291247
http://pttrns.com/
http://mobile-patterns.com/
http://www.patternsofdesign.co.uk/
http://www.mobiledesignpatterngallery.com/mobile-patterns.php
http://www.androidpatterns.com/
http://androidpttrns.com/
http://android.inspired-ui.com/
Pattern libraries
www.flickr.com/photos/st3f4n/4387291247
http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/
http://www.welcomebrand.co.uk/thoughts/website-testing-phone-bundles/
https://bagcheck.com/blog/22-mobile-device-testing-the-gear
Testing
www.flickr.com/photos/st3f4n/4387291247
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/
Testing your responsive design
www.flickr.com/photos/st3f4n/4387291247
http://popapp.in/
http://fieldtestapp.com/
https://www.fluidui.com/
http://www.plunkapp.com/
http://bjango.com/mac/skalapreview/
http://proto.io/
Testing apps & mockups
(ank you. Questions?@annadahlstrom | [email protected]