0
3 classes
in 1

AN EVENING OF

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

20 January 2014

Anna Dahlström

www.annadahlstrom.com
anna...
I’& A%%'
IA & UX designer | freelance since 2011
Swedish | in London since 2006

www.flickr.com/photos/dahlstroms/44114487...
(#" !v!%#%$
6.00 pm P'r) 1: Understanding the multiple device landscape
Practice
7.00 pm Break
7.15 pm P'r) 2: Practicalit...
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)!, )...
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...
41% *f !&'#+" are now opened on mobile devices *
* Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened...
B. )1! !%, *f 2013, mobile phones will overtake PCs
as the most common web access device worldwide*
Source: www.gartner.co...
The average person looks at their phone
150 )#&!" ' ,'..*
* Source: www.textually.org/textually/archives/2012/02/030229.ht...
40% *f p!*p+! use their phone in the bathroom. *
* Source: http://www.lukew.com/ff/entry.asp?1500

www.flickr.com/photos/e...
W! $* *%+#%!
everywhere and anywhere

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

Image courtesy of Shutterstock
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...
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.vibrantm...
(!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 experien...
H'v#%$ "!p'r')! sites
does, for the most part, not make sense
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE

BESPOKE
CUT
D...
S*, w1')
should we do?

www.flickr.com/photos/tomitapio/4053123799/in/photostream
O-r &'#% *p)#*%" are bespoke
mobile sites, responsive sites and apps

www.flickr.com/photos/martinteschner/4569495912
B!"p*3! &*b#+! "#)!" have a separate url
& means maintaining different sites
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE...
R!"p*%"#v! "#)!" have the same url
& is basically “one site”
FULL WEBSITE
FULL
WEBSITE

FULL
WEBSITE

http://desktopwallpa...
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?

www.flickr.com/photos/tomitapio/4053123799/in/photostream
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 someth...
Tw* &'#% /0!p)#*%":
technical limitations to the CMS, or
if required for the audience

www.flickr.com/photos/st3f4n/347603...
(! '+)!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://ec...
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

Image courtesy of Shutters...
M!!)
responsive design

www.flickr.com/photos/taytom/5277657429
B-)...
what about apps?

www.flickr.com/photos/tomitapio/4053123799/in/photostream
W1!)1!r )* do an app
or not comes down to...

www.flickr.com/photos/martinteschner/4569495912
U"!r & b-"#%!""
objectives...

Image courtesy of Shutterstock
If .*- %!!, to utilise
device specific capabilities...

www.flickr.com/photos/cindyli/3784225848
If *ffl#%! r!',#%$
is required...

www.flickr.com/photos/arjencito/6531640463
A%, *f 0*-r"!
budget

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

www.flickr.com/photos/andwhynot/2946734025
M'#%+. ,#r!0) )r'ffi0:
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, an...
App design
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/616868...
R!+')#v! %-&b!r of active
Android devices across different versions

Source: http://developer.android.com/about/dashboards...
C*&p'r#"*% *f adoption rate
for iOS7, iOS6 and iOS5

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

www.flickr.com...
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 wo...
(!r! 'r!
different types of apps
NATIVE APPS (e.g. Instagram)

• MOST OPTIMISED USER EXPERIENCE
• ACCESS TO DEVICE CAPABIL...
R!"p*%"#v! design
R!"p*%"#v! "#)!" have the same url
& is basically “one site”
FULL WEBSITE
FULL
WEBSITE

FULL
WEBSITE

http://desktopwallpa...
“ D!"#$% & ,!v!+*p&!%) "1*-+, r!"p*%, to the
user’s behaviour & environment based on screen size,
platform & orientation. ...
(! b'03b*%! #"
your grid & breakpoints

http://foundation.zurb.com/docs/layout.php
C*+-&%" & $-))!r" can be
fluid or fixed, or a combination.

http://foundation.zurb.com/docs/layout.php
(! $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.flick...
D!4%! .*-r content stacking strategy
across devices & orientation.

www.thismanslife.co.uk/projects/lab/responsivewirefram...
I,!%)#f. '%, pr#*r#)#"! the content
across devices & orientations
Mobile

Desktop/ tablet
1
Logo

1
Logo

2
Header

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

www.flickr.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
:&! )* practice
(! BRIEF
A big retail store has asked you to come up with a Easter Hunt across London
where offers and give aways are hidd...
01

BESPOKE MOBILE SITE
VS. RESPONSIVE VS. AN APP

The client has come to you with the Easter hunt idea and are asking for...
02

CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can
also form ...
D!4%! your content stacking strategy
across devices & orientations
Mobile

Desktop/ tablet
1
Logo

1
Logo

2
Header

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

www.flickr.com/photos/garrettc/6260768486/
02

CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can
also form ...
P'r) 2: Practicalities of
multiple device projects
Common challenges, content strategy, structures,
navigation patterns, t...
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

www.flickr.com...
2. H*w &'%. versions to wireframe...
• Depends on your project, budget & team as well as who’s
building it
• Focus on iden...
3. H*w )* 'ppr*'01 visual design
• Less static designs
• Focus on modules & modularity
• Continuously prototype to test ho...
4. W1') "0r!!% ";!" & which resolutions?
• Use analytics as a guidance
• Ensure it works for the most common ones
• Design...
5. H*w )* define breakpoints
• As much possible let the content be the guide
• Use breakpoints & tweakpoints & EMS instead...
6. H*w &'%. devices to test on
• As many as possible
• Prioritise based on your audience
• Use research & analytics for gu...
“ 80% *f .*-r )r'ffi0 in your analytics will often
come from 20% of devices…seems a shame not to
ensure that the site looks ...
7. H*w )* handle images
•
•
•
•
xxx

