Mobile Web Problems and How to Avoid Them

Two years ago Jen Simmons (@jensimmons) and I made a site called WTF Mobile Web, a Tumblr which highlights the frustrations mobile web users regularly experience. While the site is a bit cheeky, the goal isn’t to cut anybody down, but rather demonstrate the challenges web creators are faced with when delivering their experiences to the plethora of desknots now accessing the Web.

So without further ado, here’s two years of the most common mobile web problems and what you can do about them.

Denying Access

Mobile web users denied an experience

The Problem

Being denied access to an experience is easily the biggest problem mobile web users face. They come to websites on their mobile devices looking for information, looking to solve problems, looking to complete tasks, looking for answers. And they don’t get it. That’s a huge issue.

There are many flavors of denying access to mobile users:

Coming soon!

Mobile experience coming soon!
“Mobile version coming soon!” “Almost there!” and other nonsense phrases litter these experiences. Offering these empty words doesn’t do much to help a user who is unable to achieve their immediate goals.

Screen size

Users blocked from a web experience because their screen is too small

PC Mag smartphone version is currently designed for use in portrait mode

Oh you have a small screen? Too bad! Denying users an experience because of the size of their screen or the orientation in which they hold their device is a bizarrely bad idea.

Browser support

Looks like you're using an unsupported browser, even though you're on a perfectly capable Android browser

“Looks like you’re using an unsupported browser, even though you’re on a perfectly capable Android browser.” In an age of UA sniffing gone wild, mobile browsers often catch the short end of the stick.

Flash

Flash sites unsupported on mobile browsers
Yes, Flash objects are still causing issues for mobile browsers, especially with regards to video content.

Digital Rights Management

Youtube blames its users for denying accessing videos containing copyrighted material

DRM is still a thing. I especially love how YouTube blames their users for the company’s decision to not make videos containing copyrighted songs available on mobile devices.

A whole bunch more

Cookies, unsupported formats, advanced functionality, and a whole lot more contribute to mobile web users’ collective frustration.

The Solution

The solution is to achieve content parity. Give people what they want regardless of how they access the Web. Take Stephen Hay’s advice:

Just make quality, relevant content with appropriate tasks, and offer all of these to all users, […] then make it easy for the user to decide what it is they want to do.

  • Don’t make content assumptions based on device or context. Don’t assume that mobile users only want “on the go” content. Mobile users will do anything and everything a desktop user will do, provided it’s presented in a usable way.
  • Desktop-only content is better than no content at all—Don’t have all your content optimized for mobile? That’s OK. No need to apologize for it, and certainly no need to deprive users your content to tell them that the content isn’t mobile-optimized. Users can pinch-and-zoom or awkwardly scroll back and forth, and while that’s not as good as having an optimized experience, you’ll end up with less complaints so long as users can get what they came to the site to do.
  • Ditch Flash—This shouldn’t be too shocking, but you should probably be weening yourself off of Flash.
  • Don’t penalize users for screen size, device capabilities, settings, resolution, etc—Use sound progressive enhancement techniques to support as many environments as possible while still optimizing for the most capable.
  • Plant a flag in the sand. It’s understandable to not have all of your content mobile optimized right this second. Things take time. But it’s important to have a long-term strategy for making all of your content accessible on the whole slew of present and future web-enabled gizmos.

Further Reading

URL Redirect Fails

CBS Mobile site viewed on desktop

The Problem

Until recently, the most common mobile web strategy was to create a separate mobile-only website (or m. site). Having two separate sites means having to point the right device classes to the right experience. In theory, that sounds manageable. In practice, however, it’s a nightmare that barely anyone gets right.

URL redirect fails come in a few different awful flavors:

m. Links on Desktop

mobile Twitter site on desktop

This happens all the time. Step 1: Someone shares a URL from their mobile device. Step 2: Someone sees that link and clicks on it. Step 3: they see a mobile site rendered on their desktop browser. This obviously shouldn’t happen, but even massive sites like Wikipedia and Youtube are guilty of this.

