Slides from my 1 hour class on January 18th at General Assembly in London during the Understanding UX day. ABSTRACT The rise in mobiles and tablets have changed the way we consume and interact with content, but also the way we design and what we base our design approach on. This class will teach you about the shift in user expectations, behaviour- and consumption patterns and what that means for designing products that will be used on multiple devices. Coming out of it you'll be equipped with guiding principles and tools to tackle the multiple device jungle.

1. Understanding User Experience - London 18 Jan 2012
DESIGNING FOR MULTIPLE DEVICES
www.flickr.com/photos/vegaseddie/3248076025
Anna Dahlström
co-founder byflock
www.annadahlstrom.com
anna.dahlstrom@gmail.com
annadahlstrom

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. AGENDA
1. DEVICE USAGE & PATTERNS
2. IMPLICATIONS FOR UX & DESIGN THINKING
3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP
4. RESPONSIVE
5. APPS
6. PRACTICE
7. SUMMARY
8. Q & A
www.flickr.com/photos/lokulin/3247322162

4. 1. FIRST UP...
DEVICE USAGE &
PATTERNS
www.flickr.com/photos/abroudjameur/5271057503

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

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

7. By the end of 2012, the number of mobile-
connected devices will exceed the number
of people on earth, and by 2016 there will
be 1.4 mobile devices per capita.*
* Source: www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
www.flickr.com/photos/nasamarshall/6289116940

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

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

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

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

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

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

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

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

16. “MOBILE USERS ARE
RUSHED &
ON THE GO”
THIS IS A MYTH
www.flickr.com/photos/theirmind/5001267661/

17. A LARGE PROPORTION OF
USAGE HAPPENS WHEN WE
HAVE TIME TO KILL
COMMUTING, WAITING BUT ALSO AT HOME
http://www.flickr.com/photos/hanhutton/320464105/

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

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

20. 2. THIS HAS...
IMPLICATIONS
FOR UX & DESIGN
www.flickr.com/photos/thelearningcurvedotca/5484130058

21. LIMITED DEVICE CAPABILITIES
USED TO MEAN LIMITED TASKS
E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU
www.flickr.com/photos/frantaylor/4296536332

22. RESULTED IN MOBILE
SPECIFIC WEBSITES
LESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION
DESKTOP
FULL WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
BESPOKE
CUT
DOWN
WEBSITE
http://desktopwallpaper-s.com/19-Computers/-/Future/

23. PEOPLE ARE CLICKING THE
‘FULL DESKTOP VERSION’ LINK
THERE IS A REASON FOR THAT
www.flickr.com/photos/demandaj/7287174776

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

25. 3. A CLOSER LOOK AT...
BESPOKE
MOBILE SITES vs.
RESPONSIVE SITES
vs. APPS
www.flickr.com/photos/derpunk/107345685

26. PRIMARY REASONS
FOR A BESPOKE
MOBILE SITE
• REQUIRED FOR THE AUDIENCE
• TECHNICAL LIMITATIONS TO CMS
www.flickr.com/photos/st3f4n/3476036180

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

28. 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
www.flickr.com/photos/lastquest/1472794031

29. THE ALTERNATIVE
IS MESSY & COSTLY
MAINTAINING DIFFERENT VERSIONS
USERS HAVING PROBLEMS FINDING
WHAT THEY ARE AFTER
(E.G. IN SEARCH)
www.flickr.com/photos/ericconstantineau/5618576278

30. CORE CONTENT SHOULD
REMAIN THE SAME BUT THE
EXPERIENCE SHOULD BE
OPTIMISED
BOTH IN DISPLAY OF CONTENT &
REGARDING USING DEVICE CAPABILITIES
www.flickr.com/photos/jmtimages/2883279193

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

32. WHETHER TO DO AN APP
OR NOT COMES DOWN TO...
• THE OBJECTIVE (USER & BUSINESS)
• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET
www.flickr.com/photos/31878512@N06/4704140020

33. DIFFERENT
TYPES OF APPS
THE MAIN TWO TYPES
NATIVE APPS (e.g. Instagram)
• MOST OPTIMISED USER EXPERIENCE
• ACCESS TO DEVICE CAPABILITIES & APIs
• BUT REQUIRES PLATFORM SPECIFIC CODE BASE
HYBRID (e.g. Facebook)
• 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

34. ” 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
www.flickr.com/photos/cristiano_betta/2909483129

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

36. “ 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
www.flickr.com/photos/adactio/5818096043

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

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

