Are you a sucky website designer? Take the test!

Are you a sucky website designer? Take the test!

Jacob discusses bad habits to avoid, and what NOT to do when developing a website. So, Are you a sucky website designer? Take the test, and find out!

By Jacob Haug on November 13th, 2008 in Articles | Print This Article

Recently, I visited a friend who volunteered to help me with some database issues. Database…nothing makes me feel like a mental midget quite like database design. But, my friend is a database Einstein. Bob is a highly paid professional consultant. When our session was over he asked me to return the favor by critiquing his new website. I was horrified by what I saw. And when he told me how much he paid for the site, I really saw red! I was embarrassed to be a member of a profession where someone could pass off crap like this and call it a professionally designed website. It’s just plain malpractice! Since we live in a world where anyone can throw up a site and call themselves a “Web Designer” let’s be honest with ourselves, folks! Are you a crack designer, or just a crackpot?

1. Is your website slow?

When I clicked on Bob’s site, I patted my foot and waited for it to load. And I waited and waited and waited. Remember, on a commercial site customers are not going to wait forever. I don’t care if you have loads of fun graphics and interesting pictures, if the customer gets bored waiting for your site to load-he’s gone! Optimize your graphics and images for being viewed on the web. You can lower the quality a bit, and the item will load faster and still look good. Use Yslow (Yslow: Going From F To A) to tell you what’s wrong with your site and how to improve it.

2. Are you designing images that contain your client’s text?

This was particularly problematic with Bob’s site. His whole content area was an image. The text was inside the image. I suppose the designer did this so he could have the exact pretty font that he wanted. But, this is a big mistake so far as accessibility goes for both search engines and screen readers. They can’t read the images and there was no alternate text. Bob is starting a bed and breakfast business. Good search engine rankings are a high priority for him, as for most businesses. What you have to remember is that search engines primarily pull from text. They can glean some data from flash, JavaScript, and alt attributes on images; but those are secondary to the page’s text. It you don’t have good content and keywords, then you are not going to rank well in a search engine.

Here’s what Google has indexed for Bob’s site.

Louisa’s Porch-Welcome
1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7. stop. 1. 2. 3. 4. 5. 6. 7 …
www.louisasporch.com/ - 6k - Cached - Similar pages

The reason why it is indexed like this, is because the only thing Google can pick up is the flash slide show.

3. Do you have bad design practices?

Tables are for tabular data. They are for rows and columns of information. Period. You don’t use tables for layout. Tables as a design element went out of vogue years ago. It may be easy to design with them, but doing so marks you as being an inexperienced designer and a loser. Tables use more bytes of markup and take longer to download. What you are trying to do is separate your presentation from your structure. Your structure is your content…your heading and the paragraphs of content. Your presentation or style is elsewhere in a CSS document. Separating the two will make your website faster, easier to update, and will improve your search engine rankings. Get rid of tables for layout. (Why Tables Are Stupid, Benefits To Hand Coding Your Website)

If you are using a CSS layout with divs, then there should be no need for spacer gifs. This is an obsolete practice. Use padding and margins in your CSS document. I laugh at spacer gifs. They are old school and mark you as a sucky designer.

4. Do you have music playing by default in the background?

I hate music on websites. I hate it when I am secretly surfing the web at church and suddenly some vulgar rap music blasts out, causing little ‘ole ladies to blush and my pastor to banish me to the parking lot. Now, sometimes clients insist on music. I have designed sites myself that included music, but I was held at gunpoint and they threatened to shoot my dog! Unless your site is for an artist or a music store-skip the music! Consider your target market. If you expect a cross section of visitors, then you have to realize they will all have different tastes in music. What pleases one will annoy another. And you don’t want to annoy your potential market. Also, music slows down your site-another big drawback in today’s world of instant gratification. Good quality music is either expensive, or hard to come by. You can’t just post up your favorite Beetles song. There are copyright issues to be considered. Avoid messing around with music. It’s just not worth it.

