Learning Web Design

The Basics

These are the learning/reference documents we've found and use constantly. We've frankly put them here for our use - and to give us a place to send people when they ask us and we just can't remember the URL. :)

Everyone should read these.

  • To learn, read the W3C Tutorials, in particular, Getting started with HTML.
  • Code your data (site's content) in HTML, then use CSS to lay it out. Read the W3C Guidelines for authoring.
  • Use HTML 4.01 Transitional because many many people out there are using old computers. If w3c comes up with a recommendation in 1999, you need to allow for a couple years for browsers to use it, and a couple more for people to get those browsers. The HTML 4.01 Transitional standard supports old browsers but also allows for proper coding and CSS usage.
  • Check your code with the w3c Validator service. If you coded properly, it works on your browser, and passes the validator, it should work anywhere...
  • Remember the basics from our tips page: Be standard (no flash/javascript unless necessary), don't force the browser (it's not a piece of paper), and be careful with CGI.

Designing your web site

I've seen a lot of people design a web site backwards. They'll put in all sorts of graphics and buttons and blank pages, then try to fill it in. What that gets you is a weird site with lots of holes.

Designing your site is simple. Remember this and you'll design great-working sites:

  1. Gather your content
    Get together everything you want to put on your site. Pictures, text, forms. Everything.
  2. Layout your site
    Figure out the best way to break down that information into chunks (pages), and design a navigation system to get people to that information as quickly as possible.
    THE SOLE PURPOSE OF YOUR WEB SITE IS TO GET THE USER TO THE CONTENT THEY'RE LOOKING FOR AS FAST AS POSSIBLE
  3. Layout your pages
    Now you can put in graphics, colors, backgrounds, etc using CSS. Notice how this follows good coding practice? Put the content in in HTML, then lay it out graphically with CSS...

Now that's a web site!

Valid HTML 4.01!