Slides from the first of my 3 part series classes at General Assembly in London on the 24th of July 2013.
https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172
ABSTRACT
This introductory class will cover the basics of responsive design and mobile apps (for both Android and iOS), and how expectations and practices have changed for both.
2. I’m Anna
IA & UX DESIGNER | FREELANCE SINCE 2011
SWEDISH | IN LONDON SINCE 2006
This is me at my favourite place, Knäbäckshusen in Skåne, Sweden
Photo curtesy of my sister
7. www.flickr.com/photos/hlkljgk/5764422581
For every human that enters the world,
five mobile devices are created*
* 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
8. www.flickr.com/photos/nasamarshall/6289116940
In 2009 1% of global internet traffic came
from mobiles. In 2010 the number was 4%.
By the end of 2012 it had risen to13%.*
* Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile
30. www.flickr.com/photos/mkhmarketing/8468995025
Roughly 1 in 10 people that access Facebook
each month do so from a feature phone*
* Source: www.thenextweb.com/facebook/2013/07/22/facebooks-every-phone-app-for-feature-phones-passes-100-million-monthly-active-users
33. 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
37. 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
38. 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. old 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
39. 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
41. 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
43. “ 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/
45. 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
47. LIKE PLAYING REAL LIFETETRIS
PRE-DEFINED POCKETS FORTHE CONTENTTO SLOT INTO
www.flickr.com/photos/fritzon/195008860
48. 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
49. 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/
58. RELATIVE NUMBER OF
ACTIVE ANDROID DEVICES
Source: http://developer.android.com/about/dashboards/index.html
www.flickr.com/photos/blakespot/4773693893
59. EXAMPLE OF ADOPTION
OF NEW iOSVERSION
Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1
www.flickr.com/photos/blakespot/4773693893
60. 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
63. 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
64. 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.
68. www.flickr.com/photos/jojoneil/6359536591
BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDERTHE FOLLOWING:
The city of London have asked you to come
up with a site that collates everything about
Halloween in London. The aim is to raise
awareness of events that are taking place and
to drive sales on the high street through
promoting offers from participating stores
the week leading up to Halloween.
What do you recommend in terms of their
mobile strategy and why? I.e. an app,
responsive or bespoke mobile site, or a
combination?
10 MINUTES
EXERCISE ONE
71. www.flickr.com/photos/jojoneil/6359536591
EXERCISE ONE
BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDERTHE FOLLOWING:
The city of London have asked you to come
up with a site that collates everything about
Halloween in London. The aim is to raise
awareness of events that are taking place and
to drive sales on the high street through
promoting offers from participating stores
the week leading up to Halloween.
What do you recommend in terms of their
mobile strategy and why? I.e. an app,
responsive or bespoke mobile site, or a
combination?
10 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
72. www.flickr.com/photos/jojoneil/6359536591
BUILDING A
RESPONSIVE SITE
FOR THE HALLOWEEN SITE THE CLIENT
WANTS TO INCLUDE THE FOLLOWING:
•About page
• Event calendar
• Maps
• List of offers
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.
15 MINUTES
EXERCISETWO
• Search
• Most popular
• Login & registration
• Share functionality
73. 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
74. www.flickr.com/photos/jojoneil/6359536591
EXERCISETWO
BUILDING A
RESPONSIVE SITE
FOR THE HALLOWEEN SITE THE CLIENT
WANTS TO INCLUDE THE FOLLOWING:
•About page
• Event calendar
• Maps
• List of offers
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.
15 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
• Search
• Most popular
• Login & registration
• Share functionality
75. 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
• Event calendar
• Maps
• List of offers
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’.
15 MINUTES
EXERCISETHREE
• Search
• Most popular
• Login & registration
• Share functionality
76. 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
77. 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.
78. 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
• Event calendar
• Maps
• List of offers
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’.
15 MINUTES
• Search
• Most popular
• Login & registration
• Share functionality
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
80. 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.
82. 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.
84. 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.
85. 8. BEFORE I GO...
REMEMBERTHAT
www.flickr.com/photos/46355638@N00/4414640784
91. - 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...