Getting website details right
Updated on .
-
Don’t convert to uppercase in the HTML, do it in CSS, so that copies are in titlecase.
-
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.
-
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 toimg
tags by following the W3C’s alt Decision Tree and Axess Lab’s Alt-texts: The Ultimate Guide.