Common Mobile design mistakes

Get Started
1

Hello!

I’m trying to create a mobile version of my website. My question. What are some common mobile design mistakes to avoid?

Thanks!

2

Assuming that you are not talking about building a mobile only version of your desktop site (which would probably be mistake number 1) but that you are trying to convert a desktop into a responsive site then I would list some of the following as pitfalls to avoid.

  1. The first mistake would have been not designing responsive in the first place as that is how you control how the content can be presented at different screen widths. Converting an existing site is harder because the structure is already in place and some things may be difficult to change. This does not mean it can’t be done but that it may be harder than designing from scratch.

  2. Don’t design for specific devices.

Design for ‘all’ devices by ignoring devices altogether and creating a fluid page that fits on all screen sizes. This is easily done on a desktop by simply opening and closing the browser window from large (any widths you think suits the design) down to small (around 300px). If at any point your design looks odd or doesn’t fit or a horizontal scrollbar appears then throw in a media query and make it look better. With a few well chosen media queries you cater for all devices without knowing anything about them.

  1. Don’t forget to add the viewport meta tag. (And while we are about it don’t disable scaling either.)

  2. Don’t use ‘hover’ to display content as mobiles don’t handle hover very well at all. Use click actions for mobile or for displaying extra content.

  3. Don’t make the mobile experience a lesser experience. Users will usually want the same or similar content that they see on the desktop but in a form that is usable on their device.

  4. Take care with page size and if using large background images then make sure that they aren’t given to mobile devices. Use media queries to keep images separate and smaller in file size or indeed make image sizes smaller for all.

  5. Make navigation simple for smaller screens. Avoid multiple nested menus and provide a clear logical navigation system.

  6. Don’t make text too small. 13px make look (half) ok on a desktop but on a mobile its quite hard to read for great slabs of body text.

  7. Make sure you ‘plan ahead’ and don’t assume anything.

3 Likes
3

Google has some guidelines on common mobile problems.

4

IMHO, I do believe that resorting to a mobile website is already a mistake - you could have gone for responsive web design from the start (caution: it’s not the only mobile web design solution though). An m.example.com domain is also bad for SEO,considering that Google treats it as a different domain.

As for mistakes, here are some notable ones:

  1. Horizontal scrolling. If you require your user to scroll left and right to view the entirety of a page, then you’re making a huge mistake - the dimensions of mobile devices aren’t fit for this.

  2. Small text. You shouldn’t make your users pinch the screen just to read something.

  3. Assuming that one size fits all. Remember, mobile devices also include large Samsung tablets, as well as four inch iPhones.

  4. Ineffectively using white space.

And I think @PaulOB covered the rest :slight_smile:

5

Thanks for all the advice. I have tried to make my site vertical scroll friendly, but I do need to work on the CSS formatting of the font size to make it mobile friendly.

6

Easily done with a media query:

@media screen and (max-width: 400px) {
   h1 { font-size: 1.4em; }
}

You just decide at what width you want the size to change and what elements will change and to what size.
Generally I don’t alter the size of body text, it needs to stay a good readable size, but large headers can get too much on the small screen. But its up to you what you want/need to change.

7

I see… don’t make it appear to be too large as well if I may add. Try to take the cue from other responsive sites :smile:

8

How do I automatically redirect mobile users to my mobile site and also give them the option to switch to the desktop site?

9

That would be number 1 mistake on the mistakes to avoid :smile:)

Unless you are a large company with lots of resources then you don’t want to create a specific mobile site as that means maintaining two separate sites and indeed these days most users want to access the real desktop site anyway.

If you do want to create a separate site for mobile then the simplest option is to have a link on each site that the visitor can click to go to the mobile site or desktop site and you can remember their preference with a cookie perhaps.

However, I would advice against creating a specific mobile site unless you have a very good reason and just create a responsive site instead that will suit all devices.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.