15 ms·

Lousy web design trends that are making a comeback due to HTML5

266 points by choult 14y ago

grimtrigger 14y ago
How are any of these (except maybe the autoplay) due to HTML5?
- vrkr 14y ago
  I agree, this is not due to HTML5 but poor design in some cases.
- adeaver 14y ago
  They aren't, it's just link bait. Every single one of these can be (and are) done with 'HTML4.x'. Next week it will be because of Javascript or jQuery or the color of the Moon on alternate Thursdays.
- damoncali 14y ago
  Replace "HTML5" with "increasing use of facny JavaScript and CSS3". It's just a generalization for the benefit of the semi-technical.
  - zevyoura 14y ago
    "Images Used for Text," "Contrast Fail," "Mystery Meat Icons," "Missing Pages," and "Tiny Fonts" all have nothing to do with JS or CSS3, it's simply a very poorly named article.
  - yuhong 14y ago
    Personally I consider even the buzzword a misnomer: http://yuhongbao.blogspot.ca/2012/07/why-html5-buzzword-is-misnomer.html http://yuhongbao.blogspot.ca/2012/07/why-html5-buzzword-is-m...
Peroni 14y ago
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 14y ago
  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.
cscheid 14y ago
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.
- phlyingpenguin 14y ago
  This is exactly what I was thinking after dismissing the gigantic "Join FREE as a bronze member..." popup at the bottom of the screen. -- snip --: Lame pop-ups I’ve never used this site before, so immediately asking me to create a free account is absolutely pointless, and more so when the pop-up does not automatically disappear when I ignore it.
  - MiguelHudnandez 14y ago
    A screenshot of the hypocrisy: http://i.imgur.com/jDLT5V4.png http://i.imgur.com/jDLT5V4.png
- nicholassmith 14y ago
  I was about to come and mention the same thing. On a 1440x900 monitor I was losing about the bottom 6th of my browser just to an obnoxious signup bar. Maybe they should take a note from the HTML5 and Javascript revolution and have it auto-hide after a period of time.
  - Mahn 14y ago
    "That's ok, we'll just make it up for it with a 12px font-size"
- moe 14y ago
  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.
tokenadult 14y ago
"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/0321657292 http://www.amazon.com/Rocket-Surgery-Made-Easy-Yourself/dp/0... 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 14y ago
  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 14y ago
    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!
    - visualcsharp 14y ago
      I call it "bamboozling people with bullshit."
tiredoffps 14y ago
"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.
thehigherlife 14y ago
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.
joshuasortino 14y ago
These trends are not because of HTML5. They are because of poor design decisions.
jplur 14y ago
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.
pkorzeniewski 14y ago
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/ http://www.nytimes.com/
- STRML 14y ago
  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 14y ago
    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.
    - joonix 14y ago
      Geocities view-sourcing. Thanks for taking me back.
    - robmcm 14y ago
      Perhaps adding a commented link in a minified file to a full version? Wouldn't be hard to automate.
      - ChrisLTD 14y ago
        I've added that to a site I'm about to launch. Seems like a good compromise.
    - networked 14y ago
      Source maps in JavaScript are a cool idea. More people should know about them [1][2]. [1] See, e.g., http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ http://www.html5rocks.com/en/tutorials/developertools/source... [2] ...or http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/ http://net.tutsplus.com/tutorials/tools-and-tips/source-maps....
LandoCalrissian 14y ago
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 14y ago
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.
gallerytungsten 14y ago
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."
pyalot2 14y ago
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 14y ago
  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.
kabdib 14y ago
Warning: Some of the linked-to sites are hosting malware. Huh . . . is this another bad HTML5 trend? :-)
- eksith 14y ago
  Confirmed it happened to me as well.. Specifically on the "Dubious animation" section kikk.be ( DO NOT CLICK ) : http://kikk.be/2012/home.htm http://kikk.be/2012/home.htm
okamiueru 14y ago
What does the 404 error have to do with HTML5?
- bjudson 14y ago
  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."
ericcholis 14y ago
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/ 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 14y ago
  "Hidden navigation on http://orangesprocket.com/ 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.
