SlideShare a Scribd company logo
1 of 101
Download to read offline
Mobile First London 13 August
13th Aug, 2013
Putting Mobile First
@precedent##PrecSem
John Campbell
Head of Mobile
Mark Baillie
Creative Director
Mobile whitepaper series
1. Optimising Mobile
2. Targeting Mobile
3
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
A Changing World
A Changing World – Google I/O
A Changing World - Stats…
2013
Asia Pacific Europe North America Middle East and Africa Latin America
A Changing World – Users of Mobile by Region 2012 - 2017
2012
Source: Portio Research
2017
Australia Brazil China India Italy Russia South
Korea
Turkey UK US
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
SMS Web Browsing Email Social Networking Apps Streaming Music Instant Messaging Video/Mobile TV
A Changing World – Activities performed by Smartphone
Users at Least Once a Month
Source: Nielsen, (February 2013) via: mobiThinking
A Changing World – The Surge Towards Tablet
GlobalUnitsShipped(MMs)
Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013)
Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13. Note: Notebook PCs include Net books
A Changing World – What Do Your Customers Use?
Smart TV
Blackberry Windows
iOS
Android
A Changing World – Tablets
A Changing World – Tablets
A Changing World – Tablets
A Changing World – Mobile Operating System by Region
EuropeAustralia
June 2012 to May 2013
Asia
iOS Android SymbianOS Other
Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
Take the time to
understand your user’s
behaviour and context.
What Are My Options?
Mobile First London 13 August
1. Typically has short bursts of activity
2. Often is time restricted
3. Is goal driven
4. Loves using his phone - joy of use
5. Tells others of a good experience
6. Needs a simple uncomplicated experience
What Are My Options? – Remember a Mobile User…
Take the opportunity
to innovate in design
and function.
What Are My Options?
Mobile First London 13 August
What Are My Options? – Mathew Algie - Ethical Coffee
Campaign
What Are My Options?
Mobi
Responsive
Hybrid Apps
Native Framework Web App
Feed Aggregators
What Are My Options? – Roll It - App or Web?
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
‘
’
Design Considerations
Effective mobile designs not only
account for these one thumb/one eyeball
experiences but aim to optimize for them
as well.
Luke Wroblewski – Mobile First
Design Considerations – Common Language
Design Considerations – Hit Areas
Recognition
Putting a picture to either a person
or a place:
‘Meet Bob the new council
member for your area’
Or
‘Drop by the new office on
Flinders Lane’
Description
Where a specific item is better
described visually:
‘We will be rolling out new
wheely bins to replace our old
ones, they will look like this:’
Or
‘Our new Series 125fx is the
fastest widget on the market and
comes in blue!’
Design Considerations - Images
Design Considerations – Responsive layouts
Design Considerations - Reach
Right hand
Easy
Average
Hard
Left hand
Easy
Average
Hard
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
The Optimum Approach - mobi
The Optimum Approach - mobi
The Optimum Approach - mobi
What it’s good for:
• Providing focus and clear
structure
• Deploying without impact on
main website
• Delivering quickly
• Wide reach working via
browser
• Can be designed to
understand and respond to
screen size or orientation
Considerations:
• Careful consideration to
content impacting performance.
• Keep the design simply
effective
• You need to design for tablet
and phone to maximise
experience.
• Links to m. or mobi domain
name
The Optimum Approach - mobi
The Optimum Approach - Responsive
The Optimum Approach - Responsive
The Optimum Approach - Responsive
The Optimum Approach - Responsive
What it’s good for:
• Reflows the same content
from the website
• Content is presented on all
devices and screen sizes.
• Architecture of the site
remaining the same
• Single update of content
Considerations:
• Cannot apply a different tone of
voice for mobile usage.
• Experience not built around the
user or context
• Requires to think in % and not
fixed width
• Supported screen size has to
be chosen
The Optimum Approach - Responsive
‘
’
The Optimum Approach - Responsive
It's cheap but degrading to reuse content
and design across diverging media
forms like print vs. online or desktop vs.
mobile. Superior UX requires tight
platform integration.
Jakob Neilsen – 21st May 2012
The Optimum Approach - Responsive
The Optimum Approach – Hybrid Apps
Are apps going out
of fashion?
The Optimum Approach – What do you think?
Yes No
The Optimum Approach – What do you think?
The Optimum Approach - Frameworks
What it’s good for:
• Lets you develop once and
deploy many
• Cross device support
widening reach
• A balance between rich design
and reach
• Simplifying the interface whilst
enabling functionality
• Deployment via app stores
Considerations:
• Will not be a rich interface
• Restricted in functions
• Balance between features and
reach
• Typically uses HTML5 and
JavaScript.
The Optimum Approach - Frameworks
The Optimum Approach – Native Apps
The Optimum Approach – Native Apps
The Optimum Approach – Native Apps
The Optimum Approach – Native Apps
The Optimum Approach – iButterfly
Leeds College of Music
What it’s good for:
• Provides a rich interface
• Uses the full phone feature set
• Designed around the user
• Optimal performance
• Provides joy of use
• Can differentiate your brand
Considerations:
• Needs to be developed for
each device type
• Designs typically can be
shared
• Data is a key consideration for
unconnected use
The Optimum Approach - Native
The Optimum Approach
The Optimum Approach - Feeds
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
From the ground up:
• Custom approaches
• Considered context
• Specific content
From pre-existing:
• Desktop applied to mobile
• Stress / break points
• Reworked content
Making It Happen - Content
Making It Happen – Content: Mobile First
Making It Happen – Content: Adapting content
Don’t just follow the web
Move from a 4 to 6 step process
Making It Happen – UI Flow
User journey mapping
Mobile First London 13 August
NARRATING THE STORIES IS CRUCIAL
TO GATHERING SUPPORT FOR BIGGER CHANGE
Creating engaging online experiences for ACI ‘s customers, James Downes, UX Director, Precedent 2012
Mobile First London 13 August
Digital glass
What happens the morning after?
So many ways to enjoy
Advice from the communityThe barman’s guide in your pocket
Virtual cheers
Digital tasting
Giraffes on the loose
Match my mood to a drink
Cross link blogs
Get better advocates
Cooking with whisky What would Dr Bill say?
The Sixteen…
A moment of calm
Whisky doesn’t equal drunk
Augmented drink finder
Wearable tech
Tweet my glass!
How do I get started?
Acoustic zoning
Will it blend?
The Labrador effect
A slice of class
Mobile First London 13 August
Mapping the way forward
‘
’
Making It Happen - Images
What about performance?
Won’t a lot of images slow down the
mobile experience?
Making It Happen – Images
‘
’
Making It Happen – Data Integration
Users are sympathetic to poor network
coverage and adjust their expectations
when WIFI isn’t available.
‘
’
Making It Happen – Data Integration
Users are NOT sympathetic to poor
network coverage and adjust their
expectations when WIFI isn’t available.
1. Ensure your existing web API
does not bundle unnecessary
data with requests for data
2. Expand your API to deal with
short, quick requests and
hook it into your CMS solution
as soon as possible
3. FEO is vital. Use mobile
optimisation and analytics
tools to see where your
delivery speeds can be
improved
4. Track user interaction in your
app using an analytics tool
Making It Happen – Data Integration – 4 Key points
Making It Happen – Data Integration
‘
’
Making It Happen – Resource and Process
The more channels I run, the more
resource I’ll need, right?
Making It Happen – Resource and Process
Making It Happen – Resource and Process
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. The Optimum Approach
5. Making It Happen
6. Considering The Future
Putting Mobile First
Mobile First London 13 August
Considering the Future – Lifestyle Health Bands
Considering The Future
Considering The Future – Remember it’s a Phone!
‘
’
Considering The Future
If you want the Internet to be
everywhere it has to be visible nowhere.
It has to be
unseen, unnoticed, undiscussed.
David St. Charles - Integrated Systems Inc. (Wired 1996)
SpaceBook is a speech-driven, hands-
free, eyes-free device for pedestrian navigation
and exploration.
Considering The Future - PrecedentLabs
Considering The Future – PrecEvents – Out of the Box!
Considering The Future – New mobile platforms in 2013
Considering The Future – New mobile platforms in 2013
• Connected devices
• Mobile payments and e-wallet
• Mobile advancement - wearable devices (NFC)
• Lounge computing - socially integrated TV
• Move towards social business
• Smart content with personalisation & aggregation
• Self service applications
Considering The Future - Our view of the digital trends for
2013 ‘14
Don’t disappoint
Don’t be afraid to innovate
Don’t delay in providing a solution
( think-apply-review-refine )
Considering The Future – Finally…
Think big.
Start small.
Act Quickly.
Smart thinking wins…
Considering The Future – Finally…
Mobile First London 13 August
Mobile First London 13 August
Mobile First London 13 August
120 experts
Strategy & research
Branding & communications
User-centred design
Development & hosting
Digital marketing
Years24 Experience
Quality
Stability
Loyalty
Results
LONDON
EDINBURGH
CARDIFF
PERTH
MELBOURNE
HONG KONG
Who we work with
Mobile First London 13 August
Find our Precedent group
on LinkedIn for a chance to
find out more about our
seminars, network, share
ideas and quiz the Precedent
team on seminar issues and
more!
and follow us on
twitter.com/Precedentcomms
for Precedent news, seminar
info and general observations.