Redirect to Homepage

server_attention_span

It’s awful when you’re trying to find some crucial information only to be redirected to the mobile site’s homepage.

The Solution

There are a few solutions to URL redirect issues.

  • Maintain a single codebase. One of the more invisible advantages of responsive design is that you don’t have to jump through all these URL-redirect nightmare hoops.
  • Canonical URLs. Sites like Buzzfeed serve a separate mobile template, but the URL stays consistent (so no m. preceding the URL). This ensures that all that link juice stays under the same roof.
  • Initiate a future-friendly device strategy. Yes, it’s currently possible to keep up with the flood of web-enabled gizmos in a device database. But these solutions are quickly becoming untenable. Start to plan for a more maintainable web strategy that doesn’t involve updating a database every time Samsung craps out a new device (which happens about every 30 seconds).

Further Reading

Performance

ronin

The Problem

Performance matters. A lot. But it’s often neglected. One of the main reasons I feel performance is neglected is because performance is invisible. That’s why there aren’t very many performance-related screenshots on WTF Mobile Web. But we’ve all felt the pain of slow performance on our mobile browsers. And huge websites not only test our patience, they’re also extremely expensive for users on data plans.

The Solution

I’ve previously written about how to prioritize performance for responsive designs, so in a nutshell we should treat performance as design, set performance budgets (and stick to them), lazy/conditionally load content, test often and follow sound performance best practices.

Further Reading

Making contextual assumptions

Add to Homescreen showing up in the wrong place

The Problem

Bad things can happen when we make assumptions about users’ browser, screen size, environment, settings, orientation, etc. Web experiences are extremely fluid and are viewed in many different settings and scenarios.

The Solution

Don’t make assumptions. Avoid instructions like “tap the menu button in the upper right corner of your browser” because you simply don’t know what browser or app the user is visiting the website from. Yes, it’s frustrating to accept that we can’t control our users’ environment, but once we come to terms with that fact we’re able to create stronger, more agnostic solutions.

App Doorslams

Appblock examples

The Problem

This problem is extremely obvious. Instead of taking users to the content they’re after, organizations slap an interstitial ad or popup for their native app, hoping to increase their app downloads and justify the hefty price they paid to make said native app.

There are many issues with this strategy. First of all, it’s annoying as hell. But going the app route is tremendously inefficient. With the Web, there are simply two steps:

  1. Select link
  2. View content

Whereas going the app route goes something like this:

  1. Select link
  2. Select interstitial to download app
  3. Open app store app
  4. Select ‘Install app’
  5. Enter password
  6. Wait for app to install
  7. Open app
  8. Learn new interface, look for search bar
  9. Search for the original content from link
  10. Select link from search results
  11. View content

I’ve begun this process before only to eventually forget what I was trying to check out in the first place.

The Solution

Don’t do this. Google will punish you. Instead, think of more subtle ways to promote your app. Less intrusive banners across the top or bottom don’t hit users over the head with marketing and can be easily skimmed over. For iOS, consider looking into Smart Banners, which provide a more native way of handling app promotion.

Further Reading

Confusing Sites and Apps

Mobile web site spinners

The Problem

I have a problem with app lust. App lust is when organizations salivate over apps, so when they finally have a chance to do something for mobile, they immediately think “WE GOTTA HAVE AN APP!” They typically look something like this guy:

Guy suffering from app lust

The result of this thinking applied to the Web is often disastrous. I feel like I see more spinners on my phone’s browser than in this music video.

The best example of a site trying to be an app is Fast Company’s staggeringly bizarre mobile web experience. Enjoy:

All that just to put some words on a page.

The Solution

The Web isn’t a native app, and just because a Web experience can be viewed on mobile devices doesn’t mean that it needs to be app-like. Embrace the Web for the unique medium it is instead of trying to create a poor man’s native experience.

