Getting website details right

In no particular order, these are some ideas to make web content more pleasant to interact with:

• Keep individual pages small, less than 100KB, to avoid web bloat for users on spotty internet connections.

• Avoid JavaScript as much as possible. If it's absolutely necessary, try to only load it on-demand, like when the user clicks on a text input.

• Don't use "click here" as link text.

• 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.

Design

• 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, '.') '. ';
  	}
  

• Keep line length to 45-90 characters.

• Avoid typewriter habits.

• 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.

• 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 on macOS), 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 Website icons.

• Don't play animations by default, and think hard about on-hover ones.

Accessibility

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

• 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.

• Take inspiration from Rohan Kumar's Best practices for inclusive textual websites.

Feeds

• Have a link to the RSS feed visible.

• Follow RSS Feed Best Practices.

• Make sure Conditional GET works for the RSS feed.

• Use tag URIs for Atom entry IDs or RSS guids, as described by Mark Pilgrim.