make mobile web apps rock

MAKE YOUR MOBILE WEB APPS ROCK!

Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove

TELLAGO

REFERENCES Mobile Web Books

Mobile First http://bit.ly/jMSGAB Programming the Mobile Web http://amzn.to/bZMOch Mobile Web Development http://amzn.to/9cvDoE Mobile Design and Development http://amzn.to/hh8cPd

KNOW THE LANDSCAPE Mobile Devices Are Prevalent Around

the World SmartPhones/Devices Becoming

Common Mobile Data Plans (3/4G) HTML 5 Is Here, Embrace It ;)

MARKET REALITY

http://on.mash.to/k38NZw

MARKET REALITY

http://bit.ly/tFdyXF

USER PROBLEMS

UNDERSTAND THE LANDSCAPE

Lots of Phones Out There! Several Browsers

Opera, Safari, IE, FireFox, many others you never heard of

Proxy Browsers Opera Mini

GRADING BROWSERS

http://haz.iohttp://html5test.com

Assume Modern Smart Phones

Most Are Webkit & Support Most HTML5 Features

Confidently Assume No Feature Phones

WINDOWS PHONE 7 IE 9 Like Desktop

Supports Basic HTML5, CSS3, Canvas, Media Tag Stuff

GPU Speed Does Not Support Touch Does Not Support Input Types

http://bit.ly/ij3RAj http://bit.ly/kYOZ5W

MOBILE FIRST“designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.”

Luke Wroblewski

MOBILE FIRST

DETERMINE CONTENT Define Use Cases

Order Cases by Most Frequent for Mobile

Make Cases Successful within 3 clicks

Always Offer Link to Desktop Site

Determine if User Location Matters

DETERMINE CONTENT

http://bit.ly/aD1dr3

USER CONTEXT

Don’t Miss The Boat

DETERMINE CONTENT Reduce Form Pages Avoid Welcome

Screens/Splash Predict User Actions

Based On History Think Local

Storage/Tombstoning

CONTEXT Where Is The User Why are They on Your Site What are they looking for What can you offer for

mobile user to solve problem

Where will the user be accessing the site

META TAGS <meta name="description" content=""> <meta name="author" content=""> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="apple-touch-icon" href="@Url.Content("~/apple-touch-icon.png")"/> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="@Url.Content("~/img/h/apple-touch-icon.png")"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="@Url.Content("~/img/m/apple-touch-icon.png")"> <link rel="apple-touch-icon-precomposed" href="@Url.Content("~/img/l/apple-touch-icon-precomposed.png")"> <link rel="shortcut icon" href="@Url.Content("~/img/l/apple-touch-icon.png")"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-startup-image" href="@Url.Content("~img/l/splash.png”)">

HTML5 BOILERPLATE

http://html5boilerplate.comhttp://html5boilerplate.com/mobile/

TOUCH ICONS Allows You to Set the

Home Screen Icon Comparable to

favicon Apple Convention Supported on Most

Android Platforms

ADD TO HOME SCREEN

Prompts the User to Add The App To the iOS Home Screen

http://bit.ly/fi1wqp

APPLE-MOBILE-WEB-APP-CAPABLE

Allows You To Hide Mobile Safari Chrome

Gives You Native App-Like Experience iOS Only At This Point Does use a Different JS Engine Than

Safari

http://bit.ly/ilKFKT

APPLE-MOBILE-WEB-APP-STATUS-BAR-STYLE Allows You to Hide

Status Bar @ The Top of The Screen or Set The Color.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

http://bit.ly/9Mgv0y

UNDERSTAND THE VIEWPORT Viewable Area on

Device May actually be very

wide iPhone is actually

980pixels wide Internet Explorer Assumes

1024 pixels wide

http://bit.ly/e18svU

SET THE VIEWPORT•MetaTag• Width• Height• Initial-scale• User-scalable• Minimum-scale• Maximum-scale

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

http://tinyurl.com/wp7viewport

TYPICAL LAYOUT

HeaderNavigation

Content

Footer

RETHINK LAYOUT

TOUCH

LEVERAGE HTML5 Semantics CSS3 is AWESOMIER New Form Input Types

Help New Form Input

Attributes Really Help

INPUT TYPES HTML5 Adds Many New Input Types and

Attributes Telephone, Number, URL, E-Mail, etc autocapitalize, autocomplete,

placeholder, required…

INPUT TYPES

6. UNDERSTAND CSS3 Animations Gradients Transforms Shadows Rounded Corners Media Queries So Much More!!

TRANSITIONS 2D Transformations Shadows. Rounded Corners Etc 3D Keyframe Animations! CSS3 Animations w/jQuery Fallbacks

http://bit.ly/oBDnko

SINGLE PAGE SITES Use AJAX to Transition Between Content Use HashTags to Track State jQuery BBQ plugin

http://bit.ly/abippr Allows Transition Effects jQuery Mobile, jqTouch & Sencha

Leverage

TOUCH EVENTS

touchStart

touchEnd

touchMove

touchEnter

touchLeave

touchCance

l

http://tinyurl.com/webtch

TOUCH GESTURES Fingers Are Fat 20px Spacing Primary Items Min 40px W &H Provide Quick Feedback of Touched

Item Include Auto-Clear Feature for Text

Inputs

TOUCH FIRST LAYOUTRecommended size

7x7mm

Optimized for accuracy9x9mm

Optimized for small size5x5mm

Each target has 2mm padding

touch target

padding

HOW TARGET SIZE RELATES TO ERROR RATES

TOUCH GESTURES touchstart touchend touchmove touchenter touchleave gouchcancel

gesturestart* gesturechang

e* gestureend*

http://bit.ly/ion0Umhttp://bit.ly/bYeSRT* Safari Only

WINDOWS 8 TOUCH

OFFLINE & STORAGE Application Cache

Sort of Buggy - http://bit.ly/oryAF5 Local Storage

localstorage sessionstorage

THE DEVICE APIS Accelerometer Gyroscope Messaging Address book

management Geolocation

Gallery Camera Calendar Device status

information Native menus