Layout and Graphics

Layout

Page layout is dictated by use of the tools available in the CMS editor; the document type used for the page is also a factor. ALA provides a variety of document types from which content providers can choose. This section provides guidelines for designing the content area and choosing a document type for its layout. See Appendix B for a description of the overall design and common components of the page in the ALA website.

Common Page Elements

All pages on the ALA site must contain a top banner.

In addition, most pages within the ALA site will display the following:

  • Left-hand navigation to the other pages within the page’s section;
  • A breadcrumb path of links at the top of the page depicting the position of the page within the site’s information hierarchy;
  • Content;
  • Send, Print, Cite or Share buttons, and
  • A footer that provides copyright, privacy policy and contact information.

These sophisticated design and navigation elements are automatically generated for each content page, which leaves you free to focus on developing content that is attractive, readable, consistently styled, and accessible.

Typography

Alignment and Spacing

Left alignment of headings

Headings must be left aligned. See 4.2.3.5, below for another important restriction related to underlining.

Left alignment of paragraphs

Paragraphs should be left aligned.

  • Exceptions: Quotations, photo captions, and call out text may use other alignments, as appropriate.

Avoidance of traditional typesetting practices

Traditional typesetting practices for print, such as indenting paragraphs and inserting double spaces after each sentence, must not be used on the ALA site.

Avoidance of blank paragraphs

Blank paragraphs should not be used to add vertical spacing. The ALA web style sheet ensures that paragraphs and headings are automatically separated by appropriate vertical space, thus breaking up large blocks of text into easy-to-read sections.

Text Style

Text size and type face are controlled by the site’s cascading style sheet(s) and are relative to the user’s browser settings, in accordance with the accessibility standards developed by W3C.

Use of named styles

Pages must, for all content, use named styles as defined in the style sheet.

Restrictions on specification of text characteristics

Pages must not assign any text characteristics such as font size and font family to content. (If you want to use text features that are not provided by the style sheet, contact the ALA web team to discuss your needs and explore having such features added to the style sheet.)

Textual Emphasis

Textual emphasis may be added to content via boldface, italics, or upper case.

Coding textual emphasis

Textual emphasis must be accomplished via current XHTML coding methods (i.e., strong tags for boldface and em tags for italics). All font coding using b and i tags must be replaced.

Appropriate use of textual emphasis

Textual emphasis should be used sparingly and should serve only to highlight specific information, to direct the reader’s attention to it.

Restrictions on italics and boldface

To ensure further readability, large blocks of text (more than two or three sentences) must never be set in italics or boldface.

Restrictions on upper case

Blocks of text of more than a few words must never be set in upper case.

Avoidance of underlined text

Underlined text must never be used, because underlining leads the reader to assume that the text is a hyperlink.

Avoidance of headings for textual appearance

Headings should never be used solely for textual appearance. This is because headings are structural elements intended to reflect the hierarchy of topics and ideas presented in the page's full text.

Headings should be used to convey information about the content aggregated beneath them. It is especially important to use headings properly for accessibility purposes because screen reader users and low-vision users tend to use headings to orient themselves within web pages. They also tend to skim headings as a way to assess a given page's relevance.

Headings

The website design provides five distinct levels of headings (h1 through h6) to break up large blocks of information and help users locate information quickly.

There must be one and only one h1 heading on every web page. All other heading levels (h2 through h6) must be properly nested, following either a heading of the same level or a heading of the level immediately preceding it.

Heading content must provide a brief summary of the section of text immediately following.

Heading level selection must reflect the heading content and how it relates to all other headings and sections of text on the page.

Use of default style for level of heading

Headings must use the default heading style for their level of the information structure on the page (e.g., h1, h3).

Avoidance of text attributes for headings

Pages should never specify any text attributes for headings, including color, font weight, and font size.

The only exception to this rule is book titles. Book titles referenced in a heading must be in italicized text.

Sentence case for most headings

Headings should use sentence case (capitalization of the initial letter of the first word, and the following text in lower case, except for proper names).

Title case for headings with proper names

The heading of any content whose title is a proper name (e.g., Caldecott Medal or 2008 Salary Survey Report) should use title case (capitalize the initial letter of every word except articles, conjunctions, and prepositions).

