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

3 classes
in 1

AN EVENING OF

D!"#$%#%$ for multiple devices

20 January 2014

Anna Dahlström

www.annadahlstrom.com
annadahlstrom

I’& A%%'
IA & UX designer | freelance since 2011
Swedish | in London since 2006

www.flickr.com/photos/dahlstroms/4411448782

(#" !v!%#%$
6.00 pm P'r) 1: Understanding the multiple device landscape
Practice
7.00 pm Break
7.15 pm P'r) 2: Practicalities of multiple device projects
Practice
8.15 pm Break
8.30 pm P'r) 3: Adapting to input, orientation & the future
Practice
Q&A

P'r) 1: Understanding the
multiple devices landscape
Introduction & defining your mobile strategy

(! w*r+, we design for
has become more complex

www.flickr.com/photos/pagedooley/2121472112

W! -"!, )* only have to deal with
different browsers, and the fold
www.flickr.com/photos/jorgeq82/4732700819

T*,'. #)’" br*w"!r" AND endless numbers
of devices & screen sizes

www.flickr.com/photos/adactio/6153481666

I% 2009 1% of global internet traffic came from
mobiles. By the end of 2012 it had risen to 13% and by
2015 #)’" /p!0)!, )* b! 'b*v! 50%.*
* Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile

www.flickr.com/photos/nasamarshall/6289116940

A" *f Q3 2012 we passed
1 billion smartphones in use
www.flickr.com/photos/raincitystudios/95234968

I 1'v! ' 2*b )1') #" -%3%*w% )* &'%.
F*r !v!r. 1-&'% that enters the world, five mobile
I’devices are created.*UX designer
m a freelance IA &
* Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx

www.flickr.com/photos/hlkljgk/5764422581
www.ﬂickr.com/photos/helga/3952984450/

41% *f !&'#+" are now opened on mobile devices *
* Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices

www.flickr.com/photos/jayfresh/3388253576

B. )1! !%, *f 2013, mobile phones will overtake PCs
as the most common web access device worldwide*
Source: www.gartner.com/newsroom/id/2429815
Image courtesy of Shutterstock

The average person looks at their phone
150 )#&!" ' ,'..*
* Source: www.textually.org/textually/archives/2012/02/030229.htm


40% *f p!*p+! use their phone in the bathroom. *
* Source: http://www.lukew.com/ff/entry.asp?1500

www.flickr.com/photos/exlibris/2552107635

W! $* *%+#%!
everywhere and anywhere


(! *+, &.)1 that mobile users
are rushed & on the go doesn’t hold true


A +'r$! pr*p*r)#*% of our usage
happens when we have time to kill

www.flickr.com/photos/edduddiee/4307943164

(#" 1'" #&p+#0')#*%"
for UX & design thinking.

www.flickr.com/photos/eyesore9/3206408088

B!f*r! )1! 4r") #P1*%!
the mobile use case was limited

www.flickr.com/photos/frantaylor/4296536332

W! b-#+) separate sites
for mobile & desktop
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE

BESPOKE
CUT
DOWN
WEBSITE

http://desktopwallpaper-s.com/19-Computers/-/Future

I% f'0), we still do
but we’re noticing something

www.flickr.com/photos/demandaj/7287174776

U"!r" /p!0) an equal & continuous
experience across devices

www.flickr.com/photos/joachim_s_mueller/7110473339

“ 7 *-) *f 10 smartphone and tablet users expect the
same quality of experience on all devices. ” *
* Source: www.vibrantmedia.co.uk/press/press.asp?section=press_releases&id=256

www.flickr.com/photos/pandiyan/4550066009

(!r! 'r! a number
of reasons for this

www.flickr.com/photos/martinteschner/4569495912

P!*p+! 0'rr. *-) the same tasks on
mobiles as they do on desktops

www.flickr.com/photos/philippe/2462550872

D!v#0!" & "!rv#0!" are getting more
advanced & optimised for complex tasks

www.flickr.com/photos/joeybones/6791201819

W! %* +*%$!r *w% just one device but
multiple & use them interchangeably

www.flickr.com/photos/soyproject/6066959891

W! w'%) )* find what we’re looking for
irrespectively of the device we use

www.flickr.com/photos/visualpunch/7351572896

M*b#+! 0*%)/) ≠ &*b#+! -"! 0'"!
The latter is about the task, the former about
the total sum of the user’s mobile experience

www.flickr.com/photos/icedsoul/2486885051

H'v#%$ "!p'r')! sites
does, for the most part, not make sense
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE

BESPOKE
CUT
DOWN
WEBSITE


S*, w1')
should we do?

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

O-r &'#% *p)#*%" are bespoke
mobile sites, responsive sites and apps


B!"p*3! &*b#+! "#)!" have a separate url
& means maintaining different sites
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE

BESPOKE
CUT
DOWN
WEBSITE


R!"p*%"#v! "#)!" have the same url
& is basically “one site”
FULL WEBSITE
FULL
WEBSITE

FULL
WEBSITE


App", well we all know
they come from app stores

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

H*w do we know
when to do what?


B!"p*3! &*b#+! "#)!"
should be avoided, if we can

www.flickr.com/photos/edenandjosh/2892956576

“T*,'.’" p*p-+'r ,!v#0!" 'r! %*) )*&*rr*w'" so
building something which works on any device is better
than building something which works on
today's devices“
- C*&b#%!, w#"! w*r," fr*& @*%!/)r'p5!+ & @)r!%)w'+)*%

www.flickr.com/photos/lastquest/1472794031

Tw* &'#% /0!p)#*%":
technical limitations to the CMS, or
if required for the audience

www.flickr.com/photos/st3f4n/3476036180

(! '+)!r%')#v! is
messy & costly

www.flickr.com/photos/ericconstantineau/5618576278

I) &!'%" maintaining
multiple technical solutions...

www.flickr.com/photos/nikio/3899114449

...'%, '+"* maintaining
multiple versions of your content

www.flickr.com/photos/sharynmorrow/127184319

R!'+#")#0'++. that means
making cuts & frustrating users

www.flickr.com/photos/bulldogsrule/187693681

F*r )1! 4r") )#&! smartphones and tablets made up
more than one-third of total clicks on Google in Q3*
* Source: http://econsultancy.com/uk/blog/63605-us-mobile-paid-search-spend-up-66-year-on-year-stats

www.flickr.com/photos/antoniolas/4367543346

P**r &*b#+!
experiences result in
the same thing - drop offs

www.flickr.com/photos/sixmilliondollardan/2493495506

K!!p )1! 0*r! content the same
& optimise the experience, display &
interactions to the device


M!!)
responsive design

www.flickr.com/photos/taytom/5277657429

B-)...
what about apps?


W1!)1!r )* do an app
or not comes down to...


U"!r & b-"#%!""
objectives...


If .*- %!!, to utilise
device specific capabilities...

www.flickr.com/photos/cindyli/3784225848

If *ﬄ#%! r!',#%$
is required...

www.flickr.com/photos/arjencito/6531640463

A%, *f 0*-r"!
budget


A%'+.)#0" of entry points
can also provide some guidance

www.flickr.com/photos/andwhynot/2946734025

M'#%+. ,#r!0) )r'ﬃ0:
could be an argument for an app

www.flickr.com/photos/haagsuitburo/5349040355

M'#%+. "1'r!, +#%3":
ensure your site is optimised for mobile

www.flickr.com/photos/soundslogical/4255801733

“ D*%’) b-#+, '% 'pp f*r )1! "'3! *f #). Focus on
the goal of your mobile initiatives, prioritize your
company’s needs, and choose a solution that can best
address these needs now and into the future.* ”
* Source: http://success.adobe.com/en/na/programs/products/digitalmarketing/offers/apr/1304-32060-2013-optimization-survey-results.html

www.flickr.com/photos/dougbelshaw/4360008898

App" are
focused & personal

www.flickr.com/photos/jdhancock/4354438814

N*) '" !'". '" just
doing an app for e.g. iOS or Android

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

N!!, )* 0*%"#,!r fragmentation
across different versions &
backwards compatibility

www.flickr.com/photos/aforgrave/6168689222

R!+')#v! %-&b!r of active
Android devices across different versions

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

www.flickr.com/photos/blakespot/4773693893

C*&p'r#"*% *f adoption rate
for iOS7, iOS6 and iOS5

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

www.flickr.com/photos/blakespot/4773693893

Ev!r. p+')f*r& has their own
ui guidelines that their users are used to

www.flickr.com/photos/gadl/3570118243

” M*%!. "p!%) developing a pretty but limited iPhone
app only benefits [...] the few, but money spent on the
website UI would have benefitted everyone. ”
- G'r. M'r"1'++ *% ‘(! 'pp )r'p’ #% .%!) M'$8#%!

www.flickr.com/photos/dougbelshaw/4360008898

(!r! 'r!
different types of apps
NATIVE APPS (e.g. Instagram)

• MOST OPTIMISED USER EXPERIENCE
• ACCESS TO DEVICE CAPABILITIES & APIs
• BUT REQUIRES PLATFORM SPECIFIC CODE BASE
HYBRID (e.g. First Facebook, Basecamp)

• USE OF HTML5 & JAVASRIPT
• WRAPPER TO PROVIDE NATIVE CAPABILITIES
• FEWER “VERSIONS” TO MAINTAIN
• BUT CAN BE TIME CONSUMING TO CREATE APP LIKE INTERACTIONS
• CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES

“ D!"#$% & ,!v!+*p&!%) "1*-+, r!"p*%, to the
user’s behaviour & environment based on screen size,
platform & orientation. [It’s]...a mix of flexible grids &
layouts, images & an intelligent use of media queries. “
- S&'"1#%$ M'$8#%!


(! b'03b*%! #"
your grid & breakpoints

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

C*+-&%" & $-))!r" can be
fluid or fixed, or a combination.


(! $r#, 1!+p" w#)1 defining modules
for pages & views

www.flickr.com/photos/donsolo/2136923757

“ C*%)!%) %!!," )* b! 01*r!*$r'p1!, to
ensure the intended message is preserved on any
device and at any width “
www.flickr.com/photos/theaftershock/2811382400

- Tr!%) W'+)*%

D!4%! .*-r content stacking strategy
across devices & orientation.

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

I,!%)#f. '%, pr#*r#)#"! the content
across devices & orientations
Mobile

Desktop/ tablet
1
Logo

1
Logo

2
Header

4
Bath section intro

5
Ad

3
Nav

8 Store
locator

6
Types of baths

2 Header
3
Nav

4
Bath
section
intro

5
Ad

7
Related
products
6
Types of baths

9 Tools

10
Footer
7
Related products

8 Store
locator

9 Tools

10
Footer

D*%’) 2-") work with columns
but think of the narrative of the views

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

S* )1') #)’" 0'r!9++.
considered, like this
http://thenextweb.com/

M*b#+! *r ,!"3)*p 4r"),
the key is considering the content &
how it will work across devices

(! BRIEF
A big retail store has asked you to come up with a Easter Hunt across London
where offers and give aways are hidden at certain locations. There will only be a
certain number of items available each day & they want to be able to notify
people when an item has been found.
The site/app should support finding offers nearby, and location should be a key
The following should also be included:
•
•
•
•

About page
List of offers
Product pages
Notifications

www.flickr.com/photos/pinkpurse/5355919491

•
•
•

Share (on Facebook & Twitter)
Login & registration
Overview of number of found & not found item

01

BESPOKE MOBILE SITE
VS. RESPONSIVE VS. AN APP

The client has come to you with the Easter hunt idea and are asking for your
advice on what they should be doing.
W1') w*-+, .*- r!0*&&!%, #% )!r&" *f &*b#+! pr!"!%0! & w1.?
A bespoke mobile site, responsive site, an app or a combination?
Consider:
HOW WOULD MOST PEOPLE ACCESS IT?
• Direct traffic vs. shared links?
WHAT DO YOU NEED IT TO DO?
• Device specific capabilities needed?
• Is offline reading/ usage required?

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

02

CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can
also form the basis for their app presence. Now it’s time to get to work.
F*r )1! 1*&! p'$! *%+. ,* ' r*-$1 "3!)01 *f w1') )1! p'$! "1*-+,
0*%)'#% & 1*w )1! 0*%)!%) "1*-+, b! pr#*r#)#"!,.
U"#%$ 0*%)!%) ")'03#%$ &!)1*,*+*$. ,!4%! 1*w )1! 0*%)!%) "1*-+,
b! pr#*r#)#"!, *% ,!"3)*p & &*b#+!.
The client’s requirements were:
•
•
•
•

About page
List of offers
Product pages
Notifications


•
•
•


D!4%! 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

P'r) 2: Practicalities of
multiple device projects
Common challenges, content strategy, structures,
navigation patterns, testing

S*&! *f )1! most common
challenges with responsive design are...

www.flickr.com/photos/helga/3952984450

1. K%*w#%$ where to start...
• Define your mobile strategy
• Start sketching
• And work across disciplines


2. H*w &'%. versions to wireframe...
• Depends on your project, budget & team as well as who’s
building it
• Focus on identifying key templates & then the modules
that make up the views

3. H*w )* 'ppr*'01 visual design
• Less static designs
• Focus on modules & modularity
• Continuously prototype to test how the content behaves

www.flickr.com/photos/donsolo/2136923757

4. W1') "0r!!% ";!" & which resolutions?
• Use analytics as a guidance
• Ensure it works for the most common ones
• Design as device agnostic as possible

www.flickr.com/photos/dpstyles/3448453466

5. H*w )* define breakpoints
• As much possible let the content be the guide
• Use breakpoints & tweakpoints & EMS instead of px
• Consult analytics for devices to identify most important

screen sizes & ensure content displays properly for those
• If all things fail, use screen sizes for mayor layout changes
www.slideshare.net/yiibu/pragmatic-responsive-design

6. H*w &'%. devices to test on
• As many as possible
• Prioritise based on your audience
• Use research & analytics for guidance

www.flickr.com/photos/nomadic_lass/5598218199

“ 80% *f .*-r )r'ﬃ0 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. H*w )* handle images
•
•
•
•
xxx