39. MOBILE VS. DESKTOP FIRST
• START LARGE OR SMALL
WHAT EVER WORKS BEST FOR YOU
• ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES
MOBILE VS. DESKTOP FIRST
• START LARGE OR SMALL
WHAT EVER WORKS BEST FOR YOU
• ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES

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

41. CONSIDER YOUR NAVIGATION
DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS
www.flickr.com/photos/tim_norris/2789759648

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

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

44. 5. WHAT ABOUT...
DOING AN APP?
www.flickr.com/photos/picsoflife/5314514977

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

46. EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
WITH THEIR OWN UI
GUIDELINES THAT
USERS ARE USED TO
www.flickr.com/photos/gadl/3570118243

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

48. RELATIVE NUMBER OF ACTIVE
ANDROID DEVICES RUNNING
A SPECIFIC VERSION
Source: http://developer.android.com/about/dashboards/index.html
www.flickr.com/photos/blakespot/4773693893

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

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

51. iPHONE
RESOURCES
HELP & INSPIRATION
WELL DOCUMENTED

52. ANDROID
RESOURCES
HELP & INSPIRATION A LITTLE
LESS WELL DOCUMENTED FOR
EARLIER VERSIONS

53. iPhone 12:15 PM More
BASIC iOS
Customise
APP NAME
IMG Item
NAVIGATION
IMG Item
IMG Item
IMG Item
CONSISTENT ACROSS IMG Item
VERSIONS Content area
IMG Item
IMG Item
NAVIGATION BAR IMG Item
Enables navigation through the app IMG
hierarchy. Holds the back button, Home Item Item Item More
controls for managing screen content &
the title of the screen. Home Item Item Item More
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.
Source: http://developer.android.com/design/patterns/new-4-0.html

54. 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)
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.
Source: http://developer.android.com/design/patterns/new-4-0.html

55. HOW TO TAME THE BEAST?
YOU LEARN BY DOING
www.flickr.com/photos/jojoneil/6359536591

56. 6. TIME TO
PRACTICE
http://www.flickr.com/photos/kalexanderson/6302660289/

57. BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDER THE FOLLOWING:
A major dating site has asked you to create
a campaign for Valentines day 2013 focused
EXERCISE ONE on "unexpected moments". The purpose is
to facilitate encounters & dates between
people in London looking to find that
special someone.
Location should be a key way to discover
people & suggestions for date activities.
What do you recommend in terms of their
presence, particularly mobile & why?
www.flickr.com/photos/jojoneil/6359536591
5 MINUTES

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

59. WHETHER TO DO AN APP
OR NOT COMES DOWN TO
• THE OBJECTIVE (USER & BUSINESS)
• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET
www.flickr.com/photos/31878512@N06/4704140020

60. EXERCISE ONE
BESPOKE MOBILE
SITE vs RESPONSIVE HOW WOULD MOST PEOPLE
ACCESS IT?
vs AN APP • MOSTLY DIRECT TRAFFIC
POSSIBLE ARGUMENT FOR APP
CONSIDER THE FOLLOWING: • MOSTLY VIA SHARED LINKS
MOBILE WEB PRESENCE NEEDED.
A major dating site has asked you to AN APP ALONE WON’T CUT IT
create a campaign for Valentines day 2013
focused on "unexpected moments". The
purpose is to facilitate encounters & ALSO CONSIDER...
dates between people in London looking • THE OBJECTIVE (USER & BUSINESS)
to find that special someone.
Location should be a key way to discover • IF THERE ARE SPECIFIC DEVICE
CAPABILITIES YOU WANT TO UTILISE
people & suggestions for date activities.
• IF OFFLINE READING/USAGE IS
What do you recommend in terms of REQUIRED
their presence, particularly mobile & why?
• & OF COURSE BUDGET
5 MINUTES
www.flickr.com/photos/jojoneil/6359536591

61. BUILDING A
RESPONSIVE SITE
THEY WANT TO INCLUDE THE FOLLOWING:
• About page • Sharing
• Search (people, activities) • Login & registration
• Activity suggestions • Data visualisations
• Notifications (active users, dates etc)
PART 1
EXERCISE TWO Pick either mobile or desktop & do a rough sketch
of what the home page should contain & how the
content should be prioritised. Where you see
appropriate include a reference to where imagery
should be used.
PART 2
Using content stacking methodology define how the
content should be prioritised on desktop & mobile.
www.flickr.com/photos/jojoneil/6359536591 10 MINUTES

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

