@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 [email protected]
Recommended
