7 Deadly Sins of Mobile Websites

A mobile website is designed and optimized for browsing on a smartphone – the likes of iPhone, Nexus S, Z10. They come in various flavours: sometimes there are different desktop and mobile versions, other times they are the same. The focus of this article is on those websites that are specifically designed for “enhancing the mobile user experience“, although more often than not, it has the exact opposite effect.

BBC Mobile Website

A Mobile Website

The sins presented in this article are so common that you should be able to relate to them. The most common complaints people have – or the 7 Deadly Sins of Mobile Websites – are *drumroll*:

  1. Slow to load
  2. Cluttered with text (Happy talk, Me Talk)
  3. Crappy navigation (Small buttons)
  4. Different content/theme from the Desktop version? (“Honey, where did the categories go?”)
  5. Popups
  6. Auto Redirect
  7. Advertisements and Banners

The 1st deadly sin: Slow to Load

It’s a well-known phenomenon that website loading time is a crucial factor in determining the site’s success. Websites that are slow  by virtue of loading high res images (even worse, whole carousel full of images), useless piles of Javascript crap, will lead to abandonment.

Slow Loading Site

Wait… wait… wait for it…

I have decided not to sound like a broken record. Instead I will leave you with this rather fine point to ponder: A percentage (*1) of users browsing mobile websites are using slower connections like EDGE or 3G, not the fast Wifi we have in our homes and offices. So while a website may take 4 seconds to load on desktop, it might take longer than that to load on the mobile.

The 2nd deadly sin: Cluttered with Text

Websites guilty of this vice try to cram too much un-necessary text to look busy, put happy talk (“Welcome to my sweet, lovely website“) or what I like to call “me” talk (“We are very happy to receive the elusive Greatness-Trophy thanks to the hard work and dedication of our CEO“). The average user who arrived on Acme Widget’s website to check hours of operation don’t give a fat f*ck about their head of marketing’s epiphanies .

Cluttered

Time to bring out the Magnifier

In real life, we like people who are articulate. They speak fluently, coherently and get their thoughts across in a concise manner. Why should websites be any different? The Great Leonidas, couldn’t have been more more clear in delivering his message to the Persians.

This is Spartaaa

You are confusing… this is SPARTAAA..

In three word response: “THIS IS SPARTA” followed by an epic kick into the bottomless well (*2) in the movie 300, he gave the most kick-ass message of all time.

Cluttered Website

This looks like dog’s hairy behind!

In my next post, I will discuss some of the ways to avoid this.

The 3rd deadly sin: Crappy Navigation

Hidden menus, hover objects, small buttons, small radio buttons, buttons that are too close to each other, the list goes on. Imagine, you’re travelling in municipal bus  which is jerking you around like no roller coaster would while  you are trying to post a comment to the just-posted wise meme. But you can’t seem to click on the “Post Comment” button. Every time you try, it opens the link besides that button – every link left or right seems to work and no matter how hard you try, you just cannot press the damn button. And who do you blame for your misery – there’s only one culprit – your. fat. finger.

Fat Finger

Will I get it land on the right link this time?

In fact, the fat finger syndrome is so prevalent, that people with fat fingers have started an organization to protest this and have equal rights when it comes to web accessibility as everyone else. The organization is aptly named “The Association of People with Fat Fingers” or APFF.

I’m kidding.

The 4th deadly sin: Different Content/Theme from the Desktop Version

Often times, the mobile website looks so different from the desktop version that users start wondering if they are on the right website. Worse still, if the mobile website has a very different layout and content, it’s like asking users to go over another learning curve. No thanks.

Desktop vs Mobile version

Desktop vs Mobile version. Is this the same site? Where did the content go?

The 5th deadly sin: Popups

Ah, the joy of having a huge box in front of my face telling me how good the App is and I should get it from the App Store.  The irony: already have the steaming pile of sh*t app installed and much rather use the website. How about I just leave instead? 

Popup

The content is behind there.

Chris Lake makes some compelling points against the Popup Syndrome, summarized in this fantastic statement:

A link should be a promise: you click one to be taken to a specific page. That’s just how it is, and it’s what every web user expects (unless programmed to expect something different, e.g. Forbes, which I no longer visit). Websites that lead you down the garden path before fulfilling the promise only serve to disappoint users.

Need I say more? Popups are so bad on mobile websites they should be banned altogether and erased from existence. JQuery’s author should be forced to take a oath at gun point to stop supporting these or else…? Exactly.

The 6th deadly sin: Auto Redirect

At first, it sounds like a novel idea: redirect users to mobile optimized or iPad optimized website based on the type of device/browser they are using. If done right, that is, you have a great mobile website e.g. Boston Globe, BBC, it’s a great idea. The problem is when the mobile website sucks (guilty of 7 sins), users who want to use desktop version will get agitated if they don’t get what they want. They will get very annoyed if even if they are asked to make the very important decision to choose between “The Mobile Version”, “The Desktop Version”, or “Get the App” every single time.

But what makes auto redirect an absolute sin is faulty redirects. As Yoshikiyo Kato writes in this post:

A faulty redirect is when a desktop page redirects smartphone users to an irrelevant page on the smartphone-optimized website. A typical example is when all pages on the desktop site redirect smartphone users to the homepage of the smartphone-optimized site. For example, in the figure below, the redirects shown as red arrows are considered faulty:

