SlideShare a Scribd company logo
Mobile Design. Strategic Solutions.
Theresa Neil
I work as a Consultant,
               helping companies with
               their UX Strategy.




Theresa Neil
GERMANY
TEXAS
GERMANY
TEXAS
GERMANY
TEXAS
GERMANY
TEXAS
The Progression




Classic Web Site    Kiosk                Early Mobile Web




Native Tablet App   Native Mobile Apps   Mobile Optimized Site
Whatʼs Driving Their Mobile Strategy?

Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
Enterprise Mobility
Whatʼs Driving Their Mobile Strategy?

Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
Enterprise Mobility
Whatʼs Driving Their Mobile Strategy?

Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
                        Securing loyalty by providing
Enterprise Mobility        value added services
Whatʼs Driving Their Mobile Strategy?

Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition               Attract and convert new
                                 customers
Enterprise Mobility
                         Use mobile as a conversion
                        funnel for other products and
                                   services
Whatʼs Driving Their Mobile Strategy?

Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
                           Aligning the brand with
                       innovation and forward thinking
Enterprise Mobility
Whatʼs Driving Their Mobile Strategy?

Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
                       At this point, every airline, even
Enterprise Mobility         regional carriers, have
                        integrated mobile solutions in
                          their customer experience
Whatʼs Driving Their Mobile Strategy?

Mobile Usage
Customer Retention
Customer Acquisition
Brand Alignment
Competition
                       According to Forrester
Enterprise Mobility    Research, 75% of companies
                       report “increased worker
                       productivity” from deploying
                       mobile applications.
What Are Your Mobile Options?




Responsive Web
                 Optimized Sites
                                   Native Apps
What Are Your Mobile Options?




Responsive Web
                 Optimized Sites
                                   Native Apps


 Responsive Web defined...
Responsive Web

Defined Web site responds to the environment using css media
queries. Typically achieved by using fluid grid layouts, like Responsive
Grid System, Bootstrap, from Twitter, or Foundation by Zurb.
Responsive Web




                      UIWindow
                      768 x 1024




  Cisco London 2012
Responsive Web
Responsive Web

Ideal For
Informational Web Sites
Promotional Sites
Content Consumption Sites
  • Newspapers
  • Magazines
  • Blogs
  • Galleries
  • Portfolios


                            Boston Globe
If you want to learn more about designing
responsively...
What Are Your Mobile Options?




Responsive Web
                 Optimized Sites
                                   Native Apps


 A closer look at Optimized Sites...
Optimized Sites aka mobile apps and dot m sites

Optimizing for different sizes and different usage needs

    Check Weather                                       Playing Games
      Watch Video                                       Checking Email
        Local News
                                                    Social Networking
    National News
                                                              Research
        Sports Info
                                                     Listening to Music
      Entertainment
                                                          Watching TV
      Financial Info
Reference Materials                                          Shopping

   Lifestyle Content                                    Reading Books

 Magazine Content                                  Lightweight Creation
                       0   12.5   25   37.5   50                          0   12.5   25   37.5   50




     Smartphone Usage                                            Tablet Usage
Optimized Sites aka mobile apps and dot m sites

Mobile usage throughout the day:




                                   http://www.inmobi.com/inmobiblog/files/2012/02/Global_MediaConsumption_Info_Feb22.png
Optimized Sites

Some companies have three distinct sites...




Classic Web Site      Tablet Web Site         Mobile Web Site
Optimized Sites


More often there are only two distinct sites




Amazonʼs Classic Web Site & Tablet Site   Mobile Web Site
Optimized Sites


The mobile version is streamlined for core activities




 jetBlueʼs Classic Web Site & Tablet Site   Mobile Web Site
The Four Core Activities of Mobile Users

Lookup/Find (urgent info, local): I need an answer to
something now—frequently related to my current location in
the world.

Explore/Play (bored, local): I have some time to kill and
just want a few idle time distractions.

Check In/Status (repeat/micro-tasking): Something
important to me keeps changing or updating and I want to
stay on top of it.

Edit/Create (urgent change/micro-tasking): I need to get
some- thing done now that can’t wait.
Optimized Site: Backbase Project Tool



                  Basecamp userʼs core activities
                  fall into two categories:
                  1.Checkin/status
                  2.Edit/create

                  Their mobile optimized site
                  provides a solution for these
                  needs.
Optimized Site: Harvest Time Tracking




              Concepts



                                                                        V1
                                                    Harvest also optimizes for:
                                                    1.Checkin/status
                                                    2.Edit/create
                  BETA
http://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
Responsive vs Optimized Sites


Web Sites              Web Apps
                       Search
Informational
                       Travel
Content Heavy
                       Retail
  • Newspapers         SaaS
  • Magazines          Productivity Tools
  • Blogs              (light-weight)
  • Galleries

Responsive             Optimized Sites
Mobile Web Doʼs and Dontʼs

