1. Transport for London should create a responsive website rather than a bespoke mobile site or app.
2. A responsive site allows for a continuous user experience across devices and future-proofs the site.
3. An app may not be necessary if most traffic comes through shared links on the desktop site.
4. Analytics should continue to be monitored to determine if an app would provide additional value.
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Ā
Designing for multiple devices, GA London - 6 Aug 2012
1. DESIGNING FOR MULTIPLE DEVICES
London August 6th 2012
Anna Dahlstrƶm
co-founder byļ¬ock
www.annadahlstrom.com
annadahlstrom
2. Iām Anna
IA & UX DESIGNER | SWEDISH BUT LONDON
BASED | LOVES QUOTES & CHALLENGES |
WORKS ON A STARTUP + FREELANCING
This is me at my favourite place, KnƤbƤckshusen in SkƄne, Sweden
Photo curtesy of my sister
3. IāVE BEEN WORKING
IN UX SINCE 2001
ā 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.ļ¬ickr.com/photos/funch/4679422945/
4. OBJECTIVE TODAY
1. UNDERSTANDING USAGE
PATTERNS ACROSS DEVICES
2. WHEN TO DO A BESPOKE MOBILE
SITE vs. RESPONSIVE SITE vs. AN APP
3. UNDERSTANDING DESIGN & UX
PRINCIPLES FOR DIFFERENT
PLATFORMS
www.ļ¬ickr.com/photos/tim_norris/2789759648
5. AGENDA
1. DEVICE USAGE & PATTERNS
2. IMPLICATIONS FOR UX & DESIGN THINKING
3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP
4. DOING A RESPONSIVE SITE
5. DOING AN APP
6. PRACTICE
7. SUMMARY
8. Q & A
www.ļ¬ickr.com/photos/horrigans/5649006182
6. 1. FIRST UP...
DEVICE USAGE &
PATTERNS
www.ļ¬ickr.com/photos/publicenergy/1846375599
7. DEVICE: a thing deļ¬ned for a speciļ¬c
purpose or task & which can connect
to the internet
http://desktopwallpaper-s.com/19-Computers/-/Future/
8. THE FOUCS OF TODAY
SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID
http://desktopwallpaper-s.com/19-Computers/-/Future/
9. 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.ļ¬ickr.com/photos/nasamarshall/6289116940
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.ļ¬ickr.com/photos/yahnyahn/2996454839
11. The average person looks at their phone
150 times a day.*
* Source: www.textually.org/textually/archives/2012/02/030229.htm
www.ļ¬ickr.com/photos/jorgeq82/4732700819
12. 40% of people use their phone in the
bathroom*
* Source: http://www.lukew.com/ff/entry.asp?1500
www.ļ¬ickr.com/photos/exlibris/2552107635
13. USAGE PATTERNS
ACROSS DEVICES
ā...as devices
become more
mobile, itās not only
changing where we
read, but when. ā
- POCKET (formerly Read it Later)
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
14. A MISCONCEPTION
THAT MOBILE USERS
ARE RUSHED &
ON THE GO
A LARGE PROPORTION OF USAGE
HAPPENS WHEN WE
HAVE TIME TO KILL
www.ļ¬ickr.com/photos/yahnyahn/2996453841/in/photostream
15. THE SAME TASKS ARE
CARRIED OUT ON
SMARTPHONES AS
ON DESKTOPS
AS DEVICES & EXPERIENCE BECOME MORE
OPTIMISED USAGE & TASK EXECUTION IS
INCREASING
www.ļ¬ickr.com/photos/edduddiee/4307943164
16. Three purchases are made through
eBayās mobile applications every second.*
Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods
www.ļ¬ickr.com/photos/stuckincustoms/440157748
17. 2. THIS HAS...
IMPLICATIONS
FOR UX & DESIGN
http://www.ļ¬ickr.com/photos/eyesore9/3206408088/
18. LIMITED DEVICE CAPABILITIES
USED TO MEAN LIMITED TASKS
E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU
www.ļ¬ickr.com/photos/frantaylor/4296536332
19. 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/
20. PEOPLE ARE CLICKING THE
āFULL DESKTOP VERSIONā LINK
THERE IS A REASON FOR THAT
www.ļ¬ickr.com/photos/dm-set/3721351367
21. AN EQUAL & CONTINUOS
EXPERIENCE ACROSS DEVICES
THIS EXPECTATION WILL ONLY GROW STRONGER
www.ļ¬ickr.com/photos/thriol/221785705/sizes/z/in/photostream
22. CORE CONTENT SHOULD
REMAIN THE SAME BUT
THE EXPERIENCE SHOULD
BE OPTIMISED
BOTH IN DISPLAY OF CONTENT &
REGARDING USING DEVICE CAPABILITIES
www.ļ¬ickr.com/photos/jmtimages/2883279193
23. 3. A CLOSER LOOK AT...
BESPOKE
MOBILE SITES vs.
RESPONSIVE SITES
vs. APPS
http://www.ļ¬ickr.com/photos/young_einstein/74097753/
24. PRIMARY REASONS
FOR A BESPOKE
MOBILE SITE
ā¢ REQUIRED FOR THE AUDIENCE
ā¢ TECHNICAL LIMITATIONS TO CMS
www.ļ¬ickr.com/photos/st3f4n/3476036180
25. BUT IF WE CAN
WE SHOULD AVOID IT
http://www.ļ¬ickr.com/photos/edenandjosh/2892956576/
26. 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.ļ¬ickr.com/photos/lastquest/1472794031
27. THE ALTERNATIVE
IS MESSY & COSTLY
MAINTAINING DIFFERENT VERSIONS
USERS HAVING PROBLEMS FINDING
WHAT THEY ARE AFTER
(E.G. IN SEARCH)
www.ļ¬ickr.com/photos/ericconstantineau/5618576278
28. 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.ļ¬ickr.com/photos/andwhynot/2946734025
29. 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.ļ¬ickr.com/photos/31878512@N06/4704140020
30. 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
31. ā Money spent developing a pretty but limited
iPhone app only beneļ¬ts...the few, but money
spent on the website UI would have beneļ¬tted
everyone ā
- Gary Marshall on āThe app trapā in .net Magaizine
www.ļ¬ickr.com/photos/cristiano_betta/2909483129
32. 4. THERE IS SOMETHING
CALLED...
RESPONSIVE
DESIGN
http://www.ļ¬ickr.com/photos/paperpariah/4301471586/
33. ā Design & development should respond to
the userās behaviour & environment based on
screen size, platform & orientation.
[Itās]...a mix of ļ¬exible grids & layouts, images
& an intelligent use of media queries. ā
- SMASHING MAGAZINE
www.ļ¬ickr.com/photos/adactio/5818096043
34. MOBILE VS. DESKTOP FIRST
ā¢ START LARGE OR SMALL
WHAT EVER WORKS BEST FOR YOU
ā¢ ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW IT WILL WORK
ACROSS DEVICES
www.ļ¬ickr.com/photos/kasaa/3015846221/in/photostream
35. 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
36. 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
37. THE WEB IS
FULL OF
EXAMPLES
LOOK FOR INSPIRATION &
BEST PRACTICE
e.g. as shown on the right
http://mediaqueri.es/popular/
BUT DONāT BE AFRAID TO
CHALLENGE OR COME UP
WITH SOMETHING... BETTER.
http://mediaqueri.es/popular/
38. CONSIDER YOUR NAVIGATION
DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS
www.ļ¬ickr.com/photos/tim_norris/2789759648
41. 5. WHAT ABOUT...
DOING AN APP?
http://www.ļ¬ickr.com/photos/tomitapio/4053123799/in/photostream/
42. 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.ļ¬ickr.com/photos/elwillo/5247084642
43. EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
EACH PLATFORM HAVE
THEIR OWN UI
GUIDELINES THAT
USERS ARE USED TO
www.ļ¬ickr.com/photos/gadl/3570118243
44. RELATIVE NUMBER OF ACTIVE ANDROID DEVICES RUNNING A SPECIFIC VERSION
NOT AS
EASY AS JUST
ANDROID
OR iOS Source: http://developer.android.com/resources/dashboard/platform-versions.html
FRAGMENTATION ACROSS EXAMPLE OF ADOPTION OF NEW iOS VERSION
DIFFERENT VERSIONS &
BACKWARDS
COMPATIBILITY SHOULD
BE CONSIDERED
Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1
45. KEY DIFFERENCES BETWEEN
DESIGNING FOR ANDROID & iOS
iOS ANDROID
CONSISTENCY Design FRAGMENTATION
CONSISTENCY BETWEEN UI elements & DIFFERENT FOR DIFFERENT VERSIONS &
VERSIONS & HANDSETS principles HANDSETS
QUICK ADOPTION OF NEW Version adoption SLOWER IMPLEMENTATION & UPTAKE
VERSIONS OF NEWER VERSIONS
BACK BUTTON Back navigation HANDLED WITH EITHER SYSTEM BACK
BUTTON (EARLIER VERSIONS) OR BACK
& UP BUTTONS (LATEST VERSION)
SETTINGS BUTTON OR 'MORE' TO OPTIONS MENU USED TO HOUSE APP
ACCESS APP WIDE SETTINGS & Settings etc.
WIDE SETTINGS & INFORMATION
INFORMATION
48. 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 ļ¬t in the tab bar.
Source: http://developer.android.com/design/patterns/new-4-0.html
49. 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 + overļ¬ow 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
50. HOW TO TAME THE BEAST?
YOU LEARN BY DOING
www.ļ¬ickr.com/photos/jojoneil/6359536591
51. 6. TIME TO
PRACTICE
http://www.ļ¬ickr.com/photos/kalexanderson/6302660289/
52. BESPOKE MOBILE
SITE vs ADAPTIVE
vs AN APP
CONSIDER THE FOLLOWING SITUATION
OR USE A PROJECT OF YOUR OWN:
In preparation for the London 2012 Olympics, Transport for
EXERCISE ONE London are considering creating a bespoke section of their
site focused on travelling to and from venues.
What do you recommend in terms of their
presence, particularly mobile & why?
10 MINUTES
www.ļ¬ickr.com/photos/jojoneil/6359536591
53. 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.ļ¬ickr.com/photos/andwhynot/2946734025
54. 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.ļ¬ickr.com/photos/31878512@N06/4704140020
55. EXERCISE ONE
BESPOKE HOW WOULD MOST PEOPLE ACCESS IT?
MOBILE SITE vs ā¢MOSTLY DIRECT TRAFFIC
POSSIBLE ARGUMENT FOR APP
ADAPTIVE ā¢MOSTLY VIA SHARED LINKS
MOBILE WEB PRESENCE NEEDED. AN APP ALONE
WONāT CUT IT
vs AN APP
CONSIDER...
CONSIDER THE FOLLOWING SITUATION
OR USE A PROJECT OF YOUR OWN: ā¢ THE OBJECTIVE (USER & BUSINESS)
In preparation for the London 2012 Olympics, ā¢ IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU
Transport for London are considering creating WANT TO UTILISE
a bespoke section of their site focused on
travelling to and from venues. ā¢ IF OFFLINE READING/USAGE IS REQUIRED
ā¢ & OF COURSE BUDGET
What do you recommend in
terms of their presence,
particularly mobile & why?
10 MINUTES
www.ļ¬ickr.com/photos/jojoneil/6359536591
56. BUILDING A
RESPONSIVE SITE
TRANSPORT FOR LONDON WANTS TO INCLUDE THE
FOLLOWING ON THEIR SITE:
ā¢ Latest travel updates ā¢ London 2012 focused travel maps
ā¢ Basic travel search ā¢ Need to know venue information
ā¢ Station updates ā¢ Link to partner sites
ā¢ Tips on quickest routes (London 2012, BBC)
EXERCISE TWO PART 1
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 deļ¬ne how the content
should be prioritised on desktop and mobile (portrait).
15 MINUTES
www.ļ¬ickr.com/photos/jojoneil/6359536591
57. 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
58. EXERCISE TWO
BUILDING A Mobile
RESPONSIVE
1
2 Header
Logo
3
Nav
SITE Desktop & Tablet
4
Bath
section
intro
5
Ad
TRANSPORT FOR LONDON WANTS TO INCLUDE 1 2
THE FOLLOWING ON THEIR SITE: Logo Header
ā¢ Latest travel updates ā¢ London 2012 focused travel maps 4 5 6
ā¢ Basic travel search ā¢ Need to know venue information Bath section intro Ad Types of baths
ā¢ Station updates ā¢ Link to partner sites 3
ā¢ Tips on quickest routes (London 2012, BBC) Nav
PART 1
7
6
Related
Pick either mobile or desktop & do a rough sketch of 8 Store
Types of baths
products
7
Related products
what the home page should contain & how the content locator
should be prioritised. Where you see appropriate include
a reference to where imagery should be used. 9 Tools 8 Store
locator
9 Tools
PART 2 10 10
Footer Footer
Using content stacking methodology deļ¬ne how the
content should be prioritised on desktop and mobile
(portrait).
15 MINUTES
www.ļ¬ickr.com/photos/jojoneil/6359536591
59. BUILDING AN APP
BASED ON THE CONTENT FOR THE SITE & WHAT YOU
KNOW ABOUT TRAVELLING AROUND LONDON,
CONSIDER WHAT WOULD BE SUITABLE FOR AN APP.
ā¢ Latest travel updates ā¢ London 2012 focused travel maps
ā¢ Basic travel search ā¢ Need to know venue information
ā¢ Station updates ā¢ Link to partner sites
ā¢ Tips on quickest routes (London 2012, BBC)
PART 1
EXERCISE THREE Deļ¬ne 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 āOverļ¬ow menuā.
15 MINUTES
www.ļ¬ickr.com/photos/jojoneil/6359536591
60. 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 ļ¬t in the tab bar.
Source: http://developer.android.com/design/patterns/new-4-0.html
61. 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 + overļ¬ow 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
62. EXERCISE THREE
BUILDING AN
iPhone 12:15 PM More Customise
APP NAME
IMG Item
APP
IMG Item
IMG Item
IMG Item
Item
BASED ON THE CONTENT FOR THE SITE & WHAT
IMG
Content area
YOU KNOW ABOUT TRAVELLING AROUND IMG Item
LONDON, CONSIDER WHAT WOULD BE SUITABLE IMG Item
FOR AN APP.
IMG Item
ā¢ Latest travel updates ā¢ London 2012 focused travel maps IMG
ā¢ Basic travel search ā¢ Need to know venue information Home Item Item Item More
ā¢ Station updates ā¢ Link to partner sites
ā¢ Tips on quickest routes (London 2012, BBC) Home Item Item Item More
PART 1
Deļ¬ne 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 āOverļ¬ow menuā.
15 MINUTES
www.ļ¬ickr.com/photos/jojoneil/6359536591
63. 7. TO
SUMMARISE
http://www.ļ¬ickr.com/photos/martinteschner/4569495912/
64. 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.
OUR USE OF MOBILE DEVICES
Our use of mobile devices is
www.ļ¬ickr.com/photos/thecaucas/2597813380 increasingly replicating that of desktop.
65. 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.ļ¬ickr.com/photos/thecaucas/2597813380
66. WHEN
DO WHAT
BESPOKE MOBILE WEBSITE
Try to avoid it but do it if necessary
RESPONSIVE & ADAPTIVE DESIGN
The most device & future adaptive
approach right now. Use if possible.
But challenge content delivery.
APP
Use if you require ofļ¬ine reading/
functionality & access to device
capabilities. Base which type on
objectives & stats.
www.ļ¬ickr.com/photos/thecaucas/2597813380
67. 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.ļ¬ickr.com/photos/thecaucas/2597813380 you go.
68. 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.ļ¬ickr.com/photos/thecaucas/2597813380
69. BEFORE I GO REMEMBER THAT...
ā¢ DESIGNING FOR DIFFERENT DEVICES IS NOT
JUST ABOUT THE SMALLER SCREENS
ā¢ ITāS ALSO ABOUT THE LARGER ONES
ā¢ & ITāS ABOUT THINKING AHEAD
ā¢ & ABOUT BEING CLEVER IN WHAT WE DO
www.ļ¬ickr.com/photos/publicenergy/1846375599