Slides from my introductory workshop at General Assembly in London on the 28th of March about designing for mobile devices.

1. www.flickr.com/photos/nrkbeta/3906687294/in/photostream
Anna Dahlström
founder byflock
www.annadahlstrom.com
anna.dahlstrom@gmail.com
annadahlstrom
GA Loves London: Mobile - 28 March 2013
Introductory workshop
DESIGNING FOR MOBILE DEVICES

2. I’m Anna
IA & UX DESIGNER | SWEDISH BUT LONDON BASED
FREELANCING + WORKING ON A STARTUP
LOVES QUOTES & CHALLENGES
This is Öresundsbron, the bridge between Sweden & Denmark
www.flickr.com/photos/dahlstroms/4411448782/

3. www.flickr.com/photos/jdhancock/4354438814
AGENDA
1. MOBILE USAGE & BEHAVIOUR PATTERNS
2. IMPLICATIONS FOR UX & DESIGNTHINKING
3. BESPOKE MOBILE SITE vs. RESPONSIVE vs.APP
4. RESPONSIVE
5. APPS
6. PRACTICE
7. SUMMARY
8. Q & A

4. www.flickr.com/photos/publicenergy/1846375599
1. FIRST UP...
MOBILE USAGE
& PATTERNS

5. http://desktopwallpaper-s.com/19-Computers/-/Future/
DEVICE: a thing defined for a specific
purpose or task & which can connect
to the internet

6. http://desktopwallpaper-s.com/19-Computers/-/Future/
THE FOCUS OFTODAY
SMARTPHONES | DESKTOP (TABLETS) - iOS & ANDROID

7. www.flickr.com/photos/raincitystudios/95234968/
The number of smartphones in use passed
the 1 billion mark in Q3 of 2012*
* Source: http://mobithinking.com/blog/one-billion-smartphones-users-in-the-world

8. www.flickr.com/photos/nasamarshall/6289116940
In 2009 1% of global internet traffic came
from mobiles. In 2010 4%. By the end of
2012 it was 13%.*
* Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile

9. www.flickr.com/photos/jayfresh/3388253576/
41% of emails are now opened on
mobile devices *
* Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices

10. www.flickr.com/photos/nadiya95/7217734288/
62% of 12-15 year olds in the UK own a
smartphone. UK average for adults is 45% *
* Source: http://thenextweb.com/insider/2012/10/23/children-texting-and-spending-more-time-online-according-to-ofcom/

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

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

13. www.flickr.com/photos/yahnyahn/2996454839
” The best computer is
the one you have with
you when you want
something done. “
- JACOB NIELSEN
MOBILE DEVICES ARE
USED ANYWHERE
& EVERYWHERE

14. USAGE PATTERNS
ACROSS DEVICES
www.flickr.com/photos/brandoncwarren/4236278556
“...as devices become
more mobile, it’s not
only changing where
we read, but when. ”
- POCKET (formerly Read it Later)

15. www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
- DESKTOP
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read

16. www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
- iPHONE
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read

17. www.flickr.com/photos/brandoncwarren/4236278556
POCKET’S STATS
- iPAD
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read

18. PEAKTIMES
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
•When we get up
•On our way to/ just arrived at work
•Commuting home
•Post dinner

19. www.flickr.com/photos/chicitoloco/8468592748/in/photostream/
“MOBILE USERS ARE
RUSHED & ONTHE GO”
THIS IS A MYTH

20. www.flickr.com/photos/anniemole/2424372024
A LARGE PROPORTION OF
USAGE HAPPENS WHEN WE
HAVETIMETO KILL
COMMUTING,WAITING BUT ALSO AT HOME

21. www.flickr.com/photos/edduddiee/4307943164
THE SAMETASKS ARE
CARRIED OUT ON
SMARTPHONES AS
ON DESKTOPS
AS DEVICES & EXPERIENCE BECOME MORE
OPTIMISED USAGE &TASK EXECUTION IS
INCREASING

22. www.flickr.com/photos/stuckincustoms/440157748
Three purchases are made through
eBay’s mobile applications every second.*
Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods

23. 2.THIS HAS...
IMPLICATIONS
FOR UX & DESIGN
http://www.flickr.com/photos/eyesore9/3206408088/

24. www.flickr.com/photos/frantaylor/4296536332
LIMITED DEVICE CAPABILITIES
USEDTO MEAN LIMITEDTASKS
E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU

25. http://desktopwallpaper-s.com/19-Computers/-/Future/
RESULTED IN MOBILE
SPECIFIC WEBSITES
LESS CONTENT & LINKS BACKTOTHE FULL DESKTOPVERSION
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
BESPOKE
CUT
DOWN
WEBSITE

26. www.flickr.com/photos/demandaj/7287174776
PEOPLE ARE CLICKINGTHE
‘FULL DESKTOPVERSION’ LINK
THERE IS A REASON FORTHAT

27. www.flickr.com/photos/joachim_s_mueller/7110473339
AN EQUAL &
CONTINUOS
EXPERIENCE
ACROSS DEVICES
THIS EXPECTATION WILL
ONLY GROW STRONGER

28. http://www.flickr.com/photos/young_einstein/74097753/
3.A CLOSER LOOK AT...
BESPOKE
MOBILE SITES vs.
RESPONSIVE SITES
vs.APPS

29. www.flickr.com/photos/st3f4n/3476036180
PRIMARY REASONS
FOR A BESPOKE
MOBILE SITE
• REQUIRED FORTHE AUDIENCE
•TECHNICAL LIMITATIONSTO CMS

30. http://www.flickr.com/photos/edenandjosh/2892956576/
BEST AVOIDED
IF WE CAN
IT CAN CAUSE ALL SORTS OF
PROBLEMS

31. www.flickr.com/photos/lastquest/1472794031
BUT WHY?
” Today's popular devices are
not tomorrow's so building
something which works on any
device is better than building
something which works on
today's devices “
- COMBINED WISE WORDS FROM @ONEXTRAPIXEL &
@TRENTWALTON

32. “ 1,057 different mobile devices accessed
The Guardian beta site yesterday (including
one person on a zune!)” *
* Source: The Guardian

33. www.flickr.com/photos/ericconstantineau/5618576278
THE ALTERNATIVE
IS MESSY & COSTLY
MAINTAINING DIFFERENTVERSIONS
USERS HAVING PROBLEMS FINDING
WHATTHEY ARE AFTER
(E.G. IN SEARCH)

34. www.flickr.com/photos/jmtimages/2883279193
CORE CONTENT SHOULD
REMAINTHE SAME BUTTHE
EXPERIENCE SHOULD BE
OPTIMISED
BOTH IN DISPLAY OF CONTENT &
REGARDING USING DEVICE CAPABILITIES

35. www.flickr.com/photos/andwhynot/2946734025
MOSTLY DIRECT TRAFFIC
POSSIBLE ARGUMENT FOR APP
MOSTLYVIA SHARED LINKS
MOBILE WEB PRESENCE NEEDED.
AN APP ALONE WON’T CUT IT
A BIT OF BOTH
THEN CONSIDER....
MOBILE PRESENCE vs.APP?
USE ANALYTICS FOR GUIDANCE

36. www.flickr.com/photos/31878512@N06/4704140020
WHETHERTO DO AN APP
OR NOT COMES DOWNTO...
•THE OBJECTIVE (USER & BUSINESS)
• IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET

37. DIFFERENT
TYPES OF APPS
THE MAINTWOTYPES
NATIVE APPS (e.g. Instagram)
• MOST OPTIMISED USER EXPERIENCE
• ACCESSTO DEVICE CAPABILITIES & APIs
• BUT REQUIRES PLATFORM SPECIFIC CODE BASE
HYBRID (e.g. First Facebook)
• USE OF HTML5 & JAVASRIPT
•WRAPPERTO PROVIDE NATIVE CAPABILITIES
• FEWER “VERSIONS” TO MAINTAIN
• BUT CAN BETIME CONSUMINGTO CREATE APP LIKE INTERACTIONS
• CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES

38. www.flickr.com/photos/cristiano_betta/2909483129
” Money spent developing a pretty but limited
iPhone app only benefits...the few, but money
spent on the website UI would have benefitted
everyone “
- Gary Marshall on ‘The app trap’ in .net Magaizine

39. www.flickr.com/photos/taytom/5277657429
4.THERE IS SOMETHING
CALLED...
RESPONSIVE
DESIGN

40. www.flickr.com/photos/adactio/5818096043
“ Design & development should respond to
the user’s behaviour & environment based on
screen size, platform & orientation.
[It’s]...a mix of flexible grids & layouts, images
& an intelligent use of media queries. ”
- SMASHING MAGAZINE

41. http://foundation.zurb.com/docs/layout.php
DEFINE
YOUR GRID
& BREAK
POINTS
• USE ASTHE BASIS OF
YOUR PAGE LAYOUTS
• CHECKPOINT FOR
MODULE SIZES &
VARIANTS
• FIXED OR FLUID
COLUMNS
• DEFINES HOW
CONTENT WILL
BEHAVE ACROSS
DEVICES

42. “ Content needs to be choreographed to
ensure the intended message is preserved
on any device and at any width ”
-TRENT WALTONwww.flickr.com/photos/theaftershock/2811382400/

43. DEFINE
YOUR
CONTENT
STACKING
STRATEGY
ACROSS DEVICES &
ORIENTATION
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
Desktop &Tablet
Mobile

44. MOBILEVS. DESKTOP FIRST
•START LARGE OR SMALL
WHAT EVER WORKS BEST FORYOU
•ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES
MOBILEVS. DESKTOP FIRST
•START LARGE OR SMALL
WHAT EVER WORKS BEST FORYOU
•ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES

45. www.flickr.com/photos/stephangeyer/
CONSIDERTHE
MOBILE CONTEXT
THE USE CASE MAY BE
THE SAME BUT
USING A MOBILE
DEVICE IS DIFFERENT

46. LIKE PLAYING REAL LIFETETRIS
PRE-DEFINED POCKETS FORTHE CONTENTTO SLOT INTO
www.flickr.com/photos/fritzon/195008860

47. www.flickr.com/photos/adactio/6153481666
80% of traffic 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: www.slideshare.net/yiibu/pragmatic-responsive-design

48. THE WEB IS
FULL OF
EXAMPLES
LOOK FOR INSPIRATION &
BEST PRACTICE
BUT DON’T BE AFRAIDTO
CHALLENGE OR COME UP
WITH SOMETHING... BETTER.
http://mediaqueri.es/popular/

49. www.flickr.com/photos/tim_norris/2789759648
CONSIDERYOUR NAVIGATION
DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS

50. EXCELLENT READ
‘RESPONSIVE NAVIGATION PATTERNS’
by Brad Frost.*
Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns

51. www.flickr.com/photos/melodramababs/2766765248/
“ Mobile navigation should be like a good
friend: there when you need them but cool
enough to give you your space.” *
* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns

52. www.flickr.com/photos/dopey/123646856

53. http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
5.WHAT ABOUT...
DOING AN APP?

54. www.flickr.com/photos/elwillo/5247084642
” Small, downloadable chunks
of software, they give people
access to information in a
neatly packaged format “
- Apps on tap,The Economist Oct 8th 2011
APPS ARE
FOCUSED & PERSONAL

55. www.flickr.com/photos/gadl/3570118243
EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
WITHTHEIR OWN UI
GUIDELINESTHAT
USERS ARE USEDTO

56. www.flickr.com/photos/nrkbeta/3906687294/in/photostream
NOT AS
EASY AS JUST
ANDROID
OR iOS
FRAGMENTATION ACROSS
DIFFERENTVERSIONS &
BACKWARDS
COMPATIBILITY SHOULD
BE CONSIDERED

57. RELATIVE NUMBER OF
ACTIVE ANDROID DEVICES
Source: http://developer.android.com/about/dashboards/index.html
www.flickr.com/photos/blakespot/4773693893