Doʼs
Make content most important (reduce navigation)
Focus on performance
   Use Image Sprites
   Bundle & minify CSS and Javascipt files
   Limit or remove dependencies on heavy JS
   libraries
   Use CSS3 for styling, rounded corners, text
   shadows...
Mobile Web Doʼs and Dontʼs

Dontʼs
Port a web app 1-for-1
Add back buttons
Use large images and
size down
Go crazy with special
effects/transitions
Try to make it look just
like a Native App
What Are Your Mobile Options?




Responsive Web
                 Optimized Sites
                                   Native Apps


 The Native Solution...
Native Apps

Defined An application that has been developed for use on a
particular platform or device.

Typically native apps are coded with:
Objective C for Apple
Java for Android and BlackBerry
C# or Visual Basic for Windows 7.5

But there are also other options:
Ruby Motion
MonoTouch and MonoDroid
Adobe AIR



                                             Adobe Flex 4.5 Showcase Apps
Native Apps




Evernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
Native Apps




 Xamarian MWC 2012 App   C#, MonoTouch, MonoDroid
Native Apps

Ideal For
Games
Financial Tools
Productivity Tools (heavy-weight)
Enterprise Apps




                                    Bloomberg Anywhere
Keynote Presentation Tool
Native Doʼs and Dontʼs

Doʼs
Know & understand your target devices
Follow design conventions for those platform
   Navigation paradigms
   UI controls
   Gestures

Prototype and test often
Validate the prototypes on the target devices with actual users
Prototyping Essentials
Native Doʼs and Dontʼs

Dontʼs
Design for the iPhone and reuse the design for
Android or Windows (or vise versa)
Recreate the wheel. There are standard mobile
patterns you can leverage for:

   Search, Sort, Filter
   Forms
   Invitations, etc..
Mobile Patterns
Native Apps vs Optimized Sites


Games                    Search
Tools requiring:         Travel
• Complex Calculations   Retail
• Reporting/Charting     Productivity Tools
• Native Functionality   (light weight)
• Offline Access

Native Apps               Optimized Sites
Native Apps vs Optimized Sites


Games                                        Search
Tools requiring: point in time, nativeTravel target
          At this                              apps can
          the specific limitations and abilities of each
• Complex Calculationsmuch better than a website
          individual device                  Retail
• Reporting/Charting inside a Productivity Tools
          can while running                   browser.
• Native Functionality                       (light weight)
          http://www.useit.com/alertbox/mobile-sites-apps.html
• Offline Access

Native Apps                             Optimized Sites
Breaking the Rules...

Non Tech Considerations--> Financial
Financial Times, Playboy and Walmart are using sites instead of
apps to avoid sharing revenues with app store owners.
Breaking the Rules...

Walmartʼs Vudu Optimized for tablets,
avoids sharing the revenue from movie sales
These are your options




Responsive Web
                 Optimized Sites
                                   Native Apps


 Questions?
What About HTML5 ?

HTML5 is simply a technology that you can use to implement
any of these solutions. There are many options, here are few:




Responsive Web             Optimized Sites          Native Apps
HTML5 + a responsive       HTML5 + a mobile         HTML5 + a framework
front end framework like   framework like JQuery    like PhoneGap or
Bootstrap                  Mobile                   Titanium
What About Hybrids?

Defined A ʻnative wrappedʼ web application. Products like Titanium
and PhoneGap create a native wrapper that let the HTML and JS
access OS dependent operations they couldnʼt access on their own
(contacts, calendar, camera, geo-location...)




                                              LinkedIn-
NBC-Built with Titanium                       Custom Wrapper
Are Hybrids as good as Native Apps?

This isn’t black & white
When big players like LinkedIn and Facebook successfully
launched hybrids, it looked like a shift might be imminent.
Are Hybrids as good as Native Apps?

This isn’t black & white
When big players like LinkedIn and Facebook successfully
launched hybrids, it looked like a shift might be imminent.

 But Facebook has rebuilt their iOS apps
 with Objective C, primarily to improve
 the performance.
Hybrid or (truly) Native?




       Hybrid Fail
Hybrid or (truly) Native?




       Hybrid Fail          Hybrid Success
Common Hybrid Pitfalls

Code once and reuse doesnʼt mean design
once and reuse

                      x




iPhone      Android       iPhone     Android
Good Hybrids in the Market

Follow the design conventions of each platform




Netflix
http://functionsource.com/post/netflix-feature
What is Mobile First?

A different way of thinking




                         Agreement on what matters most
Mobile First is...

Knowing your users




                     What they do and why they do it
Know Your Users



                   The Guardianʼs Data




                  2010             2012
Donʼt rely on data alone; observe your users in the wild
Mobile First Has Many Faces




                                                         DEVELOPMENT


                                                DESIGN