Images & icons should be as flexible as possible
Consider load times & page weight
Look at ways for loading smaller images first
Take the image in question into consideration

R!"p*%"#v! navigation
patterns

“ M*b#+! %'v#$')#*% should be like a good friend:
there when you need them but cool enough to give you
your space. “
* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns

www.flickr.com/photos/melodramababs/2766765248

Br', Fr<) has written 2 excellent posts
on Responsive navigation patterns

xxx

http://bradfrostweb.com/blog/web/responsive-nav-patterns
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design

L!)’" take a closer look...

www.flickr.com/photos/suttonhoo22/2070700035

S#&p+! navigation patterns
1) Top nav or “do nothing”
2) The toggle
3) The left nav flyout

http://bradfrostweb.com/blog/web/responsive-nav-patterns

Via B
ra

d Fro
st (th

T*p %'v *r “D* %*)1#%$”
keeps the navigation at the top

ank y
ou!)

PROS
Simple to implement
Less design & development
implications
CONS
Not scalable
Potential height issues

http://skinnyties.com

Via B
ra

d Fro
st (th

(! )*$$+!
hides navigation items in a menu
PROS

Optimises screen use
Recognised from apps
Scalable
CONS
Possible animation
performance problems
Javascript dependent
www.smashingmagazine.com

ank y
ou!)

Via B
ra

d Fro
st (th

(! +!= %'v >.*-)
menu items are accessed from a tray sliding in

ank y
ou!)

PROS
Space generous
Recognised nav pattern from
apps
CONS
More advanced and doesn’t
work on all devices
Images from Barack Obama via Brad Frost

C*&p+/ navigation patterns
1) The multi toggle
2) Right to left
3) Skip the sub-nav
4) Priority+
5) The carousel+
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design

(! &-+)# )*$$+!
nested navigation grouped under a menu

Via B
ra

d Fro
st (th

PROS
Scannable
Scalable
CONS
Animation performance
Javascript dependent

http://thenextweb.com

Barack Obama - image via Stephanie Rieger

ank y
ou!)

Via B
ra

d Fro
st (th

R#$1) )* +!=
the next level navigation slides in right to left

ank y
ou!)

PROS
Nice looking
Follows mobile conventions
Scalable
CONS
More complex to implement
Animation performance

www.sony.com

Via B
ra

d Fro
st (th

S3#p )1! "-b-%'v
next level navigation is displayed on that level
PROS
Simple
Removes complexities
around sub-navigation
CONS

Re-quires page refresh &
visit for access

http://worldwildlife.org

ank y
ou!)

Via B
ra

d Fro
st (th

Pr#*r#).+
shows most important & hides the rest in a menu
ank y
ou!)

PROS
Simple
Supports (supposedly) most
used)
Scalable
CONS
Hides potentially important
items

www.bbc.co.uk/sport

Via B
ra

d Fro
st (th

(! 0'r*-"!++
carousel for main sections, sub-nav when in focus
ank y
ou!)

PROS
Easy to navigate
Suitable for touch
CONS
Doesn’t display all parent
categories at once
Less good for non-touch
devices
Not suitable for multi-level
sub-navs
Image from Intel via Brad Frost

(!r!"' N!#+’"
Mobile Design Pattern Gallery

www.mobiledesignpatterngallery.com

U"! &*b#+! as a reason
to re-consider your navigation
& prioritise search


C*%"#,!r .*-r pr*2!0): assess the depth
needed as well as pros & cons of approaches

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

D!4%! & w*r3 w#)1 )?!" of navigation:
primary, secondary, tertiary, footer & contextual

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

L'") b-) %*) +!'"), consider navigation
across products & keep it similar
to aid familiarity
BBC Sport - mobile site

BBC Sport - desktop

BBC Sport - app

#P1*%! r!"*-r0!"
help & inspiration well documented

A%,r*#, r!"*-r0!"
help & inspiration a little less well
documented for earlier versions

B'"#0 iOS
app structure
CONSISTENT ACROSS VERSIONS
NAVIGATION BAR
Enables navigation through the app
hierarchy. Holds the back button,
controls for managing screen content &
the title of the screen.

BACK BUTTON
Should always take the user one step back from where
they came from & be descriptive.

TAB BAR
Can often be customised. Holds the main sections of the
app.

‘MORE’ TAB BAR ITEM
Used to hold & provide access to all other sections of the
app that don’t fit in the tab bar.

B'"#0 Android
app structure
DIFFERENT BETWEEN VERSIONS:
NAVIGATION BAR
For devices that don't have the
hardware keys. Holds 'Back', 'Home'
and 'Recents'

ACTION BAR
Holds the most important action buttons for your app (3 +
overflow menu)

UP VS. BACK BUTTON
The Up button is used to navigate up one level based on
the hierarchical structure of the site.
Back is used to navigate back one step from where you
came from & as such works in reverse chronological order.

S)'r) b. sketching
screenflows, navigation & content

www.flickr.com/photos/saucef/7184615025

R!"!'r01 common approaches

www.uxarchive.com

Av*#, using the home screen as a stepping
point. Instead deliver value from first view

www.flickr.com/photos/lindzgraham/5605911999

T!")#%$ apps
& responsive designs

T!")

as early as possible
& then continuously

I% )1! br*w"!r by resizing the browser
window & checking the display of content

