When you create a website in today’s era you have to think about how your website will appear and function through a handheld device whether phone or tablet. I want to discuss three important issues to consider when designing your website: page sizing, navigation without a mouse, and loading media on a slow network. These topics are critical for a successful mobile website, if you don’t care about mobility then do not continue to read, better yet you might reconsider web design as a career.
First is page sizing and your layout. A desktop screen is approximately 1024 X 768 where as the iPhone screen is significantly smaller and can differ whether the user is viewing in portrait or landscape mode. Then you have the hundreds of other mobile screen sizes and tablet screen sizes to think about. In Smashing Magazine’s article: A User-Centered Approach to Web Design for Mobile Devices, they give a helpful 4-step process to mastering this task.
Bryan Rieger addresses the issue of designing for multiple screen sizes with a 4-step process:
- Define device groups by grouping screens with similar widths together resulting in a manageable number of groups,
- Create a default reference design that will adapt to smaller and larger screens,
- Define rules for content and design adaptation for it to display well and
- Opt for Web standards and a flexible layout.
Second, is the increasing use of touch screens requires simple navigation. Most mobile devices use your finger as direction movement and tiny keypads for word entry, unlike most desktops. Users will navigate your site on a smaller screen without a mouse; how do we make their experience magnificent? When creating the mobile navigation prioritize and simplify. Put the most used and most important (based on user statistics not your opinion) links up front. Make them easy to spot and easy to touch. Also, reduce the number of categories and levels on your navigation; it’s safe to say if the user is navigating on a mobile device they are on the move and need it quick don’t make them dig deep into the site for their answer.
Last issue I want to discuss is, media download. Users pay extra to navigate your website on their phone due to strict data usage policies cell phone companies require, do not waste their time or money. Keep your pages small so they can load quickly. We already reduce image sizes for web use, continue to reduce them for mobile use. Remember, mobile users need information quickly, so balance form and functionality, is it necessary to have all the bells and whistles for the mobile site? If not then eliminate them and leave the most important but do not completely compromise your sites look.