Designing For Multiple Devices - Dublin Web Summit, Oct 2013

D!"#$%#%$ for multiple devices
DUBLIN WEB SUMMIT & GENERAL ASSEMBLY
by Anna Dahlström | @annadahlstrom

&! 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!/+!) +' 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 0,v! , 1'b +0,+ #" *%2%'w% +' 3,%F'r !v!r- 0*3,% 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 !3,#(" 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- +0! !%) 'f 2013, mobile phones will overtake PCs
as the most common web access device worldwide*
Source: www.gartner.com/newsroom/id/2429815

www.flickr.com/photos/miuenski/3127285991

The average person looks at their phone
150 +#3!" , ),-.*
* 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
www.flickr.com/photos/lencioni/5580154551

&! '() 3-+0 that mobile users are rushed
& on the go doesn’t hold true

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

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

www.flickr.com/photos/edduddiee/4307943164

&#" 0," #3p(#/,+#'%"
for UX & design thinking.

www.flickr.com/photos/eyesore9/3206408088

B!f'r! +0! 4r"+ #P0'%!
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,/+, we still do
but we’re noticing something

www.flickr.com/photos/demandaj/7287174776

U"!r" .p!/+ 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(! /,rr- '*+ the same tasks on
mobiles as they do on desktops

www.flickr.com/photos/philippe/2462550872

D!v#/!" & "!rv#/!" 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#(! /'%+.+ ≠ 3'b#(! *"! /,"!
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', w0,+
should we do?

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

T'),- w!’(( (''2 ,+...
1. Defining your mobile strategy
2. App design
3. Responsive design
4. Input, orientation & touch screens across devices
5. Practice
6. Q & A

O*r 3,#% 'p+#'%" are bespoke
mobile sites, responsive sites and apps


B!"p'2! 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'2! 3'b#(! "#+!"
should be avoided, if we can

www.flickr.com/photos/edenandjosh/2892956576

Tw' 3,#% ./!p+#'%":
technical limitations to the CMS, or
if required for the audience

www.flickr.com/photos/st3f4n/3476036180

&! ,(+!r%,+#v! #" messy & costly:
means maintaining multiple technical
solutions & content

www.flickr.com/photos/ericconstantineau/5618576278

I+ 3!,%" maintaining
multiple technical solutions...

www.flickr.com/photos/nikio/3899114449

...,%) ,("' maintaining
multiple versions of your content

www.flickr.com/photos/sharynmorrow/127184319

R!,(#"+#/,((- that means
making cuts & frustrating users

www.flickr.com/photos/bulldogsrule/187693681

F'r +0! 4r"+ +#3! 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 3'b#(!
experiences result in
the same thing - drop offs

www.flickr.com/photos/sixmilliondollardan/2493495506

W0,+ w! "0'*() )' is keep the
core content the same & optimise the
experience, display & interactions to the device
www.flickr.com/photos/jmtimages/2883279193

M!!+
responsive design

www.flickr.com/photos/taytom/5277657429

B*+...
what about apps?


W0!+0!r +' do an app
or not comes down to...


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

www.flickr.com/photos/31878512@N06/4704140020

If -'* %!!) to utilise
device specific capabilities...

www.flickr.com/photos/cindyli/3784225848

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

www.flickr.com/photos/arjencito/6531640463

A%) 'f /'*r"!
budget


A%,(-+#/" of entry points
can also provide some guidance

www.flickr.com/photos/andwhynot/2946734025

M,#%(- )#r!/+ +r,ﬃ/:
could be an argument for an app

www.flickr.com/photos/haagsuitburo/5349040355

M,#%(- "0,r!) (#%2":
ensure your site is optimised for mobile

www.flickr.com/photos/soundslogical/4255801733

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!!) +' /'%"#)!r fragmentation
across different versions &
backwards compatibility

www.flickr.com/photos/aforgrave/6168689222

R!(,+#v! %*3b!r of active
Android devices across different versions

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

www.flickr.com/photos/blakespot/4773693893

C'3p,r#"'% 'f adoption rate
of 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'r3 has their own
ui guidelines that their users are used to

www.flickr.com/photos/gadl/3570118243

#P0'%! r!"'*r/!"
help & inspiration well documented

A%)r'#) r!"'*r/!"
help & inspiration a little less well
documented for earlier versions

S+,r+ b- sketching
screenflows, navigation & content

www.flickr.com/photos/saucef/7184615025

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

www.flickr.com/photos/lindzgraham/5605911999

T!"+#%$ ,pp"

flow, navigation, interactions, transitions

Fr'3 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

“ D!"#$% & )!v!('p3!%+ "0'*() 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. “
- S3,"0#%$ M,$7#%!


&! b,/2b'%! #"
your grid & breakpoints

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

C'(*3%" & $*++!r" can be
fluid or fixed, or a combination.

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

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

www.flickr.com/photos/donsolo/2136923757

“ C'%+!%+ %!!)" +' b! /0'r!'$r,p0!) 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/

S' +0,+ #+’" /,r!8((considered, like this
http://thenextweb.com/

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

“ 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,) Fr9+ 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