More Related Content

What's hot

#1NLab14: Responsive Design
#1NLab14: Responsive Design#1NLab14: Responsive Design
#1NLab14: Responsive DesignOne North
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan
 
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileTechnologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileRandstad USA
 
UXPA2019 Designing Technology for an Aging Population
UXPA2019  Designing Technology for an Aging PopulationUXPA2019  Designing Technology for an Aging Population
UXPA2019 Designing Technology for an Aging PopulationUXPA International
 
Slide to Unlock: learning design for the mobile learner
Slide to Unlock: learning design for the mobile learnerSlide to Unlock: learning design for the mobile learner
Slide to Unlock: learning design for the mobile learnerBrightwave Group
 
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...UX Riga
 
Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013Phil Barrett
 
Digital Story Time - Preschool Programming with the iPad
Digital Story Time - Preschool Programming with the iPadDigital Story Time - Preschool Programming with the iPad
Digital Story Time - Preschool Programming with the iPadJennifer Gal
 
Engaging With Enterprise Social Media
Engaging With Enterprise Social MediaEngaging With Enterprise Social Media
Engaging With Enterprise Social MediaBrandon Carson
 
An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)Neil Turner
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
UXPA2019: Voice User Interface Design for Customer Support:  Design guidance ...UXPA2019: Voice User Interface Design for Customer Support:  Design guidance ...
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...UXPA International
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, AmsterdamDave Martin
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA International
 