58. EXAMPLE OF ADOPTION
OF NEW iOSVERSION
Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1
www.flickr.com/photos/blakespot/4773693893

59. KEY DIFFERENCES BETWEEN
DESIGNING FOR ANDROID & iOS
iOS
CONSISTENCY
CONSISTENCY BETWEEN
VERSIONS & HANDSETS
QUICK ADOPTION OF NEW
VERSIONS
BACK BUTTON
SETTINGS BUTTON OR 'MORE'TO
ACCESS APP WIDE SETTINGS &
INFORMATION
ANDROID
FRAGMENTATION
DIFFERENT FOR DIFFERENTVERSIONS &
HANDSETS
SLOWER IMPLEMENTATION & UPTAKE
OF NEWERVERSIONS
HANDLED WITH EITHER SYSTEM BACK
BUTTON (EARLIERVERSIONS) OR BACK
& UP BUTTONS (LATESTVERSION)
OPTIONS MENU USEDTO HOUSE APP
WIDE SETTINGS & INFORMATION
Design
UI elements &
principles
Version adoption
Back navigation
Settings etc.
www.flickr.com/photos/nrkbeta/3906687294/in/photostream

60. iPHONE
RESOURCES
HELP & INSPIRATION
WELL DOCUMENTED

61. ANDROID
RESOURCES
HELP & INSPIRATION A LITTLE
LESS WELL DOCUMENTED FOR
EARLIERVERSIONS

62. Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS
NAVIGATION
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.
Content area
MoreItemItemHome Item
iPhone 12:15 PM
APP NAME
More Customise
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
Item
Item
Item
Item
Item
Item
Item
Item
MoreItemItemHome Item

63. Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CREAM
SANDWICH:
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)
UPVS. 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.

64. START BY
SKETCHING
YOUR SCREEN FLOWS,
NAVIGATION & CONTENT
www.flickr.com/photos/saucef/7184615025

65. www.flickr.com/photos/jojoneil/6359536591
HOWTOTAMETHE BEAST?
YOU LEARN BY DOING

66. 6.TIMETO
PRACTICE
http://www.flickr.com/photos/kalexanderson/6302660289/

67. www.flickr.com/photos/jojoneil/6359536591
BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDERTHE FOLLOWING:
A big retail store has asked you to come up
with a Summer campaign 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.
What do you recommend in terms of their
presence, particularly mobile & why?
5 MINUTES
EXERCISE ONE

68. www.flickr.com/photos/andwhynot/2946734025
MOSTLY DIRECT TRAFFIC
POSSIBLE ARGUMENT FOR APP
MOSTLYVIA SHARED LINKS
MOBILE WEB PRESENCE NEEDED.
AN APP ALONE WON’T CUT IT
A BIT OF BOTH
THEN CONSIDER....
MOBILE PRESENCE vs.APP?
USE ANALYTICS FOR GUIDANCE

69. www.flickr.com/photos/31878512@N06/4704140020
WHETHERTO DO AN APP
OR NOT COMES DOWNTO
•THE OBJECTIVE (USER & BUSINESS)
• IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET

70. www.flickr.com/photos/jojoneil/6359536591
EXERCISE ONE
BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDERTHE FOLLOWING:
A big retail store has asked you to come
up with a Summer campaign 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.
What do you recommend in terms of
their presence, particularly mobile & why?
5 MINUTES
HOW WOULD MOST PEOPLE
ACCESS IT?
•MOSTLY DIRECT TRAFFIC
POSSIBLE ARGUMENT FOR APP
•MOSTLYVIA SHARED LINKS
MOBILE WEB PRESENCE NEEDED.
AN APP ALONE WON’T CUT IT
ALSO CONSIDER...
•THE OBJECTIVE (USER & BUSINESS)
•IFTHERE ARE SPECIFIC DEVICE
CAPABILITIESYOU WANTTO UTILISE
•IF OFFLINE READING/USAGE IS
REQUIRED
• & OF COURSE BUDGET

