Simple & Useful

Basics

These five lines are essential to any site that is going work to on all devices and be accessible – every page should begin with them.

<!doctype html>

  <html lang=en>

  <head>

  <meta charset=utf-8>

<meta name=viewport content="width=device-width,user-scalable=yes">

Each matters because they tell the browser what it should do with this document because:
1 – it is html (!doctype html)
2 – that the primary language is english (lang=en)
3 – works with a multilanguage character set (charset=utf-8)
4 – it scales to the device it is on (viewport content="width=device-width, user-scalable=yes")

lang=en may be changed if the site is in another language, so a text-to-speech reader would know how to pronounce the words.

Here are the HTML5 tags which are most frequently used within the <body> and help give your pages a meaningful structure so they can be navigated by a machine reader or someone using a screen reader.

<header>

  <hgroup>

  <nav>

  <article>

  <section>

  <figure>

  <figcaption>

  <aside>

  <footer>

This model includes all these tags and, if you look at the source, you can see how they work.

Navigation

When you design the the navigation for your site make sure the font is large enough and that the contrast is strong enough to be easily seen. Too often the site navigation is done like this:

font-size:11px;font-style:italic;color:#ccc;background-color:#777

Instead of this:

Registration Curriculum Students Parents Calendar CampusMap

font-size:16px;color:#fff;background-color:#000

Links

There are absolute links, relative links, email links and links to navigate within a site.

The absolute uses the complete url of the site linked to, the relative uses the relationship to file to which it is linked, whether it is in the same directory or another one within a directory containing the different ones, the email has mailto and address added and the link within a site uses a # and id. These can take the you to a particular place on the current page or to one on another page.

This is what they look like in the markup.

An absolute link:
<a href="http://www.psu.edu/">Penn State</a>

A relative link:
<a href="assignment2.html/">Assignment 2</a>

An email link:
<a href="mailto:elizabeth@foo.edu">Elizabeth Regina</a>

A link within site:
<a href="#three">Section 3</a><h3 id="three">Section 3</h3>

Files and how their size is measured

These are the most commonly seen units for size for files on a computer and relationship in size they have to each other.

1024 Bytes = 1 Kilobyte
1024 Kilobytes = 1 Megabyte
1024 Megabytes = 1 Gigabyte
1024 Gigabytes = 1 Terabyte

They are also refered to with these abbreviations:

Bytes = B
Kilobytes = KB
Megabytes = MB
Terabytes = TB

To give an idea of what these units mean: one word equals about 10B, 10KB equals a page from a book, a 500 page book in plain text is about 1MB, the same size as 6 seconds of an uncompressed audio file, 1GB is around seven minutes of HDTV video or 1000 books and 1TB equals the amount of data in a university research library.

The size of your files is especially important if your audience is using a phone or has a slow connection to access the material. As I will point out often, text is, as you can see, the most efficient way to share information. It is also the easiest to use.

Making images scale on different devices

If you use images and want them to scale on different devices, add this to your style sheet: img{width:100%;height:auto}. The % can be varied.

And this in the body: <img src="foo.jpg"alt="foo">

Color

If you use color in your website and set it in your style sheet – {color:#930; background-color:#ffe;}

Instead of color names like lightslategray or goldenrod, use hex, rgb or hsl colors – for instance, use one of these color codes: hex (#daa520), rgb(218, 165, 32), or hsl(0.12%0.73%0.5%) in place of the color name goldenrod.

If you use color codes, then you can easily make changes, like #78d to the the hex for lightslategray(#789) to make it lighter and more of a bluegray.

This flexibility is especially important when a site will be projected and needs to be edited depending on a specific situation.