3. 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
4. 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 ;)
8. UNDERSTAND THE LANDSCAPE
Lots of Phones Out There!
Several Browsers
Opera,Safari, IE, FireFox, many others you
never heard of
Proxy Browsers
Opera Mini
9. GRADING BROWSERS
Assume Modern
Smart Phones
Most Are Webkit &
Support Most
HTML5 Features
Confidently
Assume No
Feature Phones
http://haz.io
http://html5test.com
10. 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
11. 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
14. 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
17. DETERMINE CONTENT
Reduce Form Pages
Avoid Welcome
Screens/Splash
Predict User Actions
Based On History
ThinkLocal
Storage/Tombstoning
18. 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
21. TOUCH ICONS
Allows You to Set the
Home Screen Icon
Comparable to
favicon
Apple Convention
Supported on Most
Android Platforms
22. ADD TO HOME SCREEN
Promptsthe User to
Add The App To the
iOS Home Screen
http://bit.ly/fi1wqp
23. 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
24. 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
25. UNDERSTAND THE VIEWPORT
ViewableArea on Device
May actually be very wide
iPhone is actually 980pixels
wide
Internet Explorer Assumes
1024 pixels wide
http://bit.ly/e18svU
26. 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
35. 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
37. 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
38. TOUCH FIRST LAYOUT
Recommended size
7x7mm
Optimized for accuracy
9x9mm
Optimized for small size
5x5mm
Each target has 2mm padding