Three part series - Designing for multiple devices - GA, London, 13 Feb 2014

A FULL DAY OF…

Designing for multiple devices

13 February 2014

Anna Dahlström

www.annadahlstrom.com
annadahlstrom

I’m Anna  
IA & UX designer | freelance since 2011
Swedish | in London since 2006

www.flickr.com/photos/dahlstroms/4411448782

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

Part 1: Understanding the
multiple devices landscape
Introduction & defining your mobile strategy

The world we design for  
has become more complex

www.flickr.com/photos/pagedooley/2121472112

We used to only have to deal with  
different browsers, and the fold
www.flickr.com/photos/jorgeq82/4732700819

Today it’s browsers AND endless numbers
of devices & screen sizes

www.flickr.com/photos/adactio/6153481666

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

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.ﬂickr.com/photos/helga/3952984450/

As of Q3 2012 we passed
1 billion smartphones in use
www.flickr.com/photos/raincitystudios/95234968

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

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

The average person looks at their phone  
150 times a day.*
* Source: www.textually.org/textually/archives/2012/02/030229.htm


40% of people use their phone in the bathroom. *
* Source: http://www.lukew.com/ff/entry.asp?1500

www.flickr.com/photos/exlibris/2552107635

We go online 
everywhere and anywhere


The old myth that mobile users  
are rushed & on the go doesn’t hold true


A large proportion of our usage  
happens when we have time to kill

www.flickr.com/photos/edduddiee/4307943164

This has implications 
for UX & design thinking.

www.flickr.com/photos/eyesore9/3206408088

Before the ﬁrst iPhone  
the mobile use case was limited

www.flickr.com/photos/frantaylor/4296536332

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

In fact, we still do  
but we’re noticing something

www.flickr.com/photos/demandaj/7287174776

Users expect an equal & continuous
experience across devices

www.flickr.com/photos/joachim_s_mueller/7110473339

“ 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

There are a number  
of reasons for this

www.flickr.com/photos/martinteschner/4569495912

People carry out the same tasks on
mobiles as they do on desktops

www.flickr.com/photos/philippe/2462550872

“ 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=

Devices & services are getting more
advanced & optimised for complex tasks

www.flickr.com/photos/joeybones/6791201819

We no longer own just one device but
multiple & use them interchangeably

www.flickr.com/photos/soyproject/6066959891

We want to find what we’re looking for
irrespectively of the device we use

www.flickr.com/photos/visualpunch/7351572896

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

Having separate sites  
does, for the most part, not make sense
DESKTOP

FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE

BESPOKE
CUT
DOWN
WEBSITE


So, what  
should we do?

www.flickr.com/photos/tomitapio/4053123799/in/photostream

Our main options are bespoke  
mobile sites, responsive sites and apps


Bespoke mobile sites have a separate url  
& means maintaining different sites
DESKTOP

FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE

BESPOKE
CUT
DOWN
WEBSITE


Responsive sites have the same url  
& is basically “one site”
FULL WEBSITE
FULL
WEBSITE

FULL
WEBSITE


Apps, well we all know  
they come from app stores

www.flickr.com/photos/paul-r/217948368

How do we know  
when to do what?


Bespoke mobile sites 
should be avoided, if we can

www.flickr.com/photos/edenandjosh/2892956576

“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

Two main exceptions: 
technical limitations to the CMS, or  
if required for the audience

www.flickr.com/photos/st3f4n/3476036180

The alternative is  
messy & costly

www.flickr.com/photos/ericconstantineau/5618576278

It means maintaining  
multiple technical solutions...

www.flickr.com/photos/nikio/3899114449

...and also maintaining  
multiple versions of your content

www.flickr.com/photos/sharynmorrow/127184319

Realistically that means  
making cuts & frustrating users

www.flickr.com/photos/bulldogsrule/187693681

For the ﬁrst 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

Poor mobile  
experiences result in  
the same thing - drop offs

www.flickr.com/photos/sixmilliondollardan/2493495506

Keep the core content the same  
& optimise the experience, display &
interactions to the device


Meet  
responsive design

www.flickr.com/photos/taytom/5277657429

But... 
what about apps?


Whether to do an app  
or not comes down to...


