Getting Started with Web Design

Essential Applications

1. A decent, cross-platform editor capable of editing unicode and syntax highlighting, such as Vim, JEdit, Emacs. If you find these difficult to use, please see my list of accessible authoring tools.
2. Firefox is one of the better browsers, and its plugin-writing community ensures that it is the best browser for web development. Firefox 2.0 with the Web Developer Extension, Firebug, YSlow, and the Mozilla Accessibility Extension.
3. Internet Explorer 6 remains one of the most widely used browsers. In addition to the browser itself, you should try and get the Internet Explorer Developer Toolbar, the Web Accessibility Toolbar, Script Debugger, and CompanionJS. If you’re on Linux, then you can run Internet Explorer 6 with a compatibility layer: either CrossOver Office or Wine (with IEs4Linux). Or if you have a licenced Windows install disk, you can run it in a virtual machine such as the open-source Qemu and the free but closed-source VMWare Server. If you’re running Mac OS X, then you can run CrossOver Office, Parallels, VMWare Fusion beta, or even IEs4Linux with Philipp von Weitershausen’s HowTo.
4. As many other browsers as you can obtain for testing purposes. Wikipedia has a list of web browsers and the Evolt browser archive is a good place to look for older browsers. For desktop graphical browsers, try to test with at least the A-Grade browsers in Yahoo!’s Graded Browser Support system. It’s a good idea to also test with a representative text browser (such as ELinks, Lynx, or W3M) and a common mobile browser (such as Opera Mini). It’s best to run multiple versions of Internet Explorer on different Windows installations. Microsoft has made free Internet Explorer virtual machines available. Alternatively, you can try to run multiple versions on the same installation, in which case read:
   • Position is Everything: Taming your Multiple IE Standalones. Ensure you read all the comments, especially if you want the PNG fix.
   • TredoSoft: Install multiple versions of IE on your PC
5. As many assistive technology tools as you can install for testing purposes. These may include screen readers and magnifiers, and more esoteric tools such as the Hawking Toolbar.

Three things not to do

1. Don’t read W3Schools because you’ll end up having to unlearn the practices they teach you. The best guide to HTTP, HTML, and CSS are the standards-making organizations: W3C and the IETF. Their labyrinthine sites are a goldmine of information about the way things are supposed to work (cue hollow laugh). W3Schools are completely unrelated to W3C.
2. Don’t touch XHTML until you know what you’re doing. (Hint: if you’re reading this, then you don’t know what you’re doing.) Just use HTML 4.01 Strict instead. If you want to know why, here’s a short reading list on why XHTML is bad for newbies.
3. Don’t expect your webpage to ‘look the same in all browsers’.

Code separation

One of the key principles of modern web design is code separation between:

• Document structure and semantics (meaning) in Hypertext Markup Language
• One or more presentation styles for that content in Cascading Style Sheets
• Dynamic behaviour for that content using JavaScript

To use one analogy, the markup language tells you about a dog. The CSS gives the dog a bath so it looks nice and clean and the JavaScript makes it wag its tail.

Ideally, your content should be usable with just the structure and semantics alone. You should not need presentation styles, beyond user agent defaults, to convey meaning; nor added behaviour for core functionality.

Learn structural and semantic markup

Dave Raggett, Introduction to HTML

An entry level tutorial.

Shirley E. Kaiser, Semantics, HTML, XHTML, and Structure

A closer look at how to use the main HTML elements.

W3C: HTML 4.01 specification (translations of the HTML specification)

Although long, the HTML specification is unusually readable. Even if you don’t have the stomach to read it straight through, it’s worth going back and reading whenever you do something for the first time or haven’t done something for a while, and unlike all other references it’s authorative. At the end of the specification there are handy indexes to elements and attributes.

Make sure you check your HTML with the W3C Markup Validation Service. Note, however, that there are many misuses of HTML that the validator cannot catch.

Learn presentation styles

Dave Raggett, Introduction to CSS

A good introduction to stylesheets. Note however that Raggett uses inline styles with the STYLE attribute and places styles in the HEAD section. It’s generally a much better practice to place all CSS in an external stylesheet.

CSS tutorial: Starting With HTML and CSS

An introduction to authoring with these two technologies from the W3C.

W3C: CSS Level 1 Specification

The first level of CSS is mostly implemented by most graphical browsers in use today (including Internet Explorer 6).

W3C: CSS Level 2.1 Specification

The second level of CSS is mostly implemented by all current versions of graphical browsers. Internet Explorer 6 has a small level of support. The specification includes an index of CSS 2.1 properties.

Max Design tutorials on lists, floats, and selectors

These are super introductions to these topics.

Russ Weakley, Definition lists - misused or misunderstood?

How to use and style dl.

If you’d like to suggest colors for your web content, see my guide to using colors.

Make sure you check your stylesheets with the W3C’s CSS Validation Service.

Learn dynamic content/scripting

Server-side scripting

HTML, CSS, and JavaScript is the client-side trifle. But if you want that trifle to interact with a server side file system, database, or functionality, or you want to provide any dynamic functionality that isn't reliant on JavaScript, or if you just want to avoid repeating the same HTML across multiple files, you’ll need a server-side scripting language. These are largely out of scope for this guide. But I would recommend a couple basic approaches. If all you need is basic templating with minimal functionality, it’s worth investigating Apache Server-Side Includes. If you need more complex functionality, such as web forms processing (e.g. contact forms), I’d suggest looking into the PHP language. If you’re going to build a full-scale web application, then you should probably investigate more widely, and consider using a web framework such as Django or Symfony.

Pulling it all together

Just knowing the specifications will get you writing conformant websites. But it isn’t enough for you to write good websites. For that you need a grounding on the principles and practicalities of accessibility, usability, and design.

Findability

Findability is about helping people find your site and its content from search engines, and about helping people find different content on your site when they get there. First, you should make yourself aware of the advice the search engine companies themselves give:

• Google Webmaster Guidelines
• Google Accessible Search FAQ
• Yahoo! Search Help
• MSN’s Guidelines for successful indexing

You can submit your URL to the three major search engines:

• Submit to Google
• Submit to Yahoo!
• Submit to MSN

Google offers Google Webmaster Tools, and Yahoo offers Webmaster Resources.

Use Poodle predictor to simulate how the Google web spider will see your pages.

Interesting commentary can be found at:

• blog of Matt Cutts, head of Google’s team devoted to fighting attempts to spam Google search.

Legal Issues

Disclaimer: I am not a lawyer.

More help

You can find more help in the following IRC channels:

• #web at Freenode
• #html at Freenode
• #css at Freenode
• #javascript at Freenode
• #accessibility at Freenode

Accessibility questions can also be posted to the Accessify Forum.

Contact me

If you have queries, complaints, or praise, please contact me at: