From desktop to mobile web
-
Upload
chris-love -
Category
Technology
-
view
935 -
download
0
Transcript of From desktop to mobile web
![Page 1: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/1.jpg)
FROM DESKTOP WEB TO WINNING MOBILE WEB EXPERIENCE
Chris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
![Page 2: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/2.jpg)
BOOKS
Coming Soon…
![Page 3: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/3.jpg)
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/
![Page 4: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/4.jpg)
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
![Page 5: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/5.jpg)
WHY MOBILE WEB?
![Page 6: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/6.jpg)
USER PROBLEMS
![Page 7: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/7.jpg)
“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
![Page 8: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/8.jpg)
“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
![Page 9: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/9.jpg)
“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
![Page 10: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/10.jpg)
UNDERSTAND THE LANDSCAPE
Lots of Phones Out There! Several Browsers
Opera, Safari, IE, FireFox, many others you never heard of
Proxy Browsers Opera Mini
![Page 11: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/11.jpg)
ONE SITE FOR MOBILE & DESKTOP?
http://mysite.com http://mysite.com/m Creates A Mesh of two client platforms
in single project
![Page 12: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/12.jpg)
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
![Page 13: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/13.jpg)
51 DEGREES .NET Library to Manage Redirection http://51degrees.codeplex.com/
![Page 14: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/14.jpg)
DEMO
![Page 15: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/15.jpg)
PAGE LAYOUT Navigation Context Progressive Enhancement Touch Design Patterns
![Page 16: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/16.jpg)
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
![Page 17: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/17.jpg)
TYPICAL LAYOUT
HeaderNavigation
Content
Footer
![Page 18: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/18.jpg)
USE LIST Use Vertical Lists
OL UL DL (Definition List)
Consider Accordians
![Page 19: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/19.jpg)
DEMO
![Page 20: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/20.jpg)
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
![Page 21: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/21.jpg)
ORGANIZING THE SITE
Back To The Code
![Page 22: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/22.jpg)
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.
![Page 23: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/23.jpg)
TOUCH PATTERNS Consider Hidden Areas Provide Space Feedback Touch Ref Guide
http://tinyurl.com/tchref
![Page 24: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/24.jpg)
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" />
![Page 25: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/25.jpg)
8. AJAX jQuery & Other Frameworks Work
w/Limitations jQuery Mobile - jQueryMobile.com Do Not Assume It Is Available
![Page 26: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/26.jpg)
JQUERY MOBILE Provide Common
Framework Across Devices
Browser Capability Rating
![Page 27: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/27.jpg)
JS MOBILE EXTENSIONS Messaging Address book
management Geolocation Gallery Camera Calendar Device status
information Native menus
![Page 28: From desktop to mobile web](https://reader035.fdocuments.us/reader035/viewer/2022070315/5550ad92b4c905fa618b4634/html5/thumbnails/28.jpg)
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