A Call for Great Websites

Polvero asked a question that, in the spirit of not-enough-caffeine (which some might call “laziness”), I thought would be best answered by all y’all: Do you have a list of personal favorites of websites that practice good design and usability hand-in-hand?

Part of why this question was overwhelming for me was thinking about how to define “usable.” If a web site strictly follows all the latest XHTML/CSS/etc. specs and recommendations, does that automatically make it “usable”? Not quite, in my opinion; you’d also want to take into account the actual interface design (i.e., if navigation is well-structured and easy to find, if the eyes are drawn to the places of most focus as intended….). Plus, there are so many things to consider (both within and without w3c specs)… file sizes of images/flash movies, technologies used, font size, colors….

So I guess what we’re looking for here is a list of “nearly perfect web sites.” Anyone want to contribute one that you think qualifies, and why?

One that I like: diveintomark.org. First, impressively clean HTML. Second, I like the clean, easy to navigate design.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.warpspire.com Brak

    IMO usability has nothing to do with the code, but rather how well the average person can find and use the features of the site.

    As for me, near *perfect* sites? Very few that I can think of. But as for some very excellent examples, sure.

    http://www.cameronmoll.com
    http://www.37signals.com
    http://www.fishmarketing.net
    http://www.31three.com

    All of these to me have a design that fits exactly the subject matter, and I can find any information I want (and more!) with the least amount of effort.

    I like to keep a section of my bookmarks devoted to just this purpose, I’ve got about 30 or so sites that I consider to be “good examples” of design in some form or another :)

  • http://www.ensight.org Jeremy W.

    Usability, accessiblity and code are very different things. You can have the most validated code… And still not be usable or accessible.

  • http://www.dustindiaz.com polvero

    IMO usability has nothing to do with the code

    Usability, accessiblity and code are very different things. You can have the most validated code… And still not be usable or accessible.

    Hmmm…interesting points. I don’t understand though, if you have valid XHTML 1.0 strict, and it not be accessible? That is unless, you’re doing a few things wrong like…putting passwords in area’s you shouldn’t be (obviously) or using display:none incorrectly… or accidently matching font colors with background colors. However, it’s it validated thru the W3 validator, then it’s passed the browser test (for the most part).
    Usability, I think, has perhaps a little something to do with following unwritten rules about the unconscience mind.
    Like Jakob Neilsen’s UseIt Website spills out all those things of Usability.
    But quite frankly, his site is just horribly designed. It’s not attractive, it’s boring, and I have no desire to stay there long except to learn.

    YES…Content IS KING!. But seriously, spice it up! What I like about Sitepoint is that they have combined accessible code, attractive colors, and great usability (link colors, content placement, accesskeys, navigation…)
    In one example, I have been trying follow all these rules in a test development site for an online news company at http://www.saclass.com/
    The navigation is clear, colors aren’t whacked out, the content is not cluttered, and it’s easy to find and label things according to the type of news it is.

    http://www.phpbb.com I think shows a good example. I’m not a fan of the software, but I think they put together a relatively good website.

  • http://www.warpspire.com Brak

    Unfortunately validation is just that.. validating code. It doesn’t have the capacity to tell you whether you’ve written something that makes sense. For example, the validator does not require

    So just keep in mind, there is valid code, usable code, and accessible code as well as a combo of any of the three, but just because code is one of the above, doesn’t mean it’s all of them. Mike’s site is usable and accessible, but completely invalid (on purpose), whereas Design by Fire is (now) valid and accessible, but not usable. Those are just some examples to show you what I’m getting at.

    Of course, the best example of valid code but not accessible would be the use of tables with layout. The validator has no issues with it whatsoever – but screen readers, Palm browsers, etc do.

    I agree with you about Neilsen though, I don’t think his site is all that usable. In my eyes he used to be the king of usability, but now he’s a great example of what not to do. I get lost trying to find basic information at his site.. he needs to get a clue, and fast.

    Design Eye for the Usability Guy demonstrates this. They create something more usable from Jacob’s murdered page.

  • http://www.dvd-software.info hurricane_sh

    Usability and accessiblity very important, expecially for websites from huge companies, e.g. IBM, Microsoft, etc. They have too much information, normally this work would be done by specialists(not technical guys).

  • http://www.itomic.com kathleenitomic

    Actually just a quick comment about 37signals – they have had their design ‘borrowed’ plenty of times – see pirated sites. And I’m pretty sure one of the most blatant versions is by a web design company – and all their clients have the exact same design, too.

    I’d also like to nominate a company I work for one day a week, itomic – they design usable web sites that follow web standards and guidelines.

    I think with Nielsen although his site doesn’t necessarily look great, it suits the purpose – that people do go there to learn and read, and so it makes it easy for them to do that. If it used other elements it might distract from this. I guess form was dictated by function in his case.

  • http://www.dustindiaz.com polvero

    am i imagining things or did my last post get deleted?

  • Dangermouse

    Dunston orchad’s blog at http://www.1976design.com/blog is pretty amazing and intuitive

  • http://www.oshan.cjb.net ksshan

    Hi…
    Wat are u trying to say finally ah ??

  • http://www.dustindiaz.com polvero

    Ok, now I’m kind of bummed…how do I view the rest of the comments before I post this? As i’m typing this I can’t see more than 3 comments, but I know after I submit “Post my comment” I will be able to see them. The only reason I’m doing this now is so I can read them.
    Please do not post an answer below because most likely I won’t know how to read it later, so if someone could PM me with the answer that would be great :)

  • Ghandi
  • http://www.lunadesign.org awasson

    For me it’s hard to define what a great website is. Especially when you throw usability into the mix because, as has been mentioned already some of the established great usability sites are hardly great looking websites. For example http://www.useit.com, designed as a great example of usability really lacks in the good design arena and for me is a bit difficult to look at. My #1 typography rule for screen use is no more than 10 to 12 words per line. That is thrown out the window on the Use-It site.

    I must agree that just because your code validates strict xhtml doesn’t guarantee that it’s usable. From my understanding of the usability equation over at W3C it’s more about how people are able to view your site and how screen readers and other devices that help visually impaired folks parse your markup code.

    Sites I like:
    http://www.alistapart.com
    http://www.csszengarden.com (just cool)
    http://www.nscu.com (I

  • http://www.lunadesign.org awasson

    Oops, my links got mangled.
    Here they are:
    http://www.alistapart.com http://www.csszengarden.com (just cool) http://www.nscu.com (I

  • thor@iway.na

    Very, very nice site: http://www.istockphoto.com

  • Brett Epps
  • nsb3000

    Usability has everything to do with design being intuitive, so that you don’t need to stop and think about what you want to do. This may seem obvious, but I would nominate google for this award.

    News, Politics, Discussion and Commentary

  • http://www.t94xr.net.nz/ t94xr

    CSS Zen Garden is the pinicle of webdesign todate.

    To get that many styles with one single – unchanged un edited XHTML document with pure content shows what the web is turned into.

    Given that most of those designed were created by mere-teenagers shows what we can do ;)

  • http://www.dustindiaz.com polvero

    Did anyone mention http://www.zeldman.com ?
    Gotta love the contrast-ometer :)

  • http://www.ltmod.com ltmod

    Not sure if this qualifies, but I wouldn’t mind if someone could tell me that whether or not my site (http://www.frontpagedevices.com) fits the bill for usability. I’ve always tried to build things that are compatible with a wide range of browsers and platforms, and that is easy to use for the clients.

  • http://www.anblik.com/ WebCrawler

    blogger site like diveintomark.org usally gets neat looks and get higher ranking in SE’s. looking to 37signals.com i learned from where http://www.basecamphq.com/ get their design done.

  • Tom Walker

    Two of the coolest sites I’ve seen: http://www.xeofreestyle.com , and http://www.2advanced.com . I know they’d probably be horrible for SE’s, not to mention load time – but still worth a look at. They’re immensely skilled with Flash.

  • James Lucas

    My personal favorite is canstockphoto.com. They have royalty free stock photography dirt cheap. Give their photographers a good commission too.

  • John Cornwell

    One of the cooler sites I’ve seen lately was for Campaign Monitor – http://www.campaignmonitor.com – a tool my company uses to send email newsletter campaigns for our clients. The actual application is super usable and well designed too.

  • Ron

    As a pro web designer, I find stock photography site http://www.shutterpoint.com to be a perfect example of usability, clean UI and simplicity.

  • arcifus

    This site struck me as very usable or ‘clean’ as I like to call it. http://www.taskportal.com Their application is a good example of concentration in usability.

  • Ricky

    I liked this site Logo Design http://www.logodesignworks.com