IABC 2
IABC 2IABC 2
IABC 2Unidev
 

What's hot (20)

#1NLab14: Responsive Design
#1NLab14: Responsive Design#1NLab14: Responsive Design
#1NLab14: Responsive Design
 
Week 4 - tablet app design
Week 4 - tablet app designWeek 4 - tablet app design
Week 4 - tablet app design
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
 
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileTechnologies: Expert in the Room Webinar: Optimizing your Website for Mobile
Technologies: Expert in the Room Webinar: Optimizing your Website for Mobile
 
UXPA2019 Designing Technology for an Aging Population
UXPA2019  Designing Technology for an Aging PopulationUXPA2019  Designing Technology for an Aging Population
UXPA2019 Designing Technology for an Aging Population
 
Slide to Unlock: learning design for the mobile learner
Slide to Unlock: learning design for the mobile learnerSlide to Unlock: learning design for the mobile learner
Slide to Unlock: learning design for the mobile learner
 
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
Responsive Web Design: Clever Tips and Techniques - Vitaly Friedman (UX Riga ...
 
Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013
 
Digital Story Time - Preschool Programming with the iPad
Digital Story Time - Preschool Programming with the iPadDigital Story Time - Preschool Programming with the iPad
Digital Story Time - Preschool Programming with the iPad
 
Engaging With Enterprise Social Media
Engaging With Enterprise Social MediaEngaging With Enterprise Social Media
Engaging With Enterprise Social Media
 
An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)An introduction to ergonomics for mobile UX (Ux in the City)
An introduction to ergonomics for mobile UX (Ux in the City)
 
Mobile-First Design
Mobile-First DesignMobile-First Design
Mobile-First Design
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Michael Kowalski, Padify
Michael Kowalski, PadifyMichael Kowalski, Padify
Michael Kowalski, Padify
 
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
UXPA2019: Voice User Interface Design for Customer Support:  Design guidance ...UXPA2019: Voice User Interface Design for Customer Support:  Design guidance ...
UXPA2019: Voice User Interface Design for Customer Support: Design guidance ...
 
Becoming Social by Default
Becoming Social by DefaultBecoming Social by Default
Becoming Social by Default
 
Mobile Monday
Mobile MondayMobile Monday
Mobile Monday
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...UXPA2019  Enhancing the User Experience for People with Disabilities: Top 10 ...
UXPA2019 Enhancing the User Experience for People with Disabilities: Top 10 ...
 
IABC 2
IABC 2IABC 2
IABC 2
 

Similar to Mobile First London 13 August

Ux101byruthlessux 160928055603
Ux101byruthlessux 160928055603Ux101byruthlessux 160928055603
Ux101byruthlessux 160928055603SHAHEENA ATTARWALA
 
Going Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product designGoing Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product designEzekiel Binion
 
Building a wow product by @RuthlessUx
Building a wow product by @RuthlessUxBuilding a wow product by @RuthlessUx
Building a wow product by @RuthlessUxSHAHEENA ATTARWALA
 
Seminar: Putting Mobile First
Seminar: Putting Mobile FirstSeminar: Putting Mobile First
Seminar: Putting Mobile FirstPrecedent
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile FirstPrecedent
 
Desintation Local: Mark Brill: Mobile
Desintation Local: Mark Brill: MobileDesintation Local: Mark Brill: Mobile
Desintation Local: Mark Brill: MobileMark Brill
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldThomas Robbins
 
Going mobile edu web presentation - 2011
Going mobile   edu web presentation - 2011Going mobile   edu web presentation - 2011
Going mobile edu web presentation - 2011Nathan Gerber
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesIvano Malavolta
 
10 Digital Marketing Trends for 2017
10 Digital Marketing Trends for 201710 Digital Marketing Trends for 2017
10 Digital Marketing Trends for 2017DragonSearch
 
Pragmatic Principles for Mobile Design
Pragmatic Principles for Mobile DesignPragmatic Principles for Mobile Design
Pragmatic Principles for Mobile DesignBrandon Carson
 
Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>Jose L. Truchado
 
Next gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandNext gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandhjc
 
Life, actually: An All Channels Open approach to real time research on the move
Life, actually: An All Channels Open approach to real time research on the moveLife, actually: An All Channels Open approach to real time research on the move
Life, actually: An All Channels Open approach to real time research on the moveCrowdLab
 
Spectrum 16 pmc 16 - mobile and tech comm
Spectrum 16   pmc 16 - mobile and tech commSpectrum 16   pmc 16 - mobile and tech comm
Spectrum 16 pmc 16 - mobile and tech commNeil Perlin
 
2011 dmo mojo gruber
2011 dmo mojo gruber2011 dmo mojo gruber
2011 dmo mojo gruberGlenn Gruber
 
Carousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaperCarousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaperCarousel30
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Jeremy Johnson
 
Understanding the Complex Mobile Landscape
Understanding the Complex Mobile Landscape Understanding the Complex Mobile Landscape
Understanding the Complex Mobile Landscape R2integrated
 

Similar to Mobile First London 13 August (20)

Ux101byruthlessux 160928055603
Ux101byruthlessux 160928055603Ux101byruthlessux 160928055603
Ux101byruthlessux 160928055603
 
Going Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product designGoing Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product design
 
Building a wow product by @RuthlessUx
Building a wow product by @RuthlessUxBuilding a wow product by @RuthlessUx
Building a wow product by @RuthlessUx
 
Seminar: Putting Mobile First
Seminar: Putting Mobile FirstSeminar: Putting Mobile First
Seminar: Putting Mobile First
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile First
 
Desintation Local: Mark Brill: Mobile
Desintation Local: Mark Brill: MobileDesintation Local: Mark Brill: Mobile
Desintation Local: Mark Brill: Mobile
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen world
 
Going mobile edu web presentation - 2011
Going mobile   edu web presentation - 2011Going mobile   edu web presentation - 2011
Going mobile edu web presentation - 2011
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategies
 
10 Digital Marketing Trends for 2017
10 Digital Marketing Trends for 201710 Digital Marketing Trends for 2017
10 Digital Marketing Trends for 2017
 
Pragmatic Principles for Mobile Design
Pragmatic Principles for Mobile DesignPragmatic Principles for Mobile Design
Pragmatic Principles for Mobile Design
 
Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>
 
Next gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandNext gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotland
 
Life, actually: An All Channels Open approach to real time research on the move
Life, actually: An All Channels Open approach to real time research on the moveLife, actually: An All Channels Open approach to real time research on the move
Life, actually: An All Channels Open approach to real time research on the move
 
Spectrum 16 pmc 16 - mobile and tech comm
Spectrum 16   pmc 16 - mobile and tech commSpectrum 16   pmc 16 - mobile and tech comm
Spectrum 16 pmc 16 - mobile and tech comm
 
2011 dmo mojo gruber
2011 dmo mojo gruber2011 dmo mojo gruber
2011 dmo mojo gruber
 
Carousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaperCarousel30: Optimizing for the mobile user experience whitepaper
Carousel30: Optimizing for the mobile user experience whitepaper
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
 
Mobile2013
Mobile2013Mobile2013
Mobile2013
 
Understanding the Complex Mobile Landscape
Understanding the Complex Mobile Landscape Understanding the Complex Mobile Landscape
Understanding the Complex Mobile Landscape
 

More from Precedent

Anatomy of a digital project seminar - 8th November, London
Anatomy of a digital project seminar - 8th November, LondonAnatomy of a digital project seminar - 8th November, London
Anatomy of a digital project seminar - 8th November, LondonPrecedent
 
Anatomy of a digital project seminar - 20th September, London
Anatomy of a digital project seminar - 20th September, London Anatomy of a digital project seminar - 20th September, London
Anatomy of a digital project seminar - 20th September, London Precedent
 
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...Precedent
 
Anatomy of a digital project seminar - 22nd June, London
Anatomy of a digital project seminar - 22nd June, LondonAnatomy of a digital project seminar - 22nd June, London
Anatomy of a digital project seminar - 22nd June, LondonPrecedent
 
Digital Transformation 'Before and After' seminar 13th April, London
Digital Transformation 'Before and After' seminar 13th April, LondonDigital Transformation 'Before and After' seminar 13th April, London
Digital Transformation 'Before and After' seminar 13th April, LondonPrecedent
 
CX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, LondonCX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, LondonPrecedent
 
Digital Transformation 'Before and After' seminar 10th February, Edinburgh
Digital Transformation 'Before and After' seminar 10th February, EdinburghDigital Transformation 'Before and After' seminar 10th February, Edinburgh
Digital Transformation 'Before and After' seminar 10th February, EdinburghPrecedent
 
Digital Transformation 'Before and After' seminar - 3rd February, London
Digital Transformation 'Before and After' seminar - 3rd February, LondonDigital Transformation 'Before and After' seminar - 3rd February, London
Digital Transformation 'Before and After' seminar - 3rd February, LondonPrecedent
 
Webinar: Digital transformation 'cure and necessity' - 11th November
Webinar: Digital transformation 'cure and necessity' - 11th November Webinar: Digital transformation 'cure and necessity' - 11th November
Webinar: Digital transformation 'cure and necessity' - 11th November Precedent
 
Digital Transformation 'Before and After' seminar - 3rd November, London
Digital Transformation 'Before and After' seminar - 3rd November, LondonDigital Transformation 'Before and After' seminar - 3rd November, London
Digital Transformation 'Before and After' seminar - 3rd November, LondonPrecedent
 
Digital Transformation 'Before and After' - 27th October, London
Digital Transformation 'Before and After'  - 27th October, LondonDigital Transformation 'Before and After'  - 27th October, London
Digital Transformation 'Before and After' - 27th October, LondonPrecedent
 
