Mobile web design: The reign of morons, indeed.

If you are Esquire's web designer, please find another career.

Stop. Stop hurting the internet.

I am still constantly amazed at the level user-hostility -- actually outright contempt -- in mobile web design. Remember in the 90s when those oh-so-clever web sites would pop up little Javascript dialogs trying to better "engage" you, and it was about as pleasant as having a little hammer pop up and whack you in the face every time you clicked their link? Try reading any "respectable" "news" "media" web site on a tablet and feel the nostalgia.

It seems like every time I click on an article that one of my acquaintances posts on Facebook, I have to go through this kind of dance. Esquire is a particularly egregious example of it, but this is so common.

Here's how the dance goes, when reading on an iPad: I click on a link to an article I think I might want to read. The page shows up, and almost the entire page is bullshit: there's always a huge banner, the right half of the page is ads, and the article is crammed into the bottom left quarter of the screen -- below a marginally-related stock photo (bitches love stock photos). If you consider that stock photo to be relevant, that's 20% or 25% of the screen being devoted to the article itself. The rest of it is useless bullshit.

If you consider that photo to also be useless bullshit, then there's like 1% of the screen being used for actual writing. I can only see part of one sentence of it. The entire article is below the fold.

It almost suggests that the article isn't the part they care about. Why I never.

Also the fonts are tiny. I assume not because they think anyone actually wants to read at that size, but because they have a lot of useless bullshit they have to fit in.

But that's old news. Here's where it goes Web Two Dot Doh:

Fortunately, the iPad makes at least the initial phase of this nonsense easy to deal with: habitually, the first thing I do after clicking a link is to double-tap on what I can see of the actual writing, zooming in. (You have probably been trained by the advertisers to call this "content". I use the older word, I call it "writing".)

Except then, a few seconds later, after I've had time to read possibly an entire sentence, the rest of their bullshit Javascript wakes up and continues running, and in comes the full-screen pop-over! Prepare your anus!

And here's the beauty: because I'm already zoomed in, there's no close box. Apparently I can't even scroll far enough to the right to find the close box. There's literally no way to get back to the article I had just begun reading seconds before.

What happens if you click anywhere else in the ad that I can't even see all of? Does it dismiss it? No, it launches the App Store application, presumably trying to get me to go download their custom app. Which is undoubtedly just a wrapper around a WebKit view of this exact same web site, except with more surveillance built in.

When this happens, I can't reach for the various close boxes and back buttons fast enough.

And, to be clear, I then never read the article. Because I know that whatever they have to say will be said better by someone else who isn't such an asshole.

Previously, previously, previously, previously, previously, previously.

Tags: , , , , ,