Avoidance of all upper case for headings

Headings must not appear in all upper case.

Embedded links

The cascading style sheets in place across all ALA and division sites assign a look (color, font family, font size, font weight, text decoration, etc.) to all links in the various sections (e.g., main content area, left navigation column, breadcrumbs, banner).

Default link style for embedded links

Links must use the default style (which sets the color, font family, text decoration, etc.) as specified in the style sheet; i.e., links must not contain any specification of appearance that would override the style sheet.

Tables

Tables have the purpose of displaying tabular data in rows and columns. A table should be used if the data or factual information warrants headers at the top of columns of cells or to the left of rows of cells. Never use tables for layout purposes only because it creates accessibility problems.

Restriction of tables for display of tabular data

The use of tables should be restricted to tabular data, such as a table of mean salary by type of position, and should not be used for layout of non-tabular data.

Specification of table and cell widths

Table and cell widths should be specified in percentages rather than pixels. (This will help ensure that the table will display as consistently as possible across a wide variety of browser types, monitor settings, and user-defined font sizes.)

Table accessibility features

Tables should include a concise summary of the table data, and row and column tags to aid users accessing the data with assistive devices.

Color

Color, when used appropriately and judiciously, can enhance a web page. However, color presents challenges, mainly for accessibility. The ALA website has been designed to use color appropriately, and the style sheet provides for the colors of headings, text, etc., in the various areas of the pages. It is not anticipated that content pages will need to use custom colors often, if ever.

Appropriate use of colored text

Paragraphs of text may apply color to a few words or an entire, short paragraph.

Color coordination with www.ala.org color scheme

Any custom color, whether for text or background, must coordinate with the http://www.ala.org color scheme. (If you are not experienced in color management, you should either consult with someone who is, or refrain from using custom colors.)

Restriction on number of text colors

Any page or group of related pages should never use more than two custom colors for paragraphed text.

Avoidance of colored backgrounds

Pages should not use colored backgrounds.

Text-background contrast

A colored background must be of a lighter color than the text of the page, and the text-background contrast must be sufficient to provide adequate legibility of the text. Test the contrast in a dimly lit room, or with the monitor set at dim.

Avoidance of textured backgrounds

Pages must not use a textured background for any part of the page.

Avoidance of background images behind paragraphs of text

Pages must not use background images for areas in which paragraphs of text will be displayed, unless the image is a solid color or subtle gradient.

Color as redundant coding only

Color must not be used as the only way to convey information — i.e., if color is used to distinguish between two types of information, some other means must also be used for this purpose, in addition to color (e.g., label, pattern, shape, border thickness).

Graphics

Use of Images

Image and media files should serve to illustrate the web page content, add visual interest to it, or enhance the user’s understanding of it.

Avoidance of images to display text

Images must not be used to display text.

  • Exception: Text may be included in a logo that has a substantial graphical component, but only if it is an integral part of the logo.

JPEG Format

The Joint Photographic Experts Group (JPEG) format is an image file format that uses a compression algorithm aimed at achieving a balance between file size and image quality of photographic images. According to the Wikipedia article on JPEG, this file format “is at its best on photographs and paintings of realistic scenes with smooth variations of tone and color” and “is not as well suited for line drawings and other textual or iconic graphics, where the sharp contrasts between adjacent pixels cause noticeable artifacts.”

JPEG for photographs

JPEG format must be used for photographs.

JPEG for images with complex or continuous tones

JPEG format should be used for other images that contain complex or continuously variable tones.

Avoidance of JPEG for logos and simple images

JPEG must not be used for line drawings or other images that consist entirely of large blocks of solid color (e.g., most logos).

GIF Format

The Graphics Interchange Format (GIF) is a lossless image file format that preserves sharp edges, allows for transparency, and restricts any one image to a maximum of 256 colors (see Wikipedia article on GIF).

GIF for logos and buttons

GIF must be used for logos and buttons where the detail is simple, the color transitions are sharp, and the number of colors is small. (See the exception for PNG, below.)

GIF for animations

GIF animations should be used infrequently and with great care; it must be possible for users to stop the movement.

GIF for charts

GIF must be used for charts. (See the exception for PNG, below.)

GIF for transparency

GIF must be used for images that contain areas intended to be transparent against the background of the page. (Note: No such exception exists for PNG in this case, because not all browsers render PNG transparency correctly.)

PNG Format

The Portable Network Graphics (PNG) file format is similar to GIF but optionally (PNG-24) allows an image to contain millions of colors (see Wikipedia article on PNG). Note: Although PNG officially supports transparency, some browsers (notably some versions of Internet Explorer for Windows) do not display PNG transparency correctly.

PNG as a substitute for GIF

PNG may be used for any image that meets the criteria for GIF use, unless it contains transparent areas.

PNG for images with more than 256 colors

PNG-24 should be used for any image of a type that would otherwise call for GIF and needs more colors than GIF supports.

Selection of Image Format

Table 1 shows a summary, for each image file format, of when to use it and when to avoid it.

 

JPEG

PNG

GIF

Use

Photographs
In-game screenshots
Movie stills
Book covers

Text, line art, comic strips
Logos
Desktop application screenshots

Animation
Transparency
Logos

Avoid

Logos
Desktop application screenshots
Line art and text
Comic strips
Fine lines and sharp color contrast

Photographs
In-game screenshots
Images with transparency

Photographs
More than 256 colors needed

Image sizes

Images must be displayed at their actual size.

  • Note: Images downsized by the browser will take longer to download than will images saved at the small size intended for the page, because their file size is actually that of the larger image.
  • Note: Image manipulation software is better at resizing images than browsers are, and will produce images of higher visual quality.

Text equivalents (“alt” text)

“alt” text mandatory

All objects (images, scripts, applets, audiovisual elements) that contain non-text content must have an associated “alt” text attribute.

Purpose of “alt” text

ALT tags should address the function and meaning of the non-text elements.

  • Example: <img src=”alalogo.gif” alt=”Go to ALA home page.”>

Size of “alt” text

ALT text must use between 7 and 100 characters.

Use of links in addition to “alt” text

For complex content that depends on visual organization (such as a chart or video clip) to illustrate information that is not fully described on the page and whose alt text does not provide a complete text equivalent, consider linking to a separate document that gives a full-text description of the graphic.

