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 |
Text, line art, comic strips |
Animation |
|
Avoid |
Logos |
Photographs |
Photographs |
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.
