Energy Consultancy
IT Consultancy
Free Services

live GB grid intensity gCO2/kWh

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:
    • FireFox
    • Safari
    • Chrome
  • 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:

Home, About/Contact Search

See our privacy policy.
Contact us or report abuse.
Site content copyright ExNet 1993--2018 unless otherwise stated.