63. EXERCISE TWO
BUILDING A
RESPONSIVE SITE Mobile
1
2 Header
THEY WANT TO INCLUDE THE FOLLOWING:
Logo
3
Nav
• About page • Sharing 4
Bath 5
• Search (people, activities) • Login & registration Desktop & Tablet section
intro
Ad
• Activity suggestions • Data visualisations
• Notifications
1 2
(active users, dates etc) Logo Header
4 5 6
PART 1 Bath section intro Ad Types of baths
3
Pick either mobile or desktop & do a rough sketch
Nav
of what the home page should contain & how the 7
content should be prioritised. Where you see
6
Related 7
Types of baths
8 Store products Related products
appropriate include a reference to where imagery locator
should be used. 9 Tools 8 Store
locator
9 Tools
PART 2 10
Footer
10
Footer
Using content stacking methodology define how the
content should be prioritised on desktop & mobile.
10 MINUTES
www.flickr.com/photos/jojoneil/6359536591

64. BUILDING AN APP
BASED ON THE CONTENT & FUNCTIONALITY
REQUIREMENTS, CONSIDER WHAT WOULD BE
SUITABLE FOR AN APP:
• About page • Sharing
• Search (people, activities) • Login & registration
• Activity suggestions • Data visualisations
• Notifications (active users, dates etc)
PART 1
EXERCISE THREE 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’.
www.flickr.com/photos/jojoneil/6359536591
10 MINUTES

65. iPhone 12:15 PM More
BASIC iOS
Customise
APP NAME
IMG Item
NAVIGATION
IMG Item
IMG Item
IMG Item
CONSISTENT ACROSS IMG Item
VERSIONS Content area
IMG Item
IMG Item
NAVIGATION BAR IMG Item
Enables navigation through the app IMG
hierarchy. Holds the back button, Home Item Item Item More
controls for managing screen content &
the title of the screen. Home Item Item Item More
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.
Source: http://developer.android.com/design/patterns/new-4-0.html

66. 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)
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.
Source: http://developer.android.com/design/patterns/new-4-0.html

67. EXERCISE THREE
BUILDING AN APP
iPhone 12:15 PM More Customise
APP NAME
IMG Item
IMG Item
BASED ON THE CONTENT & IMG Item
FUNCTIONALITY REQUIREMENTS, IMG Item
CONSIDER WHAT WOULD BE SUITABLE IMG Item
FOR AN APP: Content area
IMG Item
• About page • Sharing
IMG Item
• Search (people, activities) • Login & registration Item
IMG
• Activity suggestions • Data visualisations IMG
Home
• Notifications
Item Item Item More
(active users, dates etc)
Home Item Item Item More
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
www.flickr.com/photos/jojoneil/6359536591

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

69. 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
www.flickr.com/photos/thecaucas/2597813380 increasingly replicating that of desktop.

70. 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.
www.flickr.com/photos/thecaucas/2597813380

71. 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
www.flickr.com/photos/thecaucas/2597813380 on objectives & stats.

72. FOR
RESPONSIVE
DEFINE YOUR 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
www.flickr.com/photos/thecaucas/2597813380 you go.

73. 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.
www.flickr.com/photos/thecaucas/2597813380

74. 8. BEFORE I GO...
REMEMBER THAT
www.flickr.com/photos/abroudjameur/5271057503

75. ...IT’S NOT JUST ABOUT
THE SMALLER SCREENS
BUT ALSO THE BIG ONES
www.flickr.com/photos/jolives/2889944573/

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

77. IT DOESN’T
HAVE TO BREAK
THE BANK
BESIDES CONSIDER LOST
CUSTOMERS & MAINTAINING
MULTIPLE VERSIONS
http://www.flickr.com/photos/gi/5537770007/

78. BE CREATIVE & CHALLENGE
WHAT EXISTS TODAY
THAT’S WHAT MOVES US FORWARD
www.flickr.com/photos/oter/5090592214

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

80. BUT ABOVE ALL...
“ 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. ”
- Wilson Minor
http://www.flickr.com/photos/funch/4679422945/

81. 9. FOR THE ROAD
SOME TAKE
AWAYS
www.flickr.com/photos/st3f4n/4387291247

82. 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
www.flickr.com/photos/st3f4n/4387291247

83. 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/
www.flickr.com/photos/st3f4n/4387291247

84. 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 www.flickr.com/photos/st3f4n/4387291247

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