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?

40 Responses to “Why your site sucks”

Leave yours now...

  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  12. #12 Ivan says...

    Nice article, some good guidelines here!

    • Posted on April 7th, 2008 at 4:50 pm
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  25. #25 Miracle studios says...

    I am for a neat website ….

    What are your views for my award winning design : http://www.miraclestudios.in

    • Posted on June 9th, 2008 at 8:37 am
  26. #26 Matt says...

    @ Miracle

    Why a tabled based design?

    • Posted on June 9th, 2008 at 8:59 am
  27. #27 Miraclestudios says...

    Because its easy to update ……..

    • Posted on June 10th, 2008 at 12:10 am
  28. #28 Matt says...

    That makes absolutely no sense whatsoever, and does not even warrant any further explanation.

    Secondly, I would appreciate it if you would stop posting comments to “take a look at your award winning site”

    • Posted on June 10th, 2008 at 11:07 am
  29. #29 Raj says...

    Hi Matt,
    Regarding Tablet Design of Miracle Studios - i agree, that it needs to get changed.

    the process is ON, and shortly you would be looking at the change.

    If any other inputs, please feel free. We are still in BETA version.

    thanks,Raj

    • Posted on June 10th, 2008 at 1:25 pm
  30. #30 James B says...

    I work for a vending machine company and have recently re-designed our website. Looking through your list, I don’t think I scored too badly.

    I haven’t added a search yet, and perhaps it could do with a ‘call to action’ like you said.

    Take a look if you like: http://www.coin-a-drink.co.uk/

    • Posted on June 16th, 2008 at 4:48 am
  31. #31 Benjamin U says...

    Matt,

    I just wanted to let you know.. I run this really great table-based design site in India. It’s award winning, you know!

    Oh and also, your design completely sucks. Do me a favor.. Change everything twice for me, and then change it back. And while you’re at it, could you bend over?

    :P Sorry, Couldn’t resist. And I’m not sure if you ended up changing the text or not, but it’s fine to me.

    I completely agree regarding the whole disable JS bit. About a year ago I had a client tell me they wanted a JS-based nav. For some reason, most clients are..difficult. Their way or the highway (if they switch to a different designer because i wont develop a train-wreck waiting to happen for them, it’s fine by me because I end up coming out ahead anyway [vs having to deal with them])

    However the one I didn’t really agree with is the new-window idea. Generally, my rule of thumb is that if the link isn’t going to an external page, it wont open in a new window/tab. If it is going to an external page, I like it to open in a new window(tab in my case). For some reason, It just really gets under my skin when a completely different website opens in the same tab as the one i’m currently using (unless of course, I tell it to).

    Anyway, I really like the article, and as a 15 year-old “freelancer” (If you can even call it that at 15), I can safely say that I follow most of your ideas in my own practices.

    Benjamin

    • Posted on July 2nd, 2008 at 11:23 pm
  32. #32 moin says...

    great article fun reading it and your writing style is enjoyable :D

    • Posted on July 13th, 2008 at 4:23 pm
  33. #33 luciano says...

    Nice article.

    “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 […]”

    “Turn JS off and if your site doesn’t work 100, go back to the drawing board […]”

    Maybe you could explain that better. I’ve been failing to design interfaces that would balance these parts; anyway AJAX makes a site absolutely dependent on javascript, or am I missing the point?

    • Posted on July 13th, 2008 at 7:10 pm
  34. #34 Matt says...

    Hey Luciano, in both those statements (sorry for the typo, by missing the “%”) I was referring to the fact that your sites should be accessible first and foremost.

    If you have JS disabled, the site should still function completely. This means that if you are using JS to add some behavior to some kind of sliding, “hide-show” menu, it should be open by default if JS is off, and the anchor, or action should not indicate any kind of effect (it shouldn’t say “hide/show” if JS is disabled, because you will not be able to hide or show).

    Remember that we are only enhancing our designs by adding behavior, we should not be generating crucial content, or using AJAX to import content that should be visible by all users.

    Obliviously there are exceptions to these rules, like in some application development, and controlled environments, but much caution should be paid.

    Thanks for stopping by, and hope this cleared it up some.

    • Posted on July 14th, 2008 at 8:40 am
  35. #35 Mel Ndiweni says...

    haha great read.

    • Posted on July 31st, 2008 at 10:45 pm
  36. #36 don says...

    well written dude though i think flash is great aslong as like you said is not a whole page and my site is pretty much what you say is bad but that is ok because i did not use any type of template just alot of div tags and css “witch is why i like div’s over tables” but go se if you want and let me know what i done wrong and great job on your site very clean looking

    • Posted on August 26th, 2008 at 10:40 am
  37. #37 sipuri says...

    Hi…
    Nice blog. Enjoy your post.
    Can I add this one more?
    But, may be this is not related to this post.
    Autoplay music.

    • Posted on September 7th, 2008 at 10:10 am
  38. #38 Jonathan says...

    Great Advice. I admit I have been guilty of more than one on more than one occasion - Good checklist for future design/development work.

    • Posted on September 9th, 2008 at 11:58 am
  39. #39 Wayne says...

    Hi all,

    This is a great post, full of good tips which some designers should take note of.

    One tip I would also like to add is content, do NOT add too much of it on one page, add more pages if the content exceeds a certain amount, especially when there is loads of images as it can cause some computers to react slowly, possibly even crash. (applies more to some blog sites in general)

    It also annoys people (me included) when they have to scroll through lots and lots of stuff they don’t want just to get to what they do want.

    • Posted on September 28th, 2008 at 10:27 am
  40. #40 Why your site sucks | Remgo Design says...

    […] This article gives you a list of reasons why you should be aware of before designing websites. 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. […]

    • Posted on February 11th, 2009 at 7:44 am

Tell us how you really feel.

 



Sponsors