
Lousy web design trends that are making a comeback due to HTML5 - choult
http://econsultancy.com/uk/blog/62335-14-lousy-web-design-trends-that-are-making-a-comeback-due-to-html5
======
cscheid
Aside from this being about design and not HTML5, is anyone else not surprised
they didn't include "550 social +1, like, tweet, twat buttons"?

Look at that website: there's a social banner, a social footer, a social
sidebar, animated gifs for ads. Make that 15 lousy web design trends.

~~~
moe
I keep wondering: Does anyone actually use these social buttons?

I tried a few times but the experience has always been so terrible and
inconsistent that I've long reverted to simply sharing the good old copy/paste
way.

~~~
Cthulhu_
> I keep wondering: Does anyone actually use these social buttons?

The suppliers of said social buttons do; every time you see one while you're
logged into FB / G+ / Twitter, a hit of you visiting that site is registered
at said parties, and they can all, thanks to the prevalence of these sharing
buttons, track your internet usage.

~~~
jakub_g
This should be regulated somehow (yeah, I know, I sound like an 19th century
guy). But probably lobbyist won't give up on that easily. I have disabled all
that crap in my adblock, but there are millions of people who are not that
savvy / aware etc.

My friend from Germany told me that in some (but not all) the pages, there are
dummy social buttons loaded by default, you have to "enable" them. Try any
article at [1]. It actually displays grayed placeholders only [2], and things
are fetched from G/T/FB only when you click it - you can see in HTTP console.

[1] <http://www.stuttgarter-zeitung.de> [2] <http://i.imgur.com/hkQXEiX.png>

~~~
networked
>there are dummy social buttons loaded by default, you have to "enable" them

Neat. This looks like a very reasonable way to go if you decide to have social
buttons.

Is there a ready-made solution for this?

~~~
tomkinstinch
> Is there a ready-made solution for this?

<https://github.com/filamentgroup/SocialCount>

I'd be interested in learning about good alternatives.

~~~
pserwylo
Another is <https://github.com/mischat/shareNice>. They look like they do
pretty much the same thing: Serve the icons themselves, and just make them a
link to the respective services.

For example:

\- <https://www.facebook.com/sharer/sharer.php?u=[Url> to share]

SocialCount looks like it also cares about how many times a link has been
shared, and uses a server-side script to figure that out. That seems like a
nice approach if you really want that info, because it doesn't let the social
service track the end user.

shareNice seems to have a wider range of services that it supports.

------
pkorzeniewski
What strikes me most is how websites are visually getting more and more
minimalistic and at the same time they're loading and working slower. For
example The New York Times [1] layout is as simple as possible (basically text
only with some images), but it loads 20 JS files, 13 CSS files, makes ~200
requests and uses ~14 MB of memory on load.

[1] <http://www.nytimes.com/>

~~~
STRML
It's hard to believe that a site with that kind of traffic & resources hasn't
even bothered to concatenate and minify its JS & CSS. Most of the JS files
still have comments. Bizarre. They should know better.

~~~
jedahan
I like to think they are trying to preserve the spirit of being able to right
click->view source and learn a thing or two. Geocities + view source did spark
early interest for myself in coding.

Maybe sourcemaps will help with that in the future.

~~~
robmcm
Perhaps adding a commented link in a minified file to a full version? Wouldn't
be hard to automate.

~~~
ChrisLTD
I've added that to a site I'm about to launch. Seems like a good compromise.

------
ericcholis
So many issues with this article.

What on earth does a 404 page have to do with HTML 5?

Hidden navigation on <http://orangesprocket.com/> is a design decision. Is it
HTML 5 related because it uses CSS3 animations? This effect could have been
achieved in any Javascript framework for quite some time.

~~~
whatshisface
_"Hidden navigation on<http://orangesprocket.com/> is a design decision."_
Auto-playing midi music is also a design decision.

I agree, calling it html5 is a bit off, but the complaints are justified.

------
Wintamute
Who are these people that want the web to be some sort of sterile, perfectly
conformist, UX's wet dream? Flash is still warm in its grave, and people are
already blaming it for crimes that HTML5 hasn't even really made yet. Don't
get me wrong, when the function of a website is to perform a task or convert
users into paying customers then by all means streamline the crap out of it.
The sites that do that well will succeed, the ones that create an unusable
mess will fail, simples. But don't go around pointing fingers at everyone
trying to make something innovate or different. Make no mistake, a lot of the
well accepted web2.0/native app tactile/animated interface elements we take
for granted now were birthed during the frenzied experimentation of the mid
2000s Flash era. I for one am occasionally delighted to visit a site with an
off the wall animated interface, tiny fonts and crazy navigation. It's food
for thought, sometimes inspiration. Yeah, maybe they got it horrible wrong,
but its creative.

