Designing Websites for Multiple Devices

DESIGNING FOR MULTIPLE DEVICES
New York, March 4th 2013

Anna Dahlström
founder byﬂock
www.annadahlstrom.com
annadahlstrom

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.ﬂickr.com/photos/dahlstroms/4411448782/

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.ﬂickr.com/photos/horrigans/5649006182

1. FIRST UP...
DEVICE USAGE &
PATTERNS

www.ﬂickr.com/photos/publicenergy/1846375599

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/

THE FOCUS OF TODAY
SMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID


In 2009 1% of global internet trafﬁc 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

www.ﬂickr.com/photos/nasamarshall/6289116940

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

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

www.ﬂickr.com/photos/exlibris/2552107635

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

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.ﬂickr.com/photos/brandoncwarren/4236278556

POCKET’S STATS
- DESKTOP

Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read


POCKET’S STATS
- iPHONE



POCKET’S STATS
- iPAD



PEAK TIMES
•When we get up
•On our way to/ just arrived at work
•Commuting home
•Post dinner


“MOBILE USERS ARE
RUSHED &
ON THE GO”
THIS IS A MYTH

www.ﬂickr.com/photos/theirmind/5001267661/

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

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

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

2. THIS HAS...
IMPLICATIONS
FOR UX & DESIGN

http://www.ﬂickr.com/photos/eyesore9/3206408088/

LIMITED DEVICE CAPABILITIES
USED TO MEAN LIMITED TASKS
E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU

www.ﬂickr.com/photos/frantaylor/4296536332

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


PEOPLE ARE CLICKING THE
‘FULL DESKTOP VERSION’ LINK
THERE IS A REASON FOR THAT

www.ﬂickr.com/photos/demandaj/7287174776

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

3. A CLOSER LOOK AT...
BESPOKE
MOBILE SITES vs.
RESPONSIVE SITES
vs. APPS

http://www.ﬂickr.com/photos/young_einstein/74097753/

PRIMARY REASONS
FOR A BESPOKE
MOBILE SITE
• REQUIRED FOR THE AUDIENCE
• TECHNICAL LIMITATIONS TO CMS

www.ﬂickr.com/photos/st3f4n/3476036180

BEST AVOIDED
IF WE CAN
IT CAN CAUSE ALL SORTS OF
PROBLEMS

http://www.ﬂickr.com/photos/edenandjosh/2892956576/

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

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

CORE CONTENT SHOULD
REMAIN THE SAME BUT THE
EXPERIENCE SHOULD BE
OPTIMISED
BOTH IN DISPLAY OF CONTENT,
REGARDING USING DEVICE CAPABILITIES
& FOR TOUCH INTERACTIONS

www.ﬂickr.com/photos/jmtimages/2883279193

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

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

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

” 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

4. THERE IS SOMETHING
CALLED...
RESPONSIVE
DESIGN

www.ﬂickr.com/photos/taytom/5277657429

“ 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

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

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

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

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/

CONSIDER YOUR NAVIGATION
DIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS

www.ﬂickr.com/photos/tim_norris/2789759648

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

www.ﬂickr.com/photos/dopey/123646856

5. WHAT ABOUT...
DOING AN APP?

http://www.ﬂickr.com/photos/tomitapio/4053123799/in/photostream/

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

EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
WITH THEIR OWN UI
GUIDELINES THAT
USERS ARE USED TO

www.ﬂickr.com/photos/gadl/3570118243

NOT AS
EASY AS JUST
ANDROID
OR iOS
FRAGMENTATION ACROSS
DIFFERENT VERSIONS &
BACKWARDS
COMPATIBILITY SHOULD
BE CONSIDERED

www.ﬂickr.com/photos/nrkbeta/3906687294/in/photostream

RELATIVE NUMBER OF
ACTIVE ANDROID DEVICES

Source: http://developer.android.com/about/dashboards/index.html

www.ﬂickr.com/photos/blakespot/4773693893

EXAMPLE OF ADOPTION
OF NEW iOS VERSION

Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1

www.ﬂickr.com/photos/blakespot/4773693893

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.ﬂickr.com/photos/nrkbeta/3906687294/in/photostream

iPHONE
RESOURCES
HELP & INSPIRATION
WELL DOCUMENTED

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

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

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

HOW TO TAME THE BEAST?
YOU LEARN BY DOING

www.ﬂickr.com/photos/jojoneil/6359536591

6. TIME TO
PRACTICE

http://www.ﬂickr.com/photos/kalexanderson/6302660289/

BESPOKE MOBILE
SITE vs RESPONSIVE
vs AN APP
CONSIDER THE FOLLOWING:
A big retail store has asked you to come up
with a Easter Hunt across your city where
EXERCISE ONE 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, or when a user is close to one.
What do you recommend in terms of their
mobile strategy and why? I.e. an app,
responsive or bespoke mobile site, or a
combination?