Further Reading

Design

Crazy mobile web overlay

The Problem

Lots of design decisions can influence the usability of a mobile web experience. Here are just a few examples:

Fixed Positioning

Fixed position fails on mobile browsers

Fixed positioning can wreak havoc on mobile browsers. Support is shaky, even on the latest versions of the most popular mobile platforms. But space is already a premium on small mobile screens, and by fixing elements to the page you’re losing valuable real estate that should be reserved for core content. It’s also worth noting that apps and browsers add their own (often multi-level) chrome to the experience, eating away at your content’s real estate.

Overlays

Overlays causing problems on mobile browsers

Overlays are annoying. They also tend to have positioning issues, which cause for some very undesirable results. Do you really want to risk users not being able to close an overlay and get to your real content?

And more

Text legibility, indecipherable images, and just straight up gross design all impact the effectiveness of a design.

The Solution

  • Avoid fixed positioning for a cleaner, more stable experience.
  • Avoid popups and overlays. Your users will thank you for it. Not only are they bullshit, but they also introduce potential usability issues where users are unable to close the overlays.
  • Simple is usable. Think twice before adding bells and whistles to your Web experiences. I’m not saying there isn’t room to make things beautiful, rich and complex. But all of these examples demonstrate that the effectiveness of a mobile Web experience has so much to do with basic accessibility and usability than it does about bells, whistles and purely aesthetic decisions.

Further Reading

Less WTF, More FTW

This post has been a long time coming. I started it in spring of 2012. It took Google publishing their thoughts to kick me into high gear and finish it.

The good news is that we’re seeing progress. Of course there are still problems and there always will be, but combing through 2 years of posts, we’re seeing less hideous mainstream mobile web experiences.

Again, I want to stress again that the point of WTF Mobile Web isn’t to be a jerk and make fun of mobile websites, but rather to highlight the problems we’re all facing as creators for this new medium. We need to know what problems we’re facing in order to get better.

It’s been great watching mobile web design transform from a complete afterthought to the center of everyone’s Web strategy. That’s nothing but a good thing. Here’s to progress!

