"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.
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.
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.
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 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 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.
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.
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.
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??)
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.
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.
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.
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.
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.
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.
I personally like Socialite.js.[1] I'm the tech guy for a pop culture blogger,[2] and it's in use there, with a small customization to trigger on hover rather than on a click. It feels polite to the privacy-minded (like me), legal all around the world, and it uses less CPU and bandwidth by default.
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.
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.
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!
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.
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.
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?
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.
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.
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...
"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,"
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!
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
"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."
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.
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.
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."
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.
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.
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.
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.
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.
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.
144 comments
[ 4.1 ms ] story [ 229 ms ] threadNext week it will be because of Javascript or jQuery or the color of the Moon on alternate Thursdays.
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.
-- 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.
http://i.imgur.com/jDLT5V4.png
Maybe they should take a note from the HTML5 and Javascript revolution and have it auto-hide after a period of time.
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 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.
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.
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
[1]: http://en.wikipedia.org/wiki/HTTP_ETag#Tracking_using_ETags
Obviously, rulesets should be tuples of (source pattern, resource type, destination pattern), not silly lists ("allow google.com", huh?) like most browser extensions do.
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??)
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.
||facebook.com^$third-party
and a couple of others (fbcdn, facebook.net etc.).
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?
https://github.com/filamentgroup/SocialCount
I'd be interested in learning about good alternatives.
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.
[1] http://socialitejs.com
[2] http://mightygodking.com
https://addons.mozilla.org/en-us/firefox/addon/requestpolicy...
http://visualwebsiteoptimizer.com/split-testing-blog/amd-360...
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
[1] http://www.luigimontanez.com/2012/actually-social-media-butt...
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.
If you live in a glass house...
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.
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.
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.
[1] http://www.nytimes.com/
Maybe sourcemaps will help with that in the future.
[1] See, e.g., http://www.html5rocks.com/en/tutorials/developertools/source...
[2] ...or http://net.tutsplus.com/tutorials/tools-and-tips/source-maps....
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.
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.
source: http://www.nytimes.com/marketing/prototype/
Another example Google has a lot of smart people but they cant parse a robots.txt file with a BOM in it.
It's really, really not hard to use image sprites (not necessary here); merged JS and merged CSS.
"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."
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.
Huh . . . is this another bad HTML5 trend? :-)
Specifically on the "Dubious animation" section kikk.be ( DO NOT CLICK ) :
http://kikk.be/2012/home.htm
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 agree, calling it html5 is a bit off, but the complaints are justified.
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.
Please use labels, people. I have no idea why he didn't include that in this article.
Apple has a nice solution to this issue on their checkout pages - labels placed on top of inputs, only disappearing once text is entered.
Hi, samefag.
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.
http://www.homestarrunner.com/sbemail51.html
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.