- romaniv 14y ago
  You would be surprised how may designers dismiss basic usability concerns by saying something along the lines "this is an app, not a website". Every wave of technologies carries a certain culture with itself. A lot of the things in the list are quite characteristic of HTML5 culture. I agree on 404s, though.
- vacri 14y ago
  I was also thinking what a 404 has to do with design decisions. "Oh, and we'll put a link here that goes to a 404, that's popular these days!"
wladimir 14y ago
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 14y ago
  Not "some" but first and foremost Blogger from Google. Awful.
ebbv 14y ago
Decent criticisms but I could make a list about 50 items long of the problems with their own website. Glass houses, etc.
dizzystar 14y ago
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 14y ago
  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.
  - LoganCale 14y ago
    The placeholder attribute in recent versions of Chrome behaves the same way—possibly longer, but I only started noticing it recently—the placeholder remains in the field until you've typed a character.
  - peterjmag 14y ago
    I still think inline labels are a bad idea, regardless of placeholder behavior. To quote myself: https://news.ycombinator.com/item?id=4642146 https://news.ycombinator.com/item?id=4642146
  - ghjook 14y ago
    >This. Hi, samefag.
- aw3c2 14y ago
  Also if you filled it out and accidentaly moved back or forward in browser navigation, then go back to it and your browser fills it, the Javascript often removes your text.
cshenoy 14y ago
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.
seivan 14y ago
I am still waiting for marquee to be trendy :)
JungleGymSam 14y ago
I didn't know you couldn't make small fonts before HTML5. Very informative, this.
SonicSoul 14y ago
here is some timeless web design advice that i wish did make a comeback in html5 http://www.homestarrunner.com/sbemail51.html http://www.homestarrunner.com/sbemail51.html
jsavimbi 14y ago
Ah yes, being lectured by a 'consultancy' that provides little insight and much web annoyance in their own views.
mnicole 14y ago
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 14y ago
  As a small aside, I often upvote the HN submission if the discussions are valuable -- independent of the actual linked content.
danielhunt 14y ago
"Lame popups" - interesting how this is mentioned mere seconds after I dismiss a lame popup. God, how I hate those things
Yhippa 14y ago
How about the absolute "use our other stuff" bar at the bottom of their page which shrinks the viewable page content?
fdej 14y ago
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.
- LandoCalrissian 14y ago
  The thumbnail one drives me crazy. All I want to see is the original full size image, yet many sites make this incredibly difficult to do for now reason. Not really an HTML5 problem though, just a general image gallery problem.
- lttlrck 14y ago
  And many "lightboxes" suck on mobile.
- ereckers 14y ago
  The marketing guys think it adds pop.
- apendleton 14y ago
  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 14y ago
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>
CHsurfer 14y ago
Speaking of lousy web design trends... This page is unviewable on my Opera Mini browser.
lutusp 14y ago
It's ironic that this article about terrible Web designs is hosted on a site with a terrible Web design.
antidaily 14y ago
Bad contrast. Right. That contrast attribute should never have been approved in the spec!
Kronopath 14y ago
> ...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.
chimeracoder 14y ago
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.
- bicknergseng 14y ago
  I was wondering how far down I'd have to scroll before I saw the "disable Javascript" complaint.
- KaeseEs 14y ago
  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!
countessa 14y ago
dodgy popups that encourage you to "join Free as a Bronze member" :/
Wintamute 14y ago
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 14y ago
  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.
charonn0 14y ago
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_zpsbd44ed4c.png?t=1363194084 http://i51.photobucket.com/albums/f351/charonn0/vtlogin_zpsb...
- marssaxman 14y ago
  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.
- mikeyouse 14y ago
  Not to mention they're impossible to use on a mobile device.. They frequently omit the little 'x' in the corner to close them out, they're rarely responsive, and they break zooming / scrolling. What a terrible little login mechanism.
dennisbest 14y ago
This guy has ads all over his page. Pointless social icons. A fixed footer. Captcha. Talk about the pot calling the kettle black.
Meltdown 14y ago
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!
sujeetsr 14y ago
This website looks like Guy Fieri designed it.
aw3c2 14y ago
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 http://i.imgur.com/H6gDIZz.png Both are perfectly readable and big on my screen.
anigbrowl 14y ago
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.
gesman 14y ago
Most of these lousy designs were invented and successfully used to irritate countless users way before HTML5 :)
aakash 14y ago
Add to this- websites unnecessarily sticking table headers, navigation menus, sidebars (gmail!).
tterrace 14y ago
Here's a throwback to the bad old "best viewed in 640x480" days from pcmag: http://i.imgur.com/TJEMjvy.png http://i.imgur.com/TJEMjvy.png
jQueryIsAwesome 14y ago
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.
peachananr 14y ago
Although some of the points aren't really related to HTML5 but these are annoyance that we all can agree on, should go away.
mgcross 14y ago
"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.
just2n 14y ago
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.

266 points by choult 14y ago

grimtrigger 14y ago

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

vrkr 14y ago
I agree, this is not due to HTML5 but poor design in some cases.
adeaver 14y ago
They aren't, it's just link bait. Every single one of these can be (and are) done with 'HTML4.x'. Next week it will be because of Javascript or jQuery or the color of the Moon on alternate Thursdays.
damoncali 14y ago
Replace "HTML5" with "increasing use of facny JavaScript and CSS3". It's just a generalization for the benefit of the semi-technical.
- zevyoura 14y ago
  "Images Used for Text," "Contrast Fail," "Mystery Meat Icons," "Missing Pages," and "Tiny Fonts" all have nothing to do with JS or CSS3, it's simply a very poorly named article.
- yuhong 14y ago
  Personally I consider even the buzzword a misnomer: http://yuhongbao.blogspot.ca/2012/07/why-html5-buzzword-is-misnomer.html http://yuhongbao.blogspot.ca/2012/07/why-html5-buzzword-is-m...

Peroni 14y ago

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 14y ago
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.

cscheid 14y ago

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.

phlyingpenguin 14y ago
This is exactly what I was thinking after dismissing the gigantic "Join FREE as a bronze member..." popup at the bottom of the screen. -- snip --: Lame pop-ups I’ve never used this site before, so immediately asking me to create a free account is absolutely pointless, and more so when the pop-up does not automatically disappear when I ignore it.
- MiguelHudnandez 14y ago
  A screenshot of the hypocrisy: http://i.imgur.com/jDLT5V4.png http://i.imgur.com/jDLT5V4.png
nicholassmith 14y ago
I was about to come and mention the same thing. On a 1440x900 monitor I was losing about the bottom 6th of my browser just to an obnoxious signup bar. Maybe they should take a note from the HTML5 and Javascript revolution and have it auto-hide after a period of time.
- Mahn 14y ago
  "That's ok, we'll just make it up for it with a 12px font-size"
moe 14y ago
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.

tokenadult 14y ago

"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/0321657292 http://www.amazon.com/Rocket-Surgery-Made-Easy-Yourself/dp/0... 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 14y ago
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 14y ago
  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!
  - visualcsharp 14y ago
    I call it "bamboozling people with bullshit."

tiredoffps 14y ago

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

thehigherlife 14y ago

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.

joshuasortino 14y ago

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

jplur 14y ago

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.

pkorzeniewski 14y ago

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/ http://www.nytimes.com/

STRML 14y ago
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 14y ago
  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.
  - joonix 14y ago
    Geocities view-sourcing. Thanks for taking me back.
  - robmcm 14y ago
    Perhaps adding a commented link in a minified file to a full version? Wouldn't be hard to automate.
    - ChrisLTD 14y ago
      I've added that to a site I'm about to launch. Seems like a good compromise.
  - networked 14y ago
    Source maps in JavaScript are a cool idea. More people should know about them [1][2]. [1] See, e.g., http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ http://www.html5rocks.com/en/tutorials/developertools/source... [2] ...or http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/ http://net.tutsplus.com/tutorials/tools-and-tips/source-maps....

LandoCalrissian 14y ago

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 14y ago

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.

gallerytungsten 14y ago

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

pyalot2 14y ago

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 14y ago
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.

kabdib 14y ago

Warning: Some of the linked-to sites are hosting malware. Huh . . . is this another bad HTML5 trend? :-)