And besides, this guy is really scraping the bottom of the barrel here. 404 a
"HTML5" problem? Auto-playing vidoes a "HTML5" problem? Low contrast colour
schemes a "HTML5" problem? Has he even got the slightest clue what "HTML5" is
as opposed to other HTML versions? All the examples in that article are just
shit sites, nothing to do with "HTML5". Gimme a break, this is just link bait,
what a joke.

~~~
anigbrowl
I want the web to provide access to a wide variety of information. I would
much prefer the option to consume that as I choose, not to have everything
gift-wrapped by force. An awful lot of design is a distraction from the
content it is supposed to present.

Look, you wouldn't like it if every different document you opened or site you
looked at took it upon itself to restyle your desktop and rearrange all your
Photoshop preferences to suit the author, would you? Likewise, you don't think
that Wikipedia would be improved by allowing every editor to restyle pages in
Myspace or Geocities fashion, do you? Of course not, once you've configured or
become familiar with a particular environment, consistency supports
productivity.

Some of us want to navigate the web for content, without all the branding and
UI inconsistencies. I read a variety of specialist web forums, for example,
not unlike HN except that they're mostly running PHPbb or something along
those lines. They all look different, with different layouts and so on, many
of which are UI catastrophes. I would _love_ to just download the semantic
information and have a nice consistent UI _of my choice_ that ran on the
client side instead of consuming far more bandwidth than the content I am
there to read.

~~~
Wintamute
When you hit somebody else's server, use their bandwidth and download their
stuff I'd say its only fair that they at least get total control over how it
displays and behaves by default in a browser. You're totally free to not hit
that server if the presentation of the content offends you, or alternatively
use a RSS reader or similar.

I'm not arguing against a semantic web, but I will argue in favour of people
being able to present and serve their content in any way they see fit. One
page JS web app? Fine. 100% Flash microsite? Fine. Crazy Chrome only
WebGL/NativeClient art experiment? Fine. Streamlined standards compliant site
conveying great semantic value? Also fine. We need all of these. People can
vote with their feet and we achieve progress. Like humanity the beauty of the
web is the freedom and variety it offers.

------
fdej
The trend that annoys me most right now is that image thumbnails never just
point to the large image: instead they pop up some JS-based overlay that
obscures the whole page. There are several issues with this:

* Quite often, for whatever reason, the overlay takes seconds to load (much longer than just loading the image)

* If the image takes long time to load, I cannot just put it in a background tab and continue browsing the page with the thumbnail while I wait.

* I cannot open several images simultaneously

* To close the overlay, I have to hunt down an 'x' button (for example pressing Esc usually does not work). The 'x' is likely camouflage dark grey in order to look good against the dark grey background, and placed creatively to make it difficult to find. Sometimes, the 'x' loads two seconds later than the overlay itself, to make sure the browsing experience becomes as frustrating as possible.

* Not uncommonly, the JS is so poorly coded that the overlay half-loads in my browser and cannot be closed at all without reloading the page. With JS disabled, trying to open the image might not work at all.

* If I react instinctively to the overlay by pressing backspace, it doesn't close the overlay; I get sent back to page before the page I was on.

At least the web designers who do this overlay crap are increasingly using JS
for it, which is an infinite improvement over Flash.

~~~
apendleton
At a bare minimum, people using lightboxes for images should have the link
actually point to the image, and have the click handler both open the lightbox
and suppress the default click behavior. That way, opening the image in a new
tab (with a middle-click or right-click+context-menu) still works as expected
for users that want to do that.

------
lakey
Author here. Thanks for all of your comments.

To clarify:

1\. The article clearly isn't an attack on HTML5 itself, but of designers who
happen to be building HTML5 sites with a lack of concern for the user
experience. The gap between design and UX has hugely narrowed in the past
decade, and I don't want to see it open up again. It is a plea of sorts, and I
apologise if I've mislabelled the headline.

2\. The article is a response to the many posts I see that hold up these sites
as being "inspirational examples of HTML5 design". I'm afraid that I don't
think many of these sites are inspiring, given the UX issues. And yes, they
could have been built in HTML4, but they're using HTML5 / CSS3. Hence the
headline, though no doubt I could have chosen a clearer one.