Digital Transformation 'Before and After' -14th October, Edinburgh
Digital Transformation 'Before and After' -14th October, EdinburghDigital Transformation 'Before and After' -14th October, Edinburgh
Digital Transformation 'Before and After' -14th October, EdinburghPrecedent
 
CX: Survival of the Fittest seminar - 29th September, London
CX: Survival of the Fittest seminar - 29th September, LondonCX: Survival of the Fittest seminar - 29th September, London
CX: Survival of the Fittest seminar - 29th September, LondonPrecedent
 
Digital Transformation 'Before and After' - 24th September, London
Digital Transformation 'Before and After' - 24th September, LondonDigital Transformation 'Before and After' - 24th September, London
Digital Transformation 'Before and After' - 24th September, LondonPrecedent
 
IWMW 2015 - Marrying Creativity with Management Complexity
IWMW 2015 - Marrying Creativity with Management ComplexityIWMW 2015 - Marrying Creativity with Management Complexity
IWMW 2015 - Marrying Creativity with Management ComplexityPrecedent
 
Webinar: How to build a digital culture in higher education
Webinar: How to build a digital culture in higher educationWebinar: How to build a digital culture in higher education
Webinar: How to build a digital culture in higher educationPrecedent
 
CX: Survival of the Fittest seminar - 22nd July, Edin
CX: Survival of the Fittest seminar - 22nd July, EdinCX: Survival of the Fittest seminar - 22nd July, Edin
CX: Survival of the Fittest seminar - 22nd July, EdinPrecedent
 
CX: Surival of the Fittest seminar - 15th July London
CX: Surival of the Fittest seminar - 15th July London CX: Surival of the Fittest seminar - 15th July London
CX: Surival of the Fittest seminar - 15th July London Precedent
 
Asset Management Breakfast - 4th June 2015
Asset Management Breakfast - 4th June 2015Asset Management Breakfast - 4th June 2015
Asset Management Breakfast - 4th June 2015Precedent
 
BHF Digital Transformation webinar 28th May 2015
BHF Digital Transformation webinar 28th May 2015 BHF Digital Transformation webinar 28th May 2015
BHF Digital Transformation webinar 28th May 2015 Precedent
 

More from Precedent (20)

Anatomy of a digital project seminar - 8th November, London
Anatomy of a digital project seminar - 8th November, LondonAnatomy of a digital project seminar - 8th November, London
Anatomy of a digital project seminar - 8th November, London
 
Anatomy of a digital project seminar - 20th September, London
Anatomy of a digital project seminar - 20th September, London Anatomy of a digital project seminar - 20th September, London
Anatomy of a digital project seminar - 20th September, London
 
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...
 
Anatomy of a digital project seminar - 22nd June, London
Anatomy of a digital project seminar - 22nd June, LondonAnatomy of a digital project seminar - 22nd June, London
Anatomy of a digital project seminar - 22nd June, London
 
Digital Transformation 'Before and After' seminar 13th April, London
Digital Transformation 'Before and After' seminar 13th April, LondonDigital Transformation 'Before and After' seminar 13th April, London
Digital Transformation 'Before and After' seminar 13th April, London
 
CX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, LondonCX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, London
 
Digital Transformation 'Before and After' seminar 10th February, Edinburgh
Digital Transformation 'Before and After' seminar 10th February, EdinburghDigital Transformation 'Before and After' seminar 10th February, Edinburgh
Digital Transformation 'Before and After' seminar 10th February, Edinburgh
 
Digital Transformation 'Before and After' seminar - 3rd February, London
Digital Transformation 'Before and After' seminar - 3rd February, LondonDigital Transformation 'Before and After' seminar - 3rd February, London
Digital Transformation 'Before and After' seminar - 3rd February, London
 
Webinar: Digital transformation 'cure and necessity' - 11th November
Webinar: Digital transformation 'cure and necessity' - 11th November Webinar: Digital transformation 'cure and necessity' - 11th November
Webinar: Digital transformation 'cure and necessity' - 11th November
 
Digital Transformation 'Before and After' seminar - 3rd November, London
Digital Transformation 'Before and After' seminar - 3rd November, LondonDigital Transformation 'Before and After' seminar - 3rd November, London
Digital Transformation 'Before and After' seminar - 3rd November, London
 
Digital Transformation 'Before and After' - 27th October, London
Digital Transformation 'Before and After'  - 27th October, LondonDigital Transformation 'Before and After'  - 27th October, London
Digital Transformation 'Before and After' - 27th October, London
 
Digital Transformation 'Before and After' -14th October, Edinburgh
Digital Transformation 'Before and After' -14th October, EdinburghDigital Transformation 'Before and After' -14th October, Edinburgh
Digital Transformation 'Before and After' -14th October, Edinburgh
 
CX: Survival of the Fittest seminar - 29th September, London
CX: Survival of the Fittest seminar - 29th September, LondonCX: Survival of the Fittest seminar - 29th September, London
CX: Survival of the Fittest seminar - 29th September, London
 
Digital Transformation 'Before and After' - 24th September, London
Digital Transformation 'Before and After' - 24th September, LondonDigital Transformation 'Before and After' - 24th September, London
Digital Transformation 'Before and After' - 24th September, London
 