Faulty Redirects

Faulty redirects

In fact, faulty redirection is so bad that there are reports suggesting that Google penalizes websites guilty of this sin in terms of their page rank.

Oh, and faulty  redirection also makes private browsing inconvenient.

Too many redirects

Too many redirects

The 7th deadly sin: Advertisement & Banner Ads

How could anyone ever even think about jamming in bunch of advertisement even with that much limited screen real-estate? Some people think putting banners on websites is a wise idea. News Flash – Banner ads are trouble. This is 2013, not 1999.

Banner ads suck say guys who invented banner ads. Nuff said.

last time we had virtually no success with 1 banner. This time, we'll double the amount of banners

Last time we had little success with one banner. This time, let’s double up the banners.

Overlay ad gone wrong

Overlay ad gone wrong

Summary

There you go folks – That’s all. If you know someone who is guilty of committing any one or more of these cardinal sins, may be it’s time to chastise them and show them the light.

Updates

Dec 27, 2013 –  Matt Welsh disagreed that vast majority of  users access mobile sites via cellular network. I’m not sure but since I cannot find any data, the original comment is posted below for you to decide.

This is a nice article, but I disagree with the statement that “most of the time”, users are accessing the mobile web via cellular (not WiFi) networks. The data that I have seen on this is that the vast majority of mobile web usage is via WiFi – more than 70-80% of mobile pageloads occur on WiFi networks. (Context: I run the mobile web performance team at Google, part of Chrome.) This is in part because web usage is higher on tablets than on phones, but even on phones we see WiFi being the most commonly used network by far. This is not to say that cellular performance isn’t important, but this skew might be somewhat surprising to people working in this area.

*1 = See Updates (Matt Welsh)
*2 = Yes, I know it wasn't bottomless since Leonidas clearly said "Earth and Water, you'll find plenty of both down there".
About

I'm Umer Mansoor , the author of this blog.

Tagged with: , , ,
Posted in Design
20 comments on “7 Deadly Sins of Mobile Websites
  1. Anonymous says:

    well written and well researched. thank you.

  2. Anonymous says:

    The 8th deadly sin: disable zoom

  3. tobyj says:

    9th deadly sin: horizontal scroll.

  4. Mirko says:

    The worst is not having an option to get back to the desktop version of the site. A lot of mobile sites are just crappy and I’d rather use the desktop version.

    A lot of mobile sites don’t provide the feature set you need!

  5. repoman says:

    Devils advocate on #7 here. In the publishing industry, ad sales are a huge portion of the revenue. Subscription can augment, but not replace, that need. And although advertisement is a necessary evil – I can agree that it is implemented poorly on 99% of mobile sites. This does not mean you should abandon advertising as a whole on mobile devices. Instead we should try to find UX paradigms that allow for advertising while disrupting the users core experience (which is usually reading) the least… because by their very nature, advertisements are a disruption of any given experience, whether it be driving (billboards), television, magazines (oh the dead trees!), movies (theaters, just start the movie already!), etc. Advertising sucks, but again – it’s a necessary evil unless that revenue can be fulfilled by other income streams. Just my 2¢…

    • rtaube says:

      Right. What we need is a new model for mobile advertisement. Example below.

      After their initial struggles, YouTube finally hit the spot. It puts users in control by giving the option to skip. Reports suggest that it increases the probability that users will watch and click on the ads.

  6. brianfrtn says:

    If a website redirects users to any page other than the mobile version of the exact page, it is doing it all wrong.

  7. karmabites says:

    I do not have fat fingers (no disrespect for people who do) I use my thumbs exclusively and for everything.

  8. Joeri says:

    If you’re interested in committing all of these sins, just use onswipe to build your mobile site. I’ve never known an onswipe site that I didn’t immediately want to revert to the desktop site. It is by far the worst mobile experience I know.

    • I wholeheartedly agree. Nothing instantly destroys my opinion of a website and its credibility like the never-to-be-sufficiently-damned Onswipe loading swirlies. The instant I see Onswipe starting, my urge is to hit the Back button before my mobile browser has a chance to crash. If I suppress that urge, and Onswipe’s fetid, creeping bloat somehow fails to overwhelm my browser, I make a mad dash for the corner, hoping to find the Desktop Version button.

      I have yet to see a single website that gained the slightest iota of value from Onswipe.

      There are plenty of websites I actively avoid because of it, though. Sure, all my friends may be posting the URL to social media, but if I’m not at my desk, I see the URL and say, “nope, that’s one of those idiot Onswipe sites” and pass it by.

      And that’s since I got an iPad 3. On my original iPad, Onswipe was an instant death sentence for any site, but not by choice: it was rare, if ever, that I could hit “Desktop Site” quick enough to avoid the inevitable crash from Onswipe overwhelming the device’s capabilities.

  9. Agreed with all except the following should sins should have been on the list.

    1. Disabling pinch-zoom
    [Most responsive sites do it]

    2. Stick headers
    [Terrible idea to begin with]

  10. […] 7 Deadly Sins of Mobile Websites | 10K-LOC […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 25 other followers

%d bloggers like this: