Common mobile web design mistakes

Mobile Internet usage is on the rise, and the world of Web design continues to evolve—so designers must learn to accomodate mobile devices. Thinking “Oh, my users won’t visit my website on a mobile device” is the worst mistake of all.

No one can stop mobile usage from increasing, and the odds are that every website will receive visitors on mobile devices. So, the best strategy is to be as prepared as possible.

Just thinking about mobile users isn’t enough to address the situation. Many mistakes are still committed during the process, and knowing what they are is the first step in effectively avoiding them in future projects.

The following are the most common mistakes on mobile websites.

 

Not accounting for device width

This might sound obvious, but an awful lot of websites look like this on a mobile device (in this case, the iPhone):

You should understand the maximum width that elements on a page ought to have, as well as be able to format an entire HTML document to account for various screen sizes.

In the screenshot above on the left, the website is formatted for variable device widths, but its elements are not. The website on the right is not formatted for variable device widths, so its elements appear far too small. Even if the body element was set to a narrower width (320 pixels, for example), it would just get pushed to the far left of the screen and still be small and unreadable.

This can be fixed with a simple HTML line in the <head> of each document:

<meta id="meta" name="viewport"
content="width=device-width; initial-scale=1.0" />

This small detail, along with formatted elements, will make for a good mobile experience.

 

Making users fill out long forms

Filling out forms is annoying even on desktop computers, and it’s even more tedious on a mobile screen. Designing a web form for mobile devices is a complex task; focus on building simple forms that don’t ask much from users.

Set the type of input being requested from the user, so that the keyboard has the elements that the user needs when they focus on the field. For example, setting a field’s input type as number will set the keyboard to display numbers by default, instead of letters.

 

Not reconsidering content

Transferring content from big-screen web environments has come to involve its own strategy, like when content had to be transferred from print to web. Space and focus constraints on mobile devices are far more significant than those on computers.

Luke Wroblewski’s “design for mobile first” methodology defines a strong approach we can take. It discourages us from generating one set of content for the desktop web and another set for the mobile web. A mobile design team should consider whether content that will not appear in the mobile version is even necessary? Perhaps it doesn’t even need to appear in the desktop version.

Using content for decorative purposes or just to fill space almost guarantees that it will be removed later, so why not consider just essential content from the beginning?

Going through this process can uncover other common mistakes and problems.

 

Eliminating content and functionality for no reason

Revising content can be tricky, and tight schedules can force it to happen faster than it should. This often results in removing content and functionality erroneously—in fact, almost at random.

The process involves in-depth analysis before the editing and curating begin. Existing content needs to be reviewed in order to separate content that adds value and meets users’ expectations from content that just distracts or fills up space.

To better understand the strategy of generating and editing content, check out the book Content Strategy for the Web by Kristina Halvorson. It covers every detail, from basic content strategy to auditing and editing substantial material.

 

Forgetting the size and limitations of a finger

When using a computer, we use precise mouse clicks for every task. We’re able to easily click on a 16 × 16 icon; the process involves no hardships.

A mobile user, on the other hand, has the precision of a finger—a finger that’s almost never thin.

Apple has decided on 44 pixels as the minimum acceptable size for mobile controls (44 × 30, to be precise) and has implemented this standard across its products.

In addition to the size of elements, the space between those elements is often ignored. Think of a list of options, each accompanied by a radio button, with a line height of 0 between them. Users are bound to make mistakes, even if they take their time. Why would we complicate things in this way?

Luke Wroblewski has perhaps gone further than anyone in identifying standard sizes for mobile design, by compiling recommendations from several platforms. According to the Windows Phone UI and Interaction Guide, the standard size between elements should be 8 pixels, minimum.

 

Long page-load times: Heavy image files

Heavy image files have been a problem from the beginning in web design. And the mobile web presents even greater challenges, because loading times tend to increase when you combine the limited capabilities of some devices with variable data-transfer signals (which depend on the type of Internet connection).

Image optimization also continues to be an important consideration in mobile design.

 

Long page-load times: Too many images

Many small images pose the same handicap as a single heavyweight image.

This is especially a problem when designers try to emulate the look of native smartphone applications, including the gradients and rounded corners of iOS headers and buttons.

That leads to yet another common mistake…

 

Not taking advantage of CSS3 and HTML5 capabilities

Many kinds of images can be avoided altogether now that HTML5 and CSS3 are around. Plus, mobile browsers give us a lot more freedom than desktop browsers because almost all of them were built on the Webkit engine, which supports both HTML5 and CSS3.

Why not take advantage of this? The <canvas> element in HTML5 can reduce the need for images, as can the new CSS3 properties that provide basic styles like gradients and rounded corners. It’s a major way to save on page-loading times.

Enough with the graphics now. Using too many images isn’t the only way to damage a mobile design, and images aren’t the only things that slow it down, either.

 

Long page-load times: Too many imports

We see this mainly with frameworks (and plug-ins for those frameworks). Let’s face it: it happens a lot now, and it has been happening since the arrival of the oh-so-necessary-and-helpful AJAX frameworks such as jQuery and MooTools. jQuery developers even went so far as to create a mobile enhancement called jQuery Mobile.

These make the job so much simpler that many designers don’t worry about the consequences of depending heavily on them. You’ve probably seen something like this in a <head> tag:

And let’s not forget the jQuery Mobile imports:

Every single import in this header is a callback to the server, and it slows down the page just as a loading image would.

There are ways around this issue. You could synthesize the imports. Why import multiple small scripts if you can call one big one? You could also evaluate whether you need a framework at all. Is one really worth it? Could you get the job done yourself with less complexity?.

 

Long page load times: Not communicating actions clearly

Let’s say that certain actions on your mobile website take longer to load than others. That’s fine; it’s not something to go crazy over if you’ve made a real effort to speed things up. The important thing to consider now is how to make the wait more bearable for the user?

The solution is to make the design as transparent as possible. What’s happening? The user should be able to answer this question at all times. For every loading action in the design, there should be a clear statement telling the user about it.

Never underestimate the power of the simple “Loading…” string.

 

Not setting a home screen icon

No one wants the shortcut to their mobile web application to look like any of the ones on the left above. The deviantART icon on the right is a lot more attractive and more likely to get clicked on.

The thing about users is that they tend not to read. And a home screen full of shortcuts with no distinctive icons makes users 100% dependent on the titles. (And even then, long titles are compressed and filled in with ellipses, as seen above, making them even less identifiable).

Setting a home screen icon isn’t difficult at all. After creating the icon as a PNG file (which should be 158 × 158 pixels), add the following line of code to the <head> of your HTML document:

<link rel="apple-touch-icon" href="images/icon.png"/>

Simple and helpful. This line of code works on Android phones, too. You don’t even need to add the gloss or rounded corners; the iPhone adds that automatically.

 

Not being responsive

Responsive web design is one answer to all of these issues. It’s tricky to implement, but effective when done well. Ethan Marcotte recently wrote a whole book on the subject. I highly recommend it if you want to get into this in a lot more detail.

Responsive design is about creating a design that adjusts nicely, regardless of the size of the container. It involves considerations such as fluid grids (where elements reorganize as the browser changes in size) and images that adapt as the page expands and contracts.

Marcotte also wrote a detailed introduction to responsive design, which might help you better understand the subject.

 

Do you have personal experience with mobile design challenges? What problems have you encountered? As a mobile user, have you encountered difficulties other than the ones mentioned here?

  • http://www.paulund.co.uk/ Paul

    Nice tips. What about media queries to help display different layout for different size devices?

  • http://www.facebook.com/profile.php?id=100000996312367 Allen Hernandezez

    “Transferring content from big-screen web environments has come to involve its own strategy, like when content had to be transferred from print to web. Space and focus constraints on mobile devices are far more significant than those on computers. Luke Wroblewski’s mobile-first methodology defines a strong approach we can take.”

    I disagree with what most people see as “mobile first.” I also find the two main points of what I quote here to be mildly contradicting. I agree that mobile is different, needs its own unique considerations, just like when we went from print to web. But does that mean make all sites responsive and design ALL sites with a mobile-first mentality? No! Talk about limiting everything just to appease mobile surfers. No. “Mobile first” should just be a strict saying to illustrate that mobile cannot be forgotten. Think of it first and it won’t be left behind. A better solution is to make a 2nd site, a mobile one, that is taylored 100% just to mobile.

  • http://twitter.com/OptimiseOrDie Craig Sullivan

    @facebook-100000996312367:disqus – it’s a good point.  Most people shouldn’t do this just because they can.  In fact, you can get everythng from a responsive design, from a device specific design.
    Our site has a desktop and tablet optimised version.  Then there’s a mobile version with 2 stylesheets (that does Android, BBerry, IOS and everything else).  We don’t need the nirvana of responsive design because we reached the same place.

    SUre -it would be nice to have one piece of content and url structures but actually, it works great for us the way we have it.  Our mobile site takes over £5M a month, so it’s about device compatibility and traffic shaping far more than it is about a cool idea that people should do.  Stop DISCRIMINATING against mobile devices first, and then worry your heads about making your site just like the boston globe.

  • fjpoblam

    Great post. I would add, only, (as was the case with *my* clients), show your clients the mobile version to drill home the importance of *having* a mobile-ready website!

  • http://twitter.com/sbp_romania SBP Romania

    Nice subject!Allen may have a point here: why adapt content and shrink the existing site, when you can start fresh and create a mobile website. Android 4 may come in handy as it is suitable for both smartphones and tablets, but still some adjustments need to be made in order for the content to fit perfectly the layout.

  • Efthimios Vrettos

    Nice post!! Thank you!

  • http://www.performanceinsiders.com/ageless-male.html Ageless Male

    Thanks for pointing those flaws out! I hope mobile website designers will learn from you! Can’t they imagine how annoying for the viewers to try navigating the site with too small fonts!

  • http://twitter.com/StephenAlberts Stephen Alberts

    I think Allen has a good point. Some sites may need a responsive design but a TON of sites that have mostly static information can have a second mobile friendly site. I design sites for local businesses and can pump out mobile sites within a few hours. All you need is a good system and you can make mobile sites all day long to coexist with a clients main site. 

  • http://nnpcto.kz/ Sergio

    I could work over similar projects earlier. It is very interesting.

  • http://twitter.com/galica Matthias Galica

    So say we all.  Great post.

  • http://websitebuilderaustralia.com.au/ Website Builder Australia

    I
    wish people would write more about this as you have done. This is something
    that is very important and has been largely overlooked by the internet
    community

  • http://twitter.com/OutForLimited OutFor Limited

    Interesting and very useful article…thank you, exactly what i was looking for.

  • http://www.webtemplates-creare.com/ Paul Weston

    Thought this was an interesting read
    and has made me think a bit about the designs I create. I think there
    are some interesting aspects to this articles and some I will be
    looking into to see how they can help me in how I produce my designs
    and look at future work. Thanks for the post.

  • http://www.bed-adjustable.co.uk/waterbeds/ Waterbeds

    thanks for sharing it nice post 

  • http://www.cellphone-monitoring.net/ Cell Phone Monitoring

    Since the first ringing tone was sold on the mobile phone in Finland in 1998, the mobile has emerged as the seventh of the mass media.