5. Do you have a horizontal scroll bar?

How annoying! Don’t use a horizontal cheat bar. Lay out your page so that your users don’t have to scroll up and down, and sideways, too.

6. Do you have popups and blinking banners on your website?

Blinking ads are irritating! I’d rather stick a fork in my eye than try to read something with a flashing ad above it. If you want users to stay on your site longer and want return traffic, do away with the flashy obnoxious banners, pop ups and animations. If you need to draw attention to a line, try changing the font size. You can also emphasize the old-fashioned way with bold or italics. Sometimes less really is more.

7. Do you have a doctype?

In the first line of your (X)HTML code, you specify a doctype. It tells your visitor’s browser how to parse the page. It defines which version of (X)HTML your document is using. Doctype tells browsers how you are going to code. You don’t want browsers to have to guess whether you are using HTML or XHTML or what version of those languages you may be using. If you don’t specify, then your browser will kick into quirks mode-which basically means it will guess. And it will guess wrong. Chances are your pages won’t display consistently in different browsers. You don’t want this to happen. (Choosing The Best Doctype For Your Website)

8. Do you have content faux-pas?

My sister sent out a dozen resumes looking for a CNA job. What she didn’t notice was that her helpful word processor corrected her spelling. All her resumes listed her as looking for a job as a CAN. Not too many openings for “CANs” these days. (And yes, she is a blonde!) If you write content be sure to look for errors. I find it helpful to let it sit overnight, and look at it critically with fresh eyes the next morning. Another trick is to start with the last line and read the text backwards. You’d be surprised how many errors you can find with that technique.

Even if a client provides their own content, you should still proofread it for spelling and grammar. Publishing content with spelling or other errors makes you look bad. And on that note, if the content is bad, it makes you look bad no matter who wrote it. One time I was doing a website for some sort of pyramid sales company. The guy’s content was crap, so I took the liberty of brushing it up, thinking he would be grateful. He wasn’t. When the site was published he changed it back to his original wording. I was so embarrassed by it that I never took credit for the site.

If you write the content, proofreading is even more important. Nothing is more embarrassing than making a big mistake and having a user report it to your client. So be sure to have you client look at there content to be sure their is no mistakes. Remember-spell check is your friend, and your worst enemy!

9. Do you ask for client input?

Back to my friend Bob. He talked to his designer and got a price quote, and the next thing he knew a finished site appeared. He admitted to me that he was not really happy with it-but since it was done already he kind of felt obligated. He felt like he was at fault for not being more specific. Most clients are not that nice. They are going to turn purple and scream if you pull that crap. Be sure you include the client in on your planning. Many designers will do a mock-up in photoshop to give the clients some ideas. Client interaction is the key to a successful end product. (The Reality Of Client Interaction) And remember ActiveCollab was a great way to facilitate client input. (ActiveCollab Review)

10. Do you have a contract?

I told my friend Bob that his website needed some work. I made several suggestions for necessary changes and asked if his designer could make these changes. He didn’t have a clue! You need a contract to protect both you as the designer, and also set out for the client exactly when your duty ends and what correction or changes will cost. (Get A Good Contract Section, The Reality Of Client Interaction) If you don’t have a contract-then you are an amateur.

What’s your score?

So how do you rate? There are some true crackpot designers out there-designers who take advantage of people who are not web savvy. They give us all a bad name. Let’s do our best to show them the error of their ways and help them become true professionals.

Disclaimer: All names have been changed to protect the innocent (and the guilty). So, if you see the afore-referenced designer, tell him he owes Bob a redesign. And if you see Bob….shhhhhhhh!

Are you a sucky website designer?

View Results

Loading ... Loading ...

Did you like it?

Help us spread the word!
  • Float it!
  • Digg it!
  • Stumble it!
  • Bookmark it!

About The Author

Jacob Haug
Jacob Haug

