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

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 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

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.” In an age of UA sniffing gone wild, mobile browsers often catch the short end of the stick.

Flash

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

Digital Rights Management

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.

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

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

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

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

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.

Making contextual assumptions

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

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:

Select link

View content

Whereas going the app route goes something like this:

Select link

Select interstitial to download app

Open app store app

Select ‘Install app’

Enter password

Wait for app to install

Open app

Learn new interface, look for search bar

Search for the original content from link

Select link from search results

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

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:

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 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

The Problem

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

Fixed Positioning

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 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

The Solution

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.

Less WTF, More FTW

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

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.

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.

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.

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…

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.

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.

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.

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.

Ian Turner

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

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.

Dude

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.

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?

CB Du Rietz

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!

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.

Bruce Bowman

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.

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.

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.

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.

Gary

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.