3\. Yes, our site has all manner of issues, though I've yet to see it in a
compendium of 'inspirational' sites. The roll-up is there because sometimes
business goals sometimes kick UX goals in the face. The roll-up should not
appear immediately and should not obscure all of the screen (please suggest a
more elegant solution).

4\. 404 pages. A lame point. My bad.

<returns to bunker>

------
mnicole
Ah, yes, the infamous "trend" list that only shows one example per anti-
pattern and it's some random never-before-seen website where clearly they
couldn't afford a better designer. Outside of the whole part where HTML5 has
nothing to do with any of these, nor are they "comebacks".

Trends I'm waiting to be over: people without a clue about the web writing
about the web and people who upvote articles without reading them.

~~~
mdaniel
As a small aside, I often upvote the HN submission if the discussions are
valuable -- independent of the actual linked content.

------
chimeracoder
How about forcing keyboard shortcuts that are impossible to disable?

The two biggest offenders of this are Google Groups (the new layout) and
wired.com. Both have mappings for "H" (capital), which I use to go back a page
(via Vimium).

However, they decide instead that this should _hide_ all the content and leave
me on the page.

In the case of Wired.com, it sends me to a random article.

Worse, Google Groups refuses to load at all if I disable Javascript, telling
me I _must_ activate Javascript in order just to load a mailing list archive.

~~~
KaeseEs
I hate sites that intercept '/', which I normally use for searching text on a
page. If I wanted to use your search function I'd click in the box. I'm
looking at you, Gmail and Bitbucket!

------
charonn0
I really hope the trend of using lightbox-like login popups (e.g. [1]) goes
away very soon; they tend to break Firefox's password manager and add
absolutely nothing of value.

