A Single Article
Read it, comment, and share it with your friendsBad Ideas of Web Design
Let’s talk about bad ideas. Not the bad ideas we all know about, like using Flash for navigation, making sites Javascript-dependent or using inaccessible techniques like layout tables and captchas. I’m talking about the bad ideas that get in the minds of standards-based developers. These are things that even popular galleries like Stylegala will overlook, but you can take my word for it: they truly are bad ideas.
Let’s begin:
Display-on-hover Content
With IE 7 on the horizon, some CSS designers have begun to use the :hover pseudoclass on more than just links. I have seen a few light-on-dark blogs that have entire entries with very dark text that gets lighter when you hover it, so that you have to hover over each entry to actually read it. This is a very bad idea. As cool as this “look-what-I-can-do” cheap CSS trick might seem to the designer, it’s anything but cool to the user. No user should have to hover over everything on your webpage to actually read it. Some users don’t even use their mouse (or other pointing device) to navigate. For those users who rely on their keyboard instead, these sites really break their flow. Just remember: :hover is just for calling attention. Don’t use it to kill usability.
SIFR’d links
If you are going to take the sledgehammer to the task of headings and other small bits of text, at least recognize that it is still not suited for links. As many usability experts have noted, Flash links still do not provide the following functionality:
- browser right-click (contextual menu)
- option/apple click
- status bar information
These may not seem like a big deal, but they make SIFR’d links far less usable than the rest of your links. Just the fact that they behave differently from other links on your page makes them confusing. Until Flash can handle these usability issues, SIFR’d links remain a bad idea. Actually, any technique that makes links not behave like links is a bad idea.
Tiny Text
Many designers don’t care one bit about text size because they don’t actually read the sites they are producing, and insist on cramming a lot of content into a tiny space. Believe it or not, users don’t prefer tiny text. You may not have compassion for your users, but reading text on computer screens is far more difficult for the eye than text on paper, and tiny text makes it even worse. The most comfortable text size for users is their default setting, also known as 1 em. I don’t recommend going any lower than .8 em, and I certainly don’t recommend using device-dependent units such as px and pt. I know there are many popular sites in the wild that are Flash-based and use text as small as 5 pixels high, but I would venture that people usually don’t read that text at all, and any users who can’t read that small to begin with will just hit their back buttons and leave. If you want to actually reach users and make your site successful, use a text size that most users will agree with.
Low Contrast
Why anyone would make a site with low contrast is beyond me. If you can’t tell whether your website is readable or not, use a tool like Graybit to get a better idea. Remember the following points about contrast:
- Not all monitors are as bright and crisp as your fancy big screen display
- Laptops reduce their brightness and contrast when in low-power mode
- A lot of people have color blindness, and many more can’t distinguish small differences in contrast
Slow Loading
As broadband has become more common, many designers have gone without giving any thought to load times for their web pages. It can be very easy to fill a site with large images, heavy Javascript files and videos, but that doesn’t mean you should. I can’t stand when I browse a site I like on a slow wireless network or on a computer that only has dial-up and have to wait more than ten seconds for even the basic content to load. I recommend that all designers use a tool like Sloppy to see if their sites are fast enough on slow connections.
Image Dependence
I’ve seen sites that do something like the following:
- Use a white background
- Use white text
- Use a dark image for the background on the text
Guess what happens when the user has images disabled, or when the image is taking too long too load: nothing, because you can’t even tell there is text there. Use a simple tool like the Web Developer Extension to turn off images and see if your page is still accessible. It only takes a second to check.
Resolution Dependence
(Of course I would include this one)
Walk through your local computer store and look at the wide range of screen sizes and resolution options that are available to customers today. Viewports come in all sizes, and it’s impossible to say whether any specific resolution is the best choice for a site. As browser support for flexible width techniques such as max-width becomes more prevalent, it’s a good idea to give at least those users with good browsers a flexible design.
Flexible Layouts Without max-width
Last but not least, if you have gone through the trouble of making a great-looking flexible design, please don’t forget max-width. Here are the two scenarios that should be avoided:
- A liquid layout without a defined
embased maximum width has the potential to get horribly wide at large viewport widths and be difficult to read (see Ideal line length for content). - An elastic layout without a defined percentage based maximum width could go past the viewport width at large text size and be difficult to use.
In either case it is important to set a restriction on your flexible design. The following two setups will ensure that liquid and elastic designs alike remain tamed:
#container { width:XX%; max-width: XXem; }where themax-widthensures a reasonable line-length at any text size.#container { width:XXem; max-width:100%; }where themax-widthensures that the layout does not extend past the viewport at large widths.
And for definite bullet-proofness, it’s always best to make columns within a container a percentage based width of that container, so that they do not break when the container reaches a limit, regardless of what the units are for the container width.
Is that all?
Probably not; I’m sure there are other bad ideas that fellow standards-based designers have noted. What are your don’ts of web design?
Get a Trackback link
17 Trackbacks/Pingbacks
Other blogs referencing this article37 Comments
Responses to my articleTo qualify myself, I should mention that even I have been guilty of some of these mistakes; some are easy to make.
It is easy to make the mistakes you mentioned and often times there’s no way around it. Excellent suggestions. My biggest pet peeve is flash intros that have a skip option (who doesnt skip it?).
Thx for the list. I didn’t even think about such using of max-width.
You mention some good points and in practically all cases I agree. However, content displayed on hover is a critical point.
I agree that if there is content, you should be able to read it, but what about words or sentences that help navigating the site for people who are not used to special web-gimmicks?
On my website, for example, you can click the Header to take a lift to the bottom where all the navigational stuff is. If you hover the heading (and do not use IE), you can read Michael’s Remarks ‹ Klicken! which means that you should click here. I think this hint is okay. So what is your point on content that behaves like hints - displayed on hover?
Michael, you are talking about something different. What I am reffering to is sites that are totally dark and you have to illuminate blocks of content to read them. The “Noteworthies” section of elliotswan.com is just one small example; I’ve seen worse offenders.
Completely unrelated, you wouldn’t happen to know of any apartments available in Frankfurt, would you?
Sorry, no. I am about 375 miles away…
LOL oh well thanks anyway.
Amen to the point of Image Dependence. I just hate having to wait for a big backgroundimage to load before I can read the text with enough contrast.
The good thing is that most of the time this happens with css based sites so I can just disable the stylesheets an read the text unstyled.
U’r right for all these above, and nice design here. Yet my main problem in web browsing and damn design idea I’ve ever met: too much ads and popups.
I will feature this excellent article in The Web Design Journal within a few days time.
I think this is a great summary of new Web accessibility issues that have become far to popular over the last year/year and a half.
Great rundown. Thanks!
I totally agree with the resolution and text size parts. I use 2048×1536 on a regular basis. Fixed layouts take up half or less of my screen. And text that you think is small is very unreadable for me. It always irritates me when web designers take the easy way out and make websites incompatible with big resolutions or browsers besides IE. As for max-width, I tried it once and it didn’t work quite how I wanted so I found a script that switched stylesheets based on resolution.
I have found myself a victim of nearly all of these bad ideas.
I don’t think all of these are necessarily always bad ideas, sometimes they really don’t make that much of a difference. You just have to know who your audience is.
Using my site as an example (since you already did), the Noteworthies was not just to show off some cheap :hover effect. On my monitor and other LCDs that I checked, it is easily readable without hovering. However, CRT monitors tend to be much darker than LCDs, so I up the contrast on hover for them. And yes, it looks cool too–so what? There’s nothing wrong with that. If most of my audience was using really dark monitors, then yeah, I’d have a problem. But most people who’d want to read anything I write aren’t going to be on something like that.
The slow loading is just another case of knowing your audience. If you have a web development or graphic design site that talks about all the latest trends and whatnot, do you really think you’re going to have a bunch of dialup users on it? Or what if you offer music streaming (such as purevolume), do you really think a few extra images or effects is going to turn off users who are planning on downloading huge files?
The sIFR can, actually, function just like normal links with some tweaking. But really, it’s not the end of the world if you can’t see the url in the status bar. You know (or at least you should know) it’s just going to go to the blog post. Though I do agree that the middle/apple/control click can be a little annoying sometimes.
Just my $0.02.
Thanks for that link, Elliot, it looks like something that probably ought to be worked into the next sIFR release.
I hate to bite the hand that’s feeding me all this useful information, but one of the most basic graphic design tenets is the decreased readability of light text on a dark background. Sure, it makes headers stand out, but this article, for example, is a lot more difficult to read than it should be. That’s probably my most common web-usability pet peeve, as it often entails workarounds such as highlighting text to reverse it out or copying and pasting to a text editor.
Yeah, I’ve been hearing that a lot lately. I’m thinking I’ll redesign this layout with a reverse dark-on-light color set. I just don’t know how soon I’ll be able to do it. Thanks for the feedback.
One simple thing all designers can do to catch a lot of these bad design choices is to simply hit “print” and see what comes out. You’d be amazed what happens sometimes when the background images disappear, leaving your contrast and color choices bare.
(great article btw, should have said that above)
I aggree with all of your comments, and most of these mistakes I have committed in the past. Thanks for pointing them out again!
You have a white-text-on-black-background blog and you write an entry on bad ideas of web design? Ho ho ho.
Actually, it’s light gray on dark gray. And I only did it so I could make it on Light on Dark. I’m cheap like that.
all true christian, and I’ve sinned myself. i do try harder nowdays though and commend you on your article.
Hi
Thanks for that read, it was enjoyable, straight shooting and clearly states the difference between hacks and people who actually want to make a difference. I will definatly post an entry in my blog about this.
Ive also followed some of the links youve included and downloaded some of the tools to help me become more aware of the problems you stated.
Thanks again
max-width is not supported in every browser
dedenf: Is there anyone who does not know that? I probably should have mentioned work arounds for that issue, but I’ve already written about that elsewhere. My point was to at least implement max-width for browsers that support it.
Max-width is all well and good - but IE6 doesn’t support it!
Oh noes!
Er - what?
OK dedenf and Jacob, I’ll play.
My point with max-width was to encourage web designers to implement max-width for the supposed 10% of users on the web who use a browser that supports it. At least if 10% reap the benefits, it’s better to have it than not have. 90% of users might still be using IE, and maybe 1% of them have a display wide enough to actually suffer, but it’s their fault for torturing themselves with a crappy browser. There are tons and tons of ways to make things better for IE, but lately my solution has just been to make any layout fixed in IE.
Don’t forget you can use “expression” in IE to make up for the lack of max-width. Sure it’s dirty, but you can bury the code in ie.css and pretend it doesn’t exist
i agree with you christian, it just that not using max-width it doesn’t mean its a bad design ideas
btw, i love your mario bros design it’s remind me of my old and lovely nintendo machines.
thanks for sharing chris
Point taken, there are some liquid sites that do allright without max-width.
I’m glad you like the design
Uh? Realistically you have to cater for the majority who are using IE (actually it’s currently around 61%) if you want to please your clients.
Of course I agree that “At least if 10% reap the benefits, it’s better to have it than not have”.. yes - thank goodness IE7 supports min-width and max-width CSS properties… but if you design for “the web” then you’re designing mostly for IE6 at the moment.
I’m not sure that only “1%” of people using IE have wide displays.. that’s not my experience, though the figure admittedly is probably pretty small-ish.
As for “it’s their fault for torturing themselves with a crappy browser”, I can’t say to my client, “Oh, well, no it doesn’t look right because, you see, you and all your customers are actually using the wrong browser..”
And what do you mean “my solution has just been to make any layout fixed in IE”? “In IE”? You make a layout, and if it gets seen then generally it’ll be seen in IE most of the time. You can’t make a fixed layout “for” IE.. you have to make a layout that pleases the largest frequency of browsers according to your demographic, and whatever that demographic is, it’s still bound to be one that’s “mostly IE viewers”.
All points taken Jacob. I never talk in “client-serving mode” when I talk about CSS issues because I assume that my readers know my ideas are usually not applicable to client work. To be honest, I rarely design liquid sites for clients myself; it’s just hard to please the client with a visual design without making it fixed-width. As for making a liquid layout fixed in IE, it’s not that bad. Most sites are fixed-width anyway, and with said site using max-width in other browsers, very few users, if any at all, actually realize that it’s fluid.
And making a layout fixed in IE doesn’t displease IE users. They usually never know
Pretty nice site, wants to see much more on it! :)s
Nice blog. I’m gonna get one too
Impressed!!!
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.