http://bradfrostweb.com/blog/mobile/the-many-
faces-of-mobile-first/
Mobile First Has Many Faces



              Strategy


                                                         DEVELOPMENT


                                                DESIGN



http://bradfrostweb.com/blog/mobile/the-many-
faces-of-mobile-first/
Mobile First Has Many Faces



              Strategy


                Design                                   DEVELOPMENT


                                                DESIGN



http://bradfrostweb.com/blog/mobile/the-many-
faces-of-mobile-first/
Mobile First Has Many Faces



              Strategy


                Design                                   DEVELOPMENT


         Development                            DESIGN



http://bradfrostweb.com/blog/mobile/the-many-
faces-of-mobile-first/
Mobile First In Action

Austin Start-Up Silvercar starts with Mobile First
If you want to learn more about designing for...
Thank You
Follow me on Twitter @theresaneil

Read my book and blog:
“Mobile Design Pattern Gallery” OʼReilly 2012

More Related Content

What's hot

Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishingBriding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
Tom Deryckere
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Apperian
 
Why and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web StrategyWhy and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web Strategy
TechBlocks
 
Session 9-10 - UI/UX design for iOS 7 application
Session 9-10 - UI/UX design for iOS 7 applicationSession 9-10 - UI/UX design for iOS 7 application
Session 9-10 - UI/UX design for iOS 7 application
Vu Tran Lam
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
affilinet
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Paul Brown
 
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Jason Grigsby
 
Mobile email - chasing context
Mobile email -  chasing contextMobile email -  chasing context
Mobile email - chasing context
Anna Yeaman
 
Modular email templates
Modular email templatesModular email templates
Modular email templates
Anna Yeaman
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
KeyLimeTie
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)
Mohammad Khalil
 
iPhone - Human Interface Guidelines
iPhone - Human Interface GuidelinesiPhone - Human Interface Guidelines
iPhone - Human Interface Guidelines
Martin Ebner
 
Mobile First Strategy - A Game-Changing Opportunity for Your Enterprise
Mobile First Strategy - A Game-Changing Opportunity for Your EnterpriseMobile First Strategy - A Game-Changing Opportunity for Your Enterprise
Mobile First Strategy - A Game-Changing Opportunity for Your Enterprise
WSO2
 
iPhone / iPad - Human Interface Guidelines
iPhone / iPad - Human Interface GuidelinesiPhone / iPad - Human Interface Guidelines
iPhone / iPad - Human Interface Guidelines
Martin Ebner
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsiOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-Platforms
Martin Ebner
 
How to market your app
How to market your appHow to market your app
How to market your app
Ouriel Ohayon
 
Human Computer Interface Guidelines
Human Computer Interface GuidelinesHuman Computer Interface Guidelines
Human Computer Interface Guidelines
Martin Ebner
 
Trip advsiorhybridpresentation
Trip advsiorhybridpresentationTrip advsiorhybridpresentation
Trip advsiorhybridpresentation
ElanaBoehm
 
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experienceWhy "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Kevin Powell
 
Human Interface Guidlines for Mobile Applications
Human Interface Guidlines for Mobile ApplicationsHuman Interface Guidlines for Mobile Applications
Human Interface Guidlines for Mobile Applications
Martin Ebner
 

What's hot (20)

Briding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishingBriding the Gap between Desktop and Mobile publishing
Briding the Gap between Desktop and Mobile publishing
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
 
Why and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web StrategyWhy and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web Strategy
 
Session 9-10 - UI/UX design for iOS 7 application
Session 9-10 - UI/UX design for iOS 7 applicationSession 9-10 - UI/UX design for iOS 7 application
Session 9-10 - UI/UX design for iOS 7 application
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
 
Mobile email - chasing context
Mobile email -  chasing contextMobile email -  chasing context
Mobile email - chasing context
 
Modular email templates
Modular email templatesModular email templates
Modular email templates
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)
 
iPhone - Human Interface Guidelines
iPhone - Human Interface GuidelinesiPhone - Human Interface Guidelines
iPhone - Human Interface Guidelines
 
Mobile First Strategy - A Game-Changing Opportunity for Your Enterprise
Mobile First Strategy - A Game-Changing Opportunity for Your EnterpriseMobile First Strategy - A Game-Changing Opportunity for Your Enterprise
Mobile First Strategy - A Game-Changing Opportunity for Your Enterprise
 
iPhone / iPad - Human Interface Guidelines
iPhone / iPad - Human Interface GuidelinesiPhone / iPad - Human Interface Guidelines
iPhone / iPad - Human Interface Guidelines
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsiOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-Platforms
 
How to market your app
How to market your appHow to market your app
How to market your app
 
Human Computer Interface Guidelines
Human Computer Interface GuidelinesHuman Computer Interface Guidelines
Human Computer Interface Guidelines
 
Trip advsiorhybridpresentation
Trip advsiorhybridpresentationTrip advsiorhybridpresentation
Trip advsiorhybridpresentation
 
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experienceWhy "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
 
