10 things to make you a Great Mobile Web Developer
Download as PPTX, PDF2 likes740 views
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.
10 things to make you a Great Mobile Web Developer
- 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 ;)
- 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
- 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.
- 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
- 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
- 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