+

Mobile Devices

+Today in Class

Hand out Quiz

Mobile Device Presentation

Wordpress Presentation

+Overview

Understanding usability on mobile devices

Creating personas for mobile websites

Mobile Web vs. Mobile Application

Using tools and simulators to test your site on a range of mobile devices

+Understanding Usability

Mobile usability is dependent on being built for “on the go” situations commutes, out with friends, or waiting before a meeting.

Users resort to their computers for large amounts of reading and research, so mobile websites and applications should be fashioned accordingly

Essential that users be able to open the app quickly, accomplish what they hope to accomplish, then exit quickly

Mobile Devices

+Understanding Usability

Organization of mobile web experiences needs to: Align with how people use their mobile devices and why Emphasize content over navigation Provide relevant options for exploration and pivoting Maintain clarity and focus

Mobile Devices

+Mobile Devices

Google breakdowns: urgent now, repetitive now, and bored now

Mobile User Interaction types: Lookup/Find (urgent info, local) Explore/Play (bored, local) Check In/Status (repeat/micro-tasking) Edit/Create (urgent change/micro-tasking)

Align with how people use their mobile devices

+Example

Flickr photo sharing mobile web experience has four primary actions: Recent activity Uploads from your

contacts Today’s interesting photos Photos taken nearby

+Mobile Devices

Content takes precedence over navigation on mobile

Emphasize Content over Navigation

+Mobile DevicesProvide Relevant Options for Exploration and Pivot

+Mobile Devices

Clear, focused designs to get things done

Maintain Clarity and Focus

+Usability

Usability of mobile phone apps still looms large

There are no clear developer guidelines on app usability

The diversity among different handset models makes it difficult to define a “standard” for the usability factor

Most (though not all) usability issues arise out of hardware problems

Mobile Phone Apps

+Hardware Problems

Screen Resolution

Colors and Contrast

Button Functions

Font Size

Cursors

Keyboards

Mobile Devices

+User Experience on Mobile

Prioritize the most important content or features

Keep your layout simple

Give the option to view the full website

Take advantage of mobile specific features

Use more text links than images

Avoid the use of pop ups and/or automatic refreshes

Build mobile-friendly forms

Optimize the navigation

Minimize the action path

If using redirects be sure they work

+3 Mobile Personas

Touch Screeners

Green Thumbs

Straight Talkers

+Touch Screeners

18-34 years old; typically Gen Y/Millennials

Follow the latest trends

Likely have a smartphone

Likely to download apps, receive coupons, bank from their phone, scan QR codes, watch videos and research products

+Green Thumbs

24-44 years old; typically Gen X and Y and more likely to have small kids

Includes new mothers shifting online habits to mobile due to time limitations

Likely to access mobile web on a monthly basis, get coupons, enter sweepstakes

+Straight Talkers

35-65 years old; Gen Xers and Boomers with teenage kids

Spend a majority of free time with family

Likely to increase mobile search behavior, transition to mobile coupons, text messages, light online product research

+Mobile tactic heat map

+Mobile Web vs. Mobile Application consists of browser-based

HTML pages that are linked together and accessed over the Internet

Designed for the smaller handheld display and touch-screen interface.

actual applications that are downloaded and installed on your mobile device

Downloaded from Apple’s App Store, Android Market, or Blackberry App

May or may not use internet to download content

Mobile Web Mobile Application

+Principles Mobile Web vs Apps

+Principles Mobile App (MA) Responsive Web Design (RWD)

Access Speed Very fast Fast

App Store Available Not necessary

Approval Process Some are mandatory None

Content VersionsMultiple URLs/versions for each page, i.e., content forking

Same content regardless of device or platform

Development Cost Expensive to very expensive Moderate to reasonable

FeaturesPhone features, location services, camera, etc…

Limited phone features

FunctionalitySome functions may be omitted from the mobile application

All functions of original site remain

Internet Connection Available offline Required

Monetization Easily monetized Not as easy to monetize

Navigation Interactive user interface Static but responsive user interface

Optimized to mobile device Best Good

User AccessAfter installation and some user configuration/interaction

Through browser with little to no user configuration/interaction

+Content UsageUser Preference by Task

+Time UsageDesktop and Mobile Web vs. Mobile Apps

+Advantages - Mobile Web vs. Apps Immediacy – Mobile Websites Are

Instantly Available

Compatibility – Mobile Websites are Compatible Across Devices

Upgradability – Mobile Websites Can Be Updated Instantly

Findability – Mobile Websites Can be Found Easily

Shareability – Mobile Websites Can be Shared Easily by Publishers, and Between Users

Reach - Mobile Websites Have Broader Reach

LifeCycle - Mobile Websites Can’t be Deleted

A Mobile Website Can be an App!

Time and Cost - Mobile Websites are Easier and Less Expensive

Support and Sustainability

+When Does an App Make Sense? Interactivity/Gaming

Regular Usage/Personalization

Complex Calculations or Reporting

Native Functionality or Processing Required

No connection required

+Tools

Web Developer Browser Extension (http://chrispederick.com/work/web-developer/)

Mobile Testing

+Tools

ScreenFly (https://quirktools.com/screenfly/)

Responsinator (http://www.responsinator.com/)

SDKs Apple: https://developer.apple.com/ipad/sdk/ Android: http://developer.android.com/sdk/index.html Windows:

https://dev.windowsphone.com/en-us/downloadsdk

Mobile Emulators

+jQuery Mobile

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

Video (lynda.com) What is jQuery Mobile? Overview of features Building your first jQuery Mobile app

Introduction to jQuery Mobile

+jQuery Mobile

https://codiqa.com/

Premier prototyping and interface-building tool for jQuery Mobile

Lets you rapidly turn your mobile web or native app vision into reality

Codiqa

+jQuery Mobile

http://jquerymobile.com/themeroller/

makes it easy to create custom-designed themes for your mobile site or app. Just pick colors, then share your theme URL, or download the theme and drop it into your site.

ThemeRoller

+W3C mobileOK Checker

Free service by W3C that helps check the level of mobile-friendliness of Web documents, and in particular assert whether a Web document is mobileOK (http://validator.w3.org/mobile/index.html)

the Mobile Web Best Practices 1.0 specification (http://www.w3.org/TR/mobile-bp/) defines the notion of mobile-friendliness what the W3C mobileOK Checker actually tests. when a Web document passes all the tests, it is mobileOK.