Human Interface Guidlines for Mobile Applications
Human Interface Guidlines for Mobile ApplicationsHuman Interface Guidlines for Mobile Applications
Human Interface Guidlines for Mobile Applications
 

Viewers also liked

Digital jewellery ppt
Digital jewellery pptDigital jewellery ppt
Digital jewellery ppt
Rithu Pudiyaveedu
 
How To Create An Awareness Campaign With Social Media
How To Create An Awareness Campaign With Social MediaHow To Create An Awareness Campaign With Social Media
How To Create An Awareness Campaign With Social Media
Marie Ennis-O'Connor
 
9 imc message strategy
9 imc message strategy9 imc message strategy
9 imc message strategy
soumya
 
Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)
Dave Olsen
 
How can I use LinkedIn to create brand awareness?
How can I use LinkedIn to create brand awareness?How can I use LinkedIn to create brand awareness?
How can I use LinkedIn to create brand awareness?
TheIDM
 
Mobile Trends 2016
Mobile Trends 2016Mobile Trends 2016
Mobile Trends 2016
DeSmart Agile Software House
 
Meru rides on Twitter to create awareness around carpooling
Meru rides on Twitter to create awareness around carpoolingMeru rides on Twitter to create awareness around carpooling
Meru rides on Twitter to create awareness around carpooling
Social Samosa
 
Mobile Strategy for Small Businesses - SME Mobile Strategies 2014
Mobile Strategy for Small Businesses - SME Mobile Strategies 2014Mobile Strategy for Small Businesses - SME Mobile Strategies 2014
Mobile Strategy for Small Businesses - SME Mobile Strategies 2014
Bridget Randolph
 
Developing a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDeveloping a Progressive Mobile Strategy
Developing a Progressive Mobile Strategy
Dave Olsen
 
Social media case study: Jimmy Choo
Social media case study: Jimmy ChooSocial media case study: Jimmy Choo
Social media case study: Jimmy Choo
Triptease
 
Digital jewellery
Digital jewelleryDigital jewellery
Digital jewellery
indianspandana
 
Internet Marketing Strategy (SEO/PPC) for FashionSouk.com
Internet Marketing Strategy (SEO/PPC) for FashionSouk.comInternet Marketing Strategy (SEO/PPC) for FashionSouk.com
Internet Marketing Strategy (SEO/PPC) for FashionSouk.com
Nabeel Farooq
 
Tesla Marketing Strategy
Tesla Marketing StrategyTesla Marketing Strategy
Tesla Marketing Strategy
Renny Saldanha
 
Content Strategy for Mobile: The Workshop
Content Strategy for Mobile: The WorkshopContent Strategy for Mobile: The Workshop
Content Strategy for Mobile: The Workshop
Karen McGrane
 
Create a Content Marketing Strategy Your Customers will LOVE, in 7 Steps
Create a Content Marketing Strategy Your Customers will LOVE, in 7 StepsCreate a Content Marketing Strategy Your Customers will LOVE, in 7 Steps
Create a Content Marketing Strategy Your Customers will LOVE, in 7 Steps
Jay Baer
 

Viewers also liked (15)

Digital jewellery ppt
Digital jewellery pptDigital jewellery ppt
Digital jewellery ppt
 
How To Create An Awareness Campaign With Social Media
How To Create An Awareness Campaign With Social MediaHow To Create An Awareness Campaign With Social Media
How To Create An Awareness Campaign With Social Media
 
9 imc message strategy
9 imc message strategy9 imc message strategy
9 imc message strategy
 
Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)Developing a Progressive Mobile Strategy (M3 Conf version)
Developing a Progressive Mobile Strategy (M3 Conf version)
 
How can I use LinkedIn to create brand awareness?
How can I use LinkedIn to create brand awareness?How can I use LinkedIn to create brand awareness?
How can I use LinkedIn to create brand awareness?
 
Mobile Trends 2016
Mobile Trends 2016Mobile Trends 2016
Mobile Trends 2016
 
Meru rides on Twitter to create awareness around carpooling
Meru rides on Twitter to create awareness around carpoolingMeru rides on Twitter to create awareness around carpooling
Meru rides on Twitter to create awareness around carpooling
 
Mobile Strategy for Small Businesses - SME Mobile Strategies 2014
Mobile Strategy for Small Businesses - SME Mobile Strategies 2014Mobile Strategy for Small Businesses - SME Mobile Strategies 2014
Mobile Strategy for Small Businesses - SME Mobile Strategies 2014
 
Developing a Progressive Mobile Strategy
Developing a Progressive Mobile StrategyDeveloping a Progressive Mobile Strategy
Developing a Progressive Mobile Strategy
 
Social media case study: Jimmy Choo
Social media case study: Jimmy ChooSocial media case study: Jimmy Choo
Social media case study: Jimmy Choo
 