http://thenextweb.com

I% )1! br*w"!r by designing in the browser
& creating a working HTML prototype


U"#%$ )**+" that help you style & test
your typography before implementing it

http://responsive.is/typecast.com

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

U"#%$ !&-+')*r" that allow you to
view your site across devices & orientations

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

O% '0)-'+ ,!v#0!", though expensive
there are ways around it

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

B-.#%$ b-%,+!" and sharing,
hereby helping each other

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

W#)1 -"!r" define your
objectives, audience, test cases,
consider expectations & limitations


T!")#%$ 'pp"

flow, navigation, interactions, transitions

Fr*& testing sketches as
paper prototypes or as clickable prototypes...

www.flickr.com/photos/grinblo/8659685975

www.flickr.com/photos/waagsociety/8888907062

...)* iterations of
wireframes & designs

www.flickr.com/photos/fluent_methods/6961802861

03

APP STRUCTURE

With a better idea of the content for the Easter Hunt campaign, work also begins
on the app. Based on the content & functionality requirements as well as what
you know, consider what would be suitable to include in the app.
F*0-"#%$ *%+. *% )1! 'pp %'v#$')#*% 1*w w*-+, .*- ")r-0)-r! )1#" #f
.*- w!r! )* ,* '% #OS 'pp & '% A%,r*#, 'pp?
Look at the Tab bar items respectively Action bar items & what would go in them
as well as the ‘More’ respectively ‘Overflow menu’.
•
•
•
•

About page
List of offers
Product pages
Notifications


•
•
•


04

SIMPLE RESPONSIVE NAVIGATION

Now that you have a good understanding of the content and the main sections,
it’s time to tackle the navigation for the responsive site.
B'"!, *% w1') .*-’v! #,!%)#4!, "* f'r, ,!4%! 1*w )1! %'v#$')#*% w#++
w*r3 f*r ,!"3)*p '%, "&'r)p1*%! '%, /p+'#% 1*w .*- 0'&! )* #)
Consider what you need, future aspects, cross device patterns and the client’s
requirements:
•
•
•
•

About page
List of offers
Product pages
Notifications


•
•
•


05

COMPLEX RESPONSIVE NAVIGATION

The client loves the work that you’ve done so far and other cities in the UK wants
the campaign in their city too, so it’s going UK wide.
A decision has also been made to support viewing offers and give aways by store
(e.g. Marks & Spencers) and type (e.g. restaurants, fashion, entertainment).
H*w w*-+, )1#" 01'%$! .*-r %'v#$')#*% r!0*&&!%,')#*% '%, w1.?
Define the navigation for desktop and smartphone.
•
•
•
•

About page
List of offers
Product pages
Notifications


•
•
•


P'r) 3: Adapting to input,
orientations & the future
Touch across devices, device orientation, mobile context,
device agnostic design

W!’r! already facing
two particular challenges...

www.flickr.com/photos/david_a_lea/3247217194

1. Br!'3p*#%)" based on
popular devices puts us into a corner

www.flickr.com/photos/michale/210536054

2. T*-01 is no longer
limited to smartphones & tablets

www.flickr.com/photos/lokan/8843464852

“ T*-01 has landed on the desktop. “
- J<1 C+'r3

www.flickr.com/photos/patdavid/9391602153

‘N!w r-+!: every desktop design has to go
finger-friendly’*
* Source: http://globalmoxie.com/blog/desktop-touch-design.shtml
www.flickr.com/photos/66327170@N07/7296381856

“ T*-01 "0r!!% +'p)*p "'+!" have jumped 52% in
the last quarter. 5 years from now you will not be able to
buy a Windows computer without a touch screen. ”*
* Source: http://www.lukew.com/ff/entry.asp?1750

Screenshot from www.currys.co.uk

W! "1*-+, consider touch across all devices
& screen sizes. Not just smartphones & tablets


www.flickr.com/photos/intelfreepress/6837427202

www.flickr.com/photos/janitors/9968676044

(! w'. we use touch screens differ based
on device, but also across the same device

www.flickr.com/photos/johnkarakatsanis/6902407334


49% *f -"!r" hold their phone in one hand,
but how they hold it differs


ONE HAND (R: 66% L: 33%)

O)1!r v'r#')#*%"
based on 1,333 observations
during 2 months

72%

28%

CRADLING (L: 79% R: 21%)

90%