eksith 14y ago
Confirmed it happened to me as well.. Specifically on the "Dubious animation" section kikk.be ( DO NOT CLICK ) : http://kikk.be/2012/home.htm http://kikk.be/2012/home.htm

okamiueru 14y ago

What does the 404 error have to do with HTML5?

bjudson 14y ago
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."

ericcholis 14y ago

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/ 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 14y ago
"Hidden navigation on http://orangesprocket.com/ 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.
romaniv 14y ago
You would be surprised how may designers dismiss basic usability concerns by saying something along the lines "this is an app, not a website". Every wave of technologies carries a certain culture with itself. A lot of the things in the list are quite characteristic of HTML5 culture. I agree on 404s, though.
vacri 14y ago
I was also thinking what a 404 has to do with design decisions. "Oh, and we'll put a link here that goes to a 404, that's popular these days!"

wladimir 14y ago

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 14y ago
Not "some" but first and foremost Blogger from Google. Awful.

ebbv 14y ago

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

dizzystar 14y ago

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 14y ago
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.
- LoganCale 14y ago
  The placeholder attribute in recent versions of Chrome behaves the same way—possibly longer, but I only started noticing it recently—the placeholder remains in the field until you've typed a character.
- peterjmag 14y ago
  I still think inline labels are a bad idea, regardless of placeholder behavior. To quote myself: https://news.ycombinator.com/item?id=4642146 https://news.ycombinator.com/item?id=4642146
- ghjook 14y ago
  >This. Hi, samefag.
aw3c2 14y ago
Also if you filled it out and accidentaly moved back or forward in browser navigation, then go back to it and your browser fills it, the Javascript often removes your text.

cshenoy 14y ago

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.

seivan 14y ago

I am still waiting for marquee to be trendy :)

JungleGymSam 14y ago

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

SonicSoul 14y ago

here is some timeless web design advice that i wish did make a comeback in html5 http://www.homestarrunner.com/sbemail51.html http://www.homestarrunner.com/sbemail51.html

jsavimbi 14y ago

Ah yes, being lectured by a 'consultancy' that provides little insight and much web annoyance in their own views.

mnicole 14y ago

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 14y ago
As a small aside, I often upvote the HN submission if the discussions are valuable -- independent of the actual linked content.

danielhunt 14y ago

"Lame popups" - interesting how this is mentioned mere seconds after I dismiss a lame popup. God, how I hate those things

Yhippa 14y ago

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

fdej 14y ago

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.

LandoCalrissian 14y ago
The thumbnail one drives me crazy. All I want to see is the original full size image, yet many sites make this incredibly difficult to do for now reason. Not really an HTML5 problem though, just a general image gallery problem.
lttlrck 14y ago
And many "lightboxes" suck on mobile.
ereckers 14y ago
The marketing guys think it adds pop.
apendleton 14y ago
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 14y ago

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>

CHsurfer 14y ago

Speaking of lousy web design trends... This page is unviewable on my Opera Mini browser.

lutusp 14y ago

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

antidaily 14y ago

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

Kronopath 14y ago

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

chimeracoder 14y ago

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.

bicknergseng 14y ago
I was wondering how far down I'd have to scroll before I saw the "disable Javascript" complaint.
KaeseEs 14y ago
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!

countessa 14y ago

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

Wintamute 14y ago

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 14y ago
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.

charonn0 14y ago

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_zpsbd44ed4c.png?t=1363194084 http://i51.photobucket.com/albums/f351/charonn0/vtlogin_zpsb...

marssaxman 14y ago
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.
mikeyouse 14y ago
Not to mention they're impossible to use on a mobile device.. They frequently omit the little 'x' in the corner to close them out, they're rarely responsive, and they break zooming / scrolling. What a terrible little login mechanism.

dennisbest 14y ago

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

Meltdown 14y ago

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!

sujeetsr 14y ago

This website looks like Guy Fieri designed it.

aw3c2 14y ago

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 http://i.imgur.com/H6gDIZz.png Both are perfectly readable and big on my screen.

anigbrowl 14y ago

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.

gesman 14y ago

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

aakash 14y ago

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

tterrace 14y ago

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

jQueryIsAwesome 14y ago

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.

peachananr 14y ago

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

mgcross 14y ago

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

just2n 14y ago

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.