Slides from my three-part full day workshop of Designing for Multiple Devices class run on the 13th of February 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.
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
Three part series - Designing for multiple devices - GA, London, 13 Feb 2014
1. A FULL DAY OF…
Designing for multiple devices
13 February 2014
Anna Dahlström
www.annadahlstrom.com
annadahlstrom
2. I’m Anna
IA & UX designer | freelance since 2011
Swedish | in London since 2006
www.flickr.com/photos/dahlstroms/4411448782
3. Today 10am - 5.30pm
10 am
Part 1: Understanding the multiple device landscape
!
Practice
12 pm
Lunch
1 pm
Part 2: Practicalities of multiple device projects
!
Practice
3 pm
Break
3.30 pm Part 3: Adapting to input, orientation & the future
Practice
Q&A
4. Part 1: Understanding the
multiple devices landscape
Introduction & defining your mobile strategy
5. The world we design for
has become more complex
www.flickr.com/photos/pagedooley/2121472112
6. We used to only have to deal with
different browsers, and the fold
www.flickr.com/photos/jorgeq82/4732700819
7. Today it’s browsers AND endless numbers
of devices & screen sizes
www.flickr.com/photos/adactio/6153481666
8. In 2009 1% of global internet traffic came from
mobiles. By the end of 2012 it had risen to 13% and by
2015 it’s expected 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/nasamarshall/6289116940
9. I have a human that unknown to many
job that is enters the world, five mobile
For every
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/
10. As of Q3 2012 we passed
1 billion smartphones in use
www.flickr.com/photos/raincitystudios/95234968
11. 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
www.flickr.com/photos/jayfresh/3388253576
12. 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
13. 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/jorgeq82/4732700819
14. 40% of people use their phone in the bathroom. *
* Source: http://www.lukew.com/ff/entry.asp?1500
www.flickr.com/photos/exlibris/2552107635
19. Before the first iPhone
the mobile use case was limited
www.flickr.com/photos/frantaylor/4296536332
20. We built separate sites
for mobile & desktop
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
21. In fact, we still do
but we’re noticing something
www.flickr.com/photos/demandaj/7287174776
22. Users expect an equal & continuous
experience across devices
www.flickr.com/photos/joachim_s_mueller/7110473339
23. “ 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/pandiyan/4550066009
24. There are a number
of reasons for this
www.flickr.com/photos/martinteschner/4569495912
25. People carry out the same tasks on
mobiles as they do on desktops
www.flickr.com/photos/philippe/2462550872
26. “ More than half of Amazon customers shopped
using a mobile device this holiday. ” *
* Source: http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=1886961&highlight=
27. Devices & services are getting more
advanced & optimised for complex tasks
www.flickr.com/photos/joeybones/6791201819
28. We no longer own just one device but
multiple & use them interchangeably
www.flickr.com/photos/soyproject/6066959891
29. We want to find what we’re looking for
irrespectively of the device we use
www.flickr.com/photos/visualpunch/7351572896
30. Mobile context ≠ mobile use case
The latter is about the task, the former about
the total sum of the user’s mobile experience
www.flickr.com/photos/icedsoul/2486885051
31. Having separate 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
32. So, what
should we do?
www.flickr.com/photos/tomitapio/4053123799/in/photostream
33. Our main options are bespoke
mobile sites, responsive sites and apps
www.flickr.com/photos/martinteschner/4569495912
34. Bespoke mobile sites 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
35. Responsive sites have the same url
& is basically “one site”
FULL WEBSITE
FULL
WEBSITE
FULL
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
36. Apps, well we all know
they come from app stores
www.flickr.com/photos/paul-r/217948368
37. How do we know
when to do what?
www.flickr.com/photos/tomitapio/4053123799/in/photostream
39. “Today’s popular devices aren’t 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 @oneextrapixel & @trentwalton
www.flickr.com/photos/lastquest/1472794031
40. Two main exceptions:
technical limitations to the CMS, or
if required for the audience
www.flickr.com/photos/st3f4n/3476036180
41. The alternative is
messy & costly
www.flickr.com/photos/ericconstantineau/5618576278
42. It means maintaining
multiple technical solutions...
www.flickr.com/photos/nikio/3899114449
43. ...and also maintaining
multiple versions of your content
www.flickr.com/photos/sharynmorrow/127184319
44. Realistically that means
making cuts & frustrating users
www.flickr.com/photos/bulldogsrule/187693681
45. 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
46. Poor mobile
experiences result in
the same thing - drop offs
www.flickr.com/photos/sixmilliondollardan/2493495506
47. Keep the core content the same
& optimise the experience, display &
interactions to the device
Image courtesy of Shutterstock
55. Analytics of entry points
can also provide some guidance
www.flickr.com/photos/andwhynot/2946734025
56. Mainly direct traffic:
could be an argument for an app
www.flickr.com/photos/haagsuitburo/5349040355
57. Mainly shared links:
ensure your site is optimised for mobile
www.flickr.com/photos/soundslogical/4255801733
58. “ 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
www.flickr.com/photos/dougbelshaw/4360008898
60. Apps are
focused & personal
www.flickr.com/photos/jdhancock/4354438814
61. Not as easy as just
doing an app for e.g. iOS or Android
www.flickr.com/photos/nrkbeta/3906687294/in/photostream
62. Need to consider fragmentation
across different versions &
backwards compatibility
www.flickr.com/photos/aforgrave/6168689222
63. Relative number of active
Android devices across different versions
Source: http://developer.android.com/about/dashboards/index.html
www.flickr.com/photos/blakespot/4773693893
64. Comparison of adoption rate
for iOS7, iOS6 and iOS5
Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker
www.flickr.com/photos/blakespot/4773693893
65. Every platform has their own
ui guidelines that their users are used to
www.flickr.com/photos/gadl/3570118243
66. Basic 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.
67. Basic 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.
68. The good that
adapt to the platform
iOS
Android
iOS
Android
69. ” 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 ‘The app trap’ in .net Magazine
www.flickr.com/photos/dougbelshaw/4360008898
70. There are
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
!
72. Responsive sites have the same url
& is basically “one site”
FULL WEBSITE
FULL
WEBSITE
FULL
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future
73. “ 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 Magazine
www.flickr.com/photos/adactio/5818096043
74. The backbone is
your grid & breakpoints
http://foundation.zurb.com/docs/layout.php
75. Columns & gutters can be
fluid or fixed, or a combination.
http://foundation.zurb.com/docs/layout.php
76. The grid helps with defining modules
for pages & views
www.flickr.com/photos/donsolo/2136923757
77. “ Content needs to be choreographed to
ensure the intended message is preserved on any
device and at any width “
www.flickr.com/photos/theaftershock/2811382400
- Trent Walton
78. Define your content stacking strategy
across devices & orientation.
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
79. Identify and prioritise 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
80. Don’t just work with columns
but think of the narrative of the views
www.flickr.com/photos/garrettc/6260768486/
81. So that it’s carefully
considered, like this
http://thenextweb.com/
82. Mobile or desktop first,
the key is considering the content &
how it will work across devices
84. The 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
85. 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.
What would you recommend in terms of mobile presence & why?
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
86. 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
www.flickr.com/photos/pinkpurse/5355919491
•
•
•
Share (on Facebook & Twitter)
Login & registration
Overview of number of found & not found item
87. Define 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
88. Don’t just work with columns
but think of the narrative of the views
www.flickr.com/photos/garrettc/6260768486/
89. 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
www.flickr.com/photos/pinkpurse/5355919491
•
•
•
Share (on Facebook & Twitter)
Login & registration
Overview of number of found & not found item
90. 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
www.flickr.com/photos/pinkpurse/5355919491
•
•
•
Share (on Facebook & Twitter)
Login & registration
Overview of number of found & not found item
91. Basic 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.
92. Basic 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.
93. 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
www.flickr.com/photos/pinkpurse/5355919491
•
•
•
Share (on Facebook & Twitter)
Login & registration
Overview of number of found & not found item
95. Part 2: Practicalities of
multiple device projects
Common challenges, content strategy, structures,
navigation patterns, testing
96. Some of the most common
challenges with multiple device designs are...
www.flickr.com/photos/helga/3952984450
97. 1. Knowing where to start...
• Define your mobile strategy
• Start sketching
• And work across disciplines
www.flickr.com/photos/pinkpurse/5355919491
98. 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/jorgeq82/4732700819
99. 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/donsolo/2136923757
100. 4. What screen sizes & 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
101. 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.slideshare.net/yiibu/pragmatic-responsive-design
102. 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/nomadic_lass/5598218199
103. “ 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
www.flickr.com/photos/adactio/6153481666
104. 7. How to 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
106. “ 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
www.flickr.com/photos/melodramababs/2766765248
107. Brad Frost 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
108. 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
109. Via B
ra
Top nav or “Do nothing”
keeps the navigation at the top
d Fro
st (th
ank y
ou!)
PROS
Simple to implement
Less design & development
implications
!
CONS
Not scalable
Potential height issues
http://skinnyties.com
110. Via B
ra
The toggle
hides navigation items in a menu
d Fro
PROS
Optimises screen use
Recognised from apps
Scalable
!
CONS
Possible animation
performance problems
Javascript dependent
www.smashingmagazine.com
st (th
ank y
ou!)
111. Via B
ra
d Fro
st (th
The left nav flyout
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
112. Complex 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
113. The multi toggle
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!)
114. Via B
ra
d Fro
Right to left
the next level navigation slides in right to left
st (th
ank y
ou!)
PROS
Nice looking
Follows mobile conventions
Scalable
!
CONS
More complex to implement
Animation performance
www.sony.com
115. Via B
ra
d Fro
st (th
Skip the sub-nav
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!)
116. Via B
ra
d Fro
st (th
Priority+
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
117. Via B
ra
d Fro
st (th
The carousel+
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
119. Use mobile as a reason
to re-consider your navigation
& prioritise search
www.flickr.com/photos/martinteschner/4569495912
120. Consider your project: assess the depth
needed as well as pros & cons of approaches
www.flickr.com/photos/inpivic/5205918163/
121. Define & work with types of navigation:
primary, secondary, tertiary, footer & contextual
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
122. Last but not least, consider navigation
across products & keep it similar
to aid familiarity
BBC Sport - mobile site
BBC Sport - desktop
BBC Sport - app
126. Android resources
help & inspiration a little less well
documented for earlier versions
127. Basic 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.
128. Basic 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.
144. From testing sketches as
paper prototypes or as clickable prototypes...
www.flickr.com/photos/grinblo/8659685975
www.flickr.com/photos/waagsociety/8888907062
145. ...to iterations of
wireframes & designs
www.flickr.com/photos/fluent_methods/6961802861
147. 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 explain how you came to it
Consider 1) Top nav or “do nothing”, 2) The toggle and 3) The left nav flyout in
relation to 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
148. Via B
ra
Top nav or “Do nothing”
keeps the navigation at the top
d Fro
st (th
ank y
ou!)
PROS
Simple to implement
Less design & development
implications
!
CONS
Not scalable
Potential height issues
http://skinnyties.com
149. Via B
ra
The toggle
hides navigation items in a menu
d Fro
PROS
Optimises screen use
Recognised from apps
Scalable
!
CONS
Possible animation
performance problems
Javascript dependent
www.smashingmagazine.com
st (th
ank y
ou!)
150. Via B
ra
d Fro
st (th
The left nav flyout
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
151. 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 explain how you came to it
Consider 1) Top nav or “do nothing”, 2) The toggle and 3) The left nav flyout in
relation to 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
152. 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).
Would this change your navigation recommendation, and if so why?
Define how the navigation should work for desktop and smartphone.
Consider 1) The multi toggle, 2) Right to left, 3) Skip the sub-nav, 4) Priority+, 5)
The carousel+ as well as other ways that a user could navigate to content.
•
•
•
•
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
153. The multi toggle
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!)
154. Via B
ra
d Fro
Right to left
the next level navigation slides in right to left
st (th
ank y
ou!)
PROS
Nice looking
Follows mobile conventions
Scalable
!
CONS
More complex to implement
Animation performance
www.sony.com
155. Via B
ra
d Fro
st (th
Skip the sub-nav
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!)
156. Via B
ra
d Fro
st (th
Priority+
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
157. Via B
ra
d Fro
st (th
The carousel+
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
158. 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).
Would this change your navigation recommendation, and if so why?
Define how the navigation should work for desktop and smartphone.
Consider 1) The multi toggle, 2) Right to left, 3) Skip the sub-nav, 4) Priority+, 5)
The carousel+ as well as other ways that a user could navigate to content.
•
•
•
•
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
159. 06
APP NAVIGATION
With the initial brief having changed from London to UK wide, and with having to
view offers and give aways based on store and type, we need to go back over
what we recommended for the app structure.
Based on what you’ve defined for desktop and smartphone for the
responsive site, how would you do the app navigation?
Consider frequency of use, a level of familiarity between web views and the app.
•
•
•
•
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
161. Part 3: Adapting to input,
orientations & the future
Touch across devices, device orientation, mobile context,
device agnostic design
162. “Today’s popular devices aren’t 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 @oneextrapixel & @trentwalton
www.flickr.com/photos/lastquest/1472794031
167. “ Touch has landed on the desktop. “
- Josh Clark
www.flickr.com/photos/patdavid/9391602153
168. ‘New rule: every desktop design has to go
finger-friendly’*
* Source: http://globalmoxie.com/blog/desktop-touch-design.shtml
www.flickr.com/photos/66327170@N07/7296381856
170. “ 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
171. We should consider touch across all devices &
screen sizes. Not just smartphones & tablets
www.flickr.com/photos/adactio/6153481666
173. 49% of users hold their phone in one hand,
but how they hold it differs
www.flickr.com/photos/jorgeq82/4732700819
174. ONE HAND (R: 66% L: 33%)
Other variations
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
175. 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
176. “ Designing for touch means designing for
fingers, yes, but to be more specific, you’re really
designing for thumbs. ”
- Josh Clark
Image courtesy of Shutterstock
178. We need to 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
179. Our current approach to navigation
is based on the mouse as input
Source: Luke W - www.lukew.com/ff/entry.asp?1649
180. For hybrids we tend to
rest arms & grab bottom corners
www.flickr.com/photos/intelfreepress/6837427202
181. Consider reach & obscuring content
& adjust navigation accordingly
From...
...towards
Source: Luke W - www.lukew.com/ff/entry.asp?1649
182. “ 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
Screenshot from http://polarb.com/polls/tags/mobiledesign
183. Based on the context & use case,
posture, grip & orientation varies
www.flickr.com/photos/chicitoloco/8468592748/in/photostream
www.flickr.com/photos/edduddiee/4307943164
186. Mobile context ≠ mobile use case
The latter is about the task, the former about
the total sum of the user’s mobile experience
www.flickr.com/photos/icedsoul/2486885051
187. The context differs based on
situation, attitudes & preferences
www.flickr.com/photos/hoyvinmayvin/5873697252
188. The same context doesn’t
equal the same situation
www.flickr.com/photos/hoyvinmayvin/5873139941
189. Other aspects to consider
for the mobile context are...
www.flickr.com/photos/icedsoul/2486885051
190. Attention span
data snacking vs. focused usage
www.flickr.com/photos/nadiya95/7217734288/
191. Signal coverage
speed & reliability of the connection
www.flickr.com/photos/arjencito/6531640463/
200. Remember how we can’t
successfully tell what devices users are using
www.flickr.com/photos/adactio/6153481666
201. The web is after all about content.
Not what device we are using
Image courtesy of Shutterstock
202. “ Get your content to go anywhere,
because it’s going to go everywhere. ”
- Brad Frost
www.flickr.com/photos/mirafoto/494444094
203. Aim to make it more future proof
by moving away from specific devices
www.flickr.com/photos/byte/8282578241
204. Use natural breakpoints based on
content layout rather than focusing on devices
www.flickr.com/photos/sharynmorrow/127184319
205. Look at what’s suitable for your content
& best practice for layout principles
www.flickr.com/photos/visualpunch/7351572896
206. It’s not without challenges,
but challenges are meant to be overcome
Image courtesy of Shutterstock
207. “ By default the web has no optimal width, optimal
height, optimal font-size or optimal anything really. ”
- Edward O’Riordan
www.flickr.com/photos/nikio/3899114449
208. “ The 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/soundslogical/4255801733
209. Basing breakpoints on
screen sizes is a temporary
work around
www.flickr.com/photos/gozalewis/3249104929
210. Work with breakpoints & tweakpoints,
focus on content layout & EMS instead of px
www.slideshare.net/yiibu/pragmatic-responsive-design
211. The same with columns,
opt for fluid as much possible
http://foundation.zurb.com/docs/layout.php
212. This brings us back to
the importance of modularity
www.flickr.com/photos/donsolo/2136923757/
213. Less about pages & more focus on
the building blocks that make up those views
www.flickr.com/photos/boltofblue/4418442567
214. No more is it
about beautiful page designs...
www.flickr.com/photos/miuenski/3127285991
215. ...but about views that will look different
across browsers, screen sizes & devices
www.flickr.com/photos/jorgeq82/4732700819
www.flickr.com/photos/adactio/6153481666
216. The more you reuse, the less modules
there will be to design, define and develop
www.flickr.com/photos/boltofblue/4418442567
217. Essential for preventing
ending up with too many pieces
www.flickr.com/photos/akrabat/9085299639
218. This helps meeting requirements
across screen sizes and page views
www.flickr.com/photos/webatelier/5929299679
219. And, it minimises design
& development efforts
www.flickr.com/photos/webatelier/5929855686
220. Good for the
future & the budget
Image courtesy of Shutterstock
221. Responsive design is based on
modular views rather than static pages
www.flickr.com/photos/techsavvyed/5926978939
222. Need to know what you design for
in order to identify & define
what modules to use where
www.flickr.com/photos/songzhen/4893025042
223. As well as what content variations &
sizes you need for different pages & devices
www.flickr.com/photos/songzhen/4893025042
225. Define 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
226. Define display variations as well as
the elements they are made up of
Mobile
Mobile
Desktop/ Tablet
Desktop/ tablet
1
Logo
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
227. Isolate elements that need to be able to break
out to meet your content stacking strategy
Mobile
Mobile
Desktop/ Tablet
Desktop/ tablet
1
Logo
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
228. Adapt to the device & screen in question;
both order & priority as well as interactions,
how much to show & how
www.flickr.com/photos/katherinekenny
229. Mobile
Mobile
Desktop/ Tablet
Desktop/ tablet
1
Logo
2
Header
1
Logo
2 Header
3
Nav
Little by little 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
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
230. “ 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
Screenshot: www.crayola.co.uk/
231. How we approach it depends
on your project, budget and time frame
& if it’s being built externally
www.flickr.com/photos/75905404@N00/7126146307
232. What we cannot do is take
a waterfall approach with responsive design
where we hand over from to the other
www.flickr.com/photos/bingisser/154452815
238. 07
MODULAR, DEVICE AGNOSTIC DESIGN
To ensure our content really can go anywhere we’re going to take a device
agnostic approach to fleshing out the responsive site. For that we need to really
understand the content and how it’s going to flow.
Work through the main pages of the site by identifying what content
that goes on each. Define your main module types & sketch out how
these modules are going to be displayed & adapted across screen sizes.
Think about natural breakpoints, good practice for display of content as well as
how to reuse as much as possible between different views
• 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
240. Define 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
241. Define display variations as well as
the elements they are made up of
Mobile
Mobile
Desktop/ Tablet
Desktop/ tablet
1
Logo
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
242. Isolate elements that need to be able to break
out to meet your content stacking strategy
Mobile
Mobile
Desktop/ Tablet
Desktop/ tablet
1
Logo
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
243. Adapt to the device & screen in question;
both order & priority as well as interactions,
how much to show & how
www.flickr.com/photos/katherinekenny
244. Mobile
Mobile
Desktop/ Tablet
Desktop/ tablet
1
Logo
2
Header
1
Logo
2 Header
Little by little 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
245. 07
MODULAR, DEVICE AGNOSTIC DESIGN
To ensure our content really can go anywhere we’re going to take a device
agnostic approach to fleshing out the responsive site. For that we need to really
understand the content and how it’s going to flow.
Work through the main pages of the site by identifying what content
that goes on each. Define your main module types & sketch out how
these modules are going to be displayed & adapted across screen sizes.
Think about natural breakpoints, good practice for display of content as well as
how to reuse as much as possible between different views
• 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
246. 08
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.
Discuss where this might be applicable and sketch up how the
content could adapt based on device orientation.
Consider desktop/tablet and smartphone as well as how certain orientations are
better for certain tasks
•
•
•
•
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
249. There are three main approaches
for adapting to orientation
SCALE
RE-POSITION
REVEAL/ HIDE
250. 08
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.
Discuss where this might be applicable and sketch up how the
content could adapt based on device orientation.
Consider desktop/tablet and smartphone as well as how certain orientations are
better for certain tasks
•
•
•
•
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
252. Any screen should be
your starting point
www.flickr.com/photos/byte/8282578241
253. “ Every responsive design project is also
a content strategy project. ”
- Karen McGrane
Image courtesy of Shutterstock
254. There is no right way
& the following is just
one way of approaching it
www.flickr.com/photos/jtravism/2417205289
255. Steps for 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
256. It’s not just about the
smaller screens but also the big ones
www.flickr.com/photos/jolives/2889944573/