User & business  
objectives...


If you need to utilise  
device specific capabilities...

www.flickr.com/photos/cindyli/3784225848

If oﬄine reading  
is required...

www.flickr.com/photos/arjencito/6531640463

And of course  
budget


Analytics of entry points  
can also provide some guidance

www.flickr.com/photos/andwhynot/2946734025

Mainly direct traﬃc:  
could be an argument for an app

www.flickr.com/photos/haagsuitburo/5349040355

Mainly shared links:  
ensure your site is optimised for mobile

www.flickr.com/photos/soundslogical/4255801733

“ 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

Apps are  
focused & personal

www.flickr.com/photos/jdhancock/4354438814

Not as easy as just  
doing an app for e.g. iOS or Android

www.flickr.com/photos/nrkbeta/3906687294/in/photostream

Need to consider fragmentation  
across different versions &  
backwards compatibility

www.flickr.com/photos/aforgrave/6168689222

Relative number of active  
Android devices across different versions

Source: http://developer.android.com/about/dashboards/index.html

www.flickr.com/photos/blakespot/4773693893

Comparison of adoption rate  
for iOS7, iOS6 and iOS5

Source: www.ﬁksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker

www.flickr.com/photos/blakespot/4773693893

Every platform has their own  
ui guidelines that their users are used to

www.flickr.com/photos/gadl/3570118243

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.

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.

The good that  
adapt to the platform
iOS

Android

iOS

Android

” 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

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
!

“ 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 


The backbone is  
your grid & breakpoints

http://foundation.zurb.com/docs/layout.php

Columns & gutters can be  
fluid or fixed, or a combination.


The grid helps with defining modules  
for pages & views

www.flickr.com/photos/donsolo/2136923757

“ 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

Deﬁne your content stacking strategy
across devices & orientation.

www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/

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

Don’t just work with columns  
but think of the narrative of the views

www.ﬂickr.com/photos/garrettc/6260768486/

So that it’s carefully  
considered, like this
http://thenextweb.com/

Mobile or desktop ﬁrst,  
the key is considering the content &  
how it will work across devices

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

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?

WHAT ARE THE OBJECTIVES & PRACTICALITIES?
• The budget
• The current technical platform
• Could an app be re-used later
• The marketing value of an app

02

CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can
also form the basis for their app presence. Now it’s time to get to work.
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 deﬁne how the content should be
prioritised on desktop & mobile.
The client’s requirements were:
•
•
•
•

About page
List of offers
Product pages
Notifications


•
•
•


Deﬁne your content stacking strategy  
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

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


•
•
•


Part 2: Practicalities of
multiple device projects
Common challenges, content strategy, structures,
navigation patterns, testing

Some of the most common  
challenges with multiple device designs are...

www.flickr.com/photos/helga/3952984450

1. Knowing where to start...
• Define your mobile strategy
• Start sketching
• And work across disciplines


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

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

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

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

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

“ 80% of your traﬃc 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


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

Responsive navigation
patterns

“ 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

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

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

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

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!)

Via B
ra

d Fro

st (th

The left nav ﬂyout 
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

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

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!)

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

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!)

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

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

Theresa Neil’s 
Mobile Design Pattern Gallery

www.mobiledesignpatterngallery.com

Use mobile as a reason  
to re-consider your navigation 
& prioritise search


Consider your project: assess the depth
needed as well as pros & cons of approaches

www.flickr.com/photos/inpivic/5205918163/

Deﬁne & work with types of navigation:  
primary, secondary, tertiary, footer & contextual

http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design

Last but not least, consider navigation  
across products & keep it similar  
to aid familiarity
BBC Sport - mobile site

BBC Sport - desktop

BBC Sport - app

iPhone resources  
help & inspiration well documented

Android resources  
help & inspiration a little less well  
documented for earlier versions

Look for inspiration

http://pttrns.com/categories/13-navigations

Research common approaches

www.uxarchive.com

Start by sketching  
screenflows, navigation & content

www.flickr.com/photos/saucef/7184615025

Avoid using the home screen as a stepping
point. Instead deliver value from first view

www.flickr.com/photos/lindzgraham/5605911999

Bring users straight to  
what they use the most
Facebook