Digital jewellery
Digital jewelleryDigital jewellery
Digital jewellery
 
Internet Marketing Strategy (SEO/PPC) for FashionSouk.com
Internet Marketing Strategy (SEO/PPC) for FashionSouk.comInternet Marketing Strategy (SEO/PPC) for FashionSouk.com
Internet Marketing Strategy (SEO/PPC) for FashionSouk.com
 
Tesla Marketing Strategy
Tesla Marketing StrategyTesla Marketing Strategy
Tesla Marketing Strategy
 
Content Strategy for Mobile: The Workshop
Content Strategy for Mobile: The WorkshopContent Strategy for Mobile: The Workshop
Content Strategy for Mobile: The Workshop
 
Create a Content Marketing Strategy Your Customers will LOVE, in 7 Steps
Create a Content Marketing Strategy Your Customers will LOVE, in 7 StepsCreate a Content Marketing Strategy Your Customers will LOVE, in 7 Steps
Create a Content Marketing Strategy Your Customers will LOVE, in 7 Steps
 

Similar to Your Mobile Strategy Can't Be HTML5

Mobile Web site options by Reactive
Mobile Web site options by ReactiveMobile Web site options by Reactive
Mobile Web site options by Reactive
Reactive, part of Accenture Interactive
 
GAUGE Google Analytics Conference: Mobile SDK
GAUGE Google Analytics Conference: Mobile SDKGAUGE Google Analytics Conference: Mobile SDK
GAUGE Google Analytics Conference: Mobile SDK
ISITE Design is now Connective DX
 
Effective Mobile Marketing
Effective Mobile Marketing Effective Mobile Marketing
Effective Mobile Marketing
Blake Sirach
 
The Mobile Transition
The Mobile TransitionThe Mobile Transition
The Mobile Transition
G5Team
 
Deck_Vincent Ryan
Deck_Vincent RyanDeck_Vincent Ryan
Deck_Vincent Ryan
Warren Hersch
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
Dave Martin
 
Mobile presence & location based marketing
Mobile presence & location based marketingMobile presence & location based marketing
Mobile presence & location based marketing
Priyanka Rana
 
So, Mobile is Big. Now What?
So, Mobile is Big. Now What?So, Mobile is Big. Now What?
So, Mobile is Big. Now What?
BMA Carolinas
 
Presentation1
Presentation1Presentation1
Presentation1
csimmons44
 
Mobile automotive masterclass deck camerjam mobile marketing
Mobile automotive masterclass deck camerjam mobile marketingMobile automotive masterclass deck camerjam mobile marketing
Mobile automotive masterclass deck camerjam mobile marketing
James Cameron
 
Presentation1
Presentation1Presentation1
Presentation1
Chris Simmons
 
Presentation1
Presentation1Presentation1
Presentation1
csimmons44
 
Engage 2013 - Mobile Measurement Tactics
Engage 2013 - Mobile Measurement TacticsEngage 2013 - Mobile Measurement Tactics
Engage 2013 - Mobile Measurement Tactics
Webtrends
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Lee Roberson
 
Mobile Blast - Mobile strategy for developers
Mobile Blast - Mobile strategy for developersMobile Blast - Mobile strategy for developers
Mobile Blast - Mobile strategy for developers
John Jardin
 
IBM MobileFirst - Hybrid Application Development with Worklight
IBM MobileFirst - Hybrid Application Development with WorklightIBM MobileFirst - Hybrid Application Development with Worklight
IBM MobileFirst - Hybrid Application Development with Worklight
IBIZZ
 
Insights on Android App Development, Marketing and Monetization
Insights on Android App Development, Marketing and MonetizationInsights on Android App Development, Marketing and Monetization
Insights on Android App Development, Marketing and Monetization
Jayneel Patel
 
Build Mobile Websites | How to make a Mobile Website | Creating Mobile Websites
Build Mobile Websites | How to make a Mobile Website | Creating Mobile WebsitesBuild Mobile Websites | How to make a Mobile Website | Creating Mobile Websites
Build Mobile Websites | How to make a Mobile Website | Creating Mobile Websites
ClickTecs
 
Smile mobile 2015
Smile mobile 2015Smile mobile 2015
Smile mobile 2015
Оksana Logashuk
 
Tincan - Mobile Elephant
Tincan - Mobile ElephantTincan - Mobile Elephant
Tincan - Mobile Elephant
Ben Holliday
 

Similar to Your Mobile Strategy Can't Be HTML5 (20)

Mobile Web site options by Reactive
Mobile Web site options by ReactiveMobile Web site options by Reactive
Mobile Web site options by Reactive
 
GAUGE Google Analytics Conference: Mobile SDK
GAUGE Google Analytics Conference: Mobile SDKGAUGE Google Analytics Conference: Mobile SDK
GAUGE Google Analytics Conference: Mobile SDK
 
