10 things to make you a Great Mobile Web Developer
-
Upload
chris-love -
Category
Technology
-
view
104 -
download
0
description
Transcript of 10 things to make you a Great Mobile Web Developer
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