Articles About Building Websites
Standards-compliant code samples, detailed comparisons of techniques and busting myths.
- Visible Vertical Scrollbar (in Firefox)
- A copy-and-paste solution for users and authors without side-effects.
- Best Markup for
- HTML is the best choice for nearly all websites.
- Line Lengths and Readability
- Is there an optimal line length? Should we place limits on sizing?
- Using HTML Heading Numbers
- Why do we have
<h6>instead of just
- HTML E-mail: Essential Techniques
- Use layout tables,
styleattributes 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
Code Samples for Normal Websites
- Block Navigation Lists
- Site menus where the whole of each link is clickable.
- Horizontal Lists
<ul>go across the page using CSS.
- Breadcrumbs Markup
- Links inside list elements or links separated by punctuation?
- They rarely suit a design but it’s easy to remove them.
- Properly left-aligned
<legend>text across browsers.
floatfor Form Layout
Code Samples for Technical Websites
- Code Boxes with
<pre>using the CSS2.1
- Syntax Highlighting with HTML for Diverse Formats
- Present any code sample coherently using simple, lightweight markup.
- Compact Definition Lists using CSS
<dl compact>with CSS
- Archive Links for Blogs
- Detailed analysis of using
<a rel>instead of
- E-mail Protection from Spambots
- Stop new addresses ever getting into spamming databases.
- Use Your
- Include this at the start of HTML documents.
- Web Developer Toolkit
- Links to Firefox extensions I find invaluble when developing websites.
- Navigation Using
- Implementations of
<link rel>reviewed by me.
- Performant Protest using
- A blog entry about storing their catalogue in a PHP
array(), wrapping HTML around it, then adding CSS and images.
- Image Rollovers with
- A transparent
<img src alt>with CSS
background-imagebehind it is swapped on
a:hoverusing 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.