from desktop to mobile web

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