10%

TWO HANDS
Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

H*+,#%$ our devices
is not a static stage. It changes

Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

“ D!"#$%#%$ f*r )*-01 means designing for
fingers, yes, but to be more specific, you’re really
designing for thumbs. ”
- J<1 C+'r3


I&p'0)"

controls, placement & interactions

W! %!!, )* consider
precise (e.g. mouse) v.s imprecise (e.g. fingers)
input means

www.flickr.com/photos/ljrmike/7675757042

www.flickr.com/photos/jmtimages/2883279193

O-r 0-rr!%) 'ppr*'01 to navigation
is based on the mouse as input

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

F*r 1.br#," we tend to
rest arms & grab bottom corners

www.flickr.com/photos/intelfreepress/6837427202

C*%"#,!r reach & obscuring content
& adjust navigation accordingly

From...

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

“ L**3#%$ ') the Polar interface on a laptop can be a
bit disconcerting because we’ve essentially left the
middle of the page “blank”. ”
- L-3! W
Screenshot from http://polarb.com/polls/tags/mobiledesign

B'"!, *% the context & use case,
posture, grip & orientation varies

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

www.flickr.com/photos/edduddiee/4307943164

C!r)'#% *r#!%)')#*%" are better
for certain tasks

Reading

Watching

Typing

(!r! 'r! three main approaches
for adapting to orientation

SCALE

RE-POSITION

REVEAL/ HIDE

S#)-')#*%'+ 0*%)/)
impacts firm vs. loose grip

www.flickr.com/photos/kalexanderson/6716348037

(! 0*%)/) differs based on
situation, attitudes & preferences

www.flickr.com/photos/hoyvinmayvin/5873697252

(! "'&! 0*%)/) doesn’t
equal the same situation

www.flickr.com/photos/hoyvinmayvin/5873139941

O)1!r '"p!0)" to consider
for the mobile context are...

www.flickr.com/photos/icedsoul/2486885051

A))!%)#*% "p'%
data snacking vs. focused usage

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

S#$%'+ 0*v!r'$!
speed & reliability of the connection

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

L*0')#*%
moving about vs. in one location

www.flickr.com/photos/garry61/3191250682

(! "0r!!%
small, medium, large & of course touch or not


P<)-r! & $r#p
how we sit/ stand as well as
interact with the device

www.flickr.com/photos/helga/3545310740

A,'p)#%$ )* orientation AND different devices
can become a bit of a mindfield

www.flickr.com/photos/cayusa/534070358

M*v! 'w'. from devices


R!&!&b!r 1*w we can’t
successfully tell what devices users are using


(! w!b is after all about content.
Not what device we are using

“ G!) .*-r 0*%)!%) to go anywhere,
because it’s going to go everywhere. ”
- Br', Fr<)
www.flickr.com/photos/mirafoto/494444094

A#& )* make it more future proof
by moving away from specific devices

www.flickr.com/photos/byte/8282578241

U"! %')-r'+ breakpoints based on
content layout rather than focusing on devices

www.flickr.com/photos/sharynmorrow/127184319

L**3 ') what’s suitable for your content
& best practice for layout principles

www.flickr.com/photos/visualpunch/7351572896

I)’" %*) without challenges,
but challenges are meant to be overcome


“ B. ,!f'-+) the web has no optimal width, optimal
height, optimal font-size or optimal anything really. ”
- E,w'r, O’R#*r,'%

www.flickr.com/photos/nikio/3899114449