IWMW 2015 - Marrying Creativity with Management Complexity
IWMW 2015 - Marrying Creativity with Management ComplexityIWMW 2015 - Marrying Creativity with Management Complexity
IWMW 2015 - Marrying Creativity with Management Complexity
 
Webinar: How to build a digital culture in higher education
Webinar: How to build a digital culture in higher educationWebinar: How to build a digital culture in higher education
Webinar: How to build a digital culture in higher education
 
CX: Survival of the Fittest seminar - 22nd July, Edin
CX: Survival of the Fittest seminar - 22nd July, EdinCX: Survival of the Fittest seminar - 22nd July, Edin
CX: Survival of the Fittest seminar - 22nd July, Edin
 
CX: Surival of the Fittest seminar - 15th July London
CX: Surival of the Fittest seminar - 15th July London CX: Surival of the Fittest seminar - 15th July London
CX: Surival of the Fittest seminar - 15th July London
 
Asset Management Breakfast - 4th June 2015
Asset Management Breakfast - 4th June 2015Asset Management Breakfast - 4th June 2015
Asset Management Breakfast - 4th June 2015
 
BHF Digital Transformation webinar 28th May 2015
BHF Digital Transformation webinar 28th May 2015 BHF Digital Transformation webinar 28th May 2015
BHF Digital Transformation webinar 28th May 2015
 

Recently uploaded

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 

Recently uploaded (20)

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 

