Web design

by 5 people | Log in to rate

Ranked #2,214 in Tech & Geek, #58,789 overall

This is a lens that goes into a little detail on how to write and design a good website. I've put in links to resources that I think help to illustrate elements of good and bad design.

Most of the summaries are quite short because this is designed really to be used as a training aid on the courses that I run. However, I've tried to add some context if you're just looking. If you're interested in coming on one of the courses however, go and visit the TFPL website, where I do a lot of my teaching.

Introduction

Writing and designing web pages for information professionals.

Quick to load

Easy to read

Simple to move around

Match the needs of the organisation

Found easily
Where do you start?
Writing a web page should be the very last step of all, not the first! Before you even think about putting a page together, you need to sit down and consider a number of very important questions.

Purpose of the page

* What do you want the page for? Promotion? Marketing? Information?

Audience

* The desired audience will have a great impact on how the page is created and what you place on it.

* What machines will they be using?

* What will appeal to them?

* What won't appeal to them?

Authority of your page

* How will you make it clear that your page is authoritative?

* How often will you update it?

* Will you take a particular bias?

* Will you put links into other (possibly competing) organisations?

Graphical information

* Logo?

* Graphical representations of particular products or events?

* Particular type faces, fonts or colours?

* Particular images?

Products

* Which one(s)?

* How many?

* How to arrange them on the page?

* Index to them?

Factual information

* Who you are

* Where you are located

* Particular achievements

Relationship with customers

* Feedback

* Details of events you'll be running

* When users can visit you (opening hours etc)

What are you going to give back?

* What will you be doing to attract people back to your home page?

* Provide some services free?

* Act as a 'launchpad' site?

The design stage

When you've given those questions some thought, you need to look at the next stage - basic design issues.

Broad and shallow or narrow and deep?

Broad and shallow:

* Easier to set out pages
* Quicker to see exactly what you want where
* Easier to control and update
* Good approach to use if you have links into other pages

Narrow and deep:

* Quick to download a page of data

* Looks more friendly

* May take longer to find the required information

Give URLs some thought

Your URL or website address is one of the most important parts of your site. Make sure it's clear, easy to remember, not ambigious and that you've got variants of it.

Who Represents?: That's what they want you to read in the URL at any rate.
Experts Exchange: Experts Exchange, a knowledge base where programmers can exchange advice and views. But on what?
Welcome to Pen Island! The best pens on the internet!: Welcome to Pen Island, the best place to get custom made pens on the internet!
PowerGen in Italy: You can't actually see the page itself, but take a look at the URL instead.
Useful background on domain names: A short article, but packed full of useful information about domain names - particularly strong on statistics and availability.

A few do's and don'ts

Just to start you off!

Tables scrolling off the screen: Creating a table with a fixed pixel width may mean that tables scroll off the screen. This example shows the results of a fixed table width and a table size in percentage terms
What's to the right?: Unless you're an observant user, the data on the right hand side might pass you by all together.
Backgrounds!: Choose your backgrounds with care. I'm not entirely sure about this site, or the background, but it is memorable! (added 25/04/07 - it looks like this page has died, but I'll keep the link a while longer just in case it's a glitch) The site has now died, but you can see what it was like via the Wayback machine.
Keep background simple: This isn't the best background in the world.
Pastel shades are easier: They're quick to load, and easy on the eye.
Keep backgrounds light: ... or make sure that the font colour can be seen correctly.
Beware of the checkerboard effect: Badly created or small backgrounds will checkerboard across the page.
Another example: This background completely detracts from the content.
Don't use lines!: Backgrounds can really take away from a site. This is a great site, with lots of useful information, and you know what? I can't read it easily because I end up looking at the lines on the screen and the lines behind the words and seeing how they don't match up.
Search Engine rankings: Search Engine Ranking Factors
Distracting Backgrounds/Colors: This is a great example of a poor and distracting background. It's been deliberately designed as such though, so it's not a 'real' example.
Distracting - fixed Backgrounds/Colors: This is an example of how the poor background can be fixed, simply by making it paler
Backgrounds/Colors - Elements of Webpage Style/Design: Some good designs as provided by World Wide Web Design, showing what can work well.
ACCEPT JESUS, FOREVER FORGIVEN!: This has to be THE best bad background ever!
Nice to have you visit - lovely idea, bad title.: Lovely idea to have a welcoming title like that, but it's not going to do much good in the ranking stakes. (Warning - may contain language that is NSFW)

