Articles, tutorials and community discussion over adaptive and responsive design have been building increased momentum in the last few months, inspiring more and more designers to jump into mobile web development.Designing mobile-optimized websites requires a different set of techniques and approaches, often overlooked by designers accustomed to creating experiences for the desktop browser. Several aspects of the design become far more significant, such as size, navigation, content structure and overall functionality. Below, we look at common mistakes web designers make when creating mobile websites and how you can avoid them.
1. Not Actually Designing for Mobile
It is no secret by now that Apple devices have poor or non-existent Flash support. With the iPhone being the most popular device on the planet, it is critical to use the most lightweight platform possible when developing mobile sites. Avoid other technologies, such as jQuery, to ensure your mobile site performs consistently across a variety of devices and mobile browsers. Consider using CSS3 or HTML5 canvas as safe alternatives, and avoid using large margins, floats or other layout techniques that will not render well on a small screen.
2. No Viewport Specifications
The HTML Viewport meta tag allows you to define how your content is displayed in mobile browsers like Safari and Fennec. Without it, full-capability browsers will display your content using the default viewport width, which is typically wider than your mobile-optimized design.
It is important to understand how the viewport function works before putting it into practice. Defining a fixed width, rather than using the “content=width=device-width” parameter, is another mistake that is common in mobile design. While this can help your layout snap nicely to an iPhone’s viewport in portrait mode, it may cause your page to display poorly in landscape mode or on larger devices such as the iPad.
3. Visual Overload
Most mobile users have limited bandwidth and slow connections compared to the average person surfing the internet from home or work. Large amounts of animations, images or visual elements will lead to slow loading times and a poor user experience. Avoid this mistake by optimizing images for mobile display, and make use of @media queries to help the images scale properly when viewed on various screen sizes.
4. Not simplifying content
Content structure is essential in mobile design. Mobile site users are usually task-oriented – they visit your mobile site for a specific reason, and they want to get to the information they seek as quickly as possible. Trying to cram everything that is on the full website into a mobile layout not only challenges attention spans, you run the risk of your design looking crowded. Simplify your mobile design by reducing the number of top-level menu items, removing any copy that is not critical, and increasing the size of text to a readable level. Reading a lot of content on limited displays can be uncomfortable. Optimize long articles and blog posts by using pagination, which makes progression, seem more natural than endlessly scrolling the page. Example of poorly formatted text and navigation:
By not focusing a design on being task-oriented and minimizing the content, you risk making a big mistake that will lose visitors. At the same time, make sure the amount of content available is consistent between the full website and the mobile version.
5. Poor usability
Most mobile devices these days make use of touch-screen technology, and unless your mobile design takes advantage of them, there is no point in developing a separate mobile web page at all. It is common to see mobile sites that look exactly like their full-site counterparts, complete with small text and traditional navigation. These designs forget that special effects, sliders and hover menus do not behave well on mobile devices.
Mobile users tab and drag, therefore it is important to design using large UI elements. Links should use about 32 pixels of space to account for the human fingertip and use clear call to action. Forms should use large input fields and be designed to fit within the viewport. To account for orientation, use responsive techniques to split long forms into two columns when viewed in Landscape mode.
The creative navigation on http://m.sevnthsin.com/ makes intelligent use of tap and drag to engage users:
It is also important to design for accessibility through proper use of alt tags, headings and form field labels, and to use semantic class names.
6. Not testing for Mobile
Your mobile creation may look amazing in Photoshop, validate with W3C, and perform superbly in a desktop browser, but you will never know how well your design actually works until you have tested it on a variety of devices and human beings. With the sheer number of mobiles out there, it is impossible to test them all, but services exist such as screenfly.com, ready.mobi, and iPhoney that can help you work out any quirks. Thankfully, mobile devices are standardized, unlike most desktop environments. If the site looks and behaves well on one iPhone, it will probably look and act the same on all of them.
Vail Joy
Latest posts by Vail Joy (see all)
- The 6 Easiest Mistakes Mobile Web Designers Make - August 14, 2011
Vail Reply:
August 17th, 2011 at 3:47 pm
Hello!
The hardware is standardized across one platform. As I clarify, one iPhone is identical to the next. In contrast, desktop browsers are on a huge variety of hardware configurations, monitors and browsers.
[Reply]