Feedly

Straight in

Flipboard

Hootsuite

Stepping stone

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

In the browser by designing in the browser
& creating a working HTML prototype


Using tools that help you style & test  
your typography before implementing it

http://responsive.is/typecast.com

http://screenqueri.es/
http://quirktools.com/screenfly/

Using emulators that allow you to
view your site across devices & orientations

www.responsinator.com/
http://mattkersley.com/responsive/

On actual devices, though expensive  
there are ways around it

www.flickr.com/photos/arne/5835855777/in/photostream

Buying bundles and sharing,  
hereby helping each other

www.flickr.com/photos/adactio/6800969243/in/photostream

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

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 identiﬁed so far, deﬁne 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


•
•
•


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? 
Deﬁne 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


•
•
•


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 deﬁned 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


•
•
•


Part 3: Adapting to input,
orientations & the future
Touch across devices, device orientation, mobile context,
device agnostic design

We’re already facing
two particular challenges...

www.flickr.com/photos/david_a_lea/3247217194

1. Breakpoints based on  
popular devices puts us into a corner

www.flickr.com/photos/michale/210536054

2. Touch is no longer  
limited to smartphones & tablets

www.flickr.com/photos/lokan/8843464852

“ Touch has landed on the desktop. “
- Josh Clark

www.flickr.com/photos/patdavid/9391602153

‘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

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

We should consider touch across all devices &
screen sizes. Not just smartphones & tablets


www.flickr.com/photos/intelfreepress/6837427202

www.flickr.com/photos/janitors/9968676044

The way we use touch screens differ based
on device, but also across the same device

www.flickr.com/photos/johnkarakatsanis/6902407334


49% of users hold their phone in one hand,
but how they hold it differs


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

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

“ Designing for touch means designing for  
fingers, yes, but to be more specific, you’re really
designing for thumbs. ”
- Josh Clark


Impacts  

controls, placement & interactions

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

Our current approach to navigation  
is based on the mouse as input

Source: Luke W - www.lukew.com/ff/entry.asp?1649

For hybrids we tend to  
rest arms & grab bottom corners

www.flickr.com/photos/intelfreepress/6837427202

Consider reach & obscuring content  
& adjust navigation accordingly

From...

...towards
Source: Luke W - www.lukew.com/ff/entry.asp?1649

“ 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

Based on the context & use case,  
posture, grip & orientation varies

www.flickr.com/photos/chicitoloco/8468592748/in/photostream

www.flickr.com/photos/edduddiee/4307943164

Situational context  
impacts firm vs. loose grip

www.flickr.com/photos/kalexanderson/6716348037

The context differs based on  
situation, attitudes & preferences

www.flickr.com/photos/hoyvinmayvin/5873697252

The same context doesn’t  
equal the same situation

www.flickr.com/photos/hoyvinmayvin/5873139941

Other aspects to consider  
for the mobile context are...

www.flickr.com/photos/icedsoul/2486885051

Attention span  
data snacking vs. focused usage

www.flickr.com/photos/nadiya95/7217734288/

Signal coverage  
speed & reliability of the connection

www.flickr.com/photos/arjencito/6531640463/

Location  
moving about vs. in one location

www.flickr.com/photos/garry61/3191250682

The screen  
small, medium, large & of course touch or not


Posture & grip  
how we sit/ stand as well as  
interact with the device

www.flickr.com/photos/helga/3545310740

Certain orientations are better 
for certain tasks

Reading

Watching

Typing

There are three main approaches  
for adapting to orientation

SCALE

RE-POSITION

REVEAL/ HIDE

Adapting to orientation AND different devices
can become a bit of a mindfield

www.flickr.com/photos/cayusa/534070358

Move away from devices


Remember how we can’t  
successfully tell what devices users are using


The web is after all about content.
Not what device we are using

“ Get your content to go anywhere,  
because it’s going to go everywhere. ”
- Brad Frost
www.flickr.com/photos/mirafoto/494444094

Aim to make it more future proof  
by moving away from specific devices

www.flickr.com/photos/byte/8282578241

Use natural breakpoints based on  
content layout rather than focusing on devices

www.flickr.com/photos/sharynmorrow/127184319

