10 THINGS TO MAKE YOU A GREAT MOBILE WEB DEVELOPER

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

Now With More Code!

TELLAGO

REFERENCES Mobile Web Books

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

1. 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

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

OPERA“Opera Mobile has been installed on 125

million smartphones since 2004” Programming the Mobile Web

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

2. 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

2. DETERMINE CONTENT Reduce Form Pages Avoid Welcome

Screens/Splash Predict User Actions

Based On History Think Local

Storage/Tombstoning

2. 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

3. 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

3. 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

4. PROGRESSIVE ENHANCEMENT

Basic content is accessible to all browsers.

Basic functionality is accessible to all browsers.

Semantic markup contains all content. Enhanced layout is provided by

externally linked CSS. Enhanced behavior is provided by

unobtrusive, externally linked JavaScript.

4. PROGRESSIVE ENHANCEMENT

WEB APPLICATION LAYERS

HTML

CSS

Server-Side Muckity Muck

AJAX

4.B 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

5. UNDERSTAND HTML Leverage HTML5

Semantics Realize HTML5 is much

broader than Markup

5. TYPICAL LAYOUT

HeaderNavigation

Content

Footer

HTML5 BOILERPLATE

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

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

6. TRANSITIONS 2D Transformations Shadows. Rounded Corners Etc 3D Keyframe Animations!

7. AJAX jQuery & Other Frameworks jQuery Mobile http://jQueryMobile.com Sencha Touch Drive Your Rich UI

7. JQUERY MOBILE Provide Common

Framework Across Devices

Browser Capability Rating

7. JS MOBILE FRAMEWORKS SenchaTouch

http://bit.ly/boAFA7

jQTouch

Really Nice Transitions

Is a Commercial Product

8. 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

8. TOUCH GESTURES touchstart touchend touchmove touchenter touchleave gouchcancel

gesturestart* gesturechang

e* gestureend*

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

8. TOUCH GESTURES TAP === Click Double Tap !== Double Click

Implement a DoubleTap Detection Pattern <img src="bigbutton.png"

onclick="tap(tapOnce, tapTwice)" />

9. IMAGES Limit to Logo, Product or Map Do NOT use for

Backgrounds Buttons Icons

CompressThe mandatory attributes for an img tag

are src, width, height, and alt

9. INLINE IMAGES IE 8+, Other newer browsers Convert to BASE64 Encoded Text Use gZip Compression This is a Data Url Can be used in CSS files

10. OFFLINE Application Cache Local Storage

localstorage sessionstorage

THE DEVICE APIS Messaging Address book

management Geolocation Gallery Camera

Calendar Device status

information Native menus