The basics of web design for beginners

Getting into the what and why of good website design. These are the "starting points" to your website design.

  See the Glossary page for help with unfamiliar terms.

  Plan your website structure before you start putting it together. Save yourself hours and days of frustration by simply planning ahead. For me, that meant a couple legal pads, an outline, and starting with the website 'map'.

  Give your visitors Clear and Easy-to-Use Navigation. This is definitely one of those K.I.S.S. bits. Website navigation should be so user-friendly that it takes only a few seconds to figure out how to get from here to there.
  In many cases that means a website design should follow along with the conventional design practices and stick to the "Top-Side-Bottom" navigational link structure.
  More about that on the Menu Design page.

  Make your text easy to read. People searching for information online tend to 'skim' a page. So make your pages easy to skim with small paragraphs, putting the most important idea at the beginning of the paragraph.

  Other readability tips:
  * High contrast. Black text on a white background is easiest to read, but any dark color contrasting with a light background is better than a light text on a dark background.
  * Short paragraphs (3 or 4 sentences), with bold or different color headings, and some blank space between the paragraphs makes it all easier to skim.
  * Use columns. 2 or 3 column designs are common because they are easier to read than text that flows across the entire screen.
  * Use bulleted lists where it's appropriate.

  Design your pages so they will load as fast as possible.
  * Use a minimum number of images, and use an 'image cruncher' to make the file sizes smaller. (Use the cruncher in the Free Tools section.)
  * Use external CSS to control formatting and layout.
  Your home page should load in 15 seconds or less.
  *More information in the "Make your pages load faster" section.

  Follow the conventional website design 'standards'. For a family website, or any website that will cater to a small circle of friends, it's good to experiment with different design concepts. But - if you're designing a website that will be attracting people from all over the planet it's best to stick with the design conventions that are becoming standard.
  More on that subject in the Design Standards section.

  Use a professionally-designed website template. Unless you're a graphic design genius, (or a control freak like me ;) there's nothing wrong with saving many, many hours by using templates. There are thousands of free templates available, all it takes to use them is (usually) a link back to the creator.
  There are also a ton of templates available for a surprisingly small charge, considering how many hours of work it will save you.

  A word of caution - using someone else's template can be a tremendous time-saver, but there are a few things to consider:
* Make sure that the images are optimized for fast loading.
* You may want to use an HTML validator to check the code for errors.
* Check the code for redundant and/or unnecessary tags.

  There are some excellent templates, and links to some websites with a good assortment of free templates on the Website Templates page.

  Use colors to set the 'mood' of your website.   In western societies, white is the color of purity and innocence... but that's not the case in other parts of the world. It is important to understand your audience and use colors appropriately for them.
  It's also important to use pleasant color combinations that are appropriate for the type of website you are building.
  You can read more about that in the Website Colors section.

  Use images sparingly, and only to enhance the visitors' experience.   Too many images makes a page load slowly - and pictures or animated graphics that are plastered on a website just because they "Look Cool" are a waste of valuable space. (Especially on the home page.)
  Take a hard look at every image and graphic on your website... does it add to the visitors' understanding of the website topic or is it a distraction from the message you want to send?
  There's more information about that in the Using Images section.

  Make your website attractive to the search engines.   "Search Engine Optimization" (SEO) is a big topic these days... but it's really not all that hard to understand, or to do. Basically, all it means is making your website attractive and easy to understand, from a search engine point-of-view.
  There's more on that subject in the "SEO" section.

  Learn HTML and PHP so you can avoid WYSIWYG editors and write 'clean' code.   So many people have said to me: "Why should I learn that stuff, I've got this 'What You See Is What You Get' website builder, and it's easy"
  Okay - fine. So I got one too. For a demonstration of the differences, check out the alternate glossary page that I made with the WYSIWYG editor, it clearly shows the differences...
  HTML is not hard to learn, there are tutorials all over the web, and this program can teach you HTML fast.

  Use CSS to separate the content from the format & layout. This makes for smaller pages, which means faster loading. Using an external style sheet will also save you a lot of time if you decide to change something fundamental, like your default header font or background image.

  Consider using Javascript to place your menu on your HTML pages... or write your website in PHP. On this website, the menu on the left is 'called' by a short script snippet. That makes it very easy to fix or update the menu on every page - all I have to do is edit one file and it's done.
  Something like 96% of browsers support javascript, you can direct the other 4% to the site map or homepage for navigation.
  If you write your website in PHP, you can use the "<?php include ('menufile.php');?>" function to place your menu file, and virtually all browsers can display it.

  Always check your work in different browsers, and at different resolutions.   What looks great on your PC may look totally wrong on another. I have two PCs here, one with kept-up-to-date versions of Opera, MSIE, Firefox and Safari... the other with older versions and Netscape, and I check my pages & layouts on all of them.
  Another option is to check your work on PCs at work, at a friends house, at the library... check on as many different configurations as you possibly can. You may be surprised at the differences.
  (Note - if you write in strict XHTML 1.0 and don't get too fancy, then your website will display much better no matter what platform the visitors are using.)

  Avoid these common website design blunders.   There is a long list of common website design elements that you may wish to avoid listed on the Design Blunders page.