This document provides 10 tips for developing effective mobile web applications: 1) Understand the mobile landscape and technologies; 2) Determine essential content and use cases; 3) Optimize the viewport for mobile screens; 4) Use progressive enhancement; 5) Leverage HTML5 semantics; 6) Utilize CSS3 features; 7) Incorporate AJAX and frameworks; 8) Account for touch gestures; 9) Optimize images; and 10) Support offline usage.

1. 10 Things to Make You A Great Mobile Web DeveloperChris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLoveNow With More Code!

2. Tellago

3. ReferencesMobile Web BooksProgramming the Mobile Webhttp://amzn.to/bZMOchMobile Web Development http://amzn.to/9cvDoEMobile Design and Developmenthttp://amzn.to/hh8cPd

4. 1. Know The LandscapeMobile Devices Are Prevalent Around the WorldSmartPhones/Devices Becoming CommonMobile Data Plans (3/4G)HTML 5 Is Here, Embrace It ;)

5. Market Realityhttp://on.mash.to/k38NZw

6. User Problems

7. Understand the LandscapeLots of Phones Out There!Several BrowsersOpera, Safari, IE, FireFox, many others you never heard ofProxy BrowsersOpera Mini

8. Opera“Opera Mobile has been installed on 125 million smartphones since 2004” Programming the Mobile Web

9. Windows Phone 7 IE 9Like DesktopSupports Basic HTML5, CSS3, Canvas, Media Tag StuffGPU SpeedDoes Not Support TouchDoes Not Support Input Typeshttp://bit.ly/ij3RAjhttp://bit.ly/kYOZ5W

10. 2. Determine ContentDefine Use CasesOrder Cases by Most Frequent for MobileMake Cases Successful within 3 clicksAlways Offer Link to Desktop SiteDetermine if User Location Matters

11. 2. Determine ContentReduce Form PagesAvoid Welcome Screens/SplashPredict User Actions Based On HistoryThink Local Storage/Tombstoning

12. 2. ContextWhere Is The UserWhy are They on Your SiteWhat are they looking forWhat can you offer for mobile user to solve problemWhere will the user be accessing the site

13. 3. UnderStand The ViewPortViewable Area on DeviceMay actually be very wideiPhone is actually 980pixels wideInternet Explorer Assumes 1024 pixels widehttp://bit.ly/e18svU

14. 3. Set The ViewPortMetaTag

15. Width

16. Height

17. Initial-scale

18. User-scalable

19. Minimum-scale

20. Maximum-scale<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>http://tinyurl.com/wp7viewport

21. 4. Progressive EnhancementBasic 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.

22. 4. Progressive Enhancement

23. Web Application LayersAJAXCSSHTMLServer-Side Muckity Muck

24. 4.b Single Page SItesUse AJAX to Transition Between ContentUse HashTags to Track StatejQuery BBQ pluginhttp://bit.ly/abipprAllows Transition EffectsjQuery Mobile, jqTouch & Sencha Leverage

25. 5. Understand HTMLLeverage HTML5 SemanticsRealize HTML5 is much broader than Markup

26. 5. Typical LayoutHeaderNavigationContentFooter

27. HTML5 Boilerplatehttp://html5boilerplate.comhttp://html5boilerplate.com/mobile/

28. 6. Understand CSS3AnimationsGradientsTransformsShadowsRounded CornersMedia QueriesSo Much More!!

29. 6. Transitions2D TransformationsShadows. Rounded Corners Etc3D Keyframe Animations!

30. 7. AJAXjQuery & Other FrameworksjQuery Mobile http://jQueryMobile.comSencha TouchDrive Your Rich UI

31. 7. jQuery MobileProvide Common Framework Across DevicesBrowser Capability Rating

32. 7. JS Mobile FrameworksSenchaTouchhttp://bit.ly/boAFA7jQTouchReally Nice TransitionsIs a Commercial Product

33. 8. Touch GesturesFingers Are Fat20px SpacingPrimary Items Min 40px W &HProvide Quick Feedback of Touched ItemInclude Auto-Clear Feature for Text Inputs

34. 8. Touch Gesturestouchstarttouchendtouchmovetouchentertouchleavegouchcancelgesturestart*gesturechange*gestureend*http://bit.ly/ion0Umhttp://bit.ly/bYeSRT* Safari Only

35. 8. Touch GesturesTAP === ClickDouble Tap !== Double ClickImplement a DoubleTap Detection Pattern<imgsrc="bigbutton.png" onclick="tap(tapOnce, tapTwice)" />

36. 9. ImagesLimit to Logo, Product or MapDo NOT use forBackgroundsButtonsIconsCompressThe mandatory attributes for an img tag are src, width, height, and alt

37. 9. Inline ImagesIE 8+, Other newer browsersConvert to BASE64 Encoded TextUse gZip CompressionThis is a Data UrlCan be used in CSS files

38. 10. OfflineApplication CacheLocal Storagelocalstoragesessionstorage

39. The Device APISMessagingAddress book managementGeolocationGalleryCameraCalendarDevice status informationNative menus