C'%"#)!r -'*r pr'1!/+: assess the depth
needed as well as pros & cons of approaches

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

D!4%! & w'r2 w#+0 +:!" of navigation:
primary, secondary, tertiary, footer & contextual

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

T!"+

as early as possible
& then continuously

I% +0! br'w"!r by resizing the browser
window & checking the display of content

http://thenextweb.com

I% +0! 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"#%$ !3*(,+'r" that allow you to
view your site across devices & orientations

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

O% ,/+*,( )!v#/!", though expensive
there are ways around it

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

4. I%p*+, 'r#!%+,+#'%,
touch screens across devices

“ T'*/0 has landed on the desktop. “
- J90 C(,r2

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

“ T'*/0 "/r!!% (,p+'p ",(!" have jumped 52%
in the last quarter. 5 years from now you will you 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! "0'*() 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+0!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

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

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

&! BRIEF
A major dating site has asked you to create a campaign for Valentines day 2014
focused on "unexpected moments". The purpose is to facilitate encounters &
dates between people in Dublin looking to find that special someone.
The site/app should support finding people nearby and location should be a key
way for both discovering people & suggestions for date activities. The following
should also be included:
•
•
•
•

About page
Search (people, activities)
Activity suggestions
Notifications

www.flickr.com/photos/pinkpurse/5355919491

•
•

Login & registration
Data visualisations (active users, dates
organised etc)

01

BESPOKE MOBILE SITE
VS. RESPONSIVE VS. AN APP

The client has come to you with their idea and are asking for your advice on what
they should be doing and considering.
W0,+ w'*() -'* r!/'33!%) #% +!r3" 'f 3'b#(! pr!"!%/! & w0-?
A bespoke mobile site, responsive design, 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 +0! 0'3! p,$! '%(-, w'r2 +0r'*$0 ("2!+/0#%$) 0'w +0! /'%+!%+
"0'*() b! )#"p(,-!) ,%) pr#'r#+#"!) (/'%+!%+ "+,/2#%$)
Consider desktop, mobile, smartphone
The site should support finding people nearby and location should be a key way
for both discovering people & suggestions for date activities. The following
should also be included:
•
•
•
•

About page
Search (people, activities)
Activity suggestions
Notifications


•
•

Login & registration
Data visualisations (active users, dates
organised etc)

S+,r+ b-

identifying the main module types & common
elements between pages

D!4%! your content stacking strategy
across devices & orientations
Mobile

Desktop/ tablet
1
Logo

1
Logo

2
Header

4
Bath section intro

5
Ad

3
Nav

8 Store
locator

6
Types of baths

2 Header
3
Nav

4
Bath
section
intro

5
Ad

7
Related
products
6
Types of baths

9 Tools

10
Footer
7
Related products

8 Store
locator

9 Tools

10
Footer

D'%’+ 1*"+ work with columns
but think of the narrative of the views

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

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"'(,+! !(!3!%+" 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,
across devices & orientations
4
Bath section intro

5
Ad

3
Nav

8 Store
locator

6
Types of baths

3
Nav

4
Bath
section
intro

5
Ad

7
Related
products

6
Types of baths

9 Tools

10
Footer
7
Related products

8 Store
locator

9 Tools

10
Footer

A f!w final words


A#3 +' make it more future proof
by moving away from specific devices

www.flickr.com/photos/byte/8282578241

&#" brings us back to the importance of
modularity in responsive design

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' 3'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



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

www.flickr.com/photos/boltofblue/4418442567

B,"#%$ br!,2p'#%+" on
screen sizes isn’t wrong, but
it is a temporary work around

www.flickr.com/photos/gozalewis/3249104929

W'r2 w#+0 breakpoints & tweakpoints,
focus on content layout & EMS instead of px

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

H'w w! ,ppr',/0 #+ depends
on your project, budget and time frame
& if it’s being built externally


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

W! 0,v! +'
work together across disciplines

&#" #%/(*)!" /(#!%+" 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

xxx
www.flickr.com/photos/byte/8282578241

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

www.flickr.com/photos/stickkim/7491816206

“ Every time you redesign God kills a kitten “
- L'*#" R9!%f!()

www.flickr.com/photos/matterphotography/2739799786

&,%2 -'*!
@annadahlstrom | anna.dahlstrom@gmail.com
www.annadahlstrom.com

Designing For Multiple Devices - Dublin Web Summit, Oct 2013

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Designing For Multiple Devices - Dublin Web Summit, Oct 2013

Similar to Designing For Multiple Devices - Dublin Web Summit, Oct 2013 (20)

More from Anna Dahlström

More from Anna Dahlström (19)

Recently uploaded

Recently uploaded (20)

Designing For Multiple Devices - Dublin Web Summit, Oct 2013