The 6 Easiest Mistakes Mobile Web Designers Make

The 6 Easiest Mistakes Mobile Web Designers Make

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.

faceboo

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:

dache

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.

bbc news

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:

Sewth sin

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.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
Vail Joy

Vail Joy

Vail is a long-time writer, designer and copy editor with a vibrant background in corporate business writing, music journalism and internet media design. Since 1996, her articles and photography have been published in various music magazines, poetry compilations, and business publications. When she is not hard at work designing something, she loves writing for Wix.com, which has recently launched their mobile website builder.
Vail Joy

Latest posts by Vail Joy (see all)

Tags: , , ,
  • http://www.idearius.com/es/ idearius

    Hi, Vail.

    In point #6 you mention that mobile devices are standardized, yet is this really the case? At first I thought it wasn’t, but then I checked…

    During the last 12 months, a commercial website I maintain had traffic from 120 countries and 140000 visits, and logged 661 screen resolutions. Counting only mobile devices, there were 97 different ones.

    In comparison, variations in mobile devices seem not to be that big. The top 80% of mobile visits used these screen resolutions: 320×480 (32%), 768×1024 (18% – iPad), 320×396 (12%), 320×240 (7%), 360×640 (6%), 240×320 (5%).

    In this case, I think planning the mobile website for a 320px screen width would be the safest choice. Provided that fonts and links are big enough for fingers (and that you don’t use Flash), perhaps an iPad version wouldn’t even be necessary at first, as an iPad could use the standard version of the website.

    Does this sound right to you?

    Cheers

    [Reply]

    Vail Reply:

    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]

    iwebwork Reply:

    WOW you nailed it . Yeah It is very true. I experienced visiting site using my mobile phone and cant even use the sites properly. hope they will learn .

    seo copywriting services

    [Reply]

  • http://www.htmlcut.com htmlcut

    Good article, thank you for sharing. Just to add 2c to the point #1: It’s very useful to keep in mind the step after design, i.e. HTML/CSS coding (or so-called PSD to HTML conversion) which should be cross-browser and with multi-platform and multi-device support, and what coding “price” you will pay for some (often not really useful) bells and whistles. Taking this into account essentially facilitate to design effective, robust and usable mobile websites.

    [Reply]

  • Pingback: More Mistekes to Avoid when Designing Mobile Websites | Blog CodeMyImage

  • Pingback: The 6 Easiest Mistakes Mobile Web Designers Make « Blog of Zaid Amer

  • Pingback: Le meilleur du web #35 : liens, ressources, tutos et inspiration « Design Spartan : Graphisme, Webdesign, Digital painting, Illustration…

  • Tomasz

    These are some great tips overall and a good starting point for what not to do when designing a mobile website. I think another tip is to find a great tool that makes it easy for you to design a site and sort of “walk you through” the process. Find a great builder and it will make it easy for you. Mobeezo, youwebsitemobi and http://www.sproutmobi.com are tools that basically can help you walk through the process.

    [Reply]

css.php