A few words about images

Images can help or hinder a page. Here are some examples...

Nice example of an image map: Clicking on various images will lead you to different pages.
Do they brighten up a page?: This example from Pinakes brightens up an otherwise very straightforward page.
Choose images that catch the attention: The images on the Nature.org site really draw the eye in, and tell you immediately something about the site.
Remember to provide text!: Just showing information in an image form isn't always going to be enough - remember to include textual information as well.
Don't use too many colours!: Too many colours just confuse the eye and hinder, rather than help. The first page isn't too bad, but if you start going through the site you'll see poor use of colours, inconsistent approaches..
Is orange a good idea?: Orange is often regarded as 'cheap'.
Rainbow colours: Can be a little bit off-putting.
Is the image clear?: The main image here is unclear.
Moving images: Just how dizzy did this designer want us to get?
Don't make an image your home page: Don't make your users jump through hoops. An image as a home page just means they need to click again, and who wants to waste time with that?
Re-use images when you can: It makes the page load more quickly and gives a feel of uniformity.
Does an image always work?: This example uses up a lot of webpage 'real estate' for no good purpose.

Give your site authority!

How can people trust your site? How quickly can you impart that information?

Use logos and phrases that people will instantly recognise: Just by looking at this site, you know all about it.
Who are you again?: Sheila's page tells you everything you need to know quickly and easily.
Checking the authority of a site: However good a site is, people will be less than impressed if it's hosted on one of the free site systems such as geocities. Also interestingly with this site, although the author suggests you can email him, he doesn't provide any mechanism for that.

Navigation - let people find things quickly!

Every page on your site should be found within 3 mouse clicks. There are a number of ways of achieving that.

Another site map: This one really tells you all that you need to know.
Drop down menus: Are a helpful way of providing a lot of content, help and links in a short space of time with minimal impact on the page.
Make sure your links are clear: Can you immediately tell where you're going to go from the information found in a link?

Don't make users jump through hoops

Users are fickle creatures. The more that they have to work, the less they'll like it.

Do you want me to buy or not?: This site forces a user through several pages before giving them the bad news.
Do I really need to register?: Why do I need to register? What for? What are you going to do with the data?

Content

Content is king. Or at least it should be.

Don't cram everything onto a single page: This site is full of really good, useful information - but can you find it?
Another example of too much text, too little page: I'm sure that this is a great book, really I am. But putting it all onto one page is surely not the best course of action?
Make sure that it's readable: Whatever you want to say, make sure people will stay and read it. (Viewer discretion with this one - it's usually ok, but I don't want to bet on it).
One concept per page: If you don't, you run the risk that visitors are going to be hopeless confused and overwhelmed.
Don't put in hidden text: If you can't see the hidden text, do Control A and scroll to the bottom of the page.
Don't have long user agreements: I think/hope/pray that this is supposed to be simply a humourous page.
Don't keyword stuff: Stuffing in keywords in the hope of getting a better ranking is going to look sad and make it difficult for users to find what they're looking for.
Choose good titles: This one just says 'Welcome' which isn't exactly helpful.
How busy is this webpage?: There's so much going on here I don't know where to look!

Frames

Frames are very seldom needed on a site. They hinder as much as help

3 frames is 2 too many: ... in my opinion. It gives you much less space to play with.
Frames and more frames: This page has so many frames it's amazing it works at all.
Frames like without them: This is a lovely example of a site that at first glance might appear to use frames, but it uses tables and CSS instead to create a similar feel. Much more helpful though!
More silly frames: Oliver Wakeman is a superb musician (takes after his dad), but the use of frames here really strikes a bad note. There's even a frame that doesn't do anything except break the page up even more.
An example of how frames can reduce the available space.: No need for frames on this site. In fact, the frame cuts the page in half, making it really difficult to see the information.
Willard Wigan :: Micro Sculptor: The world's smallest and most wonderous works of art - virtually ruined on this website which uses frames for no good reason that I can work out.

Adding fun and useful material

Get people to come back by providing useful and fun material

Hot potatoes: This provides you with access to a number of different options, such as a crosswords.
An example of a crossword: Crosswords can be quite fun, and very easy to do. Make them general, make them specific, make them fun!
Create a Jigsaw: Have a jigsaw on your page. This is an example, created from a resource at Jigzone.com
Create polls and vote for free!: Create polls for your site - change them, add to them, use them to make your own news.
Gabbly: Add instant chat to your site. Take a look at my home page at http://www.philb.com and see it in action.
Google Gadgets For Your Webpage: Add any of thousands upon thousands of gadgets for your page.
Badged.net - Add your favorite social networking badges to your blog or web site: Useful for adding some of the social networking stuff to a site, and making it easier for people to publicise for you.
Eurekster Swicki Search box: Add a community powered search function for your blog or website
Widgetbox :Directory of web widgets for WordPress, TypePad, MySpace and other blogs and web pages: Widgetbox is an online gallery of widgets for blogs and other web pages. They work on TypePad, WordPress, Blogger and most any other blog or website. We make it simple to bling out your web page!
Share presentations: Upload PowerPoint presentations to your site via Slideshare.

Really good examples of really bad sites

Sometimes the jaw just can't drop any lower...

There's so much wrong here...: ... that I'm not sure where to start. Right hand scrolling, keyword stuffing - it's just awful!
It's all so wrong: I have to say that this site breaks so many rules it's amazing. I particularly like the 'order' button, which is simply a link to your email client.
The worst site of all time?: I picked up this site from one of the forums that I read, where it was generally regarded as the worst site ever. Make up your own mind about it!
Movement, movement!: Too much!
Page Title (Where to start with this one!): Uks Leading American Indian Dance Company American West are an Internationally
acclaimed team of cabaret artistes,
admired for their superb performances of Native American traditional and
modern pow-wow dances ...

There are so many things wrong with this page, and indeed site that it's difficult to know where to begin.
| phong [ photoshop tutorials, recursive pattern cognition, galactik institution, etc ]: imagery | tutorials | postscript home.phong.com | chunks | astro | rsspod collective | Guerrilla News Network | Media Temple
_uacct = "UA-600135-1";
urchinTracker();

And the above is just about all that a search engine picks up. The rest of it is in flash, and although it looks very attractive, there's little value to it.
ASTALAVISTA SECURITY GROUP | Information and Internet Security Portal: Information Security Portal. This is so busy I don't know where to turn. Flashing adverts at the top of the screen, information packed in like sardines are going out of fashion.... awful!
Creation Museum - Creation Museum: Have a look at this website - looks great, but it doesn't actually tell you *anything*.
Ninja Gate: Flashing lights, movement, spinning things - dreadful!

Useful reading and resources

There are lots of really helpful useful sites out there, and this series of links point to just a few of them.

5 Search Engine mistakes not to make: Briefly these are:
1. Insufficient content
2. Use of frames
3. Graphics that include text
4. Dynamic content
5. Poor link popularity
Top Ten Web Design Mistakes of 2005 (Jakob Nielsen's Alertbox): The oldies continue to be goodies -- or rather, baddies -- in the list of design stupidities that irked users the most in 2005.
Eight Guidelines for Usability Testing: A useful short article on how to do better usability testing.
How C.R.A.P is Your Site Design?: If it is, that's actually a good thing. It's short for Contrast Repetition Alignment Proximity and this article goes into some detail about how the site should work, together with examples.
The Web Design Trend Obituary Death Clock: This is a great article looking at some of the existing 2006 web design trends and discussing which ones won't be around for much longer and why. Excellent little read.
15 types of links and how to get them: Excellent overview of the different types of links that are available.
The Basics of Search Engine Optimization: Good basic and quick article on SEO that's from an expert and is worth reading.

Useful titles relating to web design

If you want to do some more background work, it may be worth checking out some of the books that are available on Amazon. These are some of my favourites, or ones that I think are particularly worth reading.

Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

Phil_Bradley

by Phil_Bradley

UK librarian and internet consultant. My particular interest is internet search, but I'm also an advocate of blogs, rss and Web 2.0 applications. I'm... (more)

Explore related pages

web page design the easy way: So first off let me introduce myself, my name is Dave, a little over a year ago...
Digital Integration and Collaboration for Entrepreneurs and Small Biz (DICESB): What is the benefit of having a website? Everyday there is a big debate on why b...

Squidoo

Web design

Introduction

The design stage

Give URLs some thought