Images & icons should be as flexible as possible
Consider load times & page weight
Lo...
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. “
* Sou...
Br', Fr<) has written 2 excellent posts
on Responsive navigation patterns

xxx

http://bradfrostweb.com/blog/web/responsiv...
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/w...
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...
Via B
ra

d Fro
st (th

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

Optimises screen use
Recognised from apps
Scalabl...
Via B
ra

d Fro
st (th

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

ank y
ou!)

PROS
Space generous
R...
C*&p+/ navigation patterns
1) The multi toggle
2) Right to left
3) Skip the sub-nav
4) Priority+
5) The carousel+
http://b...
(! &-+)# )*$$+!
nested navigation grouped under a menu

Via B
ra

d Fro
st (th

PROS
Scannable
Scalable
CONS
Animation per...
Via B
ra

d Fro
st (th

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

ank y
ou!)

PROS
Nice looking
Foll...
Via B
ra

d Fro
st (th

S3#p )1! "-b-%'v
next level navigation is displayed on that level
PROS
Simple
Removes complexities...
Via B
ra

d Fro
st (th

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

PROS
Simple
Supports (suppos...
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
S...
(!r!"' N!#+’"
Mobile Design Pattern Gallery

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

www.flickr.com/photos/martinteschner/4569495912
C*%"#,!r .*-r pr*2!0): assess the depth
needed as well as pros & cons of approaches

www.flickr.com/photos/inpivic/5205918...
D!4%! & w*r3 w#)1 )?!" of navigation:
primary, secondary, tertiary, footer & contextual

http://palantir.net/blog/scalable...
L'") b-) %*) +!'"), consider navigation
across products & keep it similar
to aid familiarity
BBC Sport - mobile site

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

www.flickr.com/photos/gadl/3570118243
#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 ...
B'"#0 Android
app structure
DIFFERENT BETWEEN VERSIONS:
NAVIGATION BAR
For devices that don't have the
hardware keys. Hold...
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/...
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

www.flickr.com/photos/jorgeq82/4732700819
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 &...
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

www.flickr.com/photos/jorgeq...
T!")#%$ 'pp"

flow, navigation, interactions, transitions
Fr*& testing sketches as
paper prototypes or as clickable prototypes...

www.flickr.com/photos/grinblo/8659685975

www.fli...
...)* iterations of
wireframes & designs

www.flickr.com/photos/fluent_methods/6961802861
:&! )* practice
03

APP STRUCTURE

With a better idea of the content for the Easter Hunt campaign, work also begins
on the app. Based on t...
B'"#0 iOS
app structure
CONSISTENT ACROSS VERSIONS
NAVIGATION BAR
Enables navigation through the app
hierarchy. Holds the ...
B'"#0 Android
app structure
DIFFERENT BETWEEN VERSIONS:
NAVIGATION BAR
For devices that don't have the
hardware keys. Hold...
03

APP STRUCTURE

With a better idea of the content for the Easter Hunt campaign, work also begins
on the app. Based on t...
04

SIMPLE RESPONSIVE NAVIGATION

Now that you have a good understanding of the content and the main sections,
it’s time t...
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...
Via B
ra

d Fro
st (th

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

Optimises screen use
Recognised from apps
Scalabl...
Via B
ra

d Fro
st (th

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

ank y
ou!)

PROS
Space generous
R...
04

SIMPLE RESPONSIVE NAVIGATION

Now that you have a good understanding of the content and the main sections,
it’s time t...
05

COMPLEX RESPONSIVE NAVIGATION

The client loves the work that you’ve done so far and other cities in the UK wants
the ...
(! &-+)# )*$$+!
nested navigation grouped under a menu

Via B
ra

d Fro
st (th

PROS
Scannable
Scalable
CONS
Animation per...
Via B
ra

d Fro
st (th

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

ank y
ou!)

PROS
Nice looking
Foll...
Via B
ra

d Fro
st (th

S3#p )1! "-b-%'v
next level navigation is displayed on that level
PROS
Simple
Removes complexities...
Via B
ra

d Fro
st (th

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

PROS
Simple
Supports (suppos...
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
S...
05

COMPLEX RESPONSIVE NAVIGATION

The client loves the work that you’ve done so far and other cities in the UK wants
the ...
P'r) 3: Adapting to input,
orientations & the future
Touch across devices, device orientation, mobile context,
device agno...
“T*,'.’" p*p-+'r ,!v#0!" 'r! %*) )*&*rr*w'" so
building something which works on any device is better
than building someth...
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
I%p-) & touch across devices
“ 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.sht...
A" '+w'."...
...it depends
“ 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 co...
W! "1*-+, consider touch across all devices
& screen sizes. Not just smartphones & tablets

www.flickr.com/photos/adactio/...
www.flickr.com/photos/intelfreepress/6837427202

www.flickr.com/photos/janitors/9968676044

(! w'. we use touch screens di...
49% *f -"!r" hold their phone in one hand,
but how they hold it differs

www.flickr.com/photos/jorgeq82/4732700819
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%)...
H*+,#%$ our devices
is not a static stage. It changes

Source & images from UX Matters - www.uxmatters.com/mt/archives/201...
“ D!"#$%#%$ f*r )*-01 means designing for
fingers, yes, but to be more specific, you’re really
designing for thumbs. ”
- J...
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/767575704...
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/...
“ L**3#%$ ') the Polar interface on a laptop can be a
bit disconcerting because we’ve essentially left the
middle of the p...
B'"!, *% the context & use case,
posture, grip & orientation varies

www.flickr.com/photos/chicitoloco/8468592748/in/photo...
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
M*b#+! context
S#)-')#*%'+ 0*%)/)
impacts firm vs. loose grip

www.flickr.com/photos/kalexanderson/6716348037
M*b#+! 0*%)/) ≠ &*b#+! -"! 0'"!
The latter is about the task, the former about
the total sum of the user’s mobile experien...
(! 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

www.flickr.com/photos/adactio/6153481666
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

www.flickr.com/photos/martinteschner/4569495912
D!v#0! agnostic design
R!&!&b!r 1*w we can’t
successfully tell what devices users are using

www.flickr.com/photos/adactio/6153481666
(! w!b is after all about content.
Not what device we are using
Image courtesy of Shutterstock
“ G!) .*-r 0*%)!%) to go anywhere,
because it’s going to go everywhere. ”
- Br', Fr<)
www.flickr.com/photos/mirafoto/49444...
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/127184...
L**3 ') what’s suitable for your content
& best practice for layout principles

www.flickr.com/photos/visualpunch/73515728...
I)’" %*) without challenges,
but challenges are meant to be overcome

Image courtesy of Shutterstock
“ B. ,!f'-+) the web has no optimal width, optimal
height, optimal font-size or optimal anything really. ”
- E,w'r, O’R#*r...
“ (! w!b has always been fluid; we’ve just wasted a
good number of years forcing fixed pixels onto an
inherently responsiv...
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-respo...
(! "'&! with columns,
opt for fluid as much possible

http://foundation.zurb.com/docs/layout.php
(#" 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/441844256...
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

www.flickr.com/photos/jorgeq82/473270...
(! &*r! you reuse, the less modules
there will be to design, define and develop

www.flickr.com/photos/boltofblue/44184425...
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

Image courtesy of Shutterstock
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/4...
A" w!++ '" w1') content variations &
sizes you need for different pages & devices

www.flickr.com/photos/songzhen/48930250...
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
Bat...
D!4%! display variations as well as
the elements they are made up of
Desktop/ Tablet
Desktop/ tablet
1
Logo

Mobile
Mobile...
I"*+')! !+!&!%)" that need to be able to break
out to meet your content stacking strategy
Desktop/ Tablet
Desktop/ tablet
...
A,'p) )* the device & screen in question;
both order & priority as well as interactions,
how much to show & how

www.flick...
Desktop/ Tablet
Desktop/ tablet
1
Logo

Mobile
Mobile

2
Header

1
Logo

2 Header

L#))+! b. +#))+! you build up a module ...
“ W#)1 )1*-"'%," and thousands of pages on the
Crayola site, it wasn’t efficient to wireframe every
single page and state....
H*w w! 'ppr*'01 #) depends
on your project, budget and time frame
& if it’s being built externally

www.flickr.com/photos/...
W1') w! 0'%%*) ,* is take
a waterfall approach with responsive design
where we hand over from to the other
www.flickr.com/...
W! 1'v! )*
work together across disciplines
(#" #%0+-,!" 0+#!%)" both in terms of
what they can expect &
what will be expected of them

www.flickr.com/photos/martinte...
R!"p*%"#v! ,!"#$% means
giving up some control to ensure it works
for as many devices as possible

www.flickr.com/photos/b...
E%"-r#%$ that we do what’s best for
our clients, our users & us as a company

www.flickr.com/photos/stickkim/7491816206
:&! )* practice
06

MODULAR, DEVICE AGNOSTIC DESIGN

The client have asked you to look at doing their new responsive site with
breakpoints...
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
Bat...
D!4%! display variations as well as
the elements they are made up of
Desktop/ Tablet
Desktop/ tablet
1
Logo

Mobile
Mobile...
I"*+')! !+!&!%)" that need to be able to break
out to meet your content stacking strategy
Desktop/ Tablet
Desktop/ tablet
...
A,'p) )* the device & screen in question;
both order & priority as well as interactions,
how much to show & how

www.flick...
Desktop/ Tablet
Desktop/ tablet
1
Logo

Mobile
Mobile

2
Header

1
Logo

2 Header

L#))+! b. +#))+! you build up a module ...
06

MODULAR, DEVICE AGNOSTIC DESIGN

The client have asked you to look at doing their new responsive site with
breakpoints...
07

ADAPTING TO DEVICE ORIENTATION

The client has asked you to consider how the content is going to adapt based on
device...
www.flickr.com/photos/intelfreepress/6837427202

www.flickr.com/photos/janitors/9968676044

(! w'. we use touch screens di...
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
07

ADAPTING TO DEVICE ORIENTATION

The client has asked you to consider how the content is going to adapt based on
device...
A f!w final words...
A%. "0r!!% should be
your starting point

www.flickr.com/photos/byte/8282578241
“ Ev!r. r!"p*%"#v! ,!"#$% pr*2!0) is also
a content strategy project. ”
- K'r!% M0Gr'%!
Image courtesy of Shutterstock
(!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 jou...
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
U"!9+ resources
R!"p*%"#v! design 1
http://bradfrost.github.io/this-is-responsive/resources.html
http://mediaqueri.es/popular/
http://www....
R!"p*%"#v! design 2
http://www.netmagazine.com/opinions/designingbrowser
http://www.businessinsider.com/html5-vs-apps-whyt...
R!"p*%"#v! design 3
www.slideshare.net/yiibu/pragmatic-responsivedesign
http://stephanierieger.com/on-designing-content-ou...
N'v#$')#*% for responsive design
http://bradfrostweb.com/blog/web/responsive-navpatterns/
http://bradfrostweb.com/blog/web...
D!v#0!" & sizes
http://www.google.com/analytics/features/mobilesite-traffic.html
http://en.wikipedia.org/wiki/
List_of_dis...
D!v#0! interaction
www.uxmatters.com/mt/archives/2013/02/how-dousers-really-hold-mobile-devices.php
http://globalmoxie.com...
M-+)#p+! devices & touch input
www.lukew.com/ff/entry.asp?1649
http://www.lukew.com/ff/entry.asp?1721
http://www.uxmatters...
Br!'3p*#%)" 1
http://www.lukew.com/ff/entry.asp?1714
http://elliotjaystocks.com/blog/
responsive-web-design-the-war-has-no...
Br!'3p*#%)" 2
http://www.smashingmagazine.com/
2013/03/01/logical-breakpointsresponsive-design/
www.slideshare.net/yiibu/p...
D!&*, sketching & workflow
www.thismanslife.co.uk/projects/lab/
responsivewireframes/
www.thismanslife.co.uk/projects/lab/...
P+')f*r& guidelines
https://developer.apple.com/library/ios/
documentation/UserExperience/Conceptual/
MobileHIG/index.html...
P'))!r% libraries
http://pttrns.com/
http://mobile-patterns.com/
http://www.patternsofdesign.co.uk/
http://www.mobiledesig...
T!")#%$
http://bradfrostweb.com/blog/mobile/test-on-realmobile-devices-without-breaking-the-bank/
http://www.welcomebrand....
T!")#%$ your responsive design
http://responsive.is/typecast.com
http://screenqueri.es/
http://www.responsinator.com/
http...
T!")#%$ apps & mockups
http://popapp.in/
http://fieldtestapp.com/
https://www.fluidui.com/
http://www.plunkapp.com/
http:/...
('%3 .*-. Questions?
@annadahlstrom | anna.dahlstrom@gmail.com
www.annadahlstrom.com
Upcoming SlideShare
Loading in...5
×

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

4,153

Published on

Slides from my three-part series Designing for Multiple Devices class run on the 20th of January with General Assembly in London.

The rise in mobiles and tablets have not only changed the way we consume and interact with content, but also the way we design and what we base our design approach on.

This series of classes will cover how user expectations as well as behaviour and consumption patterns have shifted—and what that means for designing products that will be used on multiple devices. Coming out of these classes, you'll be equipped with the essential principles and tools to tackle the multiple device jungle.

Published in: Design, Sports, Technology

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

  1. 1. 3 classes in 1 AN EVENING OF D!"#$%#%$ for multiple devices 20 January 2014 Anna Dahlström www.annadahlstrom.com annadahlstrom
  2. 2. I’& A%%' IA & UX designer | freelance since 2011 Swedish | in London since 2006 www.flickr.com/photos/dahlstroms/4411448782
  3. 3. (#" !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
  4. 4. P'r) 1: Understanding the multiple devices landscape Introduction & defining your mobile strategy
  5. 5. (! w*r+, we design for has become more complex www.flickr.com/photos/pagedooley/2121472112
  6. 6. W! -"!, )* only have to deal with different browsers, and the fold www.flickr.com/photos/jorgeq82/4732700819
  7. 7. T*,'. #)’" br*w"!r" AND endless numbers of devices & screen sizes www.flickr.com/photos/adactio/6153481666
  8. 8. 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
  9. 9. A" *f Q3 2012 we passed 1 billion smartphones in use www.flickr.com/photos/raincitystudios/95234968
  10. 10. 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.flickr.com/photos/helga/3952984450/
  11. 11. 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
  12. 12. 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
  13. 13. The average person looks at their phone 150 )#&!" ' ,'..* * Source: www.textually.org/textually/archives/2012/02/030229.htm www.flickr.com/photos/jorgeq82/4732700819
  14. 14. 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
  15. 15. W! $* *%+#%! everywhere and anywhere Image courtesy of Shutterstock
  16. 16. (! *+, &.)1 that mobile users are rushed & on the go doesn’t hold true Image courtesy of Shutterstock
  17. 17. A +'r$! pr*p*r)#*% of our usage happens when we have time to kill www.flickr.com/photos/edduddiee/4307943164
  18. 18. (#" 1'" #&p+#0')#*%" for UX & design thinking. www.flickr.com/photos/eyesore9/3206408088
  19. 19. B!f*r! )1! 4r") #P1*%! the mobile use case was limited www.flickr.com/photos/frantaylor/4296536332
  20. 20. 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
  21. 21. I% f'0), we still do but we’re noticing something www.flickr.com/photos/demandaj/7287174776
  22. 22. U"!r" /p!0) an equal & continuous experience across devices www.flickr.com/photos/joachim_s_mueller/7110473339
  23. 23. “ 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
  24. 24. (!r! 'r! a number of reasons for this www.flickr.com/photos/martinteschner/4569495912
  25. 25. P!*p+! 0'rr. *-) the same tasks on mobiles as they do on desktops www.flickr.com/photos/philippe/2462550872
  26. 26. D!v#0!" & "!rv#0!" are getting more advanced & optimised for complex tasks www.flickr.com/photos/joeybones/6791201819
  27. 27. W! %* +*%$!r *w% just one device but multiple & use them interchangeably www.flickr.com/photos/soyproject/6066959891
  28. 28. W! w'%) )* find what we’re looking for irrespectively of the device we use www.flickr.com/photos/visualpunch/7351572896
  29. 29. 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
  30. 30. H'v#%$ "!p'r')! sites does, for the most part, not make sense DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  31. 31. S*, w1') should we do? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  32. 32. O-r &'#% *p)#*%" are bespoke mobile sites, responsive sites and apps www.flickr.com/photos/martinteschner/4569495912
  33. 33. B!"p*3! &*b#+! "#)!" have a separate url & means maintaining different sites DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  34. 34. R!"p*%"#v! "#)!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  35. 35. App", well we all know they come from app stores www.flickr.com/photos/paul-r/217948368
  36. 36. H*w do we know when to do what? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  37. 37. B!"p*3! &*b#+! "#)!" should be avoided, if we can www.flickr.com/photos/edenandjosh/2892956576
  38. 38. “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
  39. 39. Tw* &'#% /0!p)#*%": technical limitations to the CMS, or if required for the audience www.flickr.com/photos/st3f4n/3476036180
  40. 40. (! '+)!r%')#v! is messy & costly www.flickr.com/photos/ericconstantineau/5618576278
  41. 41. I) &!'%" maintaining multiple technical solutions... www.flickr.com/photos/nikio/3899114449
  42. 42. ...'%, '+"* maintaining multiple versions of your content www.flickr.com/photos/sharynmorrow/127184319
  43. 43. R!'+#")#0'++. that means making cuts & frustrating users www.flickr.com/photos/bulldogsrule/187693681
  44. 44. 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
  45. 45. P**r &*b#+! experiences result in the same thing - drop offs www.flickr.com/photos/sixmilliondollardan/2493495506
  46. 46. K!!p )1! 0*r! content the same & optimise the experience, display & interactions to the device Image courtesy of Shutterstock
  47. 47. M!!) responsive design www.flickr.com/photos/taytom/5277657429
  48. 48. B-)... what about apps? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  49. 49. W1!)1!r )* do an app or not comes down to... www.flickr.com/photos/martinteschner/4569495912
  50. 50. U"!r & b-"#%!"" objectives... Image courtesy of Shutterstock
  51. 51. If .*- %!!, to utilise device specific capabilities... www.flickr.com/photos/cindyli/3784225848
  52. 52. If *ffl#%! r!',#%$ is required... www.flickr.com/photos/arjencito/6531640463
  53. 53. A%, *f 0*-r"! budget Image courtesy of Shutterstock
  54. 54. A%'+.)#0" of entry points can also provide some guidance www.flickr.com/photos/andwhynot/2946734025
  55. 55. M'#%+. ,#r!0) )r'ffi0: could be an argument for an app www.flickr.com/photos/haagsuitburo/5349040355
  56. 56. M'#%+. "1'r!, +#%3": ensure your site is optimised for mobile www.flickr.com/photos/soundslogical/4255801733
  57. 57. “ 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
  58. 58. App design
  59. 59. App" are focused & personal www.flickr.com/photos/jdhancock/4354438814
  60. 60. N*) '" !'". '" just doing an app for e.g. iOS or Android www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  61. 61. N!!, )* 0*%"#,!r fragmentation across different versions & backwards compatibility www.flickr.com/photos/aforgrave/6168689222
  62. 62. 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
  63. 63. C*&p'r#"*% *f adoption rate for iOS7, iOS6 and iOS5 Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker www.flickr.com/photos/blakespot/4773693893
  64. 64. Ev!r. p+')f*r& has their own ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
  65. 65. ” 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
  66. 66. (!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
  67. 67. R!"p*%"#v! design
  68. 68. R!"p*%"#v! "#)!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  69. 69. “ 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#%! www.flickr.com/photos/adactio/5818096043
  70. 70. (! b'03b*%! #" your grid & breakpoints http://foundation.zurb.com/docs/layout.php
  71. 71. C*+-&%" & $-))!r" can be fluid or fixed, or a combination. http://foundation.zurb.com/docs/layout.php
  72. 72. (! $r#, 1!+p" w#)1 defining modules for pages & views www.flickr.com/photos/donsolo/2136923757
  73. 73. “ 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'+)*%
  74. 74. D!4%! .*-r content stacking strategy across devices & orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  75. 75. 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
  76. 76. D*%’) 2-") work with columns but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
  77. 77. S* )1') #)’" 0'r!9++. considered, like this http://thenextweb.com/
  78. 78. M*b#+! *r ,!"3)*p 4r"), the key is considering the content & how it will work across devices
  79. 79. :&! )* practice
  80. 80. (! 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
  81. 81. 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? www.flickr.com/photos/pinkpurse/5355919491 WHAT ARE THE OBJECTIVES & PRACTICALITIES? • The budget • The current technical platform • Could an app be re-used later • The marketing value of an app
  82. 82. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  83. 83. 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
  84. 84. D*%’) 2-") work with columns but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
  85. 85. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  86. 86. P'r) 2: Practicalities of multiple device projects Common challenges, content strategy, structures, navigation patterns, testing
  87. 87. S*&! *f )1! most common challenges with responsive design are... www.flickr.com/photos/helga/3952984450
  88. 88. 1. K%*w#%$ where to start... • Define your mobile strategy • Start sketching • And work across disciplines www.flickr.com/photos/pinkpurse/5355919491
  89. 89. 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 www.flickr.com/photos/jorgeq82/4732700819
  90. 90. 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
  91. 91. 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
  92. 92. 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
  93. 93. 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
  94. 94. “ 80% *f .*-r )r'ffi0 in your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.* Source: * Source: www.slideshare.net/yiibu/pragmatic-responsive-design www.flickr.com/photos/adactio/6153481666
  95. 95. 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
  96. 96. R!"p*%"#v! navigation patterns
  97. 97. “ 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
  98. 98. 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
  99. 99. L!)’" take a closer look... www.flickr.com/photos/suttonhoo22/2070700035
  100. 100. 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
  101. 101. 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
  102. 102. 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!)
  103. 103. 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
  104. 104. 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
  105. 105. (! &-+)# )*$$+! 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!)
  106. 106. 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
  107. 107. 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!)
  108. 108. 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
  109. 109. 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
  110. 110. (!r!"' N!#+’" Mobile Design Pattern Gallery www.mobiledesignpatterngallery.com
  111. 111. U"! &*b#+! as a reason to re-consider your navigation & prioritise search www.flickr.com/photos/martinteschner/4569495912
  112. 112. C*%"#,!r .*-r pr*2!0): assess the depth needed as well as pros & cons of approaches www.flickr.com/photos/inpivic/5205918163/
  113. 113. D!4%! & w*r3 w#)1 )?!" of navigation: primary, secondary, tertiary, footer & contextual http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  114. 114. L'") b-) %*) +!'"), consider navigation across products & keep it similar to aid familiarity BBC Sport - mobile site BBC Sport - desktop BBC Sport - app
  115. 115. App structures
  116. 116. Ev!r. p+')f*r& has their own ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
  117. 117. #P1*%! r!"*-r0!" help & inspiration well documented
  118. 118. A%,r*#, r!"*-r0!" help & inspiration a little less well documented for earlier versions
  119. 119. 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.
  120. 120. 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.
  121. 121. S)'r) b. sketching screenflows, navigation & content www.flickr.com/photos/saucef/7184615025
  122. 122. R!"!'r01 common approaches www.uxarchive.com
  123. 123. Av*#, using the home screen as a stepping point. Instead deliver value from first view www.flickr.com/photos/lindzgraham/5605911999
  124. 124. T!")#%$ apps & responsive designs
  125. 125. T!") as early as possible & then continuously
  126. 126. I% )1! br*w"!r by resizing the browser window & checking the display of content http://thenextweb.com
  127. 127. I% )1! br*w"!r by designing in the browser & creating a working HTML prototype www.flickr.com/photos/jorgeq82/4732700819
  128. 128. U"#%$ )**+" that help you style & test your typography before implementing it http://responsive.is/typecast.com
  129. 129. 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/
  130. 130. O% '0)-'+ ,!v#0!", though expensive there are ways around it www.flickr.com/photos/arne/5835855777/in/photostream
  131. 131. B-.#%$ b-%,+!" and sharing, hereby helping each other www.flickr.com/photos/adactio/6800969243/in/photostream
  132. 132. W#)1 -"!r" define your objectives, audience, test cases, consider expectations & limitations www.flickr.com/photos/jorgeq82/4732700819
  133. 133. T!")#%$ 'pp" flow, navigation, interactions, transitions
  134. 134. Fr*& testing sketches as paper prototypes or as clickable prototypes... www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
  135. 135. ...)* iterations of wireframes & designs www.flickr.com/photos/fluent_methods/6961802861
  136. 136. :&! )* practice
  137. 137. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  138. 138. 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.
  139. 139. 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.
  140. 140. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  141. 141. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  142. 142. 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
  143. 143. 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!)
  144. 144. 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
  145. 145. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  146. 146. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  147. 147. (! &-+)# )*$$+! 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!)
  148. 148. 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
  149. 149. 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!)
  150. 150. 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
  151. 151. 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
  152. 152. 05 COMPLEX RESPONSIVE NAVIGATION The client loves the work that you’ve done so far and other cities in the UK wants the campaign in their city too, so it’s going UK wide. A decision has also been made to support viewing offers and give aways by store (e.g. Marks & Spencers) and type (e.g. restaurants, fashion, entertainment). 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  153. 153. P'r) 3: Adapting to input, orientations & the future Touch across devices, device orientation, mobile context, device agnostic design
  154. 154. “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
  155. 155. W!’r! already facing two particular challenges... www.flickr.com/photos/david_a_lea/3247217194
  156. 156. 1. Br!'3p*#%)" based on popular devices puts us into a corner www.flickr.com/photos/michale/210536054
  157. 157. 2. T*-01 is no longer limited to smartphones & tablets www.flickr.com/photos/lokan/8843464852
  158. 158. I%p-) & touch across devices
  159. 159. “ T*-01 has landed on the desktop. “ - J<1 C+'r3 www.flickr.com/photos/patdavid/9391602153
  160. 160. ‘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
  161. 161. A" '+w'."... ...it depends
  162. 162. “ 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
  163. 163. W! "1*-+, consider touch across all devices & screen sizes. Not just smartphones & tablets www.flickr.com/photos/adactio/6153481666
  164. 164. 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 www.flickr.com/photos/jorgeq82/4732700819
  165. 165. 49% *f -"!r" hold their phone in one hand, but how they hold it differs www.flickr.com/photos/jorgeq82/4732700819
  166. 166. 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
  167. 167. 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
  168. 168. “ D!"#$%#%$ f*r )*-01 means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. ” - J<1 C+'r3 Image courtesy of Shutterstock
  169. 169. I&p'0)" controls, placement & interactions
  170. 170. 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
  171. 171. 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
  172. 172. F*r 1.br#," we tend to rest arms & grab bottom corners www.flickr.com/photos/intelfreepress/6837427202
  173. 173. C*%"#,!r reach & obscuring content & adjust navigation accordingly From... ...towards Source: Luke W - www.lukew.com/ff/entry.asp?1649
  174. 174. “ 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
  175. 175. B'"!, *% the context & use case, posture, grip & orientation varies www.flickr.com/photos/chicitoloco/8468592748/in/photostream www.flickr.com/photos/edduddiee/4307943164
  176. 176. C!r)'#% *r#!%)')#*%" are better for certain tasks Reading Watching Typing
  177. 177. (!r! 'r! three main approaches for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
  178. 178. M*b#+! context
  179. 179. S#)-')#*%'+ 0*%)/) impacts firm vs. loose grip www.flickr.com/photos/kalexanderson/6716348037
  180. 180. 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
  181. 181. (! 0*%)/) differs based on situation, attitudes & preferences www.flickr.com/photos/hoyvinmayvin/5873697252
  182. 182. (! "'&! 0*%)/) doesn’t equal the same situation www.flickr.com/photos/hoyvinmayvin/5873139941
  183. 183. O)1!r '"p!0)" to consider for the mobile context are... www.flickr.com/photos/icedsoul/2486885051
  184. 184. A))!%)#*% "p'% data snacking vs. focused usage www.flickr.com/photos/nadiya95/7217734288/
  185. 185. S#$%'+ 0*v!r'$! speed & reliability of the connection www.flickr.com/photos/arjencito/6531640463/
  186. 186. L*0')#*% moving about vs. in one location www.flickr.com/photos/garry61/3191250682
  187. 187. (! "0r!!% small, medium, large & of course touch or not www.flickr.com/photos/adactio/6153481666
  188. 188. P<)-r! & $r#p how we sit/ stand as well as interact with the device www.flickr.com/photos/helga/3545310740
  189. 189. A,'p)#%$ )* orientation AND different devices can become a bit of a mindfield www.flickr.com/photos/cayusa/534070358
  190. 190. M*v! 'w'. from devices www.flickr.com/photos/martinteschner/4569495912
  191. 191. D!v#0! agnostic design
  192. 192. R!&!&b!r 1*w we can’t successfully tell what devices users are using www.flickr.com/photos/adactio/6153481666
  193. 193. (! w!b is after all about content. Not what device we are using Image courtesy of Shutterstock
  194. 194. “ G!) .*-r 0*%)!%) to go anywhere, because it’s going to go everywhere. ” - Br', Fr<) www.flickr.com/photos/mirafoto/494444094
  195. 195. A#& )* make it more future proof by moving away from specific devices www.flickr.com/photos/byte/8282578241
  196. 196. U"! %')-r'+ breakpoints based on content layout rather than focusing on devices www.flickr.com/photos/sharynmorrow/127184319
  197. 197. L**3 ') what’s suitable for your content & best practice for layout principles www.flickr.com/photos/visualpunch/7351572896
  198. 198. I)’" %*) without challenges, but challenges are meant to be overcome Image courtesy of Shutterstock
  199. 199. “ 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
  200. 200. “ (! 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
  201. 201. B'"#%$ br!'3p*#%)" on screen sizes is a temporary work around www.flickr.com/photos/gozalewis/3249104929
  202. 202. W*r3 w#)1 breakpoints & tweakpoints, focus on content layout & EMS instead of px www.slideshare.net/yiibu/pragmatic-responsive-design
  203. 203. (! "'&! with columns, opt for fluid as much possible http://foundation.zurb.com/docs/layout.php
  204. 204. (#" brings us back to the importance of modularity www.flickr.com/photos/donsolo/2136923757/
  205. 205. L!"" 'b*-) p'$!" & more focus on the building blocks that makes up those views www.flickr.com/photos/boltofblue/4418442567
  206. 206. N* &*r! is it about beautiful page designs... www.flickr.com/photos/miuenski/3127285991
  207. 207. ...b-) 'b*-) v#!w" that will look different across browsers, screen sizes & devices www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666
  208. 208. (! &*r! you reuse, the less modules there will be to design, define and develop www.flickr.com/photos/boltofblue/4418442567
  209. 209. E""!%)#'+ f*r pr!v!%)#%$, ending up with too many pieces www.flickr.com/photos/akrabat/9085299639
  210. 210. (#" 1!+p" meeting requirements across screen sizes and page views www.flickr.com/photos/webatelier/5929299679
  211. 211. A%,, it minimises design & development efforts www.flickr.com/photos/webatelier/5929855686
  212. 212. G**, f*r the future & the budget Image courtesy of Shutterstock
  213. 213. R!"p*%"#v! ,!"#$% is based on modular views rather than static pages www.flickr.com/photos/techsavvyed/5926978939
  214. 214. N!!, )* 3%*w what you design for in order to identify & define what modules to use where www.flickr.com/photos/songzhen/4893025042
  215. 215. A" w!++ '" w1') content variations & sizes you need for different pages & devices www.flickr.com/photos/songzhen/4893025042
  216. 216. S)'r) b. identifying the main module types & common elements between pages
  217. 217. 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
  218. 218. 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
  219. 219. 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
  220. 220. A,'p) )* the device & screen in question; both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
  221. 221. 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
  222. 222. “ 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/
  223. 223. 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
  224. 224. 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
  225. 225. W! 1'v! )* work together across disciplines
  226. 226. (#" #%0+-,!" 0+#!%)" both in terms of what they can expect & what will be expected of them www.flickr.com/photos/martinteschner/4569495912
  227. 227. R!"p*%"#v! ,!"#$% means giving up some control to ensure it works for as many devices as possible www.flickr.com/photos/byte/8282578241
  228. 228. E%"-r#%$ that we do what’s best for our clients, our users & us as a company www.flickr.com/photos/stickkim/7491816206
  229. 229. :&! )* practice
  230. 230. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  231. 231. S)'r) b. identifying the main module types & common elements between pages
  232. 232. 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
  233. 233. 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
  234. 234. 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
  235. 235. A,'p) )* the device & screen in question; both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
  236. 236. 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
  237. 237. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  238. 238. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  239. 239. 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 www.flickr.com/photos/jorgeq82/4732700819
  240. 240. C!r)'#% *r#!%)')#*%" are better for certain tasks Reading Watching Typing
  241. 241. (!r! 'r! three main approaches for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
  242. 242. 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 www.flickr.com/photos/pinkpurse/5355919491 • • • Share (on Facebook & Twitter) Login & registration Overview of number of found & not found item
  243. 243. A f!w final words...
  244. 244. A%. "0r!!% should be your starting point www.flickr.com/photos/byte/8282578241
  245. 245. “ Ev!r. r!"p*%"#v! ,!"#$% pr*2!0) is also a content strategy project. ” - K'r!% M0Gr'%! Image courtesy of Shutterstock
  246. 246. (!r! #" %* right way & the following is just one way of approaching it www.flickr.com/photos/jtravism/2417205289
  247. 247. 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
  248. 248. I)’" %*) 2-") about the smaller screens but also the big ones www.flickr.com/photos/jolives/2889944573/
  249. 249. I)"’" 'b*-) thinking & planning ahead www.flickr.com/photos/jolives/2889944573
  250. 250. I) ,*!"%’) have to break the bank. Maintaining different versions will www.flickr.com/photos/gi/5537770007
  251. 251. B! 0r!')#v! & challenge what exists today www.flickr.com/photos/oter/5090592214
  252. 252. R!&!&b!r )* test & iterate, sketch as much as possible & work collaboratively www.flickr.com/photos/jdhancock/4354438814
  253. 253. “ Every time you redesign God kills a kitten “ - L*-#" R<!%f!+, www.flickr.com/photos/matterphotography/2739799786
  254. 254. U"!9+ resources
  255. 255. 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/ http://foundation.zurb.com/docs/layout.php www.flickr.com/photos/st3f4n/4387291247
  256. 256. 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 www.flickr.com/photos/st3f4n/4387291247
  257. 257. 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/ www.flickr.com/photos/st3f4n/4387291247
  258. 258. 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 www.flickr.com/photos/st3f4n/4387291247
  259. 259. 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 www.flickr.com/photos/st3f4n/4387291247
  260. 260. 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 www.flickr.com/photos/st3f4n/4387291247
  261. 261. 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 www.flickr.com/photos/st3f4n/4387291247
  262. 262. 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 www.flickr.com/photos/st3f4n/4387291247
  263. 263. 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/ www.flickr.com/photos/st3f4n/4387291247
  264. 264. 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/ www.flickr.com/photos/st3f4n/4387291247
  265. 265. 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 www.flickr.com/photos/st3f4n/4387291247
  266. 266. 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/ www.flickr.com/photos/st3f4n/4387291247
  267. 267. 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 www.flickr.com/photos/st3f4n/4387291247
  268. 268. 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/ www.flickr.com/photos/st3f4n/4387291247
  269. 269. 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/ www.flickr.com/photos/st3f4n/4387291247
  270. 270. ('%3 .*-. Questions? @annadahlstrom | anna.dahlstrom@gmail.com www.annadahlstrom.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×