71. www.flickr.com/photos/jojoneil/6359536591
BUILDING A
RESPONSIVE SITE
THEY WANT TO INCLUDE THE FOLLOWING:
•About page
• List of offers
• Product pages
• Notifications
PART 1
Pick either mobile or desktop & do a rough sketch
of what the home page should contain & how the
content should be prioritised.
PART 2
Using content stacking methodology define how the
content should be prioritised on desktop & mobile.
10 MINUTES
EXERCISETWO
• Share (on FB & Twitter)
• Login & registration
• Overview of number of
found & not found items

72. DEFINEYOUR CONTENT
STACKING STRATEGY
ACROSS DEVICES & ORIENTATION
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
Desktop &Tablet
Mobile
“ Content needs to be
choreographed to
ensure the intended
message is preserved
on any device and at
any width ”
-TRENT WALTON

73. www.flickr.com/photos/jojoneil/6359536591
EXERCISETWO
BUILDING A
RESPONSIVE SITE
THEY WANT TO INCLUDE THE FOLLOWING:
•About page
• List of offers
• Product pages
• Notifications
PART 1
Pick either mobile or desktop & do a rough sketch
of what the home page should contain & how the
content should be prioritised.
PART 2
Using content stacking methodology define how the
content should be prioritised on desktop & mobile.
10 MINUTES
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
locator
1
Logo
5
Ad
Desktop &Tablet
Mobile
• Share (on FB & Twitter)
• Login & registration
• Overview of number of
found & not found items

74. www.flickr.com/photos/jojoneil/6359536591
BUILDING AN APP
BASED ON THE CONTENT & FUNCTIONALITY
REQUIREMENTS, CONSIDER WHAT WOULD BE
SUITABLE FOR AN APP:
•About page
• List of offers
• Product pages
• Notifications
PART 1
Define the main sections your app would have.
PART 2
Looking at the navigation how would you structure
this if you were to do an iOS app & an Android app?
Focus on the Tab bar items respectively Action bar
items & what would go in the ‘More’ respectively
‘Overflow menu’.
10 MINUTES
EXERCISETHREE
• Share (on FB & Twitter)
• Login & registration
• Overview of number of
found & not found item

75. Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS
NAVIGATION
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.
Content area
MoreItemItemHome Item
iPhone 12:15 PM
APP NAME
More Customise
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
Item
Item
Item
Item
Item
Item
Item
Item
MoreItemItemHome Item

76. Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CREAM
SANDWICH:
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)
UPVS. 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.

77. www.flickr.com/photos/jojoneil/6359536591
EXERCISETHREE
BUILDING AN APP
BASED ON THE CONTENT &
FUNCTIONALITY REQUIREMENTS,
CONSIDER WHAT WOULD BE SUITABLE
FOR AN APP:
•About page
• List of offers
• Product pages
• Notifications
PART 1
Define the main sections your app would have.
PART 2
Looking at the navigation how would you
structure this if you were to do an iOS app &
an Android app? Focus on the Tab bar items
respectively Action bar items & what would go
in the ‘More’ respectively ‘Overflow menu’.
10 MINUTES
• Share (on FB & Twitter)
• Login & registration
• Overview of number of
found & not found item
Content area
MoreItemItemHome Item
iPhone 12:15 PM
APP NAME
More Customise
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
Item
Item
Item
Item
Item
Item
Item
Item
MoreItemItemHome Item

78. http://www.flickr.com/photos/martinteschner/4569495912/
7.TO
SUMMARISE

79. www.flickr.com/photos/thecaucas/2597813380
DEVICE USAGE &
PATTERNS
FUTURE DEVICES
The number of different devices will
only grow & we don’t know what’s
coming.
USED EVERYWHERE &
ANYWHERE
And we’re not only using them on the
go but increasingly when we have
some downtime including the sofa.
USE OF MOBILE DEVICES
Our use of mobile devices is
increasingly replicating that of desktop.

80. www.flickr.com/photos/thecaucas/2597813380
IMPLICATIONS
FOR UX &
DESIGN
THINKING
AN EQUAL & CONTINUOUS
EXPERIENCE ACROSS DEVICES
As they & the services we use
become more sophisticated &
optimised we expect more from them.
KEEP THE CORE BUT OPTIMISE
Consider the limitations but also the
opportunities with mobile devices.

