ExNet HTML Style Guide
Throughout the pages we provide on this and other Web sites we build we
try to apply style rules.
The Aims
We aim to ensure the following:
- The pages are usable with images turned off, or from a browser such
as Lynx or those in PDAs which cannot display images easily.
- The pages are reasonably quick to download even at 1kByte/s as
when the Net gets congested or if you are using 9600bps dialup,
or on a poor mobile connection.
- The pages will work on older browsers where possible, with
'graceful degradation' meaning that no essential information or
links appear only in tables, frames, or graphics that may not be
universally renderable.
- Pages will not require vast amount of screen real-estate, in width
or vertical scrolling.
- Any particular group of pages will have as consistent and simple a
style as possible, so that you can absorb the content without having to
spend too much effort, consciously or unconsciously, decoding the
layout on each page.
- Having said all that, we make use of the features that the newer
browsers bring, just not at the cost of allowing the rest of the
world in.
Technical Details
To try to ensure the above we follow these basic rules whenever
possible:
- Do not put essential text or links in a structure that will only
work if the browser supports (and has enabled) one or more of the
following:
- Frames (no main page should be frames).
- Tables (many browsers cannot handle complex text and links in tables).
- In-line images (sometimes turned off for speed).
- Style sheets.
- Java, JavaScript, ActiveX and other active content.
- Try to keep the main text of a page under 20kB, and all text and
embedded images for a page under 40kB, and in particular try to
keep background images under 10kB.
The first 10kB of content sent to the browser should generally
be enough to have everything important shown "above the fold".
- Try to keep down the number of different embedded images (and other
objects) on each page, say less than 20 different images per page,
since each new object has some overhead including possibly a long
round-trip delay to open a new HTTP connection.
- Wherever possible put in width and height attributes on images so
that text can be laid out and seen without waiting for images to
load. Newer browsers may use srcset and sizes along with those.
- Generally use a dark-text-on-light-background style, ensuring that
any background colour is light, and any background image is light
and has few sharp features that can distract from overlaid text.
- Do not assume the user can spare more than about 400 pixels wide
for large frames or images; they may have a busy desktop or be
reading from a small display in a laptop, tablet or smartphone.
- Do not be too clever with colours; some viewers will be using a
monochrome screen and many users have some sort of
colour-blindness.
- We try to test our pages as they go up with one or more of the
following browsers:
- For new HTML text, tag and attribute names should be rendered in
lower-case for slightly better compression on the wire, with
HTTP's (eg deflate) text content compression.
Sites Following This Guide
Some sites that follow this guide: