Screen Design - Final

Go back to Screen Design - Part 3

Best practices on screen design

The follow is a set of best practices for you to consider, in creating sites accessible to the widest possible audience.

Use standard code, approved by the W3C.

First, avoid code described as ‘deprecated’, as this code has essentially been retired and will not be supported by new browsers.

Second, use code as it was intended. So, if you are creating a headline, use one of the six heading tags to markup the content accordingly. This helps the browser understand the intention of the content, to better translate it to all users.

Provide text-alternatives for images and multimedia conveying meaning.

Whenever an important piece of content is included in an image, it’s critical that we provide an alternative method of accessing that content. For example, if your site has a link to audio file of a podcast, consider providing a text transcript for anyone who cannot access the audio content.

Select styles that enhance your content and do not distract from it.

Always provide alternatives whenever possible. For images, this means including alternate text to describe the image to non-visual users, as well as linking to non-visual methods of delivering similar information. For text, avoid relying on particular font characteristics to deliver important content. If you do, and that font is not available on a user’s system or if the user overrides your font choices, you risk your content becoming inaccessible.

Choose a color palette appropriate to your content, with enough contrast to be readable.

Be consistent with color throughout your site, using a color palette that supports your content. In other words, if your target audience is primarily comprised of kids, consider bright, bold colors.

Avoid situations where foreground and background colors are so similar that text becomes difficult to read. (There are many tools to aid you in selecting colors with enough contrast. Check out http://juicystudio.com/services/luminositycontrastratio.php for one example.)

Use consistent navigation and branding.

By placing your site’s logo/header and navigation in the same place on all pages, you help ensure users will always know where they are, where they can go, and how to get there. Provide as many navigational aids as possible, such as search functions and site maps, to assist users in easily finding the content they seek.

Use descriptive, well-placed, and easily readable links.

Ensure all links are descriptive enough to convey the purpose of the link. Avoid linking phrases like ‘click here’ or ‘read more’ because neither actually tells the reader what content will be found by clicking the link.

Also, use link colors that adequately separate links from surrounding text, even for color-blind users. And whenever you use an image as a link, be sure to include a text alternative.

Enable your content to be printed quickly and efficiently.

Most web pages are not designed for the printed page (nor should they be). But plenty of people still print web pages. So, we need to do our best to offer a user-friendly, printer-friendly way to allow users to print our web pages (without printing pages and pages of unnecessary backgrounds and navigation.)

This usually means one of two things:
1. You provide PDF versions of site content, customized specifically for printing.
(Check out http://www.printfriendly.com for an easy way to do this.)
2. You create printer-friendly style sheets to ‘turn off’ any extraneous aspects of the site that are not necessary when the page is printed.
(Here’s a great tutorial for getting started: http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/.)

Prioritize your content accordingly for mobile users.

The most important aspects of any mobile-friendly site are:
• Branding – whose web site is this anyway?
• Navigation – where can we go from here?
• Message – what is the purpose of this page?
• Call to action – what do you want me to do after reading this content?

If you focus on these four areas, you’ll be well on your way to creating a site that is highly accessible to your mobile audience.

Go Back - Screen Design - Part 1