@sparklegem  |  @oxiem  |  @interact13  |  #interact13    

Get Mobile with Crystal Olig, Account Services Manager, Oxiem

We’ve Come a Long Way.

Source: http://blog.sectiondesign.co.uk

But we’re dealing with multiple platforms.

New types of devices.

And new types of interactions.

Today

1.  Facts, figures & trends 2.  Device bootcamp 3.  Apps vs. Mobile Sites 4.  Sample mobile strategies 5.  Design for mobile

7  

What is mobile?

devices & platforms

All viewports

•  Website •  Web Apps &

Widgets

•  Website •  Web Apps &

Widgets

•  iOS •  Android •  Windows? •  Other:

•  Website •  HTML5

•  iOS •  Android •  Windows? •  Other: •  Mobile Web •  HTML5

def. Mobile Device A “mobile device” is any hand-held computer device, with touch input or a mini keyboard. Most common devices:

–  Phones –  Tablets

Common features:

–  Runs using an OS and can run application software (apps) –  Wifi, Bluetooth, GPS –  Camera & media player

More features:

–  Barcode reader –  RFID –  Smart Card reader

Mobile Platforms

•  iOS (Apple) •  Android (Google) •  Windows (Microsoft) •  QNX (RIM)

F u n f a c t : Android OS’s are named after desserts: Éclair, Froyo, Gingerbread, Honeycomb,

Ice Cream Sandwich, Jelly Bean & Key Lime Pie

Breakdown Smart Phones Small Tablets Large Tablets

Sizes 3.5”, 4”, 5”

Size: 6”, 7”, 7.9”(iPad Mini)

Full size 9.7”(iPad) – 10.6” (Microsoft Surface)

iPhone iPad Mini iPad

Samsung Galaxy S III Kindle Fire Motorola Xoom

Nexus 4 Nexus 7 Samsung Galaxy Tab

Nokia Lumia 920 Samsung Galaxy Tab 7

Samsung Galaxy Tab 10.1

HTC One X+ Acer Iconia

Samsung Galaxy Note

XPS 10, Latitude 10

Size Matters!

Is my audience using mobile devices? What & how often?

Absolutely t hey are.

Everyone needs to be thinking about

how their site displays on a

mobile device.

Users > Desktop Internet Users Wit hin 5 Years Global Mobile vs. Desktop Internet User Projection, 2007-2015e

Inte

rnet

Use

rs (

MM

)

Source: Morgan Stanley Research

By 2014, mobile should take over desktop internet usage.

Smartphone growt h is astronomical.

Time spent using devices is growing.

Top Smartphone Platforms Q 4 o f 2 0 1 2 :

48.1%  share  of  US  smartphone  sales  

compared  with  Android  which  has  46.7%.  

 Android  is  a  strong  leader  throughout  

Europe.                    

Source:  kantarworldpanel.com  

Top Tablets

Decisions & purchases made via mobile

59% Business executives would prefer to make a business

transaction via mobile web rather than by phone

7 per day Average number of times an executive uses their mobile device to do a search on the

web

Your visitors speak out

55%

61%

67%

indicated a bad web experience hurt their overall impression of the brand

indicated that they will move to a competitor if they don’t see what they need on mobile right away

indicated that a mobile site inclined them to buy a product or service

The Mobile Landscape

40% Users turned to

competitor’s site due to poor

mobile experience

21% Existing websites

have mobile capabilities

67% Indicated a poor

mobile experience hurt their impression

of the brand

18% of all pageviews

are now done with mobile devices

23  What’s the di!erence?

mobile site vs. app

What do I need?

Mobile vs. App What’s an App? A stand-alone application, installed on phone. Works o!-line & has access to phone features. What’s a Mobile Site? A website optimized for viewing on mobile devices such as tablets and smartphones. No installation necessary, just access to the internet. What’s a Hybrid App? A mobile app with mobile site features. Accesses mobile web pages as part of the feature set of the app.

Mobile vs. App

Mobile Site •  Platform independent •  Easy to update •  Cost e"cient •  Search Engine friendly •  Easy to publish •  Requires Internet access via

wifi or 3G/4G

Mobile Application •  Platform specific •  Native phone feature access

for more advanced functionality

•  Must be released (Apple App Store, Google Play) according to platform guidelines

•  Internet connectivity not always necessary

How do I approach mobile for my organization?

Key Questions to Ask Yourself •  Is this to support my whole organization, or just one aspect (sales,

a campaign, a line of products)? •  What are my users most likely doing online? •  Does my current site support a mobile option? •  Do I want to maintain a separate mobile site? •  Would a redesign give me the best of both worlds?

Approaches

#1- Standalone desktop site & mobile site. Large display tablets default to either per your preference.

Approaches

#1- Standalone desktop site & mobile site. Large display tablets default to either per your preference.

Approaches

#2 - Integrated desktop and mobile site. Some features shared.

Approaches

#2 - Integrated desktop and mobile site. Some features shared.

Approaches

#3 - Responsive Design Website Dynamic on the fly page resizing.

Approaches

#3 - Responsive Design Website Tablet view.

Approaches

#3 - Responsive Design Website Smartphone view.

Conduct an analytics & visual review focused on mobile. 1

Tools 1.  ipadpeek.com/ 2.  iphonetester.com/ 3.  mobilephoneemulator.com/ 4.  ready.mobi/launch.jsp?

locale=en_EN 5.  responsivepx.com/ 6.  quirktools.com/screenfly/

Conduct an analytics & visual review focused on mobile. 1

Design for the user.

2

Simplify… 3

But don’t forget your brand. 4 4

Thank you! Questions? Please share one tip from this session with the community by

tweeting with hashtag #interact13!

Crystal Olig @sparklegem

Account Services Manager, Oxiem colig@oxiem.com