Slides from my three-part full day workshop of Designing for Multiple Devices class run on the 10th of April 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.
3. Today 10am - 5.30pm
Part 1: Understanding the multiple device landscape
Practice
Lunch
Part 2: Practicalities of multiple device projects
Practice
Break
Part 3: Adapting to input, orientation & the future
Practice
Q & A
10 am
!
12 pm
1 pm
!
3 pm
3.30 pm
4. Part 1: Understanding the
multiple devices landscape
Introduction & defining your mobile strategy
8. 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 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
9. 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
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
23. 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
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=
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
58. 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
66. 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.
Basic iOS
app structure
67. 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.
Basic Android
app structure
68. The good that
adapt to the platform
iOS iOSAndroid Android
69. 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 ‘The app trap’ in .net Magazine
70. Type
to
enter
text
!
!
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
!
There are
different types of apps
73. 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 Magazine
77. “ 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
79. Identify and prioritise the content
across devices & orientations
Desktop/ tablet Mobile
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
84. 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:
TheBRIEF
• About page
• List of offers
• Product pages
• Notifications
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
85. 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:
86. www.flickr.com/photos/pinkpurse/5355919491
02CONTENT 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
87. Define your content stacking strategy
across devices & orientations
Desktop/ tablet Mobile
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
89. www.flickr.com/photos/pinkpurse/5355919491
02CONTENT 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
90. www.flickr.com/photos/pinkpurse/5355919491
03APP 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
91. 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.
Basic iOS
app structure
92. 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.
Basic Android
app structure
93. www.flickr.com/photos/pinkpurse/5355919491
03APP 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
98. 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
101. 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
103. 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
104. 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
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. Top nav or “Do nothing”
keeps the navigation at the top
Via Brad Frost (thank you!)
http://skinnyties.com
PROS
Simple to implement
Less design & development
implications
!
CONS
Not scalable
Potential height issues
110. The toggle
hides 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
111. The left nav flyout
menu 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
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 Brad Frost (thank you!)
http://thenextweb.com
PROS
Scannable
Scalable
!
CONS
Animation performance
Javascript dependent
Barack Obama - image via Stephanie Rieger
114. Right to left
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
115. Skip the sub-nav
next 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
116. 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
117. The 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
122. BBC Sport - desktop
Last but not least, consider navigation
across products & keep it similar
to aid familiarity
BBC Sport - mobile site
BBC Sport - app
126. Android resources
help & inspiration a little less well
documented for earlier versions
127. 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.
Basic iOS
app structure
128. 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.
Basic Android
app structure
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. www.flickr.com/photos/pinkpurse/5355919491
04SIMPLE 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
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
148. Top nav or “Do nothing”
keeps the navigation at the top
Via Brad Frost (thank you!)
http://skinnyties.com
PROS
Simple to implement
Less design & development
implications
!
CONS
Not scalable
Potential height issues
149. The toggle
hides 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
150. The left nav flyout
menu 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
151. www.flickr.com/photos/pinkpurse/5355919491
04SIMPLE 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
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
152. www.flickr.com/photos/pinkpurse/5355919491
05COMPLEX 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
• 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 Brad Frost (thank you!)
http://thenextweb.com
PROS
Scannable
Scalable
!
CONS
Animation performance
Javascript dependent
Barack Obama - image via Stephanie Rieger
154. Right to left
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
155. Skip the sub-nav
next 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
156. 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
157. The 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
158. www.flickr.com/photos/pinkpurse/5355919491
05COMPLEX 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
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
159. www.flickr.com/photos/pinkpurse/5355919491
06APP 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
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
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
174. 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 variations
based on 1,333 observations
during 2 months
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. Image courtesy of Shutterstock
“ Designing for touch means designing for
fingers, yes, but to be more specific, you’re really
designing for thumbs. ”
- Josh Clark
225. Define your content stacking strategy
across devices & orientations
Desktop/ tablet Mobile
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
226. Desktop/ Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related products
2 Header
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
4
Bath
section
intro
6
Types of baths
Define display variations as well as
the elements they are made up of
Desktop/ tablet Mobile
227. Desktop/ Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related products
2 Header
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
4
Bath
section
intro
6
Types of baths
Isolate elements that need to be able to break
out to meet your content stacking strategy
Desktop/ tablet Mobile
229. Desktop/ Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related products
2 Header
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
4
Bath
section
intro
6
Types of baths
Desktop/ tablet Mobile
Little by little you build up a module library
of defined components for your views,
across devices & orientations
230. 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
238. www.flickr.com/photos/pinkpurse/5355919491
07MODULAR, 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
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
240. Define your content stacking strategy
across devices & orientations
Desktop/ tablet Mobile
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
241. Desktop/ Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related products
2 Header
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
4
Bath
section
intro
6
Types of baths
Define display variations as well as
the elements they are made up of
Desktop/ tablet Mobile
242. Desktop/ Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related products
2 Header
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
4
Bath
section
intro
6
Types of baths
Isolate elements that need to be able to break
out to meet your content stacking strategy
Desktop/ tablet Mobile
244. Desktop/ Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related products
2 Header
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
4
Bath
section
intro
6
Types of baths
Desktop/ tablet Mobile
Little by little you build up a module library of
defined components for your views,
across devices & orientations
245. www.flickr.com/photos/pinkpurse/5355919491
07MODULAR, 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
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
246. www.flickr.com/photos/pinkpurse/5355919491
08ADAPTING 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
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
249. There are three main approaches
for adapting to orientation
RE-POSITION REVEAL/ HIDESCALE
250. www.flickr.com/photos/pinkpurse/5355919491
08ADAPTING 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
• Share (on Facebook & Twitter)
• Login & registration
• Overview of number of found & not found item
255. !
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
256. Type to enter text
It’s not just about the
smaller screens but also the big ones
www.flickr.com/photos/jolives/2889944573/