Are web sites identical? / journal / hicksdesign

28/07/04

Are web sites identical?

FranÃ§ois Briatte has wondered this, which led him to conduct a survey of 10 CSS designers web sites and their similarities. The results are really interesting reading. Eric Meyer made the suggestion that we explain our reasons for our choices, and there a few points where I feel I’m a bit lacking.

Here are the ones I wanted to briefly comment on:

Are links underlined?

No – I still uhm and ahh about this one. There are good basic usability reasons for underlining links, but I haven’t yet brought myself to do it. I don’t like seeing links underlined, it breaks up the text too much for me. I know precious visual sensibilities should take second place, and I might reconsider this one.

Are hovered links underlined?

No – although they could be. Add to the ‘to do list’.

Do visited links differentiate?

No – but this will be sorted in the new design (if it ever sees the light of day)

Is the main text on white background?

Yes – This is mainly because:

I like white. White is crisp, clean and looks good. There’s not enough white in the world if you ask me.
What doesn’t work on white? Just white (oh, and maybe pale yellow).
My colorblindness can make me a bit unadventurous with colour.

Is the main text sans-serif?

Yes – I believe its easier to read body copy on-screen in sans-serif. Strangely, this is the opposite of print design.

Is the DOCTYPE Strict?

Yes – this was a exercise in smugness, dressed up as ‘learning about W3C specs’.

Do they use accesskeys?

No – I did originally have oodles of accesskeys, but recent thinking has made me shun them. Basically, there just aren’t enough spare keys around.

Do they use ‘Steal these’ buttons?

No – but as FranÃ§ois pointed out, I did until recently. These little things are everywhere. I felt the time was right to make my own.

Is there a print style sheet?

No – Something else I haven’t got around to doing. Silly really, it wouldn’t take long to knock up a basic print stylesheet. Another one for the list.

Is there a 404 page?

No – although I did have one until recently. My move to Textpattern has meant that I needed to rethink how I made my 404 page. Another one for the list.

That concludes the case for the defense m’lud. One issue I’m particularly keen to know your opinions on, is whether links should be underlined? What do you expect when you see to denote a link? Let me know your thoughts…

Technorati Tags Tags: css, design, surveys, webstandards

Comments | RSS

Ryan Brill said 1457 days ago:

I wouldn’t call myself a usability expert, so my opinion is simply that – my opinion. Anyway, as long as the links are differentiated enough from the rest of the text, and especially if they have a :hover state, I’ve never had a problem knowing what was and was not a link. I wonder if anyone has done any usability testing on this, to see if users really have a problem finding links if they are not underlined?

Jeff Clark said 1457 days ago:

I’ll agree with Ryan on this one. I don’t even mind so much about differentiating the :visited links. If the link text is descriptive enough and you have the memory of a small sea lion, you should be OK.

Joen said 1457 days ago:

If your aim is to have a totally usable website, there is no way around it, you have to have underlined links. This is also a good idea if you aim to get many “new” users from googlebait or word-of-mouth.

However, I personally don’t visit hicksdesign for usability and underlined links. I visit for the lovely design, and the talking about it. I find that your current link differentiation is good enough. Furthermore, I completely agree that underlined links tend to break up the text.

As such, it’s your choice as the designer whether the links should be underlined.

Ryan Mack said 1457 days ago:

I decided not to use underlines as well, hoping that the usual blue link color and an underline for the :hover state would be enough.

Douglas said 1457 days ago:

A hover state is the main “I’m a link” thing for me. If something has a hover state, and it doesn’t do something when I click on it I think one of two things: a) the site is broken, lets see if it works in IE, or b) This designer is and idiot. For example: thetrainline.com where every paragraph of text goes bright green (on a white background) when you move the mouse over it.

I am stating to like the border-bottom underlines, they tend to look better than the real underlines, especially if combined with a larger than average line-height. There is noting wrong with the links on your site, it is obvious they are links, bold coloured text on key words is almost as link-like as underlines.

Douglas

Josh King said 1457 days ago:

As Joen alluded to, the individuals visiting hicksdesign are probably designers/web professionals which gives you more lee-way to experiment than say a website dedicated to senior citizen prescription drug benefits. I would be so brash as to assume that a huge majority of your visitors are web literate and therefore you can safely forgo a lot of the usability niceties aimed at less experienced users.

Personally, I like underline only on hover. I also appreciate sites who utilize visited link distinction (I have my history set to remember 90 days worth) as it lets me know that I’ve already been to a page. 404 pages can be really handy if done well, but I hardly ever see this in practice.
—Josh King

JD said 1457 days ago:

My opinion is simple and short.

Links MUST be underlined.

It’s just so much easier than using your mouse and hovering over link to verify that it’s indeed link.

[p.s.: when I press Tab in this Comments box, it doesn’t go to Submit instead it goes somewhere on top of screen. Why?? Btw, I am using IE!]

Greg K Nicholson said 1457 days ago:

I actually use serif text for links, among sans-serif body text. A (dotted) bottom border appears on hover (although IE and Opera’s dotted borders look ugly as sin).

