Upload
chris-love
View
934
Download
0
Tags:
Embed Size (px)
Citation preview
FROM DESKTOP WEB TO WINNING MOBILE WEB EXPERIENCE
Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
BOOKS
Coming Soon…
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
http://www.w3.org/TR/mobile-bp/ Introduction To Mobile Web
http://dev.opera.com/articles/view/introduction-to-the-mobile-web/
WHY MOBILE WEB?You Should Attend My “10 Things to Make You A Great Mobile Web Developer” session.
http://tinyurl.com/10mobweb
Why You Need To Build Mobile Web Siteshttp://tinyurl.com/whymobweb
WHY MOBILE WEB?
USER PROBLEMS
“Among U.S. mobile phone users, in May 2010 65.2 percent sent a text message to another phone, 31.9 percent used their phone’s browser, 30 percent used/downloaded applications, 22.5 percent played mobile games and 20.8 percent accessed a social networking site or blog.”
MobileMarketer.com
http://www.mobilemarketer.com/cms/news/research/7342.html
“We often see double consumption and usage on touchscreen devices versus non-touch interfaces,” he said. “The mobile Web is becoming more app-like in appearance and experience, and the likelihood is that the mobile Web and apps will continue to coexist.
As the industry pushes towards the HTML 5 standard, the Web is becoming more app-like, so there’s an increasing convergence between the appearance and experience.”
MobileMarketer.com
http://www.mobilemarketer.com/cms/news/research/7342.html
“The key thing for marketers is the combination of larger screens and the touch Web really shouldn’t be underestimated,” Mr. Elkin said. “There are much higher interaction rates for the Web and apps among smartphone owners, and on a bigger canvas we expect those deltas to go even higher.”
MobileMarketer.com
http://www.mobilemarketer.com/cms/news/research/7342.html
DON’T FORGET TABLETS
UNDERSTAND THE LANDSCAPE
Lots of Phones Out There! Several Browsers
Opera, Safari, IE, FireFox, many others you never heard of
Proxy Browsers Opera Mini
ONE SITE FOR MOBILE & DESKTOP?
http://mysite.com http://mysite.com/m Creates A Mesh of two client platforms
in single project
HANDLING REDIRECTION WURFL No Not This Guy -> Wireless Universal Resource
File http://wurfl.sourceforge.net/ XML configuration file which
contains information about capabilities and features of many mobile devices
51 DEGREES .NET Library to Manage Redirection http://51degrees.codeplex.com/
DEMO
PAGE LAYOUT Navigation Context Progressive Enhancement Touch Design Patterns
NAVIGATION Decide What Is Useful To Your User 80% Of The Desktop Is Not Useful
Mobile Define Use Cases Try For 3 Click Success Try to Predict User Path
TYPICAL LAYOUT
HeaderNavigation
Content
Footer
USE LIST Use Vertical Lists
OL UL DL (Definition List)
Consider Accordians
DEMO
CONTEXT Where Is Your User? Why Are They Accessing My Site? What Are They Looking For? What Can Your Mobile Platform Offer for
Success? This Is Information Architecture
ORGANIZING THE SITE
Back To The Code
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.
TOUCH PATTERNS Consider Hidden Areas Provide Space Feedback Touch Ref Guide
http://tinyurl.com/tchref
CSS FOR MOBILE wap-accesskey wap-marquee Form Extensions
-wap-input-format -wap-input-required <input type="text" name="zip" style="-
wap-input-format: '5N'; -wap-input-required: true" />
8. AJAX jQuery & Other Frameworks Work
w/Limitations jQuery Mobile - jQueryMobile.com Do Not Assume It Is Available
JQUERY MOBILE Provide Common
Framework Across Devices
Browser Capability Rating
JS MOBILE EXTENSIONS Messaging Address book
management Geolocation Gallery Camera Calendar Device status
information Native menus
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