Visual design tips
Accessible sites do not have to be ugly. Accessibility comes from good organization
of the content, followed by good structuring of the content in HTML. Then style the page to make
it attractive for visual readers.
If you are already a graphic designer, that's good. All of the visual principles
you've learned are valid here, except that you no longer have complete control over
what the user sees. If you are not a graphic designer, don't settle for
ugly. You can still make your pages look good by learning a few simple techniques.
Look critically at every site you visit; figure out what is good or bad about
it and why it works visually or doesn't.
A brief oral history
- From scientific papers through graphic mania to today's content-driven Web.
- Use screen "real estate" wisely.
- All important content must be "above the fold" when the reader first sees the page,
even on a small screen. (Apple has mastered both this technique and how to
content under the fold.)
- Watch out for clutter. (Compare Google
- Provide enough "white space" around elements so that they are visually
distinguishable, but don't leave big areas of blank screen.
(B&H Photo does this well; also shows good
grouping, alignment, and proximity)
- Think about how and where viewers will be seeing your pages. It might make
sense today to use CSS at-rules (@media screen, @media print, @media handheld) to
adapt your layout to different uses.
- Make elements easy to find on the page
- Group related elements (news, navigation, features) together.
- Align elements on the page both vertically and horizontally if appropriate.
(Compare neighbors Wildlife World and
the Phoenix Zoo)
- Use "proximity": headings go close to their related content,
captions close to their related pictures.
- Have a "focal point": make sure the user sees your most important
content first (Apple, again). Size, color, and position all help.
- Flashing advertisements kill everything else on the page.
(Sigalert.com is especially bad on small screens.)
- Use appropriate conventions
- Logo, search, and login go at the top.
- Simple main navigation goes next across the top.
- Detailed or local navigation goes on the left, unless you
are writing in a right-to-left language.
- Standard two- or three-column format is generally the most
readable, depending on content. You can lay this out with style sheets or
a simple table.
Department page does this well.)
- Violate conventions only if you have a really good reason to do so.
- Size images exactly as you want them to be displayed, then include the actual pixel height
and width in the <img> tag.
- Specify fonts that are designed for the screen
- Sans-serif is generally best
some serif fonts are ok (Georgia);
Times is worst (designed for newspapers!). Use any
decorative font you want in a logo image, but browser decorative fonts
are really trite by now.
- Don't make "ransom note typography"—use at most two font families
per page or site, and then only to contrast headings to text, or sidebar to main content.
- Format paragraphs and other content for readability
- Keep line length moderate, usually about half the page width for large
blocks of text. Wider columns may need increased line-height.
- Use text-align: left for blocks of text.
- Use text-align: center rarely for
a page heading or a special effect (my personal home page),
never for text blocks.
- Use text-align: right to connect form labels with their data entry boxes
or to connect left-hand captions to their associated images.
- Use text-align: justify
only if the column is wide enough not to leave rivers of white space down the middle.
(Photographer Robert Hansen's news page
is a good example, although the contrast could be improved.)
- Never use all caps for blocks of text or for emphasis in place of
<em> or <strong>.
- Separate text visually from its surroundings
- Use margin and padding, especially on the left, so that text never
bumps up against the border or another element.
- Also use padding for th and td elements, and never put heavy borders
around table cells. Light 1px borders or light background shading for rows are good; always
use border-collapse: collapse.
(Again, the CECS
faculty schedule is a good example.)
- Never put a background image or pattern behind blocks of text.
- Use relative, not absolute, values for most text specifications
- Font size, indentation, and margins are best with em units, which are relative to the
base font. Line height is just a number such as 1.15.
- Element width and positioning are best in percent (%) values, which are always
relative to the enclosing container.
- Borders and cell padding are the exception, best in pixels (px).
- There is no reason today to make text into images, except for a logo (top of this page).
- Fit the color scheme to the purpose of the site
- Black and silver are fine for teen music and games; bright primaries for
children's toys; pastels for fashion, medical, or senior themes; natural colors
for many general-purpose sites.
- Colors might be selected to match a company logo or an important
image on the page. (Bosch Tools blue, for example.)
- Use color with restraint
- Like fonts, use one main color and one secondary color for a page
or site; a third color might provide emphasis or contrast.
- Sports teams, universities, and flags have set colors; if they are strong
ones, use them sparingly. (The Lakers go over-the-top
with purple and yellow; Utah is more subdued; both
sites are a visual mess.)
- Make sure that your use of color is accessible
- Check for sufficient contrast (luminance ratio) between text and background.
Also check that contrast is ok for color-blindness.
- Never use color alone to provide information.
- Lynch & Horton's page on Visual
Design expands on some of the topics in
this paper. I especially like their discussion of color and contrast, including how to pick
colors from a photo of pebbles with subtle natural tones.
- Jakob Nielsen's Top 10 Mistakes in Web Design
is a long-time classic that he's updated recently.
- My own Color Tutorial covers multiple
color systems including RGB for the Web. Unfortunately, the Java color picker app may or may not work
on your system right
now, but the video—with in-depth coverage of RGB, HSB, and contrast—is available