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!/+!) +...
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...
41% 'f !3,#(" are now opened on mobile devices *
* Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened...
B- +0! !%) '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 +#3!" , ),-.*
* 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
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/ph...
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...
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.vibrantm...
&!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 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', 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 s...
O*r 3,#% 'p+#'%" are bespoke
mobile sites, responsive sites and apps

www.flickr.com/photos/martinteschner/4569495912
B!"p'2! 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'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/347603...
&! ,(+!r%,+#v! #" messy & costly:
means maintaining multiple technical
solutions & content

www.flickr.com/photos/ericcons...
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://ec...
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.fl...
M!!+
responsive design

www.flickr.com/photos/taytom/5277657429
B*+...
what about apps?

www.flickr.com/photos/tomitapio/4053123799/in/photostream
W0!+0!r +' do an app
or not comes down to...

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

www.flickr.com/photos/31878512@N06/4704140020
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 /'*r"!
budget

www.flickr.com/photos/68751915@N05/6869762317
A%,(-+#/" of entry points
can also provide some guidance

www.flickr.com/photos/andwhynot/2946734025
M,#%(- )#r!/+ +r,ffi/:
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
2. 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!!) +' /'%"#)!r fragmentation
across different versions &
backwards compatibility

www.flickr.com/photos/aforgrave/616868...
R!(,+#v! %*3b!r of active
Android devices across different versions

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

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

www.flickr.com/...
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/...
T!"+#%$ ,pp"

flow, navigation, interactions, transitions
Fr'3 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
3. 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!('p3!%+ "0'*() r!"p'%) to the
user’s behaviour & environment based on screen size,
platform & orientation. ...
&! 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.flick...
D!4%! -'*r content stacking strategy
across devices & orientation.

www.thismanslife.co.uk/projects/lab/responsivewirefram...
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. “
* Sou...
Br,) Fr9+ has written 2 excellent posts
on Responsive navigation patterns

xxx

http://bradfrostweb.com/blog/web/responsiv...
C'%"#)!r -'*r pr'1!/+: assess the depth
needed as well as pros & cons of approaches

www.flickr.com/photos/inpivic/5205918...
D!4%! & w'r2 w#+0 +:!" of navigation:
primary, secondary, tertiary, footer & contextual

http://palantir.net/blog/scalable...
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

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"#%$ !3*(,+'r" that allow you to
view your site across devices &...
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.sht...
A" ,(w,-"...
...it depends
“ 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 Window...
W! "0'*() 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+0!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...
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/767575704...
5. ;3! +' practice
&! BRIEF
A major dating site has asked you to create a campaign for Valentines day 2014
focused on "unexpected moments". T...
01

BESPOKE MOBILE SITE
VS. RESPONSIVE VS. AN APP

The client has come to you with their idea and are asking for your advi...
02

CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can
also form ...
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'%’+ 1*"+ work with columns
but think of the narrative of the views

www.flickr.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...
I"'(,+! !(!3!%+" 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 ...
02

CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can
also form ...
A f!w final words

www.flickr.com/photos/martinteschner/4569495912
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/441844256...
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

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

www.flickr.com/photos/boltofblue/44184425...
B,"#%$ br!,2p'#%+" on
screen sizes isn’t wrong, but
it is a temporary work around

www.flickr.com/photos/gozalewis/3249104...
W'r2 w#+0 breakpoints & tweakpoints,
focus on content layout & EMS instead of px

www.slideshare.net/yiibu/pragmatic-respo...
H'w w! ,ppr',/0 #+ depends
on your project, budget and time frame
& if it’s being built externally

www.flickr.com/photos/...
W0,+ w! /,%%'+ )' is take
a waterfall approach with responsive design
where we hand over from to the other
www.flickr.com/...
W! 0,v! +'
work together across disciplines
&#" #%/(*)!" /(#!%+" 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

xxx
www.flickr.com/phot...
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
Upcoming SlideShare
Loading in...5
×

Designing For Multiple Devices - Dublin Web Summit, Oct 2013

23,512

Published on

Slides from my 45min crash course workshops that I ran with General Assembly at the Dublin Web Summit 2013

Published in: Design, Sports, Technology
1 Comment
62 Likes
Statistics
Notes
No Downloads
Views
Total Views
23,512
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
428
Comments
1
Likes
62
Embeds 0
No embeds

No notes for slide

Designing For Multiple Devices - Dublin Web Summit, Oct 2013

  1. 1. D!"#$%#%$ for multiple devices DUBLIN WEB SUMMIT & GENERAL ASSEMBLY by Anna Dahlström | @annadahlstrom
  2. 2. &! w'r() we design for has become more complex www.flickr.com/photos/pagedooley/2121472112
  3. 3. W! *"!) +' only have to deal with different browsers, and the fold www.flickr.com/photos/jorgeq82/4732700819
  4. 4. T'),- #+’" br'w"!r" AND endless numbers of devices & screen sizes www.flickr.com/photos/adactio/6153481666
  5. 5. 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
  6. 6. A" 'f Q3 2012 we passed 1 billion smartphones in use www.flickr.com/photos/raincitystudios/95234968
  7. 7. 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.flickr.com/photos/helga/3952984450/
  8. 8. 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
  9. 9. 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
  10. 10. The average person looks at their phone 150 +#3!" , ),-.* * Source: www.textually.org/textually/archives/2012/02/030229.htm www.flickr.com/photos/jorgeq82/4732700819
  11. 11. 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
  12. 12. W! $' '%(#%! everywhere and anywhere www.flickr.com/photos/lencioni/5580154551
  13. 13. &! '() 3-+0 that mobile users are rushed & on the go doesn’t hold true www.flickr.com/photos/chicitoloco/8468592748/in/photostream
  14. 14. A (,r$! pr'p'r+#'% of our usage happens when we have time to kill www.flickr.com/photos/edduddiee/4307943164
  15. 15. &#" 0," #3p(#/,+#'%" for UX & design thinking. www.flickr.com/photos/eyesore9/3206408088
  16. 16. B!f'r! +0! 4r"+ #P0'%! the mobile use case was limited www.flickr.com/photos/frantaylor/4296536332
  17. 17. 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
  18. 18. I% f,/+, we still do but we’re noticing something www.flickr.com/photos/demandaj/7287174776
  19. 19. U"!r" .p!/+ an equal & continuous experience across devices www.flickr.com/photos/joachim_s_mueller/7110473339
  20. 20. “ 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
  21. 21. &!r! ,r! a number of reasons for this www.flickr.com/photos/martinteschner/4569495912
  22. 22. P!'p(! /,rr- '*+ the same tasks on mobiles as they do on desktops www.flickr.com/photos/philippe/2462550872
  23. 23. D!v#/!" & "!rv#/!" are getting more advanced & optimised for complex tasks www.flickr.com/photos/joeybones/6791201819
  24. 24. W! %' ('%$!r 'w% just one device but multiple & use them interchangeably www.flickr.com/photos/soyproject/6066959891
  25. 25. W! w,%+ +' find what we’re looking for irrespectively of the device we use www.flickr.com/photos/visualpunch/7351572896
  26. 26. 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
  27. 27. 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
  28. 28. S', w0,+ should we do? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  29. 29. 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
  30. 30. O*r 3,#% 'p+#'%" are bespoke mobile sites, responsive sites and apps www.flickr.com/photos/martinteschner/4569495912
  31. 31. B!"p'2! 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
  32. 32. R!"p'%"#v! "#+!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  33. 33. App", well we all know they come from app stores www.flickr.com/photos/paul-r/217948368
  34. 34. H'w do we know when to do what? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  35. 35. B!"p'2! 3'b#(! "#+!" should be avoided, if we can www.flickr.com/photos/edenandjosh/2892956576
  36. 36. Tw' 3,#% ./!p+#'%": technical limitations to the CMS, or if required for the audience www.flickr.com/photos/st3f4n/3476036180
  37. 37. &! ,(+!r%,+#v! #" messy & costly: means maintaining multiple technical solutions & content www.flickr.com/photos/ericconstantineau/5618576278
  38. 38. I+ 3!,%" maintaining multiple technical solutions... www.flickr.com/photos/nikio/3899114449
  39. 39. ...,%) ,("' maintaining multiple versions of your content www.flickr.com/photos/sharynmorrow/127184319
  40. 40. R!,(#"+#/,((- that means making cuts & frustrating users www.flickr.com/photos/bulldogsrule/187693681
  41. 41. 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
  42. 42. P''r 3'b#(! experiences result in the same thing - drop offs www.flickr.com/photos/sixmilliondollardan/2493495506
  43. 43. W0,+ w! "0'*() )' is keep the core content the same & optimise the experience, display & interactions to the device www.flickr.com/photos/jmtimages/2883279193
  44. 44. M!!+ responsive design www.flickr.com/photos/taytom/5277657429
  45. 45. B*+... what about apps? www.flickr.com/photos/tomitapio/4053123799/in/photostream
  46. 46. W0!+0!r +' do an app or not comes down to... www.flickr.com/photos/martinteschner/4569495912
  47. 47. U"!r & b*"#%!"" objectives... www.flickr.com/photos/31878512@N06/4704140020
  48. 48. If -'* %!!) to utilise device specific capabilities... www.flickr.com/photos/cindyli/3784225848
  49. 49. If 'ffl#%! r!,)#%$ is required... www.flickr.com/photos/arjencito/6531640463
  50. 50. A%) 'f /'*r"! budget www.flickr.com/photos/68751915@N05/6869762317
  51. 51. A%,(-+#/" of entry points can also provide some guidance www.flickr.com/photos/andwhynot/2946734025
  52. 52. M,#%(- )#r!/+ +r,ffi/: could be an argument for an app www.flickr.com/photos/haagsuitburo/5349040355
  53. 53. M,#%(- "0,r!) (#%2": ensure your site is optimised for mobile www.flickr.com/photos/soundslogical/4255801733
  54. 54. 2. App design
  55. 55. App" are focused & personal www.flickr.com/photos/jdhancock/4354438814
  56. 56. N'+ ," !,"- ," just doing an app for e.g. iOS or Android www.flickr.com/photos/nrkbeta/3906687294/in/photostream
  57. 57. N!!) +' /'%"#)!r fragmentation across different versions & backwards compatibility www.flickr.com/photos/aforgrave/6168689222
  58. 58. 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
  59. 59. C'3p,r#"'% 'f adoption rate of iOS7, iOS6 and iOS5 Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker www.flickr.com/photos/blakespot/4773693893
  60. 60. Ev!r- p(,+f'r3 has their own ui guidelines that their users are used to www.flickr.com/photos/gadl/3570118243
  61. 61. #P0'%! r!"'*r/!" help & inspiration well documented
  62. 62. A%)r'#) r!"'*r/!" help & inspiration a little less well documented for earlier versions
  63. 63. S+,r+ b- sketching screenflows, navigation & content www.flickr.com/photos/saucef/7184615025
  64. 64. Av'#) using the home screen as a stepping point. Instead deliver value from first view www.flickr.com/photos/lindzgraham/5605911999
  65. 65. T!"+#%$ ,pp" flow, navigation, interactions, transitions
  66. 66. Fr'3 testing sketches as paper prototypes or as clickable prototypes... www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062
  67. 67. ...+' iterations of wireframes & designs www.flickr.com/photos/fluent_methods/6961802861
  68. 68. 3. R!"p'%"#v! design
  69. 69. R!"p'%"#v! "#+!" have the same url & is basically “one site” FULL WEBSITE FULL WEBSITE FULL WEBSITE http://desktopwallpaper-s.com/19-Computers/-/Future
  70. 70. “ 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#%! www.flickr.com/photos/adactio/5818096043
  71. 71. &! b,/2b'%! #" your grid & breakpoints http://foundation.zurb.com/docs/layout.php
  72. 72. C'(*3%" & $*++!r" can be fluid or fixed, or a combination. http://foundation.zurb.com/docs/layout.php
  73. 73. &! $r#) 0!(p" w#+0 defining modules for pages & views www.flickr.com/photos/donsolo/2136923757
  74. 74. “ 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,(+'%
  75. 75. D!4%! -'*r content stacking strategy across devices & orientation. www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  76. 76. S' +0,+ #+’" /,r!8((considered, like this http://thenextweb.com/
  77. 77. M'b#(! 'r )!"2+'p 4r"+, the key is considering the content & how it will work across devices
  78. 78. “ 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
  79. 79. 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
  80. 80. C'%"#)!r -'*r pr'1!/+: assess the depth needed as well as pros & cons of approaches www.flickr.com/photos/inpivic/5205918163/
  81. 81. D!4%! & w'r2 w#+0 +:!" of navigation: primary, secondary, tertiary, footer & contextual http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  82. 82. T!"+ as early as possible & then continuously
  83. 83. I% +0! br'w"!r by resizing the browser window & checking the display of content http://thenextweb.com
  84. 84. I% +0! br'w"!r by designing in the browser & creating a working HTML prototype www.flickr.com/photos/jorgeq82/4732700819
  85. 85. U"#%$ +''(" that help you style & test your typography before implementing it http://responsive.is/typecast.com
  86. 86. 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/
  87. 87. O% ,/+*,( )!v#/!", though expensive there are ways around it www.flickr.com/photos/arne/5835855777/in/photostream
  88. 88. 4. I%p*+, 'r#!%+,+#'%, touch screens across devices
  89. 89. “ T'*/0 has landed on the desktop. “ - J90 C(,r2 www.flickr.com/photos/patdavid/9391602153
  90. 90. ‘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
  91. 91. A" ,(w,-"... ...it depends
  92. 92. “ 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
  93. 93. W! "0'*() consider touch across all devices & screen sizes. Not just smartphones & tablets www.flickr.com/photos/adactio/6153481666
  94. 94. 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
  95. 95. 49% 'f *"!r" hold their phone in one hand, but how they hold it differs www.flickr.com/photos/jorgeq82/4732700819
  96. 96. 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
  97. 97. 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
  98. 98. C!r+,#% 'r#!%+,+#'%" are better for certain tasks Reading Watching Typing
  99. 99. &!r! ,r! three main approaches for adapting to orientation SCALE RE-POSITION REVEAL/ HIDE
  100. 100. 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
  101. 101. 5. ;3! +' practice
  102. 102. &! 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)
  103. 103. 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? 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
  104. 104. 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 www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  105. 105. S+,r+ b- identifying the main module types & common elements between pages
  106. 106. 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
  107. 107. D'%’+ 1*"+ work with columns but think of the narrative of the views www.flickr.com/photos/garrettc/6260768486/
  108. 108. 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
  109. 109. 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
  110. 110. A),p+ +' the device & screen in question; both order & priority as well as interactions, how much to show & how www.flickr.com/photos/katherinekenny
  111. 111. 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
  112. 112. 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 www.flickr.com/photos/pinkpurse/5355919491 • • Login & registration Data visualisations (active users, dates organised etc)
  113. 113. A f!w final words www.flickr.com/photos/martinteschner/4569495912
  114. 114. A#3 +' make it more future proof by moving away from specific devices www.flickr.com/photos/byte/8282578241
  115. 115. &#" brings us back to the importance of modularity in responsive design www.flickr.com/photos/donsolo/2136923757/
  116. 116. L!"" ,b'*+ p,$!" & more focus on the building blocks that makes up those views www.flickr.com/photos/boltofblue/4418442567
  117. 117. N' 3'r! is it about beautiful page designs... www.flickr.com/photos/miuenski/3127285991
  118. 118. ...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
  119. 119. &! 3'r! you reuse, the less modules there will be to design, define and develop www.flickr.com/photos/boltofblue/4418442567
  120. 120. B,"#%$ br!,2p'#%+" on screen sizes isn’t wrong, but it is a temporary work around www.flickr.com/photos/gozalewis/3249104929
  121. 121. W'r2 w#+0 breakpoints & tweakpoints, focus on content layout & EMS instead of px www.slideshare.net/yiibu/pragmatic-responsive-design
  122. 122. H'w w! ,ppr',/0 #+ depends on your project, budget and time frame & if it’s being built externally www.flickr.com/photos/75905404@N00/7126146307
  123. 123. W0,+ w! /,%%'+ )' is take a waterfall approach with responsive design where we hand over from to the other www.flickr.com/photos/bingisser/154452815
  124. 124. W! 0,v! +' work together across disciplines
  125. 125. &#" #%/(*)!" /(#!%+" both in terms of what they can expect & what will be expected of them www.flickr.com/photos/martinteschner/4569495912
  126. 126. 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
  127. 127. E%"*r#%$ that we do what’s best for our clients, our users & us as a company www.flickr.com/photos/stickkim/7491816206
  128. 128. “ Every time you redesign God kills a kitten “ - L'*#" R9!%f!() www.flickr.com/photos/matterphotography/2739799786
  129. 129. &,%2 -'*! @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.

×