Mobile Web

3 Approaches:

• Develop Separate Mobile site with .mobi
• Create separate website hosted by your current domain targeted for mobile users
• Apply techniques of responsive web design by using CSS

Design Considerations

• small size screen:

  • 320 x 240
  • 320 x 480
  • 480 x 800
  • 640 x 960 (iPhone 4)
  • 1136 x 640 (iPhone 5)

• low bandwidth

  • 3G or 4G
  • Tune down on images

• Font, color, media issues

  • limited font support, use generic fonts
  • configure font size in "ems or %"
  • choose colors carefully
  • No flash

• Awkward Controls, limited processor and memory

  • Provide keyboard access

• Functionality

  • provide easy access to features

Checklist Mobile Design

-[ ] Be aware of small screen
-[ ] Configure non essential content to not display
-[ ] Consider replacing Background images with optimized graphics
-[ ] Provide descriptive alternate text for images
-[ ] Use single column layout
-[ ] choose colors to maximize contrast