Articles About Building Websites

Standards-compliant code samples, detailed comparisons of techniques and busting myths.

Coding Habits

HTML E-mail: Essential Techniques: Use layout tables, graphical-gap.gif, style attributes and no semantic elements. (It’s that bad.)
My CSS Writing Style: One property per line in a consistent order. One stylesheet per medium with sections indicated by comments. Rulesets within each section follow source order.
My HTML Writing Style: Blank lines between sections and minimal indention, like plain text formatting. Fewest possible attributes in a consistent order, especially class and id.

Block Navigation Lists: Site menus where the whole of each link is clickable.
Horizontal Lists: Making <ol> and <ul> go across the page using CSS.
Breadcrumbs Markup: Links inside list elements or links separated by punctuation?
Hiding <fieldset> Borders: They rarely suit a design but it’s easy to remove them.
Positioning <legend> Text: Properly left-aligned <legend> text across browsers.
Using float for Form Layout: Put <label> alongside <input> using CSS float.

Code Boxes with <pre> and CSS: Taming <pre> using the CSS2.1 white-space property.
Syntax Highlighting with HTML for Diverse Formats: Present any code sample coherently using simple, lightweight markup.
Compact Definition Lists using CSS: Recreating <dl compact> with CSS float.
Archive Links for Blogs: Detailed analysis of using <a rel> instead of <link rel>.
E-mail Protection from Spambots: Stop new addresses ever getting into spamming databases.
Use Your <head>: Include this at the start of HTML documents.

Web Developer Toolkit: Links to Firefox extensions I find invaluble when developing websites.
Navigation Using rel: Implementations of <a rel> and <link rel> reviewed by me.

Performant Protest using Irrepressible.info: A blog entry about storing their catalogue in a PHP array(), wrapping HTML around it, then adding CSS and images.
Image Rollovers with alt Text: A transparent <img src alt> with CSS background-image behind it is swapped on a:hover using a preloaded CSS Sprite Sheet.
Mobile Browser Simulation using CSS and Firefox: Use that stylesheet in the CSS > Edit CSS box in tandem with the CSS > Display CSS by Media Type > Handheld feature from the Website Developer Toolbar.
Validating E-mail Addresses: Distribution lists from sign-up forms often contain typos and confused syntax. Here are some trends I have noticed.