Mobile Internet is continuing to grow very quickly. The number of people accessing websites of their mobile phones is increasingly rapidly. These guidelines will help you create or improve your mobile user experience.
- Reduce the amount of content
Not everything shown on a PC site can fit reasonably onto a mobile web page. It's important to reduce the amount of content shown on the mobile-optimized version. Only include the most important content or features. Low priority content that can be removed might include content or links that are outside of the main content area such content typically found in the right hand columns of standard web pages.
Mobile websites should be very focused.
This makes them easier to read and move around, as well as quicker to
load on devices that can sometimes have slow Internet connection
speeds.
- Single column layouts work best
Wide web pages are difficult to view on small mobile phone screens. Even on smart phones like the iPhone with their relatively large screens standard web pages load up zoomed out so that they can fit on the screen. Most text is unreadable until users zoom in to the part of the screen they want to view. Zooming in isn't ideal because it adds an extra step and zooming in and out isn't easy to do on all phones.
Instead, create single column pages that use up the whole width of the screen. It will be easier for users to read.
- Present The Navigation Differently
It's difficult to fit the navigation across the top of the screen on a mobile web page. Here are some tips for adding a navigation to mobile website:
- On the homepage place the navigation and site search at the top of the page, and leave content for later pages. This is suitable for sites on which users want to navigate.
- Users can still access the navigation but it doesn't get in the way of reading the page. An anchor link at the top of the page can give quicker access.
- Place the navigation in a dropdown link at the top of the page.
- Only offer a 'Back' button on pages other than the homepage. This keeps the page design simple at the expense of any ability to navigate directly to another section of the mobile website.
- Design for fingers
Click targets should be a minimum of 30-40px in size and use whitespace in between elements to ease click ability. Combine smaller images, like icons, into one file and use css to position them on the page. Avoid using unnecessary graphics.
They can be given a much better user experience by following these and similar guidelines. Screens and processing power on mobile phones vary tremendously.