Mobile First London 13 August

  • 2. 13th Aug, 2013 Putting Mobile First @precedent##PrecSem John Campbell Head of Mobile Mark Baillie Creative Director
  • 3. Mobile whitepaper series 1. Optimising Mobile 2. Targeting Mobile 3
  • 4. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  • 6. A Changing World – Google I/O
  • 7. A Changing World - Stats…
  • 8. 2013 Asia Pacific Europe North America Middle East and Africa Latin America A Changing World – Users of Mobile by Region 2012 - 2017 2012 Source: Portio Research 2017
  • 9. Australia Brazil China India Italy Russia South Korea Turkey UK US 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% SMS Web Browsing Email Social Networking Apps Streaming Music Instant Messaging Video/Mobile TV A Changing World – Activities performed by Smartphone Users at Least Once a Month Source: Nielsen, (February 2013) via: mobiThinking
  • 10. A Changing World – The Surge Towards Tablet GlobalUnitsShipped(MMs) Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013) Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13. Note: Notebook PCs include Net books
  • 11. A Changing World – What Do Your Customers Use? Smart TV Blackberry Windows iOS Android
  • 12. A Changing World – Tablets
  • 13. A Changing World – Tablets
  • 14. A Changing World – Tablets
  • 15. A Changing World – Mobile Operating System by Region EuropeAustralia June 2012 to May 2013 Asia iOS Android SymbianOS Other Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/
  • 16. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  • 17. Take the time to understand your user’s behaviour and context. What Are My Options?
  • 19. 1. Typically has short bursts of activity 2. Often is time restricted 3. Is goal driven 4. Loves using his phone - joy of use 5. Tells others of a good experience 6. Needs a simple uncomplicated experience What Are My Options? – Remember a Mobile User…
  • 20. Take the opportunity to innovate in design and function. What Are My Options?
  • 22. What Are My Options? – Mathew Algie - Ethical Coffee Campaign
  • 23. What Are My Options? Mobi Responsive Hybrid Apps Native Framework Web App Feed Aggregators
  • 24. What Are My Options? – Roll It - App or Web?
  • 25. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  • 26. ‘ ’ Design Considerations Effective mobile designs not only account for these one thumb/one eyeball experiences but aim to optimize for them as well. Luke Wroblewski – Mobile First
  • 27. Design Considerations – Common Language
  • 29. Recognition Putting a picture to either a person or a place: ‘Meet Bob the new council member for your area’ Or ‘Drop by the new office on Flinders Lane’ Description Where a specific item is better described visually: ‘We will be rolling out new wheely bins to replace our old ones, they will look like this:’ Or ‘Our new Series 125fx is the fastest widget on the market and comes in blue!’ Design Considerations - Images
  • 30. Design Considerations – Responsive layouts
  • 31. Design Considerations - Reach Right hand Easy Average Hard Left hand Easy Average Hard
  • 32. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  • 36. What it’s good for: • Providing focus and clear structure • Deploying without impact on main website • Delivering quickly • Wide reach working via browser • Can be designed to understand and respond to screen size or orientation Considerations: • Careful consideration to content impacting performance. • Keep the design simply effective • You need to design for tablet and phone to maximise experience. • Links to m. or mobi domain name The Optimum Approach - mobi
  • 37. The Optimum Approach - Responsive
  • 38. The Optimum Approach - Responsive
  • 39. The Optimum Approach - Responsive
  • 40. The Optimum Approach - Responsive
  • 41. What it’s good for: • Reflows the same content from the website • Content is presented on all devices and screen sizes. • Architecture of the site remaining the same • Single update of content Considerations: • Cannot apply a different tone of voice for mobile usage. • Experience not built around the user or context • Requires to think in % and not fixed width • Supported screen size has to be chosen The Optimum Approach - Responsive
  • 42. ‘ ’ The Optimum Approach - Responsive It's cheap but degrading to reuse content and design across diverging media forms like print vs. online or desktop vs. mobile. Superior UX requires tight platform integration. Jakob Neilsen – 21st May 2012
  • 43. The Optimum Approach - Responsive
  • 44. The Optimum Approach – Hybrid Apps
  • 45. Are apps going out of fashion? The Optimum Approach – What do you think?
  • 46. Yes No The Optimum Approach – What do you think?
  • 47. The Optimum Approach - Frameworks
  • 48. What it’s good for: • Lets you develop once and deploy many • Cross device support widening reach • A balance between rich design and reach • Simplifying the interface whilst enabling functionality • Deployment via app stores Considerations: • Will not be a rich interface • Restricted in functions • Balance between features and reach • Typically uses HTML5 and JavaScript. The Optimum Approach - Frameworks
  • 49. The Optimum Approach – Native Apps
  • 50. The Optimum Approach – Native Apps
  • 51. The Optimum Approach – Native Apps
  • 52. The Optimum Approach – Native Apps
  • 53. The Optimum Approach – iButterfly
  • 55. What it’s good for: • Provides a rich interface • Uses the full phone feature set • Designed around the user • Optimal performance • Provides joy of use • Can differentiate your brand Considerations: • Needs to be developed for each device type • Designs typically can be shared • Data is a key consideration for unconnected use The Optimum Approach - Native
  • 58. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  • 59. From the ground up: • Custom approaches • Considered context • Specific content From pre-existing: • Desktop applied to mobile • Stress / break points • Reworked content Making It Happen - Content
  • 60. Making It Happen – Content: Mobile First
  • 61. Making It Happen – Content: Adapting content
  • 62. Don’t just follow the web Move from a 4 to 6 step process
  • 63. Making It Happen – UI Flow
  • 66. NARRATING THE STORIES IS CRUCIAL TO GATHERING SUPPORT FOR BIGGER CHANGE Creating engaging online experiences for ACI ‘s customers, James Downes, UX Director, Precedent 2012
  • 68. Digital glass What happens the morning after? So many ways to enjoy Advice from the communityThe barman’s guide in your pocket Virtual cheers Digital tasting Giraffes on the loose Match my mood to a drink Cross link blogs Get better advocates Cooking with whisky What would Dr Bill say? The Sixteen… A moment of calm Whisky doesn’t equal drunk Augmented drink finder Wearable tech Tweet my glass! How do I get started? Acoustic zoning Will it blend? The Labrador effect A slice of class
  • 70. Mapping the way forward
  • 71. ‘ ’ Making It Happen - Images What about performance? Won’t a lot of images slow down the mobile experience?
  • 72. Making It Happen – Images
  • 73. ‘ ’ Making It Happen – Data Integration Users are sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.
  • 74. ‘ ’ Making It Happen – Data Integration Users are NOT sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.
  • 75. 1. Ensure your existing web API does not bundle unnecessary data with requests for data 2. Expand your API to deal with short, quick requests and hook it into your CMS solution as soon as possible 3. FEO is vital. Use mobile optimisation and analytics tools to see where your delivery speeds can be improved 4. Track user interaction in your app using an analytics tool Making It Happen – Data Integration – 4 Key points
  • 76. Making It Happen – Data Integration
  • 77. ‘ ’ Making It Happen – Resource and Process The more channels I run, the more resource I’ll need, right?
  • 78. Making It Happen – Resource and Process
  • 79. Making It Happen – Resource and Process
  • 80. 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. The Optimum Approach 5. Making It Happen 6. Considering The Future Putting Mobile First
  • 82. Considering the Future – Lifestyle Health Bands
  • 84. Considering The Future – Remember it’s a Phone!
  • 85. ‘ ’ Considering The Future If you want the Internet to be everywhere it has to be visible nowhere. It has to be unseen, unnoticed, undiscussed. David St. Charles - Integrated Systems Inc. (Wired 1996)
  • 86. SpaceBook is a speech-driven, hands- free, eyes-free device for pedestrian navigation and exploration. Considering The Future - PrecedentLabs
  • 87. Considering The Future – PrecEvents – Out of the Box!
  • 88. Considering The Future – New mobile platforms in 2013
  • 89. Considering The Future – New mobile platforms in 2013
  • 90. • Connected devices • Mobile payments and e-wallet • Mobile advancement - wearable devices (NFC) • Lounge computing - socially integrated TV • Move towards social business • Smart content with personalisation & aggregation • Self service applications Considering The Future - Our view of the digital trends for 2013 ‘14
  • 91. Don’t disappoint Don’t be afraid to innovate Don’t delay in providing a solution ( think-apply-review-refine ) Considering The Future – Finally…
  • 92. Think big. Start small. Act Quickly. Smart thinking wins… Considering The Future – Finally…
  • 96. 120 experts Strategy & research Branding & communications User-centred design Development & hosting Digital marketing
  • 99. Who we work with
  • 101. Find our Precedent group on LinkedIn for a chance to find out more about our seminars, network, share ideas and quiz the Precedent team on seminar issues and more! and follow us on twitter.com/Precedentcomms for Precedent news, seminar info and general observations.

