Add to Technorati Favorites

Friday, 3 August 2007

How not to design a webpage

While I'm in a designy kind of mood, I thought I'd write a few articles on web page design. Now I'm not professing to be the best designer in the country or anything, but I do know what works and what doesn't, so first of all here's a few tips on what not to do when designing a web-page. These are things most commonly done by people making their very first web-page or blog, and go overboard with everything, which invariably results in a nasty, unreadable mess. Some people still do this when making web-pages, after years of doing it.

  1. Animated GIFs
    When considering using any kind of animation, you should think about what it's actually going to add to the design of your site. 99 times out of 100 including an animated GIF in your site design only serves to make your design look cheap and tacky, and draws the readers focus away from the actual content of the site. Likewise with any image you use on your site, it should be there only if it lends extra context and understanding to your content. You can do a lot without any images at all these days - just look at the "Minimal" designs for blogger - a great example of really good design without using any images at all.
  2. Frames
    I can't remember the last time I saw a commercial site that used frames, but there's still a lot of personal sites that use them. Frames were really popular in the late 90's, and everyone was using them at this time. They allowed you to split your content up into areas, some of which stayed permanently on screen while the reader scrolled through the main content. If you really want to split your design up into areas that don't scroll, it's much better to do this using CSS and DHTML, this way search engines point you to the exact page needed, and your users are not left floundering without any navigation links. If you really have to use frames (and I can't think of a single instance where you would), include a script so that if a page is loaded from a search engine, and doesn't include it's navigation links, the page gets reloaded with them. This is not hard to do, and not including a script of this kind is just plain lazy.
  3. Page Counters
    I don't want to see that your page has had only 20 people visit it, that doesn't fill me with a lot of confidence. This is information only you, as the page designer needs to know. You'd be much better off using a stats website like Google Analytics, which will give you a better picture of who visits your site, where they are from, what browser they use, among a million other things.
  4. Unreadable Text
    What's this all about?? I've never once understood the need to give your page a white background and yellow (or lighter) text. If you use a background image, make sure that you set the bgcolor property of <body> to the colour closest to the background image. This will make it so that people who've chosen not to see background images can at least still read your text.
  5. Nasty Background Images
    While we're on the subject of backgrounds, if you're going to have a background texture behind your text, make sure people can still read your text. There's nothing worse than having a stupidly complicated background image and having to decipher the text through it. Even worse: animated backgrounds - just don't do it.
  6. Really Wide Pages
    Make sure the part that will contain the main content of your page will end up being no larger than around 600 pixels wide. Keeping track of what line of text you're on becomes more and more difficult the longer the line is. Look at just about any book published throughout history, and you'll notice they keep their line width quite thin for this very reason. Also the further your eyes have to scan from left to right, the more tired they will become.
  7. Slow loading times
    This is generally down to large or un-optimized images on the site. People will not wait forever for a page to load, and generally will navigate away from your page if they can't find what they're looking for within 10 seconds. Where possible, try and make sure your text loads before your images, this way people will at least have something to be keeping them occupied with while your images load. Optimize your images as much as possible so that they still look fairly decent, whilst taking much less time to load. My favorite program for Image Optimization is Adobe Fireworks, but Photoshop is also good these days.
  8. Bad Navigation
    I want to be able to find the information I want as quickly as possible, and so does everyone else. If you have a lot of content on your site, split it down into logical sections, (You should try and keep your site to between 6 and 10 main sections)and offer a search function. Don't hide your navigation away in the design - it needs to be obvious to people how to get from one area of the site to another. This is one area where even big sites fall down (MySpace is notorious for it).
  9. Too Much Advertising
    The more advertising people see on your site, the less people want to stick around. If your site has advertising, it should not get in the way of the content - after all, that's what people are there for - they don't come to your site to look at adverts, even if this is what you'd prefer they do. AdSense spamming (putting AdSense advertising all over your site) is frowned upon by Google, and you'll end up with your account deleted if you do this. Pretty much everyone has pop-up blockers these days - pop-ups are annoying and they don't work.
  10. Hyperlinks
    There's a lot I can say about Hyperlinks - for a start, your links need to stand out from the rest of the text, or people won't know they're links. Keep your links blue if at all possible - people expect links to be in blue. You don't need to say "click here" every time you put a hyperlink - people know how to work them - just link the relevant text. And keep the site you're linking to relevant as well - I should know what content to expect before I even click the link just based entirely on what words you've made a hyperlink.


  1. Thank you. I found this post to be very helpful. I believe that I do follow most of your suggestions, however, I always thought that I should do more on my site. So far, I have zero advertising, it takes away from the content.

    Could you take a quick gander and and give me a very brief critique?

    Also, would you be interested in a link swap? Check out my site If you like what you see and agree, then link my site to yours, leave me a comment on my blog that you have done so and I will immediately do the same.

  2. I quite agree about advertising ...i really can stand it except if it goes with the content of the blog...the same for animated gifs...I'll soon try to make mine...The aspect of your blog is quite nice...and very interesting to read...if you want to see a cute little world visit my villages of blogs (no ads, and very few gifs!!!)...forgive the spellings mistakes, I'm French...

  3. I like the way you've arranged display and angled pictures etc. This post will help me and I'm going to pass your blog address on. I've had a blog since last August. It's a standard format but as I've got a google support group that goes with it I'd love to safely add a chat room. Any clues???

    Thanks for this

  4. Your site is beautiful. I really like the use of yellow. It is an unconventional color, but you make it work. Your advice is great too!

  5. I think your site looks good. I saw in google groups that you wanted to know what people thought about your design but by reading your post you seem to already know what readers want.
    A Cowboy's Wife

  6. beautiful design..... nice blog... your hard work is really worth appreciative...

  7. Rufus loved your blog.Will go through your other blogs soon. in the meantime was wondering if you could help me with a prob i'm facing since you seem to be computer savy- i cant seem to publish my posts, well they are publishing but not showing in the main page.would appreciate some hep as the 'help' is not too helpful. thanks.