Smartphones and tablets are slowly becoming the primary devices for accessing the internet. Almost 50 % of the internet enabled population of the US says that they access internet on their handheld devices on a regular basis.

The problem with this scenario is that almost all development takes place on desktops and laptops. Majority of the websites are designed and developed for these platforms and completely fail to take handheld devices into account. As a result many of the people who rely on these devices fail to have a proper online experience.

The popularity of handheld devices has prompted many web developers and designers to consider these devices as possible viewing and interaction platforms. This has led to the development of certain rules that have made websites more manageable on smartphones and tablets:

  1. Be wary of Flash and Flash derivatives. Many mobile devices do not have a native Flash player. Your beautifully rendered Flash based menu will simply not work on these devices. If you wish to incorporate simple effects like picture fade-in/out, use JavaScript elements such as JQuery. Similarly, avoid all applets and third party plugins.
  2. Be aware that there is no “hover” state on mobile devices. On a standard computer, most users are familiar with hovering their cursor over a menu item and having a drop down menu appears, or the colour of a link change. Many mobile browsers do not support “hover” option. This is a very popular option in desktops where the mouse cursor is used to pop open balloons and add other effects to the pictures and images. If possible, use standard CSS element to stimulate the functionality of hover options. Alternatively, you could use JavaScript to add the required functions.
  3. Forms are annoyingly difficult to fill even on desktops. This becomes even more difficult on the smaller screens of the mobile devices. Another issue with mobile devices is the lack of a physical keyboard. If possible, redesign the forms so that the users might find it easy to fill out the forms.
  4. There is an extremely wide variety in the screen sizes of mobile devices. This is caused by variations in hardware and software requirements of these devices. Worse, these dimensions keep on changing and are very different from the resolutions of laptops and desktops. Try to design for the average screen size. This will allow you to scale up or down as per the requirement of a particular device. Trying to accommodate every screen size is a sure recipe of disaster.
  5. Images are the most attractive part of any website. However, mobile devices have limited connectivity and processing speeds. This means that a beautifully designed website with emphasis on graphics is actually wasted on a mobile device. Use scaled down versions of your images so that users are able to view the pages on their devices.