Lousy web design trends that are making a comeback due to HTML5(econsultancy.com)
econsultancy.com
Lousy web design trends that are making a comeback due to HTML5
http://econsultancy.com/uk/blog/62335-14-lousy-web-design-trends-that-are-making-a-comeback-due-to-html5
144 comments
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.
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.
> 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.
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.
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
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
This is actually being used to comply with data privacy laws here in Germany, in a way. Right now it's not entirely clear whether it's legal to use these social buttons, so to be on the safe side, many sites opted for this "click to enable" system.
That's actually a really nice solution to that. Done correctly I bet it helps the page load faster too.
Learn to block Javascript selectively, for instance using NoScript you can block JS from Facebook unless you actually are on a facebook.com domain. This gets rid of the annoying social button functionality.
Disable 3rd party cookies, tracking woes averted.
As a simple example, the hit gives them your IP address. Often, this is all they need in order to identify you. (My IP address is technically dynamic, but remains fixed for weeks at a time. And... even if I use a different browser to sign into Facebook, they still have that IP address as well as the relevant timeframe for my possession of it.
I could spin up a VM and route the FB or non-FB traffic through a proxy, but I haven't reached that point, yet. (Probably, foolishly and to my detriment...)
P.S. In other words, state is already stored on their servers, not (or rather, in addition to) your browser.
I could spin up a VM and route the FB or non-FB traffic through a proxy, but I haven't reached that point, yet. (Probably, foolishly and to my detriment...)
P.S. In other words, state is already stored on their servers, not (or rather, in addition to) your browser.
Unless they use any other tracking system, like ETags[1].
[1]: http://en.wikipedia.org/wiki/HTTP_ETag#Tracking_using_ETags
[1]: http://en.wikipedia.org/wiki/HTTP_ETag#Tracking_using_ETags
Disable fetching any third party resources of all sorts, problem solved.
Obviously, rulesets should be tuples of (source pattern, resource type, destination pattern), not silly lists ("allow google.com", huh?) like most browser extensions do.
Obviously, rulesets should be tuples of (source pattern, resource type, destination pattern), not silly lists ("allow google.com", huh?) like most browser extensions do.
I am using Ghostery, which does a pretty good job of intelligently blocking (and also notifying me) of trackers.
However, there are some sites that stupidly execute JS that is vital to the running of the page after attempting to initialize Google Analytics or other services. The end result is that they get a "Cannot call method 'bleh' of undefined" error which prevents the rest of their JS executing, hence broken page. If I'm really interested in actually loading the page, then I have to resort to allowing the trackers to run. sigh.
Unfortunately, I can't see how this could be averted, stopping short of an extension which catches all uncaught exceptions, then tries to forcefully remove all JS which is meant to interact with 3rd parties. It could be done either via pattern matching, because Google Analytics code looks much the same on most peoples sites, or it could be through something more fun, like https://github.com/mattdiamond/fuckitjs (who would of thought there would actually be a proper use case for something like that??)
However, there are some sites that stupidly execute JS that is vital to the running of the page after attempting to initialize Google Analytics or other services. The end result is that they get a "Cannot call method 'bleh' of undefined" error which prevents the rest of their JS executing, hence broken page. If I'm really interested in actually loading the page, then I have to resort to allowing the trackers to run. sigh.
Unfortunately, I can't see how this could be averted, stopping short of an extension which catches all uncaught exceptions, then tries to forcefully remove all JS which is meant to interact with 3rd parties. It could be done either via pattern matching, because Google Analytics code looks much the same on most peoples sites, or it could be through something more fun, like https://github.com/mattdiamond/fuckitjs (who would of thought there would actually be a proper use case for something like that??)
For some of the bigger ones the extension could try to keep some dummy scripts that match the api properly. e.g. make it look like GA started but not actually send them anything at all. Though that sounds like a cat and mouse game.
I do this using the RequestPolicy addon for Firefox.
that could break a lot of sites that use a cdn for speed :-(
>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?
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?
[deleted]
Heise implemented and opensourced just this week sth very similar to what I've posted: http://www.h-online.com/features/Two-clicks-for-more-privacy...
> Is there a ready-made solution for this?
https://github.com/filamentgroup/SocialCount
I'd be interested in learning about good alternatives.
https://github.com/filamentgroup/SocialCount
I'd be interested in learning about good alternatives.
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.
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.
The RequestPolicy plugin fixes that.
https://addons.mozilla.org/en-us/firefox/addon/requestpolicy...
https://addons.mozilla.org/en-us/firefox/addon/requestpolicy...
Exactly. I block them. I just hope "the web" continues to be "open" enough to allow me to do so.
I have a big screen and I didn't see any of the social ad's or even the pop up at the bottom. It was only going back and actually opening my eyes that I noticed it.
I think this is why such buttons are so ineffective. They have been used so badly for so long a lot of people just completely ignore them. Its a bit like ad's on the side of pages. A lot of people won't even register they are there.
I think this is why such buttons are so ineffective. They have been used so badly for so long a lot of people just completely ignore them. Its a bit like ad's on the side of pages. A lot of people won't even register they are there.
Whether or not you actually click on them, you are "using" them. Last I checked (admittedly, a couple of years ago), if you've used that browser to log into facebook and haven't cleared your cookies (or configured / installed a privacy add-ons), facebook is able to associate that page view with your account through the like button on that page. They bypass the 3rd party cookie mechanisms that are suppose to be in place to prevent this.
If anybody knows if this is has changed, please chime in. I'd love to know.
edit: whoops, looks like somebody made the same comment before me, so i assume its still something they do: https://news.ycombinator.com/item?id=5369214
If anybody knows if this is has changed, please chime in. I'd love to know.
edit: whoops, looks like somebody made the same comment before me, so i assume its still something they do: https://news.ycombinator.com/item?id=5369214
Emphatically: yes. Those who collect stats on them find that they contribute a substantial portion of shares.[1] People rant against them often, probably because they wish they weren't effective, and they might not personally click them. But others do.
[1] http://www.luigimontanez.com/2012/actually-social-media-butt...
[1] http://www.luigimontanez.com/2012/actually-social-media-butt...
I guess the social buttons are a little bit like ads on Google: we don't use them, we don't know anybody who uses them, but they are somehow used.
As a visitor, no I never use them and I seem to think no one will want to use them. However, as a webmaster, I prove myself wrong, a lot of people do use them and they do seriously become part of your site's daily traffic. So in other words, if the snake oil sells, you better carry them in your store!
The answer is... idk, really, but I do know why the social buttons are often on the left side and are in a "fixed" div:
http://visualwebsiteoptimizer.com/split-testing-blog/amd-360...
http://visualwebsiteoptimizer.com/split-testing-blog/amd-360...
I use the tweet buttons but often remove extraneous info or put what I would normally write in my tweet but keep the link. If I like an article enough to tweet it, why not add some social proof by boosting their tweet button count one higher? I think that's fair.
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.
-- 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.
A screenshot of the hypocrisy:
http://i.imgur.com/jDLT5V4.png
http://i.imgur.com/jDLT5V4.png
I must be completely jaded by this point. I had to go back and look at the site again. My mind had completely blocked out the left sidebar and the footer. This crap is so common that I don't even notice it anymore.
yes !
I looked at the join thing at the bottom and actually felt it slip out of my mind into the bin of stuff to ignore on the web.
I looked at the join thing at the bottom and actually felt it slip out of my mind into the bin of stuff to ignore on the web.
I'm being idealistic when saying this, but I really hope over the next few years that bloggers stop adding social links to sites. I don't doubt major sites like CNN will continue to flood pages with links, but it would be nice for the content generators to stop using them.
Social links are anti-social. If you really think about it, these are about taking away the interraction between people as people and instead, they funnel the content toward aggregation and mere consumption. That critical link between content creator and visitor is buffered with other rubbish so meaningful feedback is watered down.
Personally I'd rather look at their "bad" example sites than this crap. "Share", "SIGNUP NOW", "GET A FREE EBOOK" Bullshit they have plastered everywhere. How do they get the nerve to talk about UX?
If you live in a glass house...
If you live in a glass house...
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.
Maybe they should take a note from the HTML5 and Javascript revolution and have it auto-hide after a period of time.
"That's ok, we'll just make it up for it with a 12px font-size"
Their "join free" footer at the bottom is a really annoying trend IMHO. It takes up valuable content space and gets in the way. The more intrusive and annoying those popups and bars are, the less likely I am to ever actually join. I guess it must work on other people though, unfortunately...
that's what the firefox nuke anything extension was created for :)
I can think of plenty of websites that are crying out for a "twat" button.
Such as the parent link of this post…
To add to that list, I viewed the page on my (rather slow) phone, and my User Agent wasn't sufficient to get me to a mobile version of the page (assuming one exists.)
That dismissable footer covered half my screen, and the site ran so slowly that I was entirely unable to get it to dismiss.
And here I thought that relying on a browser's User Agent to make a page usable was bad form.
That dismissable footer covered half my screen, and the site ran so slowly that I was entirely unable to get it to dismiss.
And here I thought that relying on a browser's User Agent to make a page usable was bad form.
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/
[1] http://www.nytimes.com/
My god. How underpaid were the web devs of this site? They must have gotten to the point where they could proclaim "It works now!", then thats when the funding must have been got cut off. It's that or, they are just bad. Meanwhile, the site looks bad.
It's really, really not hard to use image sprites (not necessary here); merged JS and merged CSS.
It's really, really not hard to use image sprites (not necessary here); merged JS and merged CSS.
Two HUNDRED requests? How is this acceptable for a website that's so frequently accessed via mobile. With latency ~30ms you're wasting 6s before you even download anything!
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.
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.
Maybe sourcemaps will help with that in the future.
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/source...
[2] ...or http://net.tutsplus.com/tutorials/tools-and-tips/source-maps....
[1] See, e.g., http://www.html5rocks.com/en/tutorials/developertools/source...
[2] ...or http://net.tutsplus.com/tutorials/tools-and-tips/source-maps....
Geocities view-sourcing. Thanks for taking me back.
its old school publishers who often have very little idea what they are doing and have sclerotic development processes 9 week sprints! in one case.
One site I worked on did not manage to sort out a redirect of its .net version of its domain and its over 2 Years since a flagged this as a high priority problem.
One site I worked on did not manage to sort out a redirect of its .net version of its domain and its over 2 Years since a flagged this as a high priority problem.
Yes, but the New York Times employs top-notch webdevs.
See http://open.blogs.nytimes.com/ and http://www.nytimes.com/projects/2012/snow-fall/
So they have the skills, but maybe it's for other reasons they don't follow those practices.
See http://open.blogs.nytimes.com/ and http://www.nytimes.com/projects/2012/snow-fall/
So they have the skills, but maybe it's for other reasons they don't follow those practices.
There is a world of difference between doing a cute vanity project that works for say 99% of the time but doesn't mean that they buckle down and do the hard work involved delivering a major publishers site.
Another example Google has a lot of smart people but they cant parse a robots.txt file with a BOM in it.
Another example Google has a lot of smart people but they cant parse a robots.txt file with a BOM in it.
The New York Times built the current site in 2006. The Times just announced that they have are working on a new site design (and presumably completely new architecture) for the last year and should release it soon.
source: http://www.nytimes.com/marketing/prototype/
source: http://www.nytimes.com/marketing/prototype/
The NYT website is not something usual. That's a website made up for a newspaper, a giant newspaper, with dozen of business, info and other resources playing a role of importance in the frontpage. But I'm with you: the web even with HTML5 can be fatty, pretty fat, but I prefer this, than Flash one, forever.
A year ago the average total transfer was something like 937kB and now it's 1311kB, at least according to these stats: http://httparchive.org/trends.php#bytesTotal&reqTotal
NYT is best accessed with JS turned off. Also Ghostery FTW in general.
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.
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.
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!"
"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.
I agree, calling it html5 is a bit off, but the complaints are justified.
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.
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.
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.
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.
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.
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.
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.
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.
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.
* 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.
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.
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.
And many "lightboxes" suck on mobile.
The marketing guys think it adds pop.
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>
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>
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.
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.
As a small aside, I often upvote the HN submission if the discussions are valuable -- independent of the actual linked content.
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.
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.
I was wondering how far down I'd have to scroll before I saw the "disable Javascript" complaint.
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!
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...
[1]: http://i51.photobucket.com/albums/f351/charonn0/vtlogin_zpsb...
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.
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.
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.
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.
Please use labels, people. I have no idea why he didn't include that in this article.
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.
Apple has a nice solution to this issue on their checkout pages - labels placed on top of inputs, only disappearing once text is entered.
I still think inline labels are a bad idea, regardless of placeholder behavior. To quote myself: https://news.ycombinator.com/item?id=4642146
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.
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.
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.
How are any of these (except maybe the autoplay) due to HTML5?
I agree, this is not due to HTML5 but poor design in some cases.
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.
Next week it will be because of Javascript or jQuery or the color of the Moon on alternate Thursdays.
Replace "HTML5" with "increasing use of facny JavaScript and CSS3". It's just a generalization for the benefit of the semi-technical.
Personally I consider even the buzzword a misnomer:
http://yuhongbao.blogspot.ca/2012/07/why-html5-buzzword-is-m...
"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.
"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...
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.
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...
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.
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.
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!
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.
Not "some" but first and foremost Blogger from Google. Awful.
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."
"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."
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.
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.
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.
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.
These trends are not because of HTML5. They are because of poor design decisions.
Decent criticisms but I could make a list about 50 items long of the problems with their own website. Glass houses, etc.
It's ironic that this article about terrible Web designs is hosted on a site with a terrible Web design.
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.
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.
Here's a throwback to the bad old "best viewed in 640x480" days from pcmag: http://i.imgur.com/TJEMjvy.png
Bad contrast. Right. That contrast attribute should never have been approved in the spec!
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.
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.
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.
"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.
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.
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.
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.
> ...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.
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.
I didn't know you couldn't make small fonts before HTML5. Very informative, this.
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.
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.
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.
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
This guy has ads all over his page. Pointless social icons. A fixed footer. Captcha. Talk about the pot calling the kettle black.
How about the absolute "use our other stuff" bar at the bottom of their page which shrinks the viewable page content?
"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.
"...but most people do not use iPads to visit websites" Hmmm.
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.
Both are perfectly readable and big on my screen.
Warning: Some of the linked-to sites are hosting malware.
Huh . . . is this another bad HTML5 trend? :-)
Huh . . . is this another bad HTML5 trend? :-)
Confirmed it happened to me as well..
Specifically on the "Dubious animation" section kikk.be ( DO NOT CLICK ) :
http://kikk.be/2012/home.htm
Specifically on the "Dubious animation" section kikk.be ( DO NOT CLICK ) :
http://kikk.be/2012/home.htm
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!
Although some of the points aren't really related to HTML5 but these are annoyance that we all can agree on, should go away.
This website looks like Guy Fieri designed it.
I am still waiting for marquee to be trendy :)
Most of these lousy designs were invented and successfully used to irritate countless users way before HTML5 :)
"Lame popups" - interesting how this is mentioned mere seconds after I dismiss a lame popup.
God, how I hate those things
God, how I hate those things
Add to this- websites unnecessarily sticking table headers, navigation menus, sidebars (gmail!).
Speaking of lousy web design trends...
This page is unviewable on my Opera Mini browser.
This page is unviewable on my Opera Mini browser.
dodgy popups that encourage you to "join Free as a Bronze member"
:/
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.
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.