Web Design that is neat.

Headers, meh...who needs em?



Why your site sucks

April 4th, 2008

I was thinking today about certain things that make me cringe when I go to sites, and decided to put this rough draft of a list together. You can use it as a checklist of what not to do, or if you care to add to it, feel free within the comments section.

Design

  • Splash Page
    • If your site has a page before your home page that does nothing but have a logo, or “enter” button, drop it now. This is no longer 1999.
  • Favicon
    • You know that slick little icon you see on this site up in the address bar? Well that is called a favicon, and you should create on for your site right now. It is an easy way for users to identify your site from others within their bookmarks, or favorites. It is also free real estate to promote your service even further, so why not take advantage of it?
  • Confusing Layout
    • If your layout appears confusing at all, like for instance if you have 3-columns each of the same width, all the same text, color, etc. the user will not have a clue where to look. It is important to set yourself up with a nice clean visual hierarchy from the get-go to make life easier for the user.
  • Overused Layout or Theme
    • “Hey, I’ve seen this exact design before” should never be the first words out from potential clients, unless of course thy just forgot about your site, and are just now remembering it. If you are a casual blogger, a default theme is fine, but not if you are trying to sell something!
  • You just have too many damn:
    • Fonts
    • Scripts
    • Images
    • Colors
    • Animations
  • I have no idea what that says…
    • So your text contrast is off, fix it, pale yellow on white does not work. Red on Gray is giving me a stroke. Clean it up!
    • “It’s too small” another thing no one likes to hear…especially when it comes to the size…of…..your……TEXT
    • Line-Height, give them lines some breath’n room son.

Development

  • Invalid Markup
  • Improper use, or lack there of heading tags
    • You know, H1, H2, H3…Right. Use them.
  • “Div & Classitis”
    • Nested divs, that go beyond a wrapper or two, are a bad idea, and clutter your code. Also, contrary to popular belief, classes will not always solve all your problems. Don’t make unnecessary amounts of classes to correct style problems another selector could fix without the bloated markup addition.

UI

  • Tons of forms
    • Don’t try and rival the CIA’s database by asking for my mother’s maiden name to read your newsletter.
  • Inconsistent Navigation
    • If on your home page your main nav is on the top, guess what? We expect it to be there throughout the rest of the site.
  • Too many items
    • You have too many damn items in your main nav if you have more than 6. Limit them, so we can focus on the more important items, and then drill down from there.
  • Too many menus in general
    • Having nested lists for a sidebar navigation is fine, but what I am referring to is when you have a main nav at the top, then a sub nav on the left, and another mixed nav to the right with more sub levels. If you need multiple menus, please offer the user a breadcrumb trail.
  • No call to action
    • Great site, but what do you want me to do now…Give your users a jump start to success! If your purpose is to get more blog readers, why not point them in that direction, either verbatim, or with a nifty link.

Accessibility

  • Full Flash Pages
    • Awesome. I do not have Flash 9.2.3.1.4.qm-4 so all I get to see is a black page! Not so well thought out. Oh, and Flash sucks, so use that as a guideline (that was not entirely true, but use your best judgement).
  • Poorly used images
    • If you are using images anywhere in your site, make sure you have an alt attribute explaining the image. Also, if you are using images to replace headings, or other text, make sure you have the markup to begin with before you use a replacement method of choice.
  • Popups, popdowns, popovers
    • Nothing with the word “pop” in the traditional sense of the word (think back again to 1999). This might be a good time to use JavaScript to it’s full potential by traversing the DOM to show or hide stuff. Another option could be AJAX, then you earn bragging rights as well.
  • Links open in new window
    • No thank you. You better have a damn good reason for this. How dare you tell me I need a new browser to view a link?
  • Poor use of title tag
    • Take a look down at your “toolbar” for Windows users, and you should see the title text for whatever tab, or page you have opened. The title tag is your friend.
  • It just plain old doesn’t work
    • Turn JS off and if your site doesn’t work 100, go back to the drawing board, because you are losing a client, fan, or commenter with each passing moment.
  • Is that a link?
    • If I have to guess what a link is, you have failed as a designer. Style your links as traditionally as possible, ie; blue-ish (not always necessary), and underlined.
  • No selected states for menus
    • Do yourself and your users the favor of giving at least your main navigation “current” or “selected” states as another form of place identification.
  • Where is the search button?
    • Whoever said it isn’t cool anymore to have search buttons. Not all users know enough to hit ‘enter’ when through with their query input. Oh, and another thing, don’t give the user instructions on how to use the form. If it isn’t clear from looking at it, you have failed.

