5 Unforgivable Mobile Website Design Mistakes

By: Celina Conner | September 10th, 2012 | 8 comments

Share this:

Its no secret. Mobile browsing has been, and will continue to be on the rise. Smart phones and tablets have web browsers that people love to use on the go. Website layouts in mobile devices need to to accommodate ease and comfort in navigation for users. In this article, we will tackle 5 major design mistakes to avoid when designing mobile websites, as well as some tips to maximize great designs!

Here are the top five mistakes you will want to avoid when designing for mobile devices:

 

 

1. Too much text

One thing to keep in mind is that websites that will be viewed in mobile devices should not be cramped with text. The tendency when the overall look is bombarded with words is that things seem so tight and cramped that it is not pleasant to read, or even to look at. It is best to learn to use techniques like bulleting or perhaps simple rephrasing to shorten word lengths. Technically, web programming using language like HTML have common commands like line break (<br>) or paragraph break (<p>) to dissect and arrange or bind words for a clean look.


2. Clickable icons or links are too close to each other

Many mobile devices (especially Apple and Android products) employ a physical touch screen for control and navigation. Users’ fingers will be a typical tool for navigation so consider a layout that supports human finger control. Clickable objects or targets in general should be 30-40 pixels in size for ease of touch, and both icons and links should never ever be set too close to each other. A minimum separation of 10-20 pixels will do.

3. Not considering device screen size

Cooking food for two  and cooking for ten are two similar yet very different things. The basic techniques employed are the same but the amount is not to accommodate the number of people. Same is true with website layout design, as you should consider the size that your content will be contained in. If you target to accommodate those iPhone 4/4S users, consider a web layout that fits nicely in a 3.5 inches 960×460 screen.

With that info in mind, size your objects correspondingly to ensure it fits your target device’s screen width. To accommodate other devices, create a website that can adjust to any screen width, and HTML command like (content=”width=device-width”) is a way to do it.

 

4. Slow load times

Chances are that on the go mobile device users may not have the same patience as PC users. Avoid embedding heavy image files or unnecessary background images for faster data and page load times, and for maximizing readability in certain lighting conditions. If icons and images should exist there, you may opt to combine them into one file to reduce http requests and use CSS to position them neatly.

 

5. Not Optimizing User Data Input Method

Again, time, patience, and convenience of users should be king. Forms and the like should have the minimum amount of data input so take time to think and include only significant fields for user data input. You could also consider using radio buttons or check boxes with corresponding choices to eliminate the need for users to type choices. Also, employ the ability to store user cache data that allows users to not input his or her information or choices when upon coming back from a closed session.

 

More Mobile Website Design Principles:

To further help your cause, let us discuss things that you should observe to further have the best mobile website design possible.

For a technical look at things, building a mobile website is similar to building a normal full scale website. But remember to do some tweaks by adding these meta tags: “HandheldFriendly”, “MobileOptimized”, and “Viewport”. Place these at the <Head> section of the webpage that tells the browser that your website is to be viewed in a mobile browser. Those are the basic codes that can help you drastically.

Here are a few other things to consider in designing a mobile-friendly website:

  • Good ergonomic design
  • Easy to code
  • User friendly
  • Compatibility
  • Faster for user to input data
  • Easy to physically navigate
  • Simple design
  • Don’t forget to test!

If you can avoid all of the mistakes mentioned, and keep the above points in mind,  you will be on your way to developing a website that is efficient for those mobile device browsers that all those tech junkies can’t resist!

 

Celina Conner is a Yoga Instructor, an alumna of Multimedia and Graphics Design at Martin College Australia and a mother of a beautiful daughter, Krizia. She has a passion in cooking and formulating vegan recipes. Follow her adventures on her Twitter.

8 Responses to 5 Unforgivable Mobile Website Design Mistakes

  1. Anshul says:

    Thanks for the useful points.

  2. yes when a mobile website developer does not think about these think in mind while designing a mobile website then the design is no much important and successful. So thanks for this blog to sharing with us

  3. Thanks for sharing this great post !

  4. Steve says:

    clever blog idea, I’ve seen so many ‘top mobile site designs’ but this is the first one I’ve seen for mistakes. I know the importance of a good mobile site through personal experience alone. and it’s always helpful for that bit of extra guidance. I personally use shopping cart software that changes the site to a mobile friendly one automaticaly when browsing the site from a phone. Thanks for sharing ! Steve.

  5. Peter Steier says:

    I think that the whole invention of the Mobile Web was a big mistake. Everybody with a smartphone suffers when he is redirected to a mobile page, since most are just mutilated versions of the “real” page.

    All your hints similarly apply for desktop pages also; thus, your post misses the most important rule: If your desktop site cannot be used from a mobile phone, simplify your desktop site. Most customers are lost by sumptuous and expensives splash screens.

Trackbacks/Pingbacks

  1. [...] Crave Fast Response Times11 Mobile Website Design Best Practices for Nonprofits « Nonprofit …5 Unforgivable Mobile Website Design MistakesjQuery(document).ready( function() { jQuery(".wrc-widget-tabs").tabs({selected: 0}); [...]

Leave a Reply