Editor's Notes

  1. Mary Meeker - “Queen of the Net” (Partner at VC Kleiner Perkins Caufield & Byers)Just presented her new 'Internet Trends' at the Wall Street Journal D11 Conference last week.Technology cycles have tended to last ten years1960s - Mainframe Computing 1970s - Mini Computing1980s - Personal Computing1990s - Desktop Internet Computing2000s - Mobile Internet Computing2014+ - Wearable/Everywhere Computing
  2. What’s changed… chat through the key events in the past yearPick a trend … Siri & free messaging 9challenge to BBerry
  3. Google Glass. Seems daft now but…
  4. So now you are all inspired lets see if we can bring things back down to earth.
  5. Mobile OS by region statsProfile your audience – look at key parameters, for example operating systemsConsider global regions differently (iOSin Australia compared with Asia)
  6. Mobile OS by region statsProfile your audience – look at key parameters, for example operating systemsConsider global regions differently (iOSin Australia compared with Asia)
  7. Diagram: Mary Meeker at the Wall Street Journal D11 Conference May 29 2013The uptake of tablets has been rocket like surpassing desktop and notebook PC’s less than 3 years after they were first introducedPredicted sales of tablets will surge from 72.7 million in 2011 to 383.3 million in 2017
  8. Mobile OS by region statsProfile your audience – look at key parameters, for example operating systemsConsider global regions differently (iOSin Australia compared with Asia)
  9. Average person looks at their phone 150 times a day most of these are very brief interactionsDesign needs to accommodate for these very brief interactions
  10. Use existing visual shortcuts for essential operations. These are already emerging as standards so don’t reinvent the wheel.Hamburger icon = menuCircular arrow = refreshMagnifying glass = searchCog = settingsThumb = like
  11. People interact with touch-based user interfaces with their fingers. So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Apple - 44pxWindows – 9mmNokia – between 7 and 8mmThe average finger pad is 10-14mm with the fingertip being 8-10mmWhat does this mean? Don’t make tiny links and tiny spaces…
  12. Two types of essential photographic imageRecognitionDescriptionAll other images can be rationalised for a better mobile experience.
  13. Placing navigation elements off screen and moving them on screen as needed allows for the greatest flexibility in navigationOther elements can move about but it is worth remembering some of the core online principlesThe user will still click on a logo to go homeUsers will skim read so key points should be highlighted somehow
  14. Screen design needs to take into consideration the device it will inhabit.These diagrams illustrate the average user reachThings that you don’t want a user to hit by mistake need to sit up in the orange areaWith the longest reach area running top to bottom we can expect most scrolling will occur in these areas (and therefore the thumb will hover there)
  15. Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
  16. The spectrum of mobi
  17. One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
  18. CLCHIlly coffee
  19. The United Food and Commercial Workers International UnionReflow crazySame content all reflowed
  20. Responsive design is not always the optimal solutionBritish CouncilRemoving and adapting content to reduce the number of scrolls for the user
  21. My issue with responsive design is when it becomes lowest common denominator design, 'working' on all screens but not excelling on any. – Roan Lavery (Free Agent)
  22. Responsive frameworks such as The Golden Grid system
  23. One website, that flows across multiple devicesBrowser basedSame content delivered to all users
  24. Examples of some framework providers
  25. Mobile browser basedStandard mobiWeb app mobi
  26. Clear by RealmacSoftware
  27. Paper by 53
  28. Whisper sync – Apple changing the in app purchase policy (amazon mobi to the rescue)
  29. Use on the go
  30. Use on the go
  31. Use on the go
  32. There are two approachesEither is fine
  33. 2. Is probably the most comfortable fit given you already have Corporate website; Microsite ; Campaign site is fine
  34. TescoBank UI flow
  35. You can gain competitive advantage through this understanding in any sector
  36. Some earlier ideas around effortless innovation with digital
  37. Just some pointers drawn out from our ideas of how to innovate and make a splash
  38. Glenmorangie digital touch points – focus on social alignment and opportunities
  39. You will likely have at least some imagery in a mobile solution and you want them to look their best. These will range from your logo and iconography to richer elements like image galleries and product shots. The basic answer is ‘Yes’ it will slow down the experience so really think about using the ‘right’ images in the ‘right’ place.
  40. Scrum for mobile solutions
  41. Not true!
  42. Not true!
  43. Digital bloat
  44. Digital bloatAvoid digital bloat by monitoring the effectiveness of your channels and adjust your resourcing accordingly
  45. Scrum for mobile solutions
  46. BlipparJawbonePebbleSmart TVVuzixPingit from BarclaysbankSquare (Credit card reader)
  47. Misfit ShineCrowdfunded through KickstarterRaised $846,675 (USD)Retails at $99 (USD) Due to ship July 2013iOS only at launchNike Fuel BandPart of the successful Nike+ rangeRetails at $149 (USD)iOS onlyJawbone UpRetails at $149.95 (AUD)iOS and Android
  48. Combank?
  49. Chinese taxi appsSay your current location and where you are going and a voice message is sent to all nearby available taxisView the taxi's location in realtime and then push to talk directly to the driver to co-ordinate pickup
  50. Digital bloat
  51. Ubantu for phonesFirefox OSTizen
  52. Ubantu for phonesFirefox OSTizen