Sean Devine said 1457 days ago:

I’m a links-should-be-underlined kinda guy, but I think that you should do whatever the heck you want to. Your blog is one of the most distinctive and admired sites on the web and I like a little visual variety.

I can’t wait to see the new design.

#10

Yannick L. said 1457 days ago:

I think your links are fine the way they are. No need for underlines. As long as they are of a different colour from the text, I’m cool with it.

But I can see that for persons who may be colour blind that the underlines could come in handy.

As Sean said its your blog so you can do what you want.

#11

Geoffrey Smith said 1457 days ago:

I think the underlining of links really depends on where the link resides. If you are linking from within a paragraph of standard text, then yes, underlining makes really good sense. But to underline a long list of navigational links doesn’t really help the user, and in my opinion hinders readability. The links are obviously links because they are displayed in the context of navigation. If everything has emphasis, then nothing does, so what’s the point? Underlining works best when it draws attention to itself, not when it becomes part of a link farm.

#12

Clive Walker said 1457 days ago:

Links should be differentiated from the main body text. Whether you want to use an underline to do this or another color – that’s up to you. In the ‘old days’ when we were all newbies to the web, links were always underlined. It would be kinda boring if we went back to that approach.

#13

Neko said 1457 days ago:

Should links be underlined? Yes. And for some strange reason, whenever I can I make links blue, visited ones purple and active ones red, like it was during the old times.

#14

David House said 1457 days ago:

Yes, of course! Many people read underlined text as links (incidentally why I don’t like people underlining their ins tags), and non underlined text as non-links, no matter what the colour. It takes a rather web-savvy user to detect links if they aren’t marked using the convention. I don’t go as far to say blue, purple and red all the way, but I do think underlining is necessary.

You could do what I do and take underlining off on hover, if you want.

#15

James said 1457 days ago:

Hi,

With my designer hat on (amateur designer) I tend to agree that underlined text within paragraphs is not a great look.

However, with my web user hat on I prefer links to be underlined, if only to give an extra visual clue that you can click them.

The big no-no (IMO) is underlining text that isn’t a link. In my mind when I see underlined text, I want to be able to click it.

#16

Krzysztof said 1456 days ago:

404: make new section and call it ‘error’. make new page, ‘error’.
section error uses page error, is not selected and not on the front page.
Post new article in the section error, call it… ‘error’ and put there anything you want in your four-o-four page.
To the .htaccess file add ErrorDocument 404 /error
Voila!

#17

Peter Zignego said 1456 days ago:

Hmm…well, the fact that your links dosn’t bother me at all, because, there is no mistaking what is a link and what isn’t a link here. Not only are links a different color, but they are bold, and change color on hover. I do think though, that perhaps a underline on hover would be a nice touch just for further clarification.

#18

Sipke said 1456 days ago:

Krzysztof, you got the answer to my question, too. I have the same thing on my todo list as John, and you solved it. And how easy… :)
Your site is great btw.

#19

Laurens Holst said 1456 days ago:

I beg your pardon? You don’t have access keys?

Then explain to me why on your site the cursor moves to your darn search box instead of showing my RSS reader when I press ALT-S ??? :)

~Grauw

#20

Jon Hicks said 1456 days ago:

Krzysztof – thanks, but thats how I created all the different site contents. It was information that I wanted to put into the page that was dynamic thats been troubling me. I think I just worked it out though.

So the consensus so far has been “As long as its clear”. I agree with this sentiment. I do think a less web-savvy user might not ‘get it’, but come on, we have to move on and not molly coddle or patronise our users. We need to move on from these early conventions.

Agreed on not using underlined text for other reasons too. Apart from the the confusion aspect, I just think underlined looks crude and inelegant.

#21

Jon Hicks said 1456 days ago:

Laurens – oh, apart from that one…

#22

Ben Lumpkin said 1456 days ago:

Once again I think a usability issue like this boils down to who you audience is. Jon if your site was an e-commerce site, I would suggest underlining links just to keep users from guessing. (Especially since your audience could be a wide group of age ranges)

However, this is your website, so you must realize who are you designing for? If you are not designing for the “less web-savvy user” then you shouldn’t worry about it…

#23

Faruk Ates said 1456 days ago:

Is the main text sans-serif?

Yes – I believe its easier to read body copy on-screen in sans-serif. Strangely, this is the opposite of print design.

I wouldn’t consider that strange at all – Serif fonts use very tiny little additions to (most) letters to make them more readable, but where Print is generally in 300 DPI, text on a monitor is usually only at 72 DPI. “Tiny differences” on a monitor means big chunks (relative to the rest of the text), and that – obviously – hinders legibility.

#24

ramanan said 1455 days ago:

I recently fixed the problems I was having with a custom 404 page in Textpattern. You can read about how I did so if you are so inclined. Basically you just need to add some checks to the pretext function in the publish file.

#25

Andrew Stewart said 1453 days ago:

any text that needs to be highlighted or made more prominent should not be underlined. change its colour, make it bold – but just don’t underline.

#26

Jon Hicks said 1452 days ago:

Thanks Ramanan, thats really helpful!