www.ﬂickr.com/photos/jojoneil/6359536591 10 MINUTES

WHETHER TO DO AN APP
OR NOT COMES DOWN TO
• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE
• IF OFFLINE READING/USAGE IS REQUIRED
• & OF COURSE BUDGET


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 big retail store has asked you to come up AN APP ALONE WON’T CUT IT
with a Easter Hunt across your city where
offers and give aways are hidden at certain
locations. There will only be a certain number ALSO CONSIDER...
of items available each day & they want to be
able to notify people when an item has been
found, or when a user is close to one. • IF THERE ARE SPECIFIC DEVICE
CAPABILITIES YOU WANT TO UTILISE
What do you recommend in terms of their
mobile strategy and why? I.e. an app, • IF OFFLINE READING/USAGE IS
responsive or bespoke mobile site, or a REQUIRED
combination? • & OF COURSE BUDGET
5 MINUTES

BUILDING A
RESPONSIVE SITE
FOR THE EASTER HUNT SITE THE CLIENT
WANT TO INCLUDE THE FOLLOWING:
• About page • Share (on FB & Twitter)
• List of offers • Login & registration
• Product pages • Overview of number of
• Notiﬁcations found & not found item
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.
PART 2
Using content stacking methodology deﬁne how the
content should be prioritised on desktop & mobile.

15 MINUTES

EXERCISE TWO

BUILDING A
RESPONSIVE SITE Mobile
1
2 Header

FOR THE EASTER HUNT SITE THE CLIENT
Logo

3

WANT TO INCLUDE THE FOLLOWING: 4
Nav

Bath 5

• About page • Share (on FB & Twitter) Desktop & Tablet section
intro
Ad

• Product pages
1 2

• Overview of number of Logo Header

• Notiﬁcations found & not found item 4
Bath section intro
5
Ad
6
Types of baths

PART 1 3
Nav

Pick either mobile or desktop & do a rough sketch 7
of what the home page should contain & how the
6
Related 7
Types of baths
8 Store products Related products

content should be prioritised. locator

9 Tools 8 Store
9 Tools
PART 2
locator

10 10
Footer Footer
Using content stacking methodology deﬁne how the
content should be prioritised on desktop & mobile.

15 MINUTES

BUILDING AN APP
BASED ON THE CONTENT & FUNCTIONALITY
REQUIREMENTS, CONSIDER WHAT WOULD BE
SUITABLE FOR AN APP:
• Product pages • Overview of number of
• Notifications found & not found item
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’.

15 MINUTES

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

IMG Item

• List of offers • Login & registration IMG Item

• Product pages • Overview of number of IMG

Home

• Notifications
Item Item Item More

found & not found item
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’.

15 MINUTES

7. TO
SUMMARISE

http://www.ﬂickr.com/photos/martinteschner/4569495912/

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.ﬂickr.com/photos/thecaucas/2597813380 increasingly replicating that of desktop.

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

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 ofﬂine
reading/functionality & access to
device capabilities. Base which type
www.ﬂickr.com/photos/thecaucas/2597813380 on objectives & stats.

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.

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

8. BEFORE I GO...
REMEMBER THAT


...IT’S NOT JUST ABOUT
THE SMALLER SCREENS
BUT ALSO THE BIG ONES

www.ﬂickr.com/photos/jolives/2889944573/

IT’S ABOUT
THINKING AHEAD
PLAN 5 YEARS AHEAD WITH
“FUTURE PROOFING” IN MIND

www.ﬂickr.com/photos/jolives/2889944573/

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

BE CREATIVE & CHALLENGE
WHAT EXISTS TODAY
THAT’S WHAT MOVES US FORWARD

www.ﬂickr.com/photos/oter/5090592214

CLOSER & MORE
REWARDING
COLLABORATION
BETWEEN DISCIPLINES & WITH CLIENTS

www.ﬂickr.com/photos/stevendepolo/3378152784

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.ﬂickr.com/photos/funch/4679422945/

9. FOR THE ROAD
SOME TAKE
AWAYS


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


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/


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.ﬂickr.com/photos/st3f4n/4387291247

Thank you!
QUESTIONS?
annadahlstrom
annadahlstrom
anna.dahlstrom@gmail.com
www.annadahlstrom.com

www.ﬂickr.com/photos/dahlstroms/4411448782/

Designing Websites for Multiple Devices

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Designing Websites for Multiple Devices

Similaire à Designing Websites for Multiple Devices (20)

Plus de Anna Dahlström

Plus de Anna Dahlström (20)

Dernier

Dernier (20)

Designing Websites for Multiple Devices