Look at what’s suitable for your content  
& best practice for layout principles

www.flickr.com/photos/visualpunch/7351572896

It’s not without challenges,
but challenges are meant to be overcome


“ 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

“ 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

Basing breakpoints on  
screen sizes is a temporary  
work around

www.flickr.com/photos/gozalewis/3249104929

Work with breakpoints & tweakpoints,  
focus on content layout & EMS instead of px

www.slideshare.net/yiibu/pragmatic-responsive-design

The same with columns,  
opt for fluid as much possible


This brings us back to  
the importance of modularity

www.flickr.com/photos/donsolo/2136923757/

Less about pages & more focus on  
the building blocks that make up those views

www.flickr.com/photos/boltofblue/4418442567

No more is it
about beautiful page designs...

www.flickr.com/photos/miuenski/3127285991

...but about views that will look different
across browsers, screen sizes & devices



The more you reuse, the less modules  
there will be to design, define and develop

www.flickr.com/photos/boltofblue/4418442567

Essential for preventing  
ending up with too many pieces

www.flickr.com/photos/akrabat/9085299639

This helps meeting requirements  
across screen sizes and page views

www.flickr.com/photos/webatelier/5929299679

And, it minimises design  
& development efforts

www.flickr.com/photos/webatelier/5929855686

Good for the  
future & the budget


Responsive design is based on  
modular views rather than static pages

www.flickr.com/photos/techsavvyed/5926978939

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

www.flickr.com/photos/songzhen/4893025042

Start by  

identifying the main module types & common
elements between pages

Deﬁne 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

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

Adapt to the device & screen in question;  
both order & priority as well as interactions,
how much to show & how

www.flickr.com/photos/katherinekenny

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,  
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

“ 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/

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

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

We have to  
work together across disciplines

This includes clients both in terms of  
what they can expect &  
what will be expected of them


Responsive design means
giving up some control to ensure it works  
for as many devices as possible


Ensuring that we do what’s best for  
our clients, our users & us as a company

www.flickr.com/photos/stickkim/7491816206

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. Deﬁne 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

•
•
•


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,  
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

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


•
•
•


Any screen should be  
your starting point


“ Every responsive design project is also  
a content strategy project. ”
- Karen McGrane

There is no right way  
& the following is just  
one way of approaching it

www.flickr.com/photos/jtravism/2417205289

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

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

Remember to test & iterate,  
sketch as much as possible  
& work collaboratively

www.flickr.com/photos/jdhancock/4354438814

“ Every time you redesign God kills a kitten “
- Louis Rosenfeld

www.flickr.com/photos/matterphotography/2739799786

Responsive design 1
http://bradfrost.github.io/this-is-responsive/resources.html
http://mediaqueri.es/popular/
http://www.alistapart.com/articles/responsive-web-design/
http://designmodo.com/responsive-design-examples/
http://jamus.co.uk/demos/rwd-demonstrations/
http://www.gridsetapp.com/
http://grid.mindplay.dk
http://goldengridsystem.com/


Responsive design 2
http://www.netmagazine.com/opinions/designingbrowser
http://www.businessinsider.com/html5-vs-apps-whythe-debate-matters-and-who-will-win-2012-11
http://ia.net/blog/responsive- 
typography-the-basics/
http://daverupert.com/2013/04/ 
responsive-deliverables
http://alistapart.com/article/ 
future-ready-content
http://alistapart.com/blog/post/getting-started-withpattern-libraries
http://bradfrostweb.com/blog/post/atomic-webdesign/

Responsive design 3
www.slideshare.net/yiibu/pragmatic-responsivedesign
http://stephanierieger.com/on-designing-content-outa-response-to-zeldman-and-others/
http://bradfrostweb.com/blog/mobile/support-vsoptimization/
http://stuffandnonsense.co.uk/blog/about/
we_need_a_standard_show_navigation_icon_for_resp
onsive_web_design
http://bradfrostweb.com/blog/mobile/anatomy-of-amobile-first-responsive-web-design/


Navigation for responsive design
http://bradfrostweb.com/blog/web/responsive-navpatterns/
http://bradfrostweb.com/blog/web/complexnavigation-patterns-for-responsive-design/
http://palantir.net/blog/scalable-navigation-patternsresponsive-web-design
!
!
!