I am Multimedia Specialist, Jacob Haug, and am a professional freelance website designer and developer. I spend the majority of my time in website development. I donate many hours each day helping the web community with technical aspects of website design and development.

I founded the Creative Coding Newsletter, which is a monthly newsletter sent out to thousands of web designers and developers. I served as Lead Administrator on Webforumz, which is one of the largest Web Design and Development communities on the internet.  However, my recent venture caused me to step down as Lead Administrator on Webforumz.com, and as Editor-in-Chief of Creative Coding.

My current project is The Web Squeeze. A "NEW", "FRESH", Web Design and Development community dedicated to helping make the internet a better place!

You can view other posts by Jacob Haug. Or you can visit Jacob's website at: http://www.JacobHaug.com/

Comments

  1. Gravatar Icon
    Jo said :

    I agree with almost everything on the list. Except for the scrollbars… I can understand that unless it’s one of those fancy sideways websites you do not want a vertical scroll, makes sense. But the obsession people have with NOT scrolling is sometimes scary. Why break down all your content into tiny tabs making your user click ten thousand times before they actually find what they are looking for?

    There should always be a balance, however there is nothing worse than an article split into ten pages each with 3 paragraphs (if even that) and a picture.

    Excuse my rant, great post nevertheless :)

  2. Gravatar Icon
    Shanna Korby said :

    #8 paragraph 3. Did you do that grammar faux-pas on purpose?

  3. Gravatar Icon
    Jacob Haug said :

    @Jo

    I was referring to sites that have a horizontal scroll bar….that’s just annoying. However, I do agree there might be times when you do that on purpose.

    @Shanna Korby

    Yep, on purpose! ;)

  4. Gravatar Icon
    mark said :

    Hate to rain on the parade, but geez - these are all pretty much common-sense avoidances.

  5. Gravatar Icon
    Jacob Haug said :

    @Mark

    Yeah, this article was geared toward those crackpot designers, that still have not learned the proper ways! GRR!

  6. Gravatar Icon
    mdinis said :

    great great post! and you could go on with the list of errors you see while surfing the web…

  7. Gravatar Icon
    Luke Dingle said :

    Great post Jacob!

    Common sense yes, but these things are often forgotten but even established designers on occasion. There’s definite positives to be had by stopping and checking yourself.

  8. Gravatar Icon
    Mella said :

    Nice article. I can proudly state that I don’t suck.

    It should be noted, however, that Google may rank a site very high despite poor design.

    I made a site for a client who runs a rental cottage, and she’s constantly trying to get more search engine traffic than her neighbour, who also has one. My site was designed with valid standards compliant XHTML, CSS, and all the right moves, while the neighbour’s is built with tables and a lot of images of text. Despite that, her site always ranks in the top three results of relevant keywords, and mine only in the top 20 or so.

    I realize this could be for many reasons, but I’m pretty sure it’s because she’s been around so long that they get a lot of traffic to that site, and I suspect that for Google, good site design is secondary to high traffic.

    That doesn’t bode well for us designers, because while we can control the quality of the design, we can’t generate loads of traffic off the top. Gotta start somewhere!

  9. Gravatar Icon
    Brian McCarrie said :

    This article isn’t about “Design” at all. It’s all about development best practices. An article about “Design” would include topics like usability, layout, fonts, colors, typography and relevance of the message to the design. Not load time, the use of tables, contracts and so on. Development is not design.

  10. Gravatar Icon
    Jacob Haug said :

    @Brain McCarrie

    I however, respectfully disagree. I was writing this article for web designers. My defection of a web designer is a person who creates web sites. Usually a web designer only designs the look of the web page and hands it over to the web developer. But more and more, a web designer “DESIGNS” in the traditional sense, which includes building the structure as well as just designing the look of it. Plus, I like the title of the article…hehe!

  11. Gravatar Icon
    Doug S. said :

    Point 3: Use of DIVs over tables.
    Funny thing is a lot of the big players including Zeldman and Clarke say that moving over to using DIVs instead of tables is almost just as bad and that you should use as few display elements, such as DIVs and SPANs as possible but instead relying on CSS selectors and semantic elements to build your site. Just throwing in a bunch of DIVs may work but that doesn’t mean that’s how you should do it.

    Point 5: No scroll bars, especially horizontal.
    This one is opinion based, especially the part about designing your page so your user doesn’t have to scroll. this just perpetuates the fallacy users do not scroll and that anything below the fold is lost. Every recent study has shown that this is not the case, not even remotely. Over 90% of users scroll the majority of the page and 70% scroll until they hit the bottom. The same could be said of horizontal scrolling. There’s nothing wrong with it and if it’s used intelligently it can work very much to the user’s advantage. I keep seeing this one all over the place and I just can’t fathom why people still get it wrong when all the data says it’s fine.

    Point 7: Define a DOCTYPE.
    While I agree this is a developer tip, not design. Design relates to the visual and interactive aspects of a website. This is only important to browsers and as such even though I, like many designers, do development work I still wouldn’t call this part of design as it’s not part of the design process but the development process. When I do development I’m a front-end web developer. The rest of the time I’m a web designer.

    Taking these things into context I would put myself at a perfect score even though while I know I’m not a sucky designer I know I’m not a hot shot either. And even following these things I could still use comic sans and florissant pink on a posh french restaurant’s website.

    I think you might want to add a piece about design choices based on context as that’s a large part of what makes a good designer; someone who can tell when something is appropriate and when it’s just fluff.

  12. Gravatar Icon
    Jacob Haug said :

    @Mella

    Glad to hear that you don’t suck! ;)

    That can be to a number of things, however, the point is tables are not for laying out your website! PERIOD! Tables are for tabular date, and that’s the end of the story!!!

    There are a few SEO techniques that I would recommend you, perhaps take a look at Linda’s article here.

    http://www.thewebsqueeze.com/articles/the-beginners-guide-to-onsite-search-engine-optimization-seo.html

    Thanks again for reading!

  13. Gravatar Icon
    Preston Lee said :

    excellent article. So true what you said. there are so many losers out there trying to pass off their stuff as professional. Keep up the good work

  14. Gravatar Icon
    Maxwell Ariss said :

    EXCELLENT POST

    I wish my ridiculous web teacher would read this..

  15. Gravatar Icon
    Jacob Haug said :

    @Doug S.

    In reply to point 3! Tables are for tabular data, and that’s it! Tables are not for laying out a website, and never were.

    Point Number 5….I believe you misunderstood. I’m not saying that your website should not scroll…..I’m just saying in most cases horizontal scroll bars are discouraged.

    Point 7: See my reply to Brain McCarrie.

    Thanks again for reading!

  16. Gravatar Icon
    Jacob Haug said :

    @Maxwell Ariss

    You should email the article to her! Or have the teacher sign up on TWS, we will set your teacher straight.

    Thanks again for reading!

  17. Gravatar Icon
    Freelancer said :

    Good article, they are more points that make a sucky webdesigner, but this is a an excellent reading for them.

  18. Gravatar Icon
    Jacob Haug said :

    @Preston Lee

    Yep, and it truly is a sad, sad thing. Thanks, I’ll try to keep the content coming your way!

    @Freelancer

    Thanks! Yeah, but I don’t have time to write an article featuring the top 10,000 things that make you a sucky designer….so I just took the 10 most annoying!

    Thanks AGAIN!

  19. Gravatar Icon
    weblizzer said :

    such a great article, this should be read by those newbie designers, being unconscious with their works. This will help them and realize or try to look back with their works. Even i always look back with my old works and for that i’ve learn a lot.

  20. Gravatar Icon
    Jacob Haug said :

    @weblizzer

    Thanks for the comment! I agree, you are never to much of a “professional” to learn! You can always learn things, and should always be looking forward!

  21. Gravatar Icon
    Ket said :

    Yes I agree with this. Thanks For such useful article.

  22. Gravatar Icon
    john e brandt said :

    Thanks for the article which is consistent with my own beliefs and values. I am sure I am not a “sucky” web designer - but I am also sure I have not always followed all of these rules. My biggest challenge has been taking over a design that someone else has developed or one that the client has demanded. Oh, and I will be fixing that text image on my home page today - shhh!

  23. Gravatar Icon
    Jacob Haug said :

    @Ket

    Thanks for reading!

    @John E Brandt

    Haha…thanks for reading John. I understand that taking on work that was done by another design/developer can be a pain, in fact I know and understand your pain. However, there are reasons why these are the 10 Golden rules so to speak…. ;)

    Thanks for reading, and check out our forum!

  24. Gravatar Icon
    James Coletti said :

    As others have stated, I do believe there are some cases that warrant the use of a horizontal scroll bar.

    I would add one more subject to the list: consistency. Consistency can improve aesthetics and usability on the design end, and code management on the development end. While we’re on the topic of consistency, I’ll be slightly nit-picky for a moment ;)

    Questions #1-6 and #8 on your list are worded in that a desirable response would be “no” (e.g., “Is your website slow?”). However, #7, #9 and #10 are the opposite, and the reader would be one step closer to earning a title of “sucky designer” if she answered “no” (e.g., “Do you have a doctype?”).

    I think this type of consistency is important and often overlooked, but can really make a difference with respect to usability/user behavior, especially with a test or survey.

    Great post!

  25. Gravatar Icon
    Jacob Haug said :

    @James Coletti

    I agree there are some cases where a horizontal scroll bar may be okay, however, I stand by what I said above, those cases are extremely rare.

    Very good points James, I agree with you completely. Thanks for the advise/suggestions, and thanks for reading.

    Jacob

  26. Gravatar Icon
    Mella said :

    @Jacob,

    I realize that tables are for tabular data and not for layout. I’ve been following that principle for about five years now.

    I’m just saying that designers (or developers or whatever) shouldn’t be led to believe that if their site is not table-based they will automatically rank higher in search engines than those that are. In my experience, that precept is [sadly] near the bottom of the list of things you should do to get noticed by search engines.

    Many sites rank highly despite table-based layouts. Amazon.com is table-based, is full of embedded and inline styles, mixes structure with presentation and behaviour, and generates 1,845 errors when you try to validate it.

    I would love it if these best practices were guarantees for high ranking, but the truth is, traffic and cross-linking is king with search engines.

  27. Gravatar Icon
    Jacob Haug said :

    @Mella

    I disagree. In my experience if you are build a website with proper web standards…separating your presentation from your documents structure you will rank higher then the website built with tables. Let’s use logic, your code to content ratio is improved dramatically. Combine that with headings (, ..etc.) and titles that contain your keywords and you’ll do just fine.

    Give it a shot….

    Build two websites, one table based, and one css/xhtml and see who wins on the rankings.

  28. Gravatar Icon
    Mella said :

    I see what you mean, but the only way such a comparison would be accurate is if each site has exactly the same number of visitors and cross links. Maybe I will try to test it sometime.

    Although I haven’t proven it, I would wager that if two such versions of a site existed, and one gets visited or linked to more than the other - either one - then that one would end up ranking higher.

    You might ask how the inferior one would get visited more if has a lower ranking, but the thing that developers sometimes forget is that being found in search engines is not the only way that a site gets popular. There’s also word of mouth, client referrals, social networking, directory listings and so on.

    In theory, a table-based site is at a disadvantage initially for being listed, but just because a site is not properly built and optimized doesn’t mean that it will never be ranked highly in a search engine. There are plenty of sites that break all these rules and still rank highly, because at the end of the day, if the public likes them, so does Google.

  29. Gravatar Icon
    Jacob Haug said :

    Okay, first I never said that an XHTML/CSS site would automatically rank higher then any table site! Obviously with SEO there are many factors to consider. (Content, how often it updates, how long the domain has been online…etc.) What I was trying to get at above, was that if you build your website with proper web standards you have an added SEO advantage. You can take that advantage and use it to your benefit.

    Jacob

  30. Gravatar Icon
    Mella said :

    Fair enough. I will concede that.

  31. Gravatar Icon
    Kurt Wendling said :

    There are some additional problems your article did not include.

    I went to your friend’s flash site and noticed right away that the layout broke in Firefox. Opened it in Explorer and it looked fine. I find this a common problem I have but in the other direction. Because I prefer Firefox and Firebug for developing sites, testing the site in Explorer is usually the last thing I do - if I remember. And quite often there is something unexpected that happens that messes up my design.

    Also most of the links on the menu bar appear broken. There is no reason for this. This designer should be ashamed. If there is more to the project that is being developed links to these pages should not included until these pages exist.

    And now for a compliment - The site is attractive.

  32. Gravatar Icon
    Jacob Haug said :

    @Kurt Wendling

    It appears the designer read this article…LOL! The text on the website is now text instead of an image, and almost none of the links work! At least he’s working on it!

    Thanks for reading Kurt!

  33. Gravatar Icon
    Ben said :

    I agree with most of your judgements. However, regarding the table layout: I’ve been creating sites for 14 years and my customers are not willing to pay for my time to redesign their sites because I used tables for the layout. And regarding the contract, well, I started out with yearly contracts and it worked just fine, but a few years ago I dropped the contracts and my customers are just as happy and so am I, less paperwork.

  34. Gravatar Icon
    Ben said :

    Also, I especially agree with the music. I hate it too.

  35. Gravatar Icon
    Ben said :

    One more thing: I am a sucky designer and have been for years. But, people want more today, that’s why I have a graphic artist doing my sites now and I stick with the planning, development and database design.

  36. Gravatar Icon
    Jacob Haug said :

    @Ben

    Well take it from me, sure your clients are happy, and you are as well…until something happens! Contracts are to cover you, and your client.

    That’s great to here Ben! You should join our forum we’d be glad to help you learn….plus it’s free!

    Thanks for reading!

  37. Gravatar Icon
    Nathan Beck said :

    I’ve got to say, there’s so much more to what makes a good or bad web designer than just the above. And to be honest, none of your points really touched on ‘design’ itself but looked more at the HTML or business side of things.

    What about considering accessibility? Colour schemes and screen resolutions? You haven’t really looked at cross-browser compatibility or ensuring your websites work for non-visual browsers. Are you scripts running unobtrusively? How about ensuring your font-sizes render correctly across the board? Oh and of course it’s always worth mentioning the ol’ valid XHTML and CSS bit.

    Then you could be really picky and also question the copy on a page, use of imagery (also make sure you have the rights to the imagery), what about basic SEO practices?

    I’m not digging at your post, there are some good points. However you cannot judge whether someone is a good designer or not by the 10 points up there alone.

    Nathan

  38. Gravatar Icon
    Jacob Haug said :

    @Nathan Beck

    I however, respectfully disagree. I was writing this article for web designers. My definition of a web designer is a person who creates web sites. Usually a web designer only designs the look of the web page and hands it over to the web developer. But more and more, a web designer “DESIGNS” in the traditional sense, which includes building the structure as well as just designing the look of it. Plus, I like the title of the article…hehe!

    As I said to some of the above people, if I included everything it would be a list of 1 million things that make you a sucky designer. I included the ones that I thought were most important!

    Thanks for reading!

  39. Gravatar Icon
    Raymond Selda said :

    Great post! I really don’t know what to tell my friend when I saw that their content is one big image! Thank you for listing this. It will give clients a checklist so they they will have an idea of what quality website development is all about. Thank you.

Toggle Trackbacks

Do you have something to say?

Live Comment Preview