81. www.flickr.com/photos/thecaucas/2597813380
WHEN
DO WHAT
BESPOKE MOBILE WEBSITE
Try to avoid it but do it if necessary
RESPONSIVE DESIGN
The most device & future “proof”
approach right now. Use if possible.
But challenge content delivery.
APP
Base on user & business needs. Strong
argument if you require offline
reading/functionality & access to
device capabilities. Base which type
on objectives & stats.

82. www.flickr.com/photos/thecaucas/2597813380
FOR
RESPONSIVE
DEFINEYOUR GRID &
BREAKPOINTS
This is the backbone of responsive
design & content choreography.
DON’T FORGET THE
NAVIGATION
Consider the pros & cons of
different methods.
TEST & COLLABORATE
This is new grounds & we’re all
learning so work together & test as
you go.

83. www.flickr.com/photos/thecaucas/2597813380
FOR APPS
REMEMBER PLATFORM SPECIFIC
GUIDELINES
Adhering to them will make your
app easier to use.
CONSIDER BACKWARDS
COMPATIBILITY
Not everyone will be on the latest
version. Ensure you cater for the
majority.
CONSULT THE INTERNET
There are a number of great
resources for knowledge &
inspiration. Use them.

84. 8. BEFORE I GO...
REMEMBERTHAT
www.flickr.com/photos/46355638@N00/4414640784

85. www.flickr.com/photos/jolives/2889944573/
IT’S ABOUT
THINKING AHEAD
PLAN 5YEARS AHEAD WITH
“FUTURE PROOFING” IN MIND

86. http://www.flickr.com/photos/gi/5537770007/
IT DOESN’T
HAVETO BREAK
THE BANK
BESIDES CONSIDER LOST
CUSTOMERS & MAINTAINING
MULTIPLEVERSIONS

87. www.flickr.com/photos/oter/5090592214
BE CREATIVE & CHALLENGE
WHAT EXISTSTODAY
THAT’S WHAT MOVES US FORWARD

88. www.flickr.com/photos/stevendepolo/3378152784
CLOSER & MORE
REWARDING
COLLABORATION
BETWEEN DISCIPLINES & WITH CLIENTS

89. - Wilson Minor
“ We’re not just making pretty
interfaces.We’re actually in the process of
making an environment where we’ll spend
most of our time, for the rest of our lives.
We’re the designers.We’re the builders.
What do we want that environment to feel
like? What do we want to feel like.
http://www.flickr.com/photos/funch/4679422945/
”
BUT ABOVE ALL...

90. www.flickr.com/photos/st3f4n/4387291247
9. FORTHE ROAD
SOMETAKE
AWAYS

91. www.flickr.com/photos/st3f4n/4387291247
PLATFORM
GUIDELINES
http://developer.apple.com/library/ios/
#DOCUMENTATION/UserExperience/
Conceptual/MobileHIG/
UIElementGuidelines/
UIElementGuidelines.html
http://mrgan.tumblr.com/post/
10492926111/labeling-the-back-button
http://developer.android.com/design/
index.html

92. www.flickr.com/photos/st3f4n/4387291247
PATTERN
LIBRARIES
http://pttrns.com/
http://mobile-patterns.com/
http://www.patternsofdesign.co.uk/
http://
www.mobiledesignpatterngallery.com/
mobile-patterns.php
http://www.androidpatterns.com/
http://androidpttrns.com/

93. www.flickr.com/photos/st3f4n/4387291247
RESPONSIVE
DESIGN
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-nav-patterns/
http://www.gridsetapp.com/
http://grid.mindplay.dk
http://goldengridsystem.com/
http://foundation.zurb.com/docs/layout.php

94. www.flickr.com/photos/dahlstroms/4411448782/
Thank you!
QUESTIONS?
annadahlstrom
annadahlstrom
anna.dahlstrom@gmail.com
www.annadahlstrom.com