38 Comments

  1. Mary Baum

    I’m always fascinated by how much extra work it takes to annoy mobile users. And a lot of it is stuff I can’t even do – my JS is very bad. I’d have to find a jQuery plugin, but where? Ihatesmartphones.com? annoymobileusers.com? I sure hope those don’t exist.

  2. rach

    FYI, if you actually visited activetheory.net on a mobile, you would see they have an excellent mobile experience, re: your ‘screen size’ examples

  3. Kyle

    Hey Brad,

    Thanks for this post! Just an update, PCMag’s smartphone webapp has supported landscape orientation now for quite some time. Maybe check it out again.

    Thanks!

  4. Justin Megahan

    There’s nothing quite like loading a mobile site only to get hit with a message that is basically telling me their mobile site is no good, go download the app. Thanks, but no thanks. A quick hit of the back button, and a mental note to not tap a link to that site again.

  5. Keith Wyland

    Yes, but go to it on a desktop browser and shrink it down. I think the point is that they are making an assumption that they know what device you’re on based on probably some user agent sniffing. What if there is a device that has a browser which doesn’t say it’s a mobile device, but it has a viewport the size of a mobile device? Or what if on a desktop/laptop I am taking some notes on half the screen and only want the browser window to be the size of the other half? Then their website is unusable because they assumed they could know everything about the devices their users are using to view their website.

  6. Jen

    While it’s great that activetheory.net now shows you something on a mobile device, I wouldn’t go so far as to say it is excellent. It still won’t show me anything if I turn my phone into landscape mode. Instead I get told to rotate my device. Not ideal…

  7. Tyron

    Really cool article! Well explained, now it’s just a matter of people start following it! Thank you.

    Just per curiosity, do you have the stats of how many users, after reading your article, actually resized their page to check if this was a responsible website? 😉

  8. Alexandre Giesbrecht

    And I was thinking just a responsive design could solve almost all mobile problems…

  9. Fesh

    It’s like most of these “designers” are unaware of the simple media queries it would require to make their sites usable to everyone…

  10. kelly johnson

    I still think it’s amazing that people actually champion and love a high-resolution screen that’s still only a few inches big.

    Mobile is still too new to know what kind of health-related issues, even if only eye, neck and finger problems, might be developing.

    Ah well, I’m just tired and old I guess. I still use a phone to talk.

  11. Stanimir Genov

    How about some constructive criticism?
    I think most of the points the author made across are irrelevant and unhelpful. Let me explain:
    The title of the article is “Mobile Web Problems and how to avoid them”, so what we expect when opening is something people do in the final version of their mobile-friendly website. A website that was intended for mobile, built for it, yet it lacks a good user experience.
    What’s shown here are websites that ARE NOT BUILT FOR MOBILE or ARE NOT COMPLETELY FINISHED. Those aren’t avoidable problems. Those are things the web developer has to focus on SPECIFICALLY.
    Let me give you an example: The first one – where the user sees a “denied” screen. That’s not a denied screen! That’s a business card that informs users that there will be a mobile website soon. That’s the same as putting a “under construction page”. At least you’re giving the user the chance to contact you.
    And if you want to view the website with no bugs and without these “problems” when the website isn’t even built for mobile, then don’t use a shitty phone. Getting a nice smartphone lets you “shrink” the website and view it exactly like on a desktop. Most mobile browsers (I use dolphin) have an option to view the website in its original form, not the mobile version.
    The only thing I agree with is that flash isn’t good for mobile websites. That’s a good point.

    The point this entire article is making across is that one should spend the time to focus on building a mobile-specific or a responsive design so that mobile users can access the website normally. YOU DON’T EFFING SAY ? Would have never guessed that!

    5 stars for spending the time for the article, but its a fail. Good luck with the next one.

  12. Aaron

    @rach Yes they do indeed have a very great experience. The navigation is very unique, HOWEVER, flip your phone the wrong way and they tell you to flip it back rather than fit the content to they way the user is more comfortable viewing the site.

  13. Evgenii

    Oh how I wish more people read this article. It is so rare in our industry this stuff. Most people want web to be something else: magazine, native app. Developers try to impress their peers by including 100 JS libraries on a web page. Designers want magazine quality static experience. Business owners want popup adverts and facebook like buttons.

    But best web sites are the ones which are primitive. Primitive – meaning resembling the ancestor, true to it’s original nature. Let’s stay primitive, folks.

  14. David Gerbino | @dmgerbino

    Dude! Awesome article. The performance and optimization section resonated with me as I recently did a spot audit on a site I co-manage and found the vendor was not optimizing a half a dozen images. We are now working on a budget.

    Again great stuff and keep it coming.

  15. Ian Turner

    Ummm, Rach…No they don’t. It’s slow, confusing and tells me very little about them. Sorry about that.

  16. Andy Watts

    I have found that quite a few problems can be overcome by not specifying a definite screen width and using max-width instead. This then allows it to displayed more easily without so much side ways scrolling. It seems to work on the simple sites that I have. Andy – Salisbury, UK

  17. Shawn Jansepar

    Great list! Although I think responsive images should have been highlighted underneath “Performance”, since it is one of the biggest factors to contributing to slow mobile sites (images account for over 60% of page weight on average, and the average page has grown from 1MB to 1.5MB in the last year alone!). We need good automated tools to help solve that problem for developers/designers, or else this problem will continue to worsen.

  18. Dude

    The problem is not the web, but your phone.

  19. Michael J. ryan

    One funny thing, viewing your site on a relatively large screen, the main title takes up almost the whole screen, with no content… you may want to limit your font/header size for larger displays. 😉 We’re not all reading from a smart phone.

  20. Robert C. Olson

    Worst are the banners and pop-ups, but as a novice using a CMS I find it difficult to find work-arounds that maintain reflexive design. Any suggestions for a novice blogger?

  21. Robert C. Olson

    Worst of all is the pop-up banner for monthly newsletters – ugh. But complaining aside, it’s been a challenge to find decent work-arounds for CMS platforms like WordPress. Are there any good resources for a novice blogger to help create interesting design without sacrificing mobile interface?

    P.S. Had to switch to desktop to post this comment. XD

  22. Bobby

    Just a heads-up that your fluid-width-video-wrapper sits on top of your banner on Chrome 27 (stable) for Windows.

  23. monirom

    Interesting stuff Brad. BTW you mean “without further ado” not adieu. Adieu is Fench for goodbye.

  24. jon

    Interesting article, will save me some precious hours

  25. CB Du Rietz

    Rach: If by being greeted with a ‘please rotate your device’, and realize you have to turn rotation awareness on is considered to be a good user experience, thenyou’re right.

  26. Rob

    Thanks for doing this Brad – this article is insanely helpful for just about anyone who touches a website. Wouldn’t life be easier if we all just treated our users the way we want to be treated online? The Golden Rule works!

  27. ozgur coruhlu

    Awesome points. Thanks for putting it together. App Lust is a classic. 🙂

  28. gilcrespo

    Nice article, Brad. Special thanks for Performance section.
    You rocks, man!

  29. web design melbourne

    Before releasing the web page the developer should consider testing it in several browsers and mobile platforms,that way you can avoid all these problems, dont you think?

  30. Henri Bergius

    Great listing of the various typical annoyances. Goes quite well with my description on how and why to go mobile-first with your websites:

    http://bergie.iki.fi/blog/mobile-first-web/

  31. Michael Anthony

    RE: activetheory.net

    We actually use capability detection, not a UA sniffer. If the device is touch capable and has certain dimensions, the code routes to the mobile views.

    I personally disagree with the notion that “rotate your device” is a bad experience. Native apps have always been able to lock orientation, and there has been early discussion on implementing this in mobile Chrome. If a site asks you to switch browsers, that’s a bad experience — but I don’t think any “normal” user would even think twice about turning their phone 90 degrees.

  32. Bruce Bowman

    Hey Brad,

    Great article. We’re building an awesome web app, that allows uploading and downloading files. Any suggestion for gracefully letting the user know they need to use the web app on their desktop/laptop without denying access or other “excuses”? I think we’re going to see more and more rich web apps that don’t make sense on some devices, so this might become a more common issue.

    Bruce

  33. Karen Walters

    Great Post and found it as I am looking at making one or two websites ‘Mobile Compliant’. It seems that almost everybody has a cell phone these days, and with the growing adoption of smart phones, more and more people are browsing the internet on their mobile device.

  34. Steve

    Some really good information here Brad, thank you, especially considering different people’s browsers they could be using.

    Also it compliments a mobile guide of mine that any of your readers can download free from here; http://mobileoptimisedsite.com Enjoy!!

    All the best

  35. Blobby

    Web designers… Just face it, you’re all going to be out of work soon and yammering on about responsive design and media queries is not going to save you. This ain’t 2008, you’re all too late. The web is dead. Long live the internet.

  36. karolus

    Simplicity is key, as well as a coherent content strategy. This needs to be set before a single mock is drawn or line of code is written.

    Especially in the developing world, there is a large emerging user base that will have little to no contact with traditional desktop devices. We’re doing our users a disservice if we only think of one method of delivery, to the detriment of all the rest.

  37. Gary

    You heard him, folks, the Web is dead. Fire up a terminal window and hit everything via Telnet and FTP.

  38. Ben Edwards

    The important thing to mention for all those calling “bullshit” on some of the things Brad has brought up; your opinion doesn’t really matter on whether or not you agree with them. The only opinion you need to consider is that of your users and if they think something stinks, they’ll be gone!

Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.