“ (! w!b has always been fluid; we’ve just wasted a
good number of years forcing fixed pixels onto an
inherently responsive framework. ”
- E++#*) J S)*03"

www.flickr.com/photos/soundslogical/4255801733

B'"#%$ br!'3p*#%)" on
screen sizes is a temporary
work around

www.flickr.com/photos/gozalewis/3249104929

W*r3 w#)1 breakpoints & tweakpoints,
focus on content layout & EMS instead of px

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

(! "'&! with columns,
opt for fluid as much possible


(#" brings us back to
the importance of modularity

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

L!"" 'b*-) p'$!" & more focus on
the building blocks that makes up those views

www.flickr.com/photos/boltofblue/4418442567

N* &*r! is it
about beautiful page designs...

www.flickr.com/photos/miuenski/3127285991

...b-) 'b*-) v#!w" that will look different
across browsers, screen sizes & devices



(! &*r! you reuse, the less modules
there will be to design, define and develop

www.flickr.com/photos/boltofblue/4418442567

E""!%)#'+ f*r pr!v!%)#%$,
ending up with too many pieces

www.flickr.com/photos/akrabat/9085299639

(#" 1!+p" meeting requirements
across screen sizes and page views

www.flickr.com/photos/webatelier/5929299679

A%,, it minimises design
& development efforts

www.flickr.com/photos/webatelier/5929855686

G**, f*r the
future & the budget


R!"p*%"#v! ,!"#$% is based on
modular views rather than static pages

www.flickr.com/photos/techsavvyed/5926978939

N!!, )* 3%*w what you design for
in order to identify & define
what modules to use where

www.flickr.com/photos/songzhen/4893025042

A" w!++ '" w1') content variations &
sizes you need for different pages & devices

www.flickr.com/photos/songzhen/4893025042

S)'r) b.

identifying the main module types & common
elements between pages

D!4%! display variations as well as
the elements they are made up of
Desktop/ Tablet
Desktop/ tablet
1
Logo

Mobile
Mobile

2
Header

4
Bath section intro

1
Logo

5
Ad

3
Nav

8 Store
locator

6
Types of baths

2 Header
3
Nav

4
Bath
section
intro

5
Ad

7
Related
products
6
Types of baths

9 Tools

10
Footer
7
Related products

8 Store
locator

9 Tools

10
Footer

I"*+')! !+!&!%)" that need to be able to break
out to meet your content stacking strategy
Desktop/ Tablet
Desktop/ tablet
1
Logo

Mobile
Mobile

2
Header

4
Bath section intro

1
Logo

5
Ad

3
Nav

8 Store
locator

6
Types of baths

2 Header
3
Nav

4
Bath
section
intro

5
Ad

7
Related
products
6
Types of baths

9 Tools

10
Footer
7
Related products

8 Store
locator

9 Tools

10
Footer

A,'p) )* the device & screen in question;
both order & priority as well as interactions,
how much to show & how

www.flickr.com/photos/katherinekenny

Desktop/ Tablet
Desktop/ tablet
1
Logo

Mobile
Mobile

2
Header

1
Logo

2 Header

L#))+! b. +#))+! you build up a module library
of defined components for your views,
4
Bath section intro

5
Ad

3
Nav

8 Store
locator

6
Types of baths

3
Nav

4
Bath
section
intro

5
Ad

7
Related
products

6
Types of baths

9 Tools

10
Footer
7
Related products

8 Store
locator

9 Tools

10
Footer

“ W#)1 )1*-"'%," and thousands of pages on the
Crayola site, it wasn’t efficient to wireframe every
single page and state. We created a system of
components that could be assembled in different
configurations to accommodate the unique content
needed for each type of page. ”
- D'%#!+ M'++

Screenshot: www.crayola.co.uk/

H*w w! 'ppr*'01 #) depends
on your project, budget and time frame
& if it’s being built externally

www.flickr.com/photos/75905404@N00/7126146307

W1') w! 0'%%*) ,* is take
a waterfall approach with responsive design
where we hand over from to the other
www.flickr.com/photos/bingisser/154452815

W! 1'v! )*
work together across disciplines

(#" #%0+-,!" 0+#!%)" both in terms of
what they can expect &
what will be expected of them


R!"p*%"#v! ,!"#$% means
giving up some control to ensure it works
for as many devices as possible


E%"-r#%$ that we do what’s best for
our clients, our users & us as a company

www.flickr.com/photos/stickkim/7491816206

06

MODULAR, DEVICE AGNOSTIC DESIGN

The client have asked you to look at doing their new responsive site with
breakpoints based on content rather than devices. For that we need to really
understand the content and how it’s going to flow
I,!%)#f. )1! &'#% 0*%)!%) )?!" '0r<" )1! "#)!’" p'$!" '%, "3!)01 *-)
1*w )1!. 'r! $*#%$ )* b! ,#"p+'.!, '%, ','p)!, '0r<" "0r!!% ";!".
Think about natural breakpoints and good practice for display of content as well
as how to reuse as much as possible.
•
•
•
•

About page
List of offers
Product pages
Notifications


•
•
•


07

ADAPTING TO DEVICE ORIENTATION

The client has asked you to consider how the content is going to adapt based on
device orientation, i.e. from portrait to landscape.
P#03 *%! *f .*-r p'$!" '%, ,#"0-"" 'ppr*'01!" f*r 1*w )1! 0*%)!%)
0*-+, ','p) b'"!, *% ,!v#0! *r#!%)')#*%.
Consider desktop, tablet and smartphone
•
•
•
•

About page
List of offers
Product pages
Notifications


•
•
•


A%. "0r!!% should be
your starting point


“ Ev!r. r!"p*%"#v! ,!"#$% pr*2!0) is also
a content strategy project. ”
- K'r!% M0Gr'%!

(!r! #" %* right way
& the following is just
one way of approaching it

www.flickr.com/photos/jtravism/2417205289

S)!p" f*r responsive & modular design
1. Define target audiences, goals & needs (user & business)
2. Identify key user journeys
3. Identify key pages
4. Identify the content & functional requirements for each key page
5. Across all pages identify common content module types, e.g. featured product
6. Re-visit, list & prioritise the content for each page
7. From this Identify the variations that are needed for each content module type
8. Lay out the content modules across key pages (mobile or desktop first)
9. Work through layout and content stacking strategy across devices
10. Define templates for the content module types (variations & across devices)
11. Iteratively work through your pages, test & adjust modules & variations as needed
www.flickr.com/photos/poetatum/3335900523

I)’" %*) 2-") about the
smaller screens but also the big ones

www.flickr.com/photos/jolives/2889944573/

I)"’" 'b*-)
thinking & planning ahead

www.flickr.com/photos/jolives/2889944573

I) ,*!"%’) have to break the bank.
Maintaining different versions will

www.flickr.com/photos/gi/5537770007

B! 0r!')#v! & challenge
what exists today

www.flickr.com/photos/oter/5090592214

R!&!&b!r )* test & iterate,
sketch as much as possible
& work collaboratively

www.flickr.com/photos/jdhancock/4354438814

“ Every time you redesign God kills a kitten “
- L*-#" R<!%f!+,

www.flickr.com/photos/matterphotography/2739799786

R!"p*%"#v! design 1
http://bradfrost.github.io/this-is-responsive/resources.html
http://mediaqueri.es/popular/
http://www.alistapart.com/articles/responsive-web-design/
http://designmodo.com/responsive-design-examples/
http://jamus.co.uk/demos/rwd-demonstrations/
http://bradfrostweb.com/blog/web/responsive-navpatterns/
http://www.gridsetapp.com/
http://grid.mindplay.dk
http://goldengridsystem.com/

R!"p*%"#v! design 2
http://www.netmagazine.com/opinions/designingbrowser
http://www.businessinsider.com/html5-vs-apps-whythe-debate-matters-and-who-will-win-2012-11
http://ia.net/blog/responsivetypography-the-basics/
http://daverupert.com/2013/04/
responsive-deliverables
http://alistapart.com/article/
future-ready-content


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


N'v#$')#*% for responsive design
http://bradfrostweb.com/blog/web/responsive-navpatterns/
http://bradfrostweb.com/blog/web/complexnavigation-patterns-for-responsive-design/
http://palantir.net/blog/scalable-navigation-patternsresponsive-web-design


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


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


M-+)#p+! devices & touch input
www.lukew.com/ff/entry.asp?1649
http://www.lukew.com/ff/entry.asp?1721
http://www.uxmatters.com/mt/archives/2013/03/
common-misconceptions-about-touch.php
Examples:
http://polarb.com/polls/tags/mobiledesign


Br!'3p*#%)" 1
http://www.lukew.com/ff/entry.asp?1714
http://elliotjaystocks.com/blog/
responsive-web-design-the-war-has-not-yet-beenwon
http://stephanierieger.com/ondesigning-content-out-a-response-to-zeldman-andothers
http://www.markboulton.co.uk/
journal/theinbetween
http://adactio.com/journal/6044/
http://seesparkbox.com/foundry/
there_is_no_breakpoint


Br!'3p*#%)" 2
http://www.smashingmagazine.com/
2013/03/01/logical-breakpointsresponsive-design/
www.slideshare.net/yiibu/pragmaticresponsive-design
http://alistapart.com/article/designing-forbreakpoints
http://dmolsen.com/2013/03/05/media-query-lessdesign-content-based-breakpoints-tweakpoints/


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


P+')f*r& guidelines
https://developer.apple.com/library/ios/
documentation/UserExperience/Conceptual/
MobileHIG/index.html#//apple_ref/doc/uid/
TP40006556
http://mrgan.tumblr.com/post/10492926111/
labeling-the-back-button
http://developer.android.com/design/index.html


P'))!r% libraries
http://pttrns.com/
http://mobile-patterns.com/
http://www.patternsofdesign.co.uk/
http://www.mobiledesignpatterngallery.com/mobilepatterns.php
http://www.androidpatterns.com/
http://androidpttrns.com/
http://android.inspired-ui.com/


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


T!")#%$ your responsive design
http://responsive.is/typecast.com
http://screenqueri.es/
http://www.responsinator.com/
http://quirktools.com/screenfly/
http://mattkersley.com/responsive/
http://responsivepx.com/
http://protofluid.com/
http://responsiveviewport.com/
http://www.browserstack.com/


T!")#%$ apps & mockups
http://popapp.in/
http://fieldtestapp.com/
https://www.fluidui.com/
http://www.plunkapp.com/
http://bjango.com/mac/skalapreview/
http://proto.io/


('%3 .*-. Questions?
@annadahlstrom | anna.dahlstrom@gmail.com
www.annadahlstrom.com

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

More Related Content

What's hot (20)

Similar to Three part series: Designing for multiple devices - GA, London, 20 Jan 2014 (20)

More from Anna Dahlström (20)

Recently uploaded (20)

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