40 Responses:

  1. Paul says:

    Addendum for the designer's superiors: the solution here isn't "detect this particular device and behave like a slightly different sort of asshole."

  2. Phil Nelson says:

    Whenever I get a case of impostor syndrome, I think about stuff like this and it goes away pretty quickly.

  3. nooj says:

    Youtube on twitter also sucks this way. It always throws its "download the app" popup. Brother, you already know I'm on my phone. So you already know your app came with the phone!

  4. NB says:

    If the page loads at all on mobile, a problem with Esquire's site common enough that I've stopped following links to it.

  5. MikeJ says:

    noscript really makes the web a much more pleasant place. It doesn't fix the hideous layouts, but at least the popovers die.

    Sadly it broke on the latest firefox mobile, so web browsing is pretty unbearable. I just try to minimize the amount I do on a tablet until noscript works correctly again.

  6. Charles Stephens says:

    Stopped reading Gawker sites entirely on any device because they've done something even worse: they moved the useless sidebar bullshit from the right to the left. This is obviously an attempt to force you to look at it when you are reading left to right.

    I think my next project maybe to adapt the AdTrap and set iOS to use it as a global proxy.

  7. gryazi says:

    I always sort of assumed this bullshit Looked Okay on iPad and the inaccessible close boxes etc. on shit specifically designed to fuck with you because it recognizes you're on a tablet/phone was just an Android non_shitty-is-the-enemy-of-good-enough fiasco.

    Tangentially, I bet one of you nerds knows how to tell Firefox to pause animating gifs or running scripts across a session of like 300 tabs so it'll become responsive enough to weed them?

      • gryazi says:

        I have just proved that toggling that live doesn't apply across multiple windows (or possibly any tabs already loaded and rendered-ing).

        Unfortunately that's all the available extensions seem to do, too.

        (And it's hard to tell how much of an impact GIFs really have on the ridiculous 'CPU leakage' without something like that available. A 'Hey, look, just up and pause all JavaScript' button would be great but I can forgive that as being at least mildly complicated.)

  8. Brian says:

    Yeah, damn writers! Why can't they just write all day every day for us, then serve it up to us with unobtrusive ads we'll never pay attention to or click on? [written by a guy with a content site who spends most of his time every day writing or editing, and has popups just like this on his site because they work 3x better than anything else at preventing him from going broke and giving up on writing]

    • Jesper says:

      And how much better do they work at chasing away people? Like jwz, I chafe at this when I click links to read articles on sites I don't usually go to. I have sites that I read regularly and when they start pulling this sort of shit I stop reading them and read other sites instead. I imagine "making people go read the competition in the morning instead" is a negative data point.

      Subscription works because it gives me the ability to give you money and you the opportunity to leave me the fuck alone and let me read the damn article. Whatever hard times journalism is going through, getting up in my grill is not gonna pull you out of it in the long term.

      • Pavel Lishin says:

        > And how much better do they work at chasing away people?

        I'm giving Brian the benefit of the doubt and assuming that the 3x is the total improvement, even after you consider the people that bail.

        In which case, it doesn't matter if they chase away some people, as long as he's still making money in the long run.

        • Jesper says:

          Fair enough.

          What's not fair enough is that most of what Esquire wanted to achieve could have been achieved (including displaying that ad) without annoying the poor reader to hell. jwz doesn't bemoan that ads sometimes exist on sites, but that they are jumping in the way of reading the fucking article in an inartful way. If Esquire wanted to show an interstitial, it could have shown it as the page was loaded. As the post says, it jumps up only when the article text is zoomed in, which is either a combination of sloppy coding and bad timing or deliberate.

          The point of the post was that there are ways to show ads competently but that you wouldn't know it by looking at that Esquire article. Brian took it to mean that it's a choice between poorly implemented ads or free unicorns. With that sort of attitude either the whole industry will go under or those who bitch about the fucking customers will be scooped by people who can provide the same ads in a better way. In none of those scenarios does bitching about the fucking customer help you survive. Admitting that the problem exists and fixing it does. Brian probably doesn't work at Esquire and can't fix this, but the right answer is "you're right, this is bullshit, this should work better".

    • EH says:

      Surely you measured your bounce rate pre/post intrusives, right? What was the delta?

    • Ben says:

      Frankly, I'd rather you went broke and gave up on writing. Then perhaps you could get a job doing something actually useful, like sweeping the streets. If you're the sort of person who thinks popups like this are in any way acceptable behaviour, you're clearly an arsehole who isn't going to write anything worth reading.

  9. Bob says:

    @Brian: You sound like you're spending a lot of effort, doing something you don't much enjoy, earning very little money. Why not try to change at least one of those?

  10. dpc says:

    What I love about these pop-overs is that Safari's "Reader" feature completely defeats them. It's awesome, and it works on Mobile, too. On iOS, it's the little icon to the left of the URL bar that looks like a greeked paragraph of text.

  11. This isn't about the designer, keep in mind lots of people DO quit jobs like this, and they will hire someone slightly more desperate until things match up.

    And the reason the shitty experience ads pay more is because we ALLOW them into the game.

    If writing and other content on the web continue to be driven by ads, we need a broad-based movement to change the type of ads that are acceptable. Or a seal of approval, something that can incentivise more responsible behavior.

    We need to encourage less fluff that sucks up screenspace on devices people actually read on, a way of complaining to each other and having sites become less attractive to us collectively if they're rated low.

    Most internet advertising targets me for products I am absolutely not interested in. Meg Whitman's gubernatorial campaign funded most of my internet usage for over a year. Cadillac and HTC are constantly on me and frankly, though I'm probably not interested in an HTC phone, I'm definitely not interested because they feel it's OK to reach me by disrupting my experience on a competing device. Also, they would still fucking show me HTC ads if i bought an HTC.

    We have to break the cycle.

  12. This is why the "reader" button exists. Know it. love it. Learn to press it every time.
    Though I understand the confusion finding it. From the looks of things you've installed ios7 on your ipad, and in ios7, the nice clearly visible button labeled with the word "reader" has been replaced by a black box with 3 lines on it. Which could really mean anything...

    But I just tried it on this site, and it works beautifully.

    That said, everything you mention is absolutely bullshit, and it's not the designer's fault. This sort of thing happens as a result of the "design hell" effect the oatmeal so beautifully illustrated.

    http://theoatmeal.com/comics/design_hell
    "You are no longer a web designer
    you are now a mouse cursor inside a graphics program which the client can control by speaking, emailing, and instant messaging"

    Because well, in the new world, quality designers are about as prized as quality burger flippers.

    • "That said, everything you mention is absolutely bullshit", By which I meant that jwz is correct, and I wholeheartedly agree, and all the things that esquire does are bullshit. . I just now realised that could totally be read the wrong way.

  13. jBIGGS says:

    You know what the biggest "in thing" that all these sites do is put this pop-up banner at the top of your phone to download the "app" which is just becoming the most annoying thing. It is literally the new pop-up "hey since you're on our webiste TRY OUR APPLICATION THAT TRACKS YOU" like... No, and BTW your website is 100x more functional than your poor attempt at an app.

    shrug

  14. J. Peterson says:

    In the desktop world, I've found Readability usually provides welcome relief from the avalanche of BS on news article sites. It doesn't prevent the initial onslaught of crap though. Haven't tried their mobile apps.

    • The readability code was appropriated by apple and is built in to mobile safari.
      Behind an anonymous looking button with 3 lines, as I point out up thread.

  15. Esquire.com's bullshit goes even deeper than that. Try to find the RSS feed for just Charles Pierce's articles. Go ahead, I'll wait.

    ...

    Yeah, there isn't one. So that's helpful then.

  16. Jonathan Carter says:

    Sorry for the relative content-less-ness of this, but:

    Yes, yes, yes, oh god YES!

    I am so fed up with this kind of absolute abuse of my time and attention.

    Very well done.

  17. marijane says:

    "And, to be clear, I then never read the article. Because I know that whatever they have to say will be said better by someone else who isn't such an asshole."

    I object. Charlie Pierce isn't the asshole who made the page where his writing appears suck so hard. Also, few people can say things as well as Charlie Pierce can.

    • jwz says:

      I wouldn't know, because I can't read the article.

      Mediated by their idiotic decisions, he and his employer, Esquire, speak to me as one, and they speak as an asshole.

  18. Not too long ago, I would have recommended that you give Opera Mini a try. Most web devs give zero shit about Opera, and so usually fall back to the lowest common denominator of plain text or WAP when presented with an Opera request. Add that to Opera's great small-screen rendering, and Opera kept the mobile web enjoyable for quite a bit longer that one would expect.

    Unfortunately (?) Opera's recently gotten better at rendering, web devs have gotten better at sniffing, and Opera's little garden of eden is beginning to grow weeds...

    • ardgedee says:

      It's because Opera is now built on Google's WebKit-derived engine and so all the usual webkit-relevant sniffers and behaviors that detect Chrome and Safari now work on Opera without any web developer intervention.

      • Anthony says:

        Opera Classic (pre-webkit) has some of the same problems, unfortunately. Including being able to correctly(?) parse the Javascript which pops up a box which is wider than the screen and automatically left-aligns itself with the left edge of the screen, making the "close" box impossible to click.

  19. Glaurung says:

    This won't help with the stupidity of mobile versions of web sites, but it may help with the evil ads:

    A relatively cheap app called "WeBlock" allows you to block ad domains on IOS devices without jailbreaking (only works over wifi connections, but that's probably how you're using your iPad anyway). It's basically a tool to automatically preconfigure wifi http proxy settings to redirect ad serving domains to nothing. Has a bunch of standard ad domains built in and lets you add custom ones.

  20. nixar says:

    You forgot the most annoying part: even if you capitulate and install the app, it will be completely useless anyway because it won't handle links. Oh and you probably will still be prompted to install it even if it already is.

  21. crowding says:

    While we're on it, what the is the deal with half of all websites setting ZERO pixel margins between the left edge of the document and the body text? Prime example being your second Equire screenshot. I keep trying to scroll left.

  22. emf says:

    Ugh. Shit like Esquire and Upworthy are bad, but at least you know ahead of time from the URL (the 2nd..nth times you fuck up and go there), unlike that OnSwipe abortion that keeps popping up everywhere; giving you just enough time to read a sentence before reloading into some barely functional quasi-app-styled mobile view that doesn't render right. It's fucking WebKit, just leave it alone.

    Cunts.