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 individual pages small, less than 100KB, to avoid web bloat for users on less-than-ideal connections.
-
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.