Do not use a longdesc attribute to link to a separate HTML document because, according to W3Schools.com (http://www.w3schools.com/TAGS/att_img_longdesc.asp), the longdesc attribute is so poorly supported that it should not be used.

ALA Logo

The ALA logo appears in the banner of all ALA site document type pages.

The ALA logo or text referencing ALA branding must be incorporated into all feature slides displayed on the ALA homepage. For example, in the absence of the logo, this or similar text is an acceptable alternative: "An initiative of ACRL, a division of ALA."

Avoidance of ALA logo in content area

The ALA logo should not be repeated in the content area of individual pages. The ALA logo may be used on pages in division or other subsite areas.

Appropriate use of ALA logo

The ALA logo or other ALA identifying graphics should be displayed in keeping with standard ALA usage.

GIF for ALA logo

All uses of the ALA logo should employ PNG or GIF instead of JPEG, as the logo will be displayed in crisp, smooth lines and without “bubbly” visual artifacts.

ALA logo colors

The combined ALA logo and text can be rendered in black and white (#000000 and #ffffff) or in red and blue (#ff3333 and #333399). ALA logos in various formats are available for your use.

Content File Types

The predominant content on http://www.ala.org will be web pages produced by content providers who select a content document type (see A.5) into which they enter or upload text and upload images. In certain situations, it is advantageous to add content in a downloadable file type such as Adobe’s Portable Document Format (PDF) or one of the Microsoft Office formats (Word, PowerPoint, Excel). This section outlines the appropriate use of these formats.

New content as web pages

Content on http://www.ala.org must be created as web pages unless there is a valid reason to provide it in another format.

Avoidance of non-web formats

Formats other than PHP (i.e., PDF, Word, PowerPoint, Excel, etc.) should be used as redundant formats — i.e., to the extent feasible and appropriate for the content, materials should be provided both as web pages and in the alternative format(s).

PDF Format

PDF documents have several drawbacks:

  • Inaccessibility: Screen readers cannot read many PDF files unless accessibility features have been incorporated into the file. If using PDF format, use the accessibility features available in Adobe Acrobat. Review the accessibility information for Adobe Acrobat on Adobe's Accessibility website to learn how to make your PDF files accessible.
  • Legibility: PDF was designed for print and can be difficult to read online. Text resizing and search functions also perform differently in PDF documents, which can confuse users, especially if they are using a plug-in that displays the PDF within the browser window.
  • Navigation: PDF documents lack the global navigation options used in web browsing; this prevents users from seeing related or alternative options.
  • Viewer Requirements: PDF viewers are not embedded in all browsers and will require some users to download a separate viewer. When PDF documents are used, the author must provide a link to download the free PDF reader, Download the free Adobe Reader program. Only include one such link per page.
  • Efficiency: PDF files tend to be substantially larger than web pages that provide the same content, and load times are correspondingly longer. PDF files can be appropriate under certain conditions:

Use of PDF to preserve precise layout

PDF may be used if the document’s layout must be preserved precisely (e.g., official forms, brochures)

Use of PDF for documents likely to be printed

PDF may be used if the user will most likely print the document rather than read it online (forms, flyers, brochures)

Microsoft Office Formats

Use of MS Office formats for documents likely to be edited by end users

Documents that users are likely to edit in order to adapt them to their own purposes should be provided in appropriate MS Office formats.

  • Example: A document of suggested policies for public libraries, intended to be easily edited by a specific library to customize it for their organization’s use.

Audiovisual Formats

This area will be elaborated upon in the future, as the ALA does not have a systematic approach to publishing videos due to the limitations of our content management system.

General File Type Considerations

It is best to avoid using proprietary formats that require purchase or licensing of commercial software. However, sometimes such formats are necessary. (See Section 3.3 for guidelines on indicating the file type to which a link leads.)

Provision of proprietary formats obtained from outside ALA

Proprietary formats may be used if the information is archival or comes from outside ALA, and is available only in that format.

Use of proprietary formats for offline manipulation

Proprietary formats may be used if the intended use is downloading the content for data analysis or manipulation.

Link to download file viewer or plug-in

If a viewer or plug-in is available for a proprietary file type, the page must contain a link to download it.

Uniqueness of viewer/plug-in link

The link to any one viewer or plug-in must appear no more than once on any one page.

Forms and Scripts

Some of ALA’s activities require interaction with its website visitors. These include, for example, membership renewal, conference registration, donations to ALA, and a variety of “Contact Us” topics. Such activities are generally supported by forms.

Form Organization

Content of forms

Forms should not contain anything other than data collection that is necessary for the purpose for which the form is provided.

Form content organized into logical groups

Content in forms should be organized into logical groups to aid scanning and completion.

Optional questions at end

Optional questions should be asked only after a form is completed.

  • Exception: Optional questions that are logically related to required questions must be displayed next to the related required question.
  • Example: Line 2 of a mailing address is displayed immediately after line 1.

Restriction of visual information

Forms should use the minimum amount of visual information necessary to distinguish content groups. When appropriate, use the <fieldset> element to group form elements visually as well as semantically.

Content group headings

Headings of form content groups must use the appropriate level of heading (h1 through h5) for the group. In addition, fieldsets can be labeled using the <legend> element.

Form Navigation and Completion

Form title

A form’s title must match people’s expectations and succinctly convey the purpose of the form.

Start page for complex or time-consuming forms

A start page that sets people’s expectations should be used for any form that requires substantial time or requests information that users will need to look up.

Avoidance of distractions in mission-critical forms

Distractions and any links or content that may lead to form abandonment must be removed for mission-critical forms such as checkout or registration.
Example: Remove the left and top navigation from the form itself, returning it on the success message that the user receives upon form submittal.

Use of progress indicators

Progress indicators that communicate scope, status, and position should be used for forms with a known sequence of multiple Web pages.

Logical tab index

The tab index must be set to support a logical sequence of tabbing through a form.

Form Labels

Language of form item labels

Form item labels should use succinct, natural language. The <label> elements must use the "for" attribute to clearly associate item labels with the appropriate input fields and/or controls.

Capitalization of form labels

Form labels must use sentence-case capitalization.

Language of action labels

Action labels should employ language relevant to the users’ goals and should clearly indicate the actions they initiate (e.g., “Purchase” instead of “Submit”).
Note: “Submit” is computer centered and almost never reflects a user’s goals.

Use of buttons for actions

Actions should use buttons instead of links.

Use of top-aligned labels

Top-aligned labels may be used when it is important to reduce completion times or if flexible label lengths are needed for localization.

Use of right-aligned labels

Right-aligned labels should be used when the form has vertical screen real estate constraints.

Selection of label alignment

Form labels should be either right aligned or top aligned and should not be left aligned.

  • Exception: Left-aligned labels may be used when the form requires people to scan a list of labels to learn what’s required or to answer a few specific questions out of many.

Uniformity of label alignment

A uniform label alignment should be used throughout a single form.

Input Fields

For each <input> element, the "id" attribute should be used to associate a given input with its label. The <label> element's "for" attribute value should be the same as the <input> element's "id" value.

For each <input> element, the "title" attribute should be used to provide brief selection instructions to screen reader users who are tabbing between input fields. For example, "Select Master's degree" would be a title attribute for the Master's degree checkbox item under an education level question or heading.

Use of checkboxes

A single yes/no choice, or a set of independent yes/no choices, should use a checkbox or a group of checkboxes.

Use of radio button groups

A set of two to six mutually exclusive choices should use a radio button group.
Exception: When the two alternatives are a yes/no set, a checkbox should be used instead.

Use of drop-down lists

A set of seven or more mutually exclusive choices should use a drop-down list.

The <optgroup> element should be used to group related choices, if possible. Use the "selected" attribute to set the drop-down list default to either a common-sense default value (such as "United States" for country selection) or to the brief selection instructions used for the "title" attribute.

Text field size indicative of amount of text expected

Text input fields must be of a size that indicates the amount of text that is expected to be entered.

Variation in sizes of text fields

A form must not use the same size for all text fields in a group unless the same amount of text is expected in all of them.

Indication of required fields

Forms must indicate the fields that are required by displaying the word "required" in parentheses along with each field label. The required note should be to the right of the labels. For all required fields, the "title" attribute for the <input> element should indicate that the field is required. For example: "You are required to enter your last name."

Indication that all fields are required

If all fields on a form are required, the form should include a single statement to that effect, rather than including the "required" note for each field.

Legend to explain “required” indicator

A form that has required fields must include a legend that explains what the asterisk indicates.

Actions

Actions can be described as Primary and Secondary. Primary actions have the purpose of directly assisting users in completing the form; they include actions such as Purchase, Next, Go, and Continue. Secondary actions provide auxiliary support, and do not assist in completion of the form. Secondary actions include, for example, Cancel, Reset, and Go Back.

Avoidance of secondary actions

Where feasible, secondary actions should be avoided on forms.

Clear distinction between primary and secondary actions

If secondary actions are required for completing a form, a clear visual distinction between the primary and secondary actions should be provided.

Alignment of input fields with primary actions

Input fields should align with primary actions to create a clear path to the completion of the form.

Avoidance of destructive secondary actions

If potentially destructive secondary actions such as Reset or Clear are included in a form, a dialog box should appear, requesting user confirmation of the action.

Communication of form processing status

While a form is being processed, it should clearly communicate its status, to avoid duplicate submissions.

References

For more specific information on good web form design, see: Wroblewski, L. (2008). Web Form Design: Filling in the Blanks, Rosenfield Media, 2008; version 1.0

Approvals

Approval of form, script, or software program

Any form, script, or software program must have received the approval of the unit Webmaster (or ALA Help Desk in lieu of a unit Webmaster) before being placed on http://www.ala.org.

Approval of email address for automated relay forms

Because of security issues, the e-mail address of anyone to whom automated relay forms will be addressed must be submitted to the ALA Help Desk before the form is activated on http://www.ala.org, or the form will not function properly.