Website Design For Mobile

Preparing Your Website For Mobile Devices

The Mobile Web Initiative's goal is to make browsing the Web from mobile devices a reality, explains Tim Berners-Lee, W3C Director and inventor of the Web. W3C and mobile industry leaders are working together to improve Web content production and access for mobile users and the greater Web.

Mobile Web Initiative participants are developing best practices for creating mobile-friendly content and applications, enabling easy access to device descriptions, setting up test suites for increased interoperability of mobile browsers, and exploring ways to use the Web on mobile devices to bridge the digital divide.

Principles of Mobile Web Design

  • Websites using tables for layout will not render well on mobile handsets. The site must use CSS for layout.
  • The site must be coded using either XHTML or XML Character encoding should be UTF-8 .
  • Bear in mind different screen sizes of mobile users. The largest screen size available is probably 640 x 480, whereas the average is closer to 120 pixels.
  • The most important information of your site must be right at the top of the page as it can be very time-consuming for browsers to read through.
  • Text entry can be quite difficult. Users prefer to select values from a list of choices, such as radio buttons or lists.
  • Images should be jpeg or gif.
  • Always provide a 'back' button or link, since many phones don't include a back button.
  • The maximum total page size recommended is 20 kilobytes.
  • Users are paying a lot of money to access site, so make sure it is definitely worth their money!

For more details see http://www.accuracast.com/seo-weekly/mobile-web.php

Best Practices For Mobile Web Design

  • Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices learn more>>
  • Exploit device capabilities to provide an enhanced user experience. learn more>>
  • Take reasonable steps to work around deficient implementations. learn more>>
  • Carry out testing on actual devices as well as emulators. learn more>>
  • Keep the URLs of site entry points short. learn more>>
  • Provide only minimal navigation at the top of the page. learn more>>
  • Assign access keys to links in navigational menus and frequently accessed functionality. learn more>>
  • Clearly identify the target of each link. learn more>>
  • Note the target file's format unless you know the device supports it. learn more>>
  • Do not use image maps unless you know the device supports them effectively. learn more>>
  • Do not cause pop-ups or other windows to appear and do not change the current window without informing the user. learn more>>
  • Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it. learn more>>
  • Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes. learn more>>

See Building Mobile website>>