So this is by no means a completed list, so please feel free to add to it!

Oh, and if you liked it, why not head over and Digg it?

Related posts in resources

Subscribe to our RSS Feed!

24 Responses to “Why your site sucks”

  1. #1 Dan says...

    Haha, I can relate to this sometimes. Especially when I visit those horrendous MySpace pages. XD

    Keep bloggin’. Also nice site design.

    • Posted on April 4th, 2008 at 5:37 pm
    • Edit your comment
  2. #2 Matt says...

    ha, absolutely, absolutely.

    At work our intranet clients use a CMS that has in my opinion, too extensive of a WYSIWYG, which allows font changes, colors, the whole 9 yards. I take the time to make full style guides for them to follow, and once they get their hands on it looks like a complete mess when I go back to check on them.

    Anyway, thanks for the comment, and compliment! Have a nice weekend.

    • Posted on April 4th, 2008 at 5:55 pm
    • Edit your comment
  3. #3 mooty says...

    What a list. Great compilation of all the design don’ts. I struggle a bit with divitis at times :( i think open in new window is quite effective, I use it for any link that leaves the current site. Otherwise people will go the new link have a looksie and then want to get back to your site, have to click back heaps of times. That as well as PDF’s as they are slow and annoying to load and its easier just to be able to close the tab/window then press back and wait for it to load.

    • Posted on April 4th, 2008 at 5:55 pm
    • Edit your comment
  4. #4 Matt says...

    @ mooty

    Thanks for stopping in, and glad you liked the list, for the most part anyway!

    I think that as far as links go, anytime you present one, you should be prepared to have your user leave your site, or at least leave the current page. Providing a title can help users determine if they want to navigate away.

    For PDF’s I would offer a Adobe icon of some sort so they can kind of get prepared for it. The same goes for other types of documents.

    Well opening in Tabs is much better, but that is user controlled. I see the goal, but it’s like that old saying “If you love someone, set them free”.

    • Posted on April 4th, 2008 at 6:03 pm
    • Edit your comment
  5. #5 AMYHAYWOOD.com » Blog Archive » Making Good Websites says...

    […] Designs wrote a good blog post, entitled “Why Your Site Sucks”, essentially, a checklist of what not to do. A few examples: “Hey, I’ve see this exact design […]

    • Posted on April 4th, 2008 at 11:49 pm
    • Edit your comment
  6. #6 mooty says...

    cheers matt ta for your thoughts, the pdf icon helps, i guess as most people start using ie7 and less use ie6 the open in new window would suit you more as it would open in tabs.

    i use firefox personally and open almost everything in a new tab, sometimes i find myself with 70 tabs open by the time i close the browser down hehe.

    i don’t really browse in ie6 so I don’t know how annoying it would be having to open lots of links in new windows.

    keep the articles comin man.

    • Posted on April 5th, 2008 at 1:57 am
    • Edit your comment
  7. #7 kontur says...

    ” * Don’t try and rival the CIA’s database by asking for my mother’s maiden name to read your newsletter.

    Gotta love that one, hehe.

    I think your points are very good, however I don’t think it is knowing about those that is the problem, but actually consciously going through the list when designing and evaluating a website, and then making the right choices. But hey, you can only cover that much with one article, and your list is pretty well

    k.

    • Posted on April 5th, 2008 at 6:25 am
    • Edit your comment
  8. #8 Matt says...

    @ mo0ty

    At my job, it is basically a Microsoft shop, and almost all workstations have only IE6 on them. Our team if pretty much the only ones with other browsers for testing Extranet and Internet sites, but we still have to design for IE6, daily…heh

    @ kontur

    Glad you enjoyed that one. And, you are right, it is very different to read something, than to actually apply it.

    Thanks for stopping in!

    • Posted on April 5th, 2008 at 7:31 am
    • Edit your comment
  9. #9 Suffian says...

    Yes, it’s not 1999! I hate it when people keep insisting on splash pages lol. Nice styling on the comments form, btw.

    • Posted on April 7th, 2008 at 6:23 am
    • Edit your comment
  10. #10 Will says...

    Wow- you should back up your information related smarm with a little proof reading-

    “Hey, I’ve see this exact design before”

    • Posted on April 7th, 2008 at 8:29 am
    • Edit your comment
  11. #11 Matt says...

    @ Suffian

    Thanks for stopping in! Glad you like the styling.

    @ Will

    Right, sorry I had a typo, enjoy your day sir.

    • Posted on April 7th, 2008 at 9:48 am
    • Edit your comment
  12. #12 Ivan says...

    Nice article, some good guidelines here!

    • Posted on April 7th, 2008 at 4:50 pm
    • Edit your comment
  13. #13 Caius Durling says...

    The other thing about making sure you have a search button is if someone visits your site from a mobile phone, they generally aren’t able to hit enter in the search box to trigger the form being submitted.

    I ran into this issue on my mates site when I was trying to search for something specific. Ended up using google to search his site because they provide a search button!

    • Posted on April 7th, 2008 at 10:31 pm
    • Edit your comment
  14. #14 Ashutosh says...

    First, great blog layout, and an informative article!

    Second, correct the spelling of “address” in the comments form (where it currently says “Your email adress”)

    Finally, imho, “How dare you tell me I need a new browser to view a link?” is taking it a bit too far. A new browser window (or tab in Firefox) for external links is slick. Helps keep the focus on the main site.

    Cheers :)

    • Posted on April 8th, 2008 at 12:19 am
    • Edit your comment
  15. #15 Matt says...

    @ Caius

    Very good point about the mobile phone users. I would hope though that people would be providing a mobile specific stylesheet.

    @ Ashutosh

    Wow, I have been slacking on grammar lately.

    Also, to clear up the part about “open in new window”, I was not referring to “new tabs”, that is of course if users are using a tab capable browser. In IE6, it is very annoying to have an entirely new window open for all your links. But thank you for bringing up the tab part, I will probably make an edit to that.

    Thanks for stopping in.

    • Posted on April 8th, 2008 at 9:31 am
    • Edit your comment
  16. #16 Publicidad en Internet says...

    I’ll going to send this post to all the “designers” that i know, thanks

    • Posted on April 8th, 2008 at 8:07 pm
    • Edit your comment
  17. #17 lucy says...

    I’ll add to the list:

    navigation and slogan take up half the page.

    • Posted on April 8th, 2008 at 8:46 pm
    • Edit your comment
  18. #18 Lynn Cummings says...

    Excellent and bravo! BTW, may I add one more? Base type size that is too small and makes you strain your eyes… oops, you might want to check that on your blog site. ;-)

    Anyhow, great article!

    • Posted on April 9th, 2008 at 10:05 am
    • Edit your comment
  19. #19 Matt says...

    @ Lynn

    I suppose I could increase it a bit. Thank you for the notation, and glad you liked the rest of the article!

    • Posted on April 9th, 2008 at 10:49 am
    • Edit your comment
  20. #20 Steve Shearer says...

    This is great but you know what? Herein lies the reason that all of us new designers are so much in need!!!

    • Posted on April 10th, 2008 at 9:31 pm
    • Edit your comment
  21. #21 nortypig » Blog Archive » Why Your Site Sucks says...

    […] Why Your Site Sucks is another good list of things you might fix on your website. […]

    • Posted on April 11th, 2008 at 6:19 am
    • Edit your comment
  22. #22 Brad says...

    Good tips. Links opening in new windows is my biggest pet peeve, don’t force a user preference on others.

    http://www.sitepoint.com/article/beware-opening-links-new-window

    • Posted on April 14th, 2008 at 1:11 pm
    • Edit your comment
  23. #23 Angie says...

    I just want to say that it’s really annoying to see people nitpick at your site when you are obviously very knowledgeable and have great design sense. Plus, your only response to that sort of feedback is ever so polite. Good job, man.

    • Posted on April 29th, 2008 at 11:13 pm
    • Edit your comment
  24. #24 dancespirit says...

    funny, i just had this links open in new window discussion at work. As a user I prefer links to open in a new window, I hate it when it doesn’t and leads me of the page.

    My colleague however said the reverse thing, so I checked with everyone in the office and it came out that 80 percent of the office prefered links to be opened in a new window, that was very interesting information.

    I think it depends on the target group how they like to use the site…for example teenagers use the internet differently than lets say the group between 30-40. It leaves me to thinking which one I will end up using on my site.

    • Posted on May 2nd, 2008 at 4:48 pm
    • Edit your comment

Tell us how you really feel.