Devices & sizes
http://www.google.com/analytics/features/mobilesite-traffic.html
http://en.wikipedia.org/wiki/
List_of_displays_by_pixel_density
http://opensignal.com/reports/fragmentation-2013/
https://deviceatlas.com/device-data/devices
Slide 37: 
http://www.slideshare.net/yiibu/pragmaticresponsive-design
!
!
!


Device interaction
www.uxmatters.com/mt/archives/2013/02/how-dousers-really-hold-mobile-devices.php
http://globalmoxie.com/blog/desktop-touchdesign.shtml
www.uxbooth.com/articles/designing-for-mobilepart-2-interaction-design/?goback=
%2Egde_79272_member_226720034
!
!
!


Multiple devices & touch input
www.lukew.com/ff/entry.asp?1649
http://www.lukew.com/ff/entry.asp?1721
http://www.uxmatters.com/mt/archives/2013/03/
common-misconceptions-about-touch.php
!

Examples:
http://polarb.com/polls/tags/mobiledesign
!
!
!


Breakpoints 1
http://www.lukew.com/ff/entry.asp?1714
http://elliotjaystocks.com/blog/ 
responsive-web-design-the-war-has-not-yet-beenwon
http://stephanierieger.com/on- 
designing-content-out-a-response-to-zeldman-andothers
http://www.markboulton.co.uk/ 
journal/theinbetween
http://adactio.com/journal/6044/
http://seesparkbox.com/foundry/
there_is_no_breakpoint


Breakpoints 2
http://www.smashingmagazine.com/ 
2013/03/01/logical-breakpoints- 
responsive-design/
www.slideshare.net/yiibu/pragmatic- 
responsive-design
http://alistapart.com/article/designing-forbreakpoints
http://dmolsen.com/2013/03/05/media-query-lessdesign-content-based-breakpoints-tweakpoints/
!


Demo, sketching & workflow
www.thismanslife.co.uk/projects/lab/
responsivewireframes/
www.thismanslife.co.uk/projects/lab/
responsiveillustration/
http://nocturnalmonkey.com/archive/responsivesketching
http://jeremypalford.com/arch-journal/responsiveweb-design-sketch-sheets
http://danielmall.com/work/crayola/
!
!
!


Platform guidelines
https://developer.apple.com/library/ios/
documentation/UserExperience/Conceptual/
MobileHIG/index.html#//apple_ref/doc/uid/
TP40006556
http://mrgan.tumblr.com/post/10492926111/
labeling-the-back-button
http://developer.android.com/design/index.html
!
!


Pattern libraries (of app designs)
http://pttrns.com/
http://mobile-patterns.com/
http://www.patternsofdesign.co.uk/
http://www.mobiledesignpatterngallery.com/mobilepatterns.php
http://www.androidpatterns.com/
http://androidpttrns.com/
http://android.inspired-ui.com/
!
!


Testing
http://bradfrostweb.com/blog/mobile/test-on-realmobile-devices-without-breaking-the-bank/
http://www.welcomebrand.co.uk/thoughts/websitetesting-phone-bundles/
https://bagcheck.com/blog/22-mobile-device-testingthe-gear
!
!
!


Testing your responsive design
http://responsive.is/typecast.com
http://screenqueri.es/
http://www.responsinator.com/
http://quirktools.com/screenfly/
http://mattkersley.com/responsive/
http://responsivepx.com/
http://protofluid.com/
http://responsiveviewport.com/
http://www.browserstack.com/


Testing apps & mockups
http://popapp.in/
http://fieldtestapp.com/
https://www.fluidui.com/
http://www.plunkapp.com/
http://bjango.com/mac/skalapreview/
http://proto.io/
https://marvelapp.com/
!
!
!


Thank you. Questions?
@annadahlstrom | anna.dahlstrom@gmail.com
www.annadahlstrom.com

Three part series - Designing for multiple devices - GA, London, 13 Feb 2014

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

More from Anna Dahlström

More from Anna Dahlström (20)

Recently uploaded

Recently uploaded (20)

Three part series - Designing for multiple devices - GA, London, 13 Feb 2014