Mobile Web - Web 2.0 Expo Presentation

1,454 views

Published on

http://www.web2expo.com/webexsf2011/public/schedule/detail/16603

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,454
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Web - Web 2.0 Expo Presentation

  1. 1. How mobile-friendly is your organization’s website?<br />Melissa Clark – VP of Project Management<br />#swxmobile<br />
  2. 2. Mobile Landscape<br />Mobile Web<br />Native<br />Apps<br />SMS<br />
  3. 3. <ul><li>Mobile Optimized Web
  4. 4. Custom Mobile Web</li></ul>How mobile-friendly is your organization’s website? <br />
  5. 5. Mobile Optimized Web<br />
  6. 6. Mobile Optimized Web <br />Optimizing the desktop experience for mobile devices<br />It is critical that you optimize your current site for mobile devices:<br /><ul><li>There are too many different devices to easily provide a consistent custom experience
  7. 7. Even with a custom mobile experience, users may still prefer the existing desktop site
  8. 8. Many practices in optimizing mobile will improve performance of your current site</li></ul>It is ideal touse responsive design practices from the onset<br /><ul><li>W3C “One Web”</li></ul>How mobile-friendly is your organization’s website? <br />
  9. 9. Mobile Optimized Web <br />Device Detection – You can use device detection to provide a mobile optimized experience.<br />Light Weight – HTML5, CSS3, and caching through a CDN will help. <br />System Text – Make sure all text is system text (HTML) rather than images.<br />Replace Flash –Replace flash elements with HTML5/CSS3, or even just static images.<br />No Pop-Ups, Hover States or Overlays – Poor/unusable experience with mobile<br />Mobile Capabilities – Take advantage of native functionality using HMTL5 and JS:<br />Maps<br />Push to call<br />Native keyboards<br />Touch events/Gestures (swiping)<br />Create a home screen icon<br />How mobile-friendly is your organization’s website? <br />
  10. 10. Custom Mobile Web<br />
  11. 11. Custom Mobile Web<br />Provides a rich, custom design experience for the mobile interface<br />Targets alarger audience than native applications<br />Can be designed and developed to look like a native app<br />Better capabilities of managing content<br />Provide the ability to access the desktop version (and remember selection)<br />Touch Devices<br /><ul><li>Faster load times
  12. 12. More support for rich graphic presentations
  13. 13. Enhanced functionality (swiping, zoom, etc.)
  14. 14. Designed for touch
  15. 15. Content structure can go deeper</li></ul>Non-Touch Devices<br /><ul><li>Slow load times
  16. 16. Limited support for rich graphics
  17. 17. Limited functionality
  18. 18. Designed for scrolling and clicking
  19. 19. Content structure needs to be very shallow</li></ul>How mobile-friendly is your organization’s website? <br />
  20. 20. Custom Mobile Web <br />Does your CMS support custom mobile presentation?<br /> Many have the ability to create a unique publication for a mobile channel<br /> Changes on to the desktop site will filter to the mobile publication<br /> Some have plugins that enable a mobile interface <br /> Help with reduction in testing complexities<br /> Increases the complexity of implementing a truly custom interface and functionality<br />Avoid creating a mobile channel that is not tied into your main content source<br />Content on your mobile site should be the same as your desktop site<br />Any content that is searchable should be accessible through your mobile experience<br />How mobile-friendly is your organization’s website? <br />
  21. 21. Implementation<br />
  22. 22. Mobile Web <br />Devices x Networks xBrowsers<br />Devices<br />Check metrics to see which mobile devices are hitting your current site<br />Networks<br />Domestic and international networks<br />Browsers<br />Do you want to support non-standard browsers?<br />How mobile-friendly is your organization’s website? <br />
  23. 23. Mobile Web – Graceful Degradation vs. Progressive Enhancement<br />Graceful Degradation: <br /><ul><li>Created for the optimal experience and degrades to accommodate deficiencies</li></ul>Optimal if you are targeting only more sophisticated devices<br />This option works well for content sites, marketing sites, luxury sites, etc.<br />Ideal if your goal is to be cutting edge, providing a very rich interactive experience<br />Progressive Enhancement:<br /><ul><li>Created for the lowest common denominator and enhancing for advanced capabilities</li></ul>Optimal if you targeting as many device types as possible <br />Works well for web applications <br />Can reduce the required effort for testing and coding per device <br />Ideal if your goal is to have a consistent experience regardless of device<br />How mobile-friendly is your organization’s website? <br />
  24. 24. Custom Mobile Web – Testing<br />Testing is by far one of the biggest challenges for any mobile initiative.<br />Acquiring hardware for testing can be very costly<br />There is limited commonality between the hundreds of device types<br />Screen resolution<br />Font treatments<br />Operating system differences<br />Solutions:<br />Use your analytics to target the top 10 devices currently hitting your desktop website <br />This will most likely address up to 90% of your user base<br />Additional testing can be accomplished in an iterative fashion after launch<br />Use emulators or testing services for the majority of testing (Device Anywhere)<br />Final testing should performed on actual hardware<br /> If you can use a mobile plugin, a lot of the testing has already been accomplished<br />How mobile-friendly is your organization’s website? <br />
  25. 25. Resources<br />
  26. 26. Resources<br />W3C: <br />The Web & Mobile Devices: http://www.w3.org/Mobile/<br />Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/<br />Mobile Web Application Best Practices: http://www.w3.org/TR/mwabp/<br />Testing:<br />Device Anywhere: http://www.deviceanywhere.com/<br />Siteworx White Papers:<br />http://www.siteworx.com/Company/Thought-Leadership/Whitepapers<br />Mobile Landscape<br />Mobile User Experience<br />Brand on the Mobile Web<br />Mobile & Brand (Forrester)<br />How mobile-friendly is your organization’s website? <br />

×