[1]:
[http://i51.photobucket.com/albums/f351/charonn0/vtlogin_zpsb...](http://i51.photobucket.com/albums/f351/charonn0/vtlogin_zpsbd44ed4c.png?t=1363194084)

~~~
marssaxman
Hate those things. Just when we finally got popups squashed dead, asshole web
designers found a way to reinvent them, and now they're even harder to kill.

------
dizzystar
Under the "Contrast Fail" is my single largest pet-peeve of form design. Once
you click over that form, the text goes away and you may not know where you
are.

Please use labels, people. I have no idea why he didn't include that in this
article.

~~~
muglug
This. Unless your form is incredibly simple (e.g. signup or login) you
shouldn't just rely on placeholder text.

Apple has a nice solution to this issue on their checkout pages - labels
placed on top of inputs, only disappearing once text is entered.

~~~
peterjmag
I still think inline labels are a bad idea, regardless of placeholder
behavior. To quote myself: <https://news.ycombinator.com/item?id=4642146>

------
jplur
Was hoping to see my biggest pet peve, altering the browser history. So many
big news sites have image slideshows embedded into an article that do this.
It's a horrid experience to hit the back button 15 times to go to the previous
page.

------
grimtrigger
How are any of these (except maybe the autoplay) due to HTML5?

~~~
damoncali
Replace "HTML5" with "increasing use of facny JavaScript and CSS3". It's just
a generalization for the benefit of the semi-technical.

~~~
yuhong
Personally I consider even the buzzword a misnomer:
[http://yuhongbao.blogspot.ca/2012/07/why-html5-buzzword-
is-m...](http://yuhongbao.blogspot.ca/2012/07/why-html5-buzzword-is-
misnomer.html)

------
tokenadult
"A decade ago the rise in popularity of Flash steered many web designers down
the wrong path. It wasn’t the fault of the technology, but of the people using
the technology. The same thing applies to HTML5: just because you can do
something doesn't mean you should. I'm all for innovation, but innovation
should not be regressive."

Yes. The first job of someone putting up a website new design or redesign is
to do usability testing. Can a user who reaches your site by a search engine
result or some friendly inbound link accomplish a relevant task upon reaching
your site? If not, why not? As Steve Krug says, "this isn't rocket surgery,"

[http://www.amazon.com/Rocket-Surgery-Made-Easy-
Yourself/dp/0...](http://www.amazon.com/Rocket-Surgery-Made-Easy-
Yourself/dp/0321657292)

and if you aren't investing in making your website usable for users, related
to some purpose you had when putting up the website in the first place, you
might as well do without having a website.

~~~
iron_ball
On the other hand, most of this rogues' gallery is digital agencies or sites
made by digital agencies. Sadly, those businesses market to unsophisticated
customers on the basis of flash and dazzle, and usually any attempt at user
advocacy is met with requests _for_ flash and dazzle. The target audience of
this kind of site is not the end user who visits the site; it's the manager
who signs off on the invoice. Those managers very seldom have long-term
engagement growth as an evaluation metric.

~~~
th0ma5
Thank you for posting this. I both always wondered what I was thinking about
such sites, and also had problems capturing the mindset of the audience when I
wanted to make sites like this!

------
wladimir
I especially agree with regard to loading screens. For example some blogs have
this "gears" animation before they display their text. I'm not sure who ever
came up with thinking that might be a good idea... even if the site is slow
that it required a few seconds of loading, just showing text and images
incrementally means that you can start reading immediately instead of waiting
for the "funny" animation.

~~~
acqq
Not "some" but first and foremost Blogger from Google. Awful.

------
gallerytungsten
This bit alone makes the article worth reading.

"Make no bones about it, HTML5 design is a massive, musty elephant in the
room, and it is about to charge. In its path lies a flailing, unarmed Jakob
Nielsen, backed up with legions of user experience professionals, who are
gently sobbing."

------
cshenoy
A lot of these are just poor UI/UX considerations that aren't necessarily
HTML5 related.

It's funny how this article is featured on a site that has a fixed container
at the bottom taking up almost a quarter of my viewport.

------
LandoCalrissian
I have a design trend I would like see go away, how about the "Join FREE as a
Bronze member" bar at the bottom of this website.

------
pseut
I can ignore the auto-playing video well enough, but jesus, why anyone decided
to bring back auto-playing video WITH SOUND is beyond me.

------
joshuasortino
These trends are not because of HTML5. They are because of poor design
decisions.

------
ebbv
Decent criticisms but I could make a list about 50 items long of the problems
with their own website. Glass houses, etc.

------
lutusp
It's ironic that this article about terrible Web designs is hosted on a site
with a terrible Web design.

------
anigbrowl
There's money to be made in an open design platform coupled with low-cost
curated data feeds. I like being able to customize and tweak how things look
on my machine; I loved running Enlightenment on my Linux desktop 10 years ago.
And I love and am prepared to pay for good content because I'm a bit of a news
addict. But I can't _stand_ the amount of junk on most news websites. Not just
adverts - sidebars, useless statistics about which stories are most popular,
social buttons, comment dungeons, pictures of journalists, and about ten other
varieties of cruft...to say nothing of the poor quality content that I'd like
to filter out. I envision something midway between NNTP (the protocol, not the
usenet community) and a Bloomberg terminal, but at reasonable cost and with
high standards of currency and curation (which is where Wikinews fails
currently).

Users choose (and may pay for) the presentation layers that make most sense to
them; one person may choose something redolent of newspaper, another person
likes their news with Star trek theme, a third inexplicably likes their news
delivered by Clippy, the office assistant. Designers offer a wide variety of
different presentation and navigation tools to suit the whims of consumers
instead of suffocating in an unwinnable race to discover the one format that
rules them all from within the bowels of of a media conglomerate; serious
journalists get to concentrate on information-gathering, reportage and quality
of references, without having to fill an onerous fluff quota ('It's daylight
saving time again, and that means rewriting last year's rewrite on daylight
saving time!')

 _grumble grumble get off my lawn etc._

------
tterrace
Here's a throwback to the bad old "best viewed in 640x480" days from pcmag:
<http://i.imgur.com/TJEMjvy.png>

------
antidaily
Bad contrast. Right. That contrast attribute should never have been approved
in the spec!

------
Peroni
Back when I worked for a digital agency the number of requests I used to field
from non-technical clients asking us to 'update' their sites by creating a
carbon copy of their flash animations in HTML5 was staggering. That in itself
wasn't really the issue, the issue was the misconception amongst non-techies
that the role of HTML5 is a universally accepted flash replacement.

~~~
purephase
While accepting that it is not appropriate for every situation, I believe that
the HTML5 canvas/video/audio/svg/dragdrop/storage elements are specifically
targeted at replacing flash/silverlight so I can see how non-technical folks
might get confused.

------
thehigherlife
His best point is "Don’t use technology for the sake of it." This sentiment is
true for design, but its core idea can be applied to pretty much anything. It
is important to think about what you're trying to accomplish and use the
technology to aid in that, not the other way around.

------
tiredoffps
"But animations are a distraction and should be used with caution"

Agreed. It's like designers found out they can move things and are animating
the crap out of everything.

They're forgetting what's important. The call to action button is the main
focus and animating some random pictures get's the user distracted.

------
just2n
The complaint about "images for text" is only valid if the developers behind
the site didn't actually think about the problem. You can have this cake and
eat it too. Provide the same content in text as you do in images, and Google
will be happy to show that in search results, even if it's not visible to your
average desktop user. If you care about accessibility at all, you've already
solved the problem.

One thing that's horribly annoying, though, is searching for text, landing on
a site that has the text you searched for in images or otherwise mutilated
with CSS, and having no way to highlight it for copy/pasting. For pulling that
one, there's a special place in web hell for you, right next to IE 6.

------
Kronopath
> ...I’ve never used this site before, so immediately asking me to create a
> free account is absolutely pointless...

Kind of ironic when the very website this article's on has a bright red rising
banner asking me to "Join FREE as a Bronze member".

Relating to the content of the article, I find it interesting and rather
frustrating how these days pop-up windows are making a comeback. These were so
annoying that every major browser at the time came with a pop-up blocker, a
trend that continues today. Except nowadays the pop-ups are little
HTML/Javascript doodads built into the webpage itself, which means pop-up
blockers don't work and will likely never be able to.

------
okamiueru
What does the 404 error have to do with HTML5?

~~~
bjudson
Or using images for text? Many of these have very little to do with HTML5.
Unless it's really about people abandoning Flash and bringing bad design
habits to HTML. But even that doesn't explain the 404 "trend."

------
JungleGymSam
I didn't know you couldn't make small fonts before HTML5. Very informative,
this.

------
pyalot2
I agree with a lot of the points, but I'm taking a limited exception to
loading screens.

Sure, most of the time in ordinary websites there isn't a point. On the other
hand, there is now a class of "website" (such as games, demos, productivity
tools etc.) more broadly in the category of "web application" that do need to
load a bunch of resources, they can't run before they don't have them, and
they will include a loading screen, for good benefit, too.

So the answer to loading screens is really: it depends, and not by default no.

~~~
wladimir
Eh, sure, a loading screen is perfectly OK if you have a game or demo or
something. But that's the exception not the rule. For forums, blogs and news
sites and such it's absolutely a no-go.

------
SonicSoul
here is some timeless web design advice that i wish did make a comeback in
html5

<http://www.homestarrunner.com/sbemail51.html>

------
dennisbest
This guy has ads all over his page. Pointless social icons. A fixed footer.
Captcha. Talk about the pot calling the kettle black.

------
Yhippa
How about the absolute "use our other stuff" bar at the bottom of their page
which shrinks the viewable page content?

------
mgcross
"Images used for text" - Ok, what am I missing here? I see fewer and fewer
sites using image text every day. And the linked example (weesociety.com)
appears to use images only for photos. SVG logo? Is that a problem? Even SVG
for the SM icons.

"...but most people do not use iPads to visit websites" Hmmm.

------
aw3c2
On the left, text as rendered on the submitted url. On the right, text as
shown as example for "Tiny fonts" in it. <http://i.imgur.com/H6gDIZz.png>

Both are perfectly readable and big on my screen.

------
kabdib
Warning: Some of the linked-to sites are hosting malware.

Huh . . . is this another bad HTML5 trend? :-)

~~~
eksith
Confirmed it happened to me as well..

Specifically on the "Dubious animation" section kikk.be ( DO NOT CLICK ) :

<http://kikk.be/2012/home.htm>

------
Meltdown
The web design feature I hate the most is when a site freezes the right or
left hand column, after I begin to scroll the page...ggrrrrr!

------
peachananr
Although some of the points aren't really related to HTML5 but these are
annoyance that we all can agree on, should go away.

------
sujeetsr
This website looks like Guy Fieri designed it.

------
seivan
I am still waiting for marquee to be trendy :)

------
gesman
Most of these lousy designs were invented and successfully used to irritate
countless users way before HTML5 :)

------
danielhunt
"Lame popups" - interesting how this is mentioned mere seconds after I dismiss
a lame popup.

God, how I hate those things

------
aakash
Add to this- websites unnecessarily sticking table headers, navigation menus,
sidebars (gmail!).

------
CHsurfer
Speaking of lousy web design trends...

This page is unviewable on my Opera Mini browser.

------
countessa
dodgy popups that encourage you to "join Free as a Bronze member" :/

------
jQueryIsAwesome
Linkbait in its maximum expression... plus "Get our free", is-this-a-
link?-game, "Social buttons", "Get our free", "Follow us in timewastter"...
now those are some lousy web design trends.

