Getting website details right

Don’t make text uppercase in the source of a page but instead do it in CSS with the text-transform: uppercase; property, so when a user copies the text, it’s not copied in uppercase.

Don’t use roman numerals for numbering, but follow a more hierarchical approach, using the counter-reset attribute:

ol {
	counter-reset: list;
	list-style-type: none;
}
ol li {
	counter-increment: list;
}
ol li:before {
	content: counters(list, '.') '. ';
}

Avoid underlining links, as this style has been phased out by most major websites. It’s still ok to underline them on hover.

Keep line length to 45-90 characters.

Keep individual pages small, less than 100KB, to avoid web bloat for users on less-than-ideal connections.

Avoid typewriter habits.

Don’t use “click here” as link text.

Use font-variant-numeric: tabular-nums; for numbers that need to line up vertically, like lists of dates.

Some of the typographic ideas from Elliott Cable’s Markright article might be useful to pick up, but he does have some odd predilections.

Have a link to the RSS feed visible.

Follow RSS Feed Best Practices.

Make sure Conditional GET works for the RSS feed.

Include soft-hyphens (preferably as Unicode character U+00AD so it’s present in the text format of pages) in prose to allow for full-justification.

Use the system font stack.

Add non-breaking spaces between words that should go together (using ⌥Space), like 100 km. In CSS content properties, it’s useful for suffix icons (like those for link styles on this site) and specified with \00A0, like this:

content: "\00A0↗";

Add rel="author" to a link pointing to the site’s author and wrap these sections in the <address> tag for Author detection in Instapaper.

Add Website icons.

Add role="img" aria-hidden="true" to any SVG images that are used as logos or icons to prevent them from being mentioned by screen readers.

Add alt attributes to img tags by following the W3C’s alt Decision Tree and Axess Lab’s Alt-texts: The Ultimate Guide.