Effective Mobile Marketing
Effective Mobile Marketing Effective Mobile Marketing
Effective Mobile Marketing
 
The Mobile Transition
The Mobile TransitionThe Mobile Transition
The Mobile Transition
 
Deck_Vincent Ryan
Deck_Vincent RyanDeck_Vincent Ryan
Deck_Vincent Ryan
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Mobile presence & location based marketing
Mobile presence & location based marketingMobile presence & location based marketing
Mobile presence & location based marketing
 
So, Mobile is Big. Now What?
So, Mobile is Big. Now What?So, Mobile is Big. Now What?
So, Mobile is Big. Now What?
 
Presentation1
Presentation1Presentation1
Presentation1
 
Mobile automotive masterclass deck camerjam mobile marketing
Mobile automotive masterclass deck camerjam mobile marketingMobile automotive masterclass deck camerjam mobile marketing
Mobile automotive masterclass deck camerjam mobile marketing
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presentation1
Presentation1Presentation1
Presentation1
 
Engage 2013 - Mobile Measurement Tactics
Engage 2013 - Mobile Measurement TacticsEngage 2013 - Mobile Measurement Tactics
Engage 2013 - Mobile Measurement Tactics
 
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
Here Today, Here Tomorrow: Mobile Devices - Northwestern University Web Steer...
 
Mobile Blast - Mobile strategy for developers
Mobile Blast - Mobile strategy for developersMobile Blast - Mobile strategy for developers
Mobile Blast - Mobile strategy for developers
 
IBM MobileFirst - Hybrid Application Development with Worklight
IBM MobileFirst - Hybrid Application Development with WorklightIBM MobileFirst - Hybrid Application Development with Worklight
IBM MobileFirst - Hybrid Application Development with Worklight
 
Insights on Android App Development, Marketing and Monetization
Insights on Android App Development, Marketing and MonetizationInsights on Android App Development, Marketing and Monetization
Insights on Android App Development, Marketing and Monetization
 
Build Mobile Websites | How to make a Mobile Website | Creating Mobile Websites
Build Mobile Websites | How to make a Mobile Website | Creating Mobile WebsitesBuild Mobile Websites | How to make a Mobile Website | Creating Mobile Websites
Build Mobile Websites | How to make a Mobile Website | Creating Mobile Websites
 
Smile mobile 2015
Smile mobile 2015Smile mobile 2015
Smile mobile 2015
 
Tincan - Mobile Elephant
Tincan - Mobile ElephantTincan - Mobile Elephant
Tincan - Mobile Elephant
 

More from Theresa Neil

Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!
Theresa Neil
 
The Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers CollectionThe Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers Collection
Theresa Neil
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 
Navigation Patterns for Mobile Optimized Retail Sites
Navigation Patterns for Mobile Optimized Retail SitesNavigation Patterns for Mobile Optimized Retail Sites
Navigation Patterns for Mobile Optimized Retail Sites
Theresa Neil
 
Navigation Patterns for iOS, Android and More
Navigation Patterns for iOS, Android and MoreNavigation Patterns for iOS, Android and More
Navigation Patterns for iOS, Android and More
Theresa Neil
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen Layouts
Theresa Neil
 
Designers vs Developers- Coming together to build the best RIAs
Designers vs Developers- Coming together to build the best RIAsDesigners vs Developers- Coming together to build the best RIAs
Designers vs Developers- Coming together to build the best RIAs
Theresa Neil
 

More from Theresa Neil (7)

Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!
 
The Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers CollectionThe Best Windows Phone Apps 2013: A Designers Collection
The Best Windows Phone Apps 2013: A Designers Collection
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Navigation Patterns for Mobile Optimized Retail Sites
Navigation Patterns for Mobile Optimized Retail SitesNavigation Patterns for Mobile Optimized Retail Sites
Navigation Patterns for Mobile Optimized Retail Sites
 
Navigation Patterns for iOS, Android and More
Navigation Patterns for iOS, Android and MoreNavigation Patterns for iOS, Android and More
Navigation Patterns for iOS, Android and More
 
RIA Screen Layouts
RIA Screen LayoutsRIA Screen Layouts
RIA Screen Layouts
 
Designers vs Developers- Coming together to build the best RIAs
Designers vs Developers- Coming together to build the best RIAsDesigners vs Developers- Coming together to build the best RIAs
Designers vs Developers- Coming together to build the best RIAs
 

Your Mobile Strategy Can't Be HTML5

  • 1. Mobile Design. Strategic Solutions. Theresa Neil
  • 2. I work as a Consultant, helping companies with their UX Strategy. Theresa Neil
  • 7. The Progression Classic Web Site Kiosk Early Mobile Web Native Tablet App Native Mobile Apps Mobile Optimized Site
  • 8. Whatʼs Driving Their Mobile Strategy? Mobile Usage Customer Retention Customer Acquisition Brand Alignment Competition Enterprise Mobility
  • 9. Whatʼs Driving Their Mobile Strategy? Mobile Usage Customer Retention Customer Acquisition Brand Alignment Competition Enterprise Mobility
  • 10. Whatʼs Driving Their Mobile Strategy? Mobile Usage Customer Retention Customer Acquisition Brand Alignment Competition Securing loyalty by providing Enterprise Mobility value added services
  • 11. Whatʼs Driving Their Mobile Strategy? Mobile Usage Customer Retention Customer Acquisition Brand Alignment Competition Attract and convert new customers Enterprise Mobility Use mobile as a conversion funnel for other products and services
  • 12. Whatʼs Driving Their Mobile Strategy? Mobile Usage Customer Retention Customer Acquisition Brand Alignment Competition Aligning the brand with innovation and forward thinking Enterprise Mobility
  • 13. Whatʼs Driving Their Mobile Strategy? Mobile Usage Customer Retention Customer Acquisition Brand Alignment Competition At this point, every airline, even Enterprise Mobility regional carriers, have integrated mobile solutions in their customer experience
  • 14. Whatʼs Driving Their Mobile Strategy? Mobile Usage Customer Retention Customer Acquisition Brand Alignment Competition According to Forrester Enterprise Mobility Research, 75% of companies report “increased worker productivity” from deploying mobile applications.
  • 15. What Are Your Mobile Options? Responsive Web Optimized Sites Native Apps
  • 16. What Are Your Mobile Options? Responsive Web Optimized Sites Native Apps Responsive Web defined...
  • 17. Responsive Web Defined Web site responds to the environment using css media queries. Typically achieved by using fluid grid layouts, like Responsive Grid System, Bootstrap, from Twitter, or Foundation by Zurb.
  • 18. Responsive Web UIWindow 768 x 1024 Cisco London 2012
  • 20. Responsive Web Ideal For Informational Web Sites Promotional Sites Content Consumption Sites • Newspapers • Magazines • Blogs • Galleries • Portfolios Boston Globe
  • 21. If you want to learn more about designing responsively...
  • 22. What Are Your Mobile Options? Responsive Web Optimized Sites Native Apps A closer look at Optimized Sites...
  • 23. Optimized Sites aka mobile apps and dot m sites Optimizing for different sizes and different usage needs Check Weather Playing Games Watch Video Checking Email Local News Social Networking National News Research Sports Info Listening to Music Entertainment Watching TV Financial Info Reference Materials Shopping Lifestyle Content Reading Books Magazine Content Lightweight Creation 0 12.5 25 37.5 50 0 12.5 25 37.5 50 Smartphone Usage Tablet Usage
  • 24. Optimized Sites aka mobile apps and dot m sites Mobile usage throughout the day: http://www.inmobi.com/inmobiblog/files/2012/02/Global_MediaConsumption_Info_Feb22.png
  • 25. Optimized Sites Some companies have three distinct sites... Classic Web Site Tablet Web Site Mobile Web Site
  • 26. Optimized Sites More often there are only two distinct sites Amazonʼs Classic Web Site & Tablet Site Mobile Web Site
  • 27. Optimized Sites The mobile version is streamlined for core activities jetBlueʼs Classic Web Site & Tablet Site Mobile Web Site
  • 28. The Four Core Activities of Mobile Users Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world. Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions. Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it. Edit/Create (urgent change/micro-tasking): I need to get some- thing done now that can’t wait.
  • 29. Optimized Site: Backbase Project Tool Basecamp userʼs core activities fall into two categories: 1.Checkin/status 2.Edit/create Their mobile optimized site provides a solution for these needs.
  • 30. Optimized Site: Harvest Time Tracking Concepts V1 Harvest also optimizes for: 1.Checkin/status 2.Edit/create BETA http://www.getharvest.com/blog/2012/04/harvest-mobile-timesheet-beta/
  • 31. Responsive vs Optimized Sites Web Sites Web Apps Search Informational Travel Content Heavy Retail • Newspapers SaaS • Magazines Productivity Tools • Blogs (light-weight) • Galleries Responsive Optimized Sites
  • 32. Mobile Web Doʼs and Dontʼs Doʼs Make content most important (reduce navigation) Focus on performance Use Image Sprites Bundle & minify CSS and Javascipt files Limit or remove dependencies on heavy JS libraries Use CSS3 for styling, rounded corners, text shadows...
  • 33. Mobile Web Doʼs and Dontʼs Dontʼs Port a web app 1-for-1 Add back buttons Use large images and size down Go crazy with special effects/transitions Try to make it look just like a Native App
  • 34. What Are Your Mobile Options? Responsive Web Optimized Sites Native Apps The Native Solution...
  • 35. Native Apps Defined An application that has been developed for use on a particular platform or device. Typically native apps are coded with: Objective C for Apple Java for Android and BlackBerry C# or Visual Basic for Windows 7.5 But there are also other options: Ruby Motion MonoTouch and MonoDroid Adobe AIR Adobe Flex 4.5 Showcase Apps
  • 36. Native Apps Evernote for BlackBerry Phone & Tablet, Android Phone & Tablet, iOS Phone & Tablet, Windows Phone
  • 37. Native Apps Xamarian MWC 2012 App C#, MonoTouch, MonoDroid
  • 38. Native Apps Ideal For Games Financial Tools Productivity Tools (heavy-weight) Enterprise Apps Bloomberg Anywhere Keynote Presentation Tool
  • 39. Native Doʼs and Dontʼs Doʼs Know & understand your target devices Follow design conventions for those platform Navigation paradigms UI controls Gestures Prototype and test often
  • 40. Validate the prototypes on the target devices with actual users
  • 42. Native Doʼs and Dontʼs Dontʼs Design for the iPhone and reuse the design for Android or Windows (or vise versa) Recreate the wheel. There are standard mobile patterns you can leverage for: Search, Sort, Filter Forms Invitations, etc..
  • 44. Native Apps vs Optimized Sites Games Search Tools requiring: Travel • Complex Calculations Retail • Reporting/Charting Productivity Tools • Native Functionality (light weight) • Offline Access Native Apps Optimized Sites
  • 45. Native Apps vs Optimized Sites Games Search Tools requiring: point in time, nativeTravel target At this apps can the specific limitations and abilities of each • Complex Calculationsmuch better than a website individual device Retail • Reporting/Charting inside a Productivity Tools can while running browser. • Native Functionality (light weight) http://www.useit.com/alertbox/mobile-sites-apps.html • Offline Access Native Apps Optimized Sites
  • 46. Breaking the Rules... Non Tech Considerations--> Financial Financial Times, Playboy and Walmart are using sites instead of apps to avoid sharing revenues with app store owners.
  • 47. Breaking the Rules... Walmartʼs Vudu Optimized for tablets, avoids sharing the revenue from movie sales
  • 48. These are your options Responsive Web Optimized Sites Native Apps Questions?
  • 49. What About HTML5 ? HTML5 is simply a technology that you can use to implement any of these solutions. There are many options, here are few: Responsive Web Optimized Sites Native Apps HTML5 + a responsive HTML5 + a mobile HTML5 + a framework front end framework like framework like JQuery like PhoneGap or Bootstrap Mobile Titanium
  • 50. What About Hybrids? Defined A ʻnative wrappedʼ web application. Products like Titanium and PhoneGap create a native wrapper that let the HTML and JS access OS dependent operations they couldnʼt access on their own (contacts, calendar, camera, geo-location...) LinkedIn- NBC-Built with Titanium Custom Wrapper
  • 51. Are Hybrids as good as Native Apps? This isn’t black & white When big players like LinkedIn and Facebook successfully launched hybrids, it looked like a shift might be imminent.
  • 52. Are Hybrids as good as Native Apps? This isn’t black & white When big players like LinkedIn and Facebook successfully launched hybrids, it looked like a shift might be imminent. But Facebook has rebuilt their iOS apps with Objective C, primarily to improve the performance.
  • 53. Hybrid or (truly) Native? Hybrid Fail
  • 54. Hybrid or (truly) Native? Hybrid Fail Hybrid Success
  • 55. Common Hybrid Pitfalls Code once and reuse doesnʼt mean design once and reuse x iPhone Android iPhone Android
  • 56. Good Hybrids in the Market Follow the design conventions of each platform Netflix http://functionsource.com/post/netflix-feature
  • 57. What is Mobile First? A different way of thinking Agreement on what matters most
  • 58. Mobile First is... Knowing your users What they do and why they do it
  • 59. Know Your Users The Guardianʼs Data 2010 2012
  • 60. Donʼt rely on data alone; observe your users in the wild
  • 61. Mobile First Has Many Faces DEVELOPMENT DESIGN http://bradfrostweb.com/blog/mobile/the-many- faces-of-mobile-first/
  • 62. Mobile First Has Many Faces Strategy DEVELOPMENT DESIGN http://bradfrostweb.com/blog/mobile/the-many- faces-of-mobile-first/
  • 63. Mobile First Has Many Faces Strategy Design DEVELOPMENT DESIGN http://bradfrostweb.com/blog/mobile/the-many- faces-of-mobile-first/
  • 64. Mobile First Has Many Faces Strategy Design DEVELOPMENT Development DESIGN http://bradfrostweb.com/blog/mobile/the-many- faces-of-mobile-first/
  • 65. Mobile First In Action Austin Start-Up Silvercar starts with Mobile First
  • 66. If you want to learn more about designing for...
  • 67. Thank You Follow me on Twitter @theresaneil Read my book and blog: “Mobile Design Pattern Gallery” OʼReilly 2012