
Mobile web design: The reign of morons, indeed - protomyth
http://www.jwz.org/blog/2013/10/mobile-web-design-the-reign-of-morons-indeed/
======
ianstallings
I agree with a lot he said there. But I would like to comment on this:

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

Actually the app store version of that magazine uses a custom display view
that parses a JSON structure that itself is created by a parsing tool for
InDesign files. It's the same structure used by a few other well-known
published apps and I inherited that project while I worked at a company called
ScrollMotion in NYC. The content package for each magazine ends up being
around 500MB to 1GB! Mainly insanely large image files. It does usually
include some things like games and embedded videos. But the main reason it
wasn't web-based was a requirement for offline viewing. Content is pre-cached.

Just wanted to add that. It was a very early platform and we went on to create
a much better one with an HTML5 content creator that could create much smaller
packages, but that one is AFAIK, still a legacy app. It's now under the
control of Hearst.

~~~
pavel_lishin
So, why does that pop-up still come up inside the app:
[https://news.ycombinator.com/item?id=6484924](https://news.ycombinator.com/item?id=6484924)
?

~~~
ianstallings
Because, as that post you pointed out says, he clicked a _link_. That will
open a web browser. They can embed links in the content and the app will open
a browser just like most apps.

To clarify even further: We used a custom URL scheme that could signal that
the content was local. Then they could also use a regular web address if they
wanted.

------
jmduke
Here's a notion: what if we assume that the entire staff of Esquire is, at
varying levels, competent at their job?

So jwz's use case is that he's an inbound link from a social media site,
right? So Esquire is optimizing two things here: conversion rate to the
downloaded app and amount of time spent on site. The first one is obvious --
people who have the app downloaded are going to spend much more time overall
and are going to be more valuable; the second one is a bit trickier, since you
play a balancing act between getting users to dive deeper into the publication
while making sure they don't leave altogether. In this sort of case, it's
pretty reasonable to assume that someone has either the data or intuition to
say "Hey, if they're visiting our site from Facebook, they have a pretty big
investment in trying to read the article than someone who Googled something
vaguely related to the article."

(The same goes true from mobile, where audiences tend to be slower and more
captive.)

So, if we understand the series of decisions that led us to such an
experience, we then have to ask why were those decisions made? Clearly there's
a backlash against this kind of thing -- nobody says "wow, what a great banner
ad!" \-- but its hard to argue against the financial straits of such a
publication. Esquire doesn't have the circulation they used to, and its not a
non-profit; they need to make money somehow.

Either way, its hardly fair to pin this on Esquire's web designer. Esquire's
management, maybe -- or maybe the legions of people addicted to AdBlock, the
legions of people who put a low -- and getting even lower -- value on content.

Now, everything is hinging on that assumption that people are vaguely
competent over at Esquire. While it's entirely possible that such an
assumption is invalid, I find its a more comforting one than the opposite
assumption.

~~~
astrodust
Whatever.

Esquire has a great print experience, but their web one, mobile _especially_ ,
is awful.

I'm sure their lead print designer gets final say for what goes to press. If
their web designer is caving in to every ridiculous demand of management,
that's the fault of the designer, not management.

So either the lead "webmaster" has no idea what they're doing, in which case
they should get a new job, or they know exactly what they're doing but are
hamstrung by management, in which case they should get a new job.

~~~
untog
You neatly skipped past the whole "making money" part of the OPs post. Esquire
has a great print experience. It is packed with ads. You're just used to it,
so you don't care. I very much doubt the lead designer of the print edition
can dictate how many ads are in the magazine, or where they are.

~~~
astrodust
Print ads don't have to be physically peeled off the page in order to read the
content underneath. They don't cause the pages to fall out of the magazine
when you flip them out of the way. They don't cramp the content into a
postage-stamp sized corner of the page. They don't inline ads every third
paragraph. The ads themselves don't roll around on the page or blink.

There's ads in the print magazine, but they're in a format that doesn't run
into absolute conflict with the content.

------
binarymax
The designer isn't to blame here. Its an executive decision designed to hinder
use. They dont want you doing something obvious like reading content. They
want you looking at all the other pages they have to offer where you also
cannot read content. I've found that maybe about 10% of the time trying to
scroll an article into view or pinch-zoom I accidentally trigger a click on a
link or ad. More clicks! More revenue! Lets keep them struggling to find
content and mine all the clicks we can!

~~~
dclowd9901
It's up to web designers/developers to take the shitty ideas of their bosses
and turn them into something that is at least usable, and hopefully doesn't do
evil shit.

The problem is, most developers/designers get saddled with tasks like this,
and they think, "I fucking hate that I even have to do this in the first place
-- why would I spend another goddamn second on it?" And they leave it the
shitty experience that they know their superiors will sign off on.

Like any other job your results are only as good as the pride you put into it.

~~~
psweber
Fixing your boss' shitty idea is an optional, difficult and mostly thankless
job. Getting a boss/client that has at least minimal respect for quality
design and engineering is much better for mental health.

------
Joeri
I often wish websites would abstain from doing a mobile-optimized version. The
many ways of messing it up:

1\. Redirecting to the mobile page after the desktop page loads, taking up to
ten seconds before i can start reading the content

2\. Using some clever swiping / panning mechanic that relies on javascript
animation. Yeah, let's build the heaviest ui on the slowest platform, great
thinking there.

3\. Preventing panning side-to-side and then having content too wide for the
page (got this today on arstechnica, cutting off the bars on a benchmark
graphic)

4\. Asking me to install an app via a popup. On a content-driven site this is
never, ever, ok. No site visitor likes this, and it doesn't bring in revenue.
It is indefensible.

5\. Presenting less content on mobile and offering no clear path back to the
full content. Dell does this, i couldn't find out hardware details of their
laptops from my ipad. No details, no purchase.

Ofcourse, there are cases where a little attention to mobile goes a long way.
My phone operator redesigned their flash-driven website with html5 ... where
the primary navigation are dropdown menus triggered by hovering and half the
content doesn't load on a mobile device.

~~~
shawnreilly
I feel your pain, and I've experienced some of these problems myself. In my
opinion, many of these problems relate to a (poor) assumption that Responsive
Design = Mobile Design. So the train of thought is to fit the Old Design onto
a Smaller Screen. Instead, they should be thinking about how they can re-
design the UI/UX to compliment Mobile, and deliver a better Mobile Experience
overall.

------
ChikkaChiChi
I'd comment on this article on web design if I wasn't straining my eyes on
that terrible website.

Glass houses = unreliable source.

~~~
joosters
What? Sure, green-on-black may not be your colours of choice, but that's a
matter of taste, not of usability. It's not like a grey-on-grey low contrast
choice.

~~~
untog
I'm not so sure. I consider the colours used on a site to be a factor in how
usable it is. I found his site difficult to read, how is that not a usability
factor?

------
bchjam
As much as I agree with what he said, his neon green on black blog style
really isn't pleasant to read. I almost didn't finish reading it because of it
(and it's pretty short).

But the point stands, don't hurt your users!

(even if you technically have a user/customer differentiation, the customer
relationship is likely predicated on you having users)

------
badman_ting
Yep, a major argument for Safari's "reader" feature. Of course, on these
crappy websites that often doesn't work either (because they purposely
structured their markup to defeat it).

~~~
Sprint
Ah, the great features Opera had for ages until they dropped everything.
Safari adds them and it's all big news. Read a tech magazine recently that was
so excited about this "amazing and ground-breaking new feature" that I
wondered if they had ever used Opera before.

With that being said, yeah, being able to apply custom stylesheets to websites
easily is great!

~~~
rmrfrmrf
> _Ah, the great features Opera had for ages until they dropped everything.
> Safari adds them and it 's all big news._

Much like everything Apple does, amirite?

> _Read a tech magazine_

Sounds unlikely.

> _recently_

Safari Reader debuted in 2010...

> _that was so excited about this "amazing and ground-breaking new feature"_

I believe you. Really.

> _that I wondered if they had ever used Opera before._

Statistically speaking, probably not. Then again, they weren't missing out on
much. Unless you like your websites rendered incorrectly.

~~~
Sprint
Hush, go back to your cave.

------
nathanb
So I see two sorts of comments here:

* The article is invalid because I find the author's website hard to read.

This is the ad-hominem fallacy and is not at all relevant to the correctness
of his point.

* Don't blame the web designer, blame X

What is the role of a web designer? To design (hence the name) the experience
of the user on the web (again, hence the name). The experience on the Esquire
mobile site is very poorly designed. If higher-ups request more-visible ads
and higher conversion rates for the app, there are ways to funnel this traffic
without making the site difficult or impossible to use on a mobile device.
This is the job of a web designer.

(If higher-ups are mandating the design itself, they have assumed the role of
web designer and relegated the titular designer to simply a web design
implementor).

This mobile website is poorly designed. Thus, by definition, it's the fault of
the web designer. And nothing is going to change with finger-pointing or
blame-passing or the victim mentality so blatantly evident in this comment
thread.

~~~
shawnreilly
From my Experience, Good Design and a good User Experience do not always go
hand in hand. I've met Designers that were awesome at Designing Stuff, but did
not really have any interest in User Experience at all. I've also met
Designers that were good at both (which is what I strive for). In some sense,
it may come down to what roles and responsibilities you assign to the
Designer, how many Designers you have, and how that particular organization
works. Generally speaking, bigger organizations tend to have more moving
components, which means you may end up with multiple people fulfilling
multiple roles. In this type of environment, it's possible that the people
involved loose sight of the overall Project, instead focusing on their
individual components. This could explain how you end up with a poor User
Experience, even with a team of great Designers. Blame it on Management.
(hehehe)

~~~
hcarvalhoalves
> I've met Designers that were awesome at Designing Stuff, but did not really
> have any interest in User Experience at all.

Those are artists (photoshop pilots, pixel pushers), not designers.
Unfortunately the term is so banalized it lost it's meaning, but strictly:

    
    
        Design (noun): a specification of an object, manifested by an agent,
        intended to accomplish goals, in a particular environment,
        using a set of primitive components, satisfying a set of requirements,
        subject to constraints
    

If it's not solving a problem, it's not a design solution. That includes
providing the expected/desired experience to the user, which is often the
case.

------
blinkingled
Jwz jumped the shark long time ago. (His site only looks marginally better
than Esquire's BTW and all you can read there are rants and creepy things.)

~~~
camus
upvoted,look who's talking...

~~~
eliasmacpherson
Now if I didn't know any better I'd say you folks are jealous, I didn't see
this anywhere else:

[http://www.jwz.org/blog/2013/09/hoping-that-the-monsters-
don...](http://www.jwz.org/blog/2013/09/hoping-that-the-monsters-dont-do-what-
monsters-are-always-going-to-do-because-if-they-didnt-do-those-things-theyd-
be-called-dandelions-or-puppy-hugs/)

Horribly entertaining, maybe you don't like that sort of thing though.

~~~
disgruntledphd2
My god, that is probably the best article on processor design I have _ever_
read (though that's not saying much).

You should submit that as its own article (the paper, that is).

------
shawnreilly
The title is a little misleading; Just because one Website has a bad Mobile
Experience does not mean we have a 'reign of Morons'. There are lots of
Websites out there that have awesome Mobile Experiences, this just
(apparently) is not one of them.

But even with this said, I think it's important to note that designing a great
Mobile Experience is no easy task. To me, it all starts with the Viewport,
which is not necessarily an easy thing to understand. It seems as though the
original Use Case for the Viewport was to provide the capability of zooming,
presumably to account for Websites that were/are not mobile friendly. Over
time, it seems as though the preferred User Experience has shifted to a set
(non-zoomable) Experience, which is common with Web Apps. In fact, many of
today's common Web Frameworks (example: Bootstrap, jQuery Mobile, etc), set
the viewport to a 1.0 scale, and prevent zooming with the max and min scale
set to 1.0, and/or an explicit user-scalable=no. So it stands to reason that
there are grey areas between the original use case, and how people use it
today. This could explain why some of the "Bigger Name" Websites still have
Mobile Experiences that require Zooming. But this is still no excuse for the
overall User Experience described here, which does not sound good. Just like
an App, I believe that Websites (or Website Projects) should have someone
dedicated to a User Experience role, which would identify some of the issues
raised here, and solve them. When the Advertising in conjunction with the
Design makes the Website un-usable, that really is sad.

------
benjash
Coming from working in a publishing company...

It's definitely not the designers fault.

This is purely the result of mixed objectives and committee design. There will
be fighting between a publisher, editorial, marketing, sales, designers and
tech team.

Each dept. will have a trump card to have there say. Trapped in a false
numbers game of milking the most pageviews out of whatever they can. While
giving media buyers whatever they need to sell the space to there clients.

The designer will usually have a little or no say in what goes where. fact.

------
abbazabba
Interesting sidenote: the author invented mozilla (the name), and was a
founder of netscape. It might not excuse the hypocrisy of his own blog's
design, but I like the point he makes.

Is this becoming a common practice? I've had my own frustrations when I
double-tapped content which triggered a giant subscribe/paywall ad to cover
everything in my view.

------
kristianp
No one is mentioning the elephant in the room, which is that with declining
online ad revenue, and now that sites have just about reached the limit of how
much advertising they can put on a page layout, they have resorted to
"Subscribe to my newsletter" popups, and the one that irks me almost as much,
the unmoving bars at the top and bottom of the page to try to keep the user on
the site, by providing ever-present links. (Damn you google
news,mail,blogger,etc!)

The things jwz is complaining about aren't just a problem for tablet browsing,
they are a problem for all browser types.

------
keithpeter
Just went to look at the Esquire article itself on Firefox with noscript
installed on a laptop. 73 scripts and 1 object, that is a record (but I don't
usually use Web sites like Esquire).

Does iPad not have a noscript like thing?

~~~
Samuel_Michon
You can turn off JavaScript in iOS Safari. Go to Settings > Safari > Advanced
> disable JavaScript.

There’s also a Ghostery browser for iOS:

[https://itunes.apple.com/us/app/ghostery/id472789016?mt=8](https://itunes.apple.com/us/app/ghostery/id472789016?mt=8)

------
talmand
As one who has worked as a web designer and now currently occasionally designs
in my fits of development work, I take offense to the first sentence.

This sentence heavily assumes that these decisions were made by a web
designer. Or anyone who knows design or usability for that matter.

I can't tell you how many times over my career that I've stated "this is a bad
idea" to no avail.

Now this wonderful critique is out there, on a popular blog, that points the
finger directly at someone without really knowing if they were the cause of
the problems.

------
evolve2k
'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.'

Here here!

------
Steko
Apple could easily remedy this by denying approval to media apps for websites
that offer degraded experiences for iOS users. Problem solved.

~~~
talmand
That's an extremely bad idea.

~~~
Steko
Why? Because FREEDOM!?

It funny how many here react to any move by Apple to improve their customer's
experience as Evil Incarnate. Maybe Matt Cutts can come by and explain what
happens to your website on Google Search when you have a 'download our app'
popup.

[http://econsultancy.com/us/blog/62902-google-avoid-
download-...](http://econsultancy.com/us/blog/62902-google-avoid-download-app-
pop-ups-or-lose-mobile-search-rankings)

~~~
talmand
How exactly is requiring approval from Apple for your app based on their
wishes of what your website should do or not do be considered freedom?

------
untog
One slight nit-pick: when he says he uses the term "writing" instead of
"content" he _is_ talking about two different things. The photo at the top of
the article is very much part of the content, and is very much visible. He may
not care for the photo, but others do.

------
malyk
Of course, but the time you've decided to hit the close button you've been
exposed to all of the ads and esquire has gotten exactly what they want out of
you. Hell, if their lucky you try to go back to the site and wait to zoom in
and get to see all of the ads a second time!

~~~
RyJones
Except you can't scroll far enough to close it.

------
PaulHoule
The ads and fonts aren't so bad as you can pinch them away by zooming in.

Interstitial and popups are hell on mobile

------
rocky1138
On a PC/Mac, this is easy enough to avoid by adding crappy websites to your
hosts file, pointing them to 127.0.0.1. I do this for Wired and a few others.
Or, install Ghostery.

Can you do either on an iPad? I'm assuming no, but I'd love to proven wrong.

~~~
Samuel_Michon
Ghostery has a browser for iOS:

[https://itunes.apple.com/us/app/ghostery/id472789016?mt=8](https://itunes.apple.com/us/app/ghostery/id472789016?mt=8)

------
nostromo
Here's one mobile annoyance I'd love to see go away: fixed nav bars on mobile.

Here's what Wired looks like on my iPhone:
[http://i.imgur.com/pvgWa0p.png](http://i.imgur.com/pvgWa0p.png)

~~~
talmand
Hah! I just recently finished a project where we made the header and footer
become unstuck on mobile for that very reason.

------
istvanp
Esquire UK recently launched their redesign and has much better UX:
[http://www.esquire.co.uk/](http://www.esquire.co.uk/)

Perhaps they might apply the same design for the US sometime in the future.

------
shortformblog
The reason why many media websites are terrible is because the ad/biz dev
department sets the parameters. It's a mistake to blame the web designer for
being told they have to work in those parameters.

------
pearjuice
Clicking the link, something made me feel I landed on some sort of obscure
hacker blog. I wonder what could have caused that!

------
hawkharris
By the time I reached the third paragraph, I had to stop reading because of
the font colors.

------
nish1500
Chrome should really speed up the browser back button. I almost lost my eyes.

------
busterzzz
This happens notoriously on a Facebook I own. Always popping shit up about
promoting posts and running campaigns.

------
avty
Says the guy with the green on black page...

