Skip to content
Printer-friendly version

Layout and Formatting


This page is part of the California Department of Education (CDE) Web Design Standards, which only applies to specific CDE Web sites. Visit the CDE Web Standards to determine if these standards apply to a specific Web product (Web site, Web page, Web document, or Web application) that has been developed by or for the CDE.

Most Web pages (not including Web applications) on all CDE Web sites are created using Adobe's Contribute software templates. WebNETS, which is a custom software application that was created by CDE staff, is also necessary in order to create and process most Web pages on the CDE's public Internet site. Portions of these standards, where noted, apply only to CDE users of Contribute or WebNETS software; or to Web application developers.

Return to Design Standards

Page Width

The width of the content on any page viewable by users must fit without scrolling horizontally on an 800 x 600 screen resolution. The width of the page must be fixed at 750 pixels or less and centered. If absolutely necessary, some reports may exceed 750 pixels. In this latter case the page width must not exceed 95% of the screen width.

Paragraph Justification

All paragraphs must be block justified to the left margin. The first sentence of a paragraph or text block should start at the left margin, and should not be indented. The exception to this rule is when the indent style or the blockquote style is used.

Link to the CDE Home Page

On all Web pages that are viewable to end users, a link to a California Department of Education (CDE) home page (Internet or Intranet Web sites as appropriate) is preferred. If a link to one of the CDE home pages is not practical, the Web page must include the text, “California Department of Education” somewhere on the page.

Contact Information

Contact information must appear on all pages that are viewable by end users, or pages must contain a link to an e-mail form designed for messaging the appropriate contact. For pages that are not part of Web applications, please see the Questions Line Section of the Design Standards and for Web applications, please see the note below as well.

Breadcrumbs

Each Internet Web page must have “breadcrumbs” that follow the format and usage on the CDE Web site. Intranet Web pages do not require breadcrumbs because three levels of site navigation remain on each page.

Breadcrumbs Note for Contribute Users for the Intranet

If a Contribute template is used for the Intranet that does not have top and left-side navigation, then breadcrumbs are required.

Breadcrumbs Note for Web Applications

The main page (also strongly recommended for all appropriate sub-pages) of a Web application that are developed for the Internet and the Intranet must have breadcrumbs that follow the model of breadcrumbs used on the Internet. Breadcrumbs should be presented so they are on one line only. Abbreviation may be required to ensure that breadcrumbs fit on one line only.

Printing

All Web page content (i.e., not including headers, footers, or navigation) must:

Tabs

Must be implemented using the color pattern for the appropriate area of the main CDE Web site or using the correct standard colors for Web applications. Tab sections are not allowed on the main Intranet site, though they may be used in Intranet Web applications. The tab section must incorporate a one-pixel border using the appropriate color. See the Color Section of the Web Design Standards to determine appropriate color use. Tabs must be presented in a single row above the tab section. Tab labels must be at least three characters in length.

Note on Tabs for Contribute Users

Any page that will contain tab sections must benefit from their use. Tab sections are created by staff in the Web Services Office, but can then be edited by Contribute Users. Tab sections are considered to be part of site navigation and are therefore a layout format that is part of the Core Information Structure (CIS). See the approval process for CIS elements (CDE Intranet) for more information on approval of tab sections.

For Contribute Users

Find in Page

This is a feature for Contribute Users only for the main CDE Web site. The Find in Page feature may only be used for pages that are dense with content where providing an easy to use equivalent for the browser's Ctrl+F feature is desired. The feature is placed as a block using the appropriate Share Asset in Contribute and must be placed near the top of the Web page.

Web Page Length Limitation

When a Web page becomes lengthy, navigation within the page can be difficult or cumbersome. Consequently, if a Web page exceeds approximately 10 monitor screens (350 lines of text) in length at 1024 x 768 resolution, the page must either have a table of contents with anchor hyperlinks, or the page must be broken down into multiple smaller pages. If the “table of contents with anchor hyperlinks” option is chosen, “return to top” anchor links are required at the end of each subsection. If the “multiple pages” option is chosen, the best approach is to create an introduction page with a table of contents, where the table of contents has links to the various sections of the document, each of which is on a separate page.

Web pages that exceed approximately 20 monitor screens (700 lines of text) in length must be broken down into multiple smaller pages. Subsection pages must have links back to the table of contents on both the top and bottom of the pages.

Appropriate Use of Templates for the Internet

Please use these Web page templates for only the specific purposes stated below:

Template Name Appropriate Use of Templates

Basic-Page

For most pages.

CurrCommission Curriculum Commission letterhead.

FundingResults

For funding results only (e.g., results of grants, contracts, and allocations).

Letterhead

For current Department letters only. (current version.)

Letterhead-SBEonly State Board of Education letterhead.

News-Release2004

For 2004 news releases and newer.

News-ReleasePriorYear

For news releases from a previous year.

RequestForApp

For Requests for Applications, Requests for Proposals, Requests for Data and Requests for Submissions.

Wide-Data-Tables

For pages where a data table is too wide to be displayed properly on the Basic-Page template.

Appropriate Use of Templates for the Intranet

Please use these Web page templates for only the specific purposes stated below:

Template Name Appropriate Use of Templates

Basic Page Template

For most pages.

Letterhead

For Department letters using the current letterhead only.

Memorandum

For pages recreating the official Department memorandum.

No Left Nav For pages that must display a Captivate presentation or other multimedia that is larger than will fit appropriately in the Basic Page Template. No Left Nav should be used very sparingly and only when absolutely necessary. While No Left Nav does have breadcrumbs, it may still be advisable to add navigation back to previous pages.

Wide-Data-Tables

For pages where a data table is too wide to be displayed properly on the Basic Page Template.

Intranet Only

Calendars

Calendars created for the CDE Intranet should be created using the No Left Nav template. After a table has been created with seven columns and six rows (occasionally seven), the table must be selected and the calendar style must be applied to it. Bulleted lists should be used to indicate calendar entry items, because the bullets will help differentiate between items. Special spacing has been applied to bullets used in calendars to maximize available space. Calendars on the CDE Intranet must look like the following example:

Calendar Example (CDE Intranet)

Web Applications

Headers and Footers

Approved headers and footers must be used on all Web application pages that are displayed for users. Applications that are posted to CDE Web sites must link directly to an appropriate header and footer located in the /includes/webapps/ (Internet) or /includes/intrawebapps/ (Intranet) directory roots. If the needed directory is not available to the Web application developer, then the appropriate header and footer includes must be requested from the CDE and must be placed in and referenced to a central location.

Most Web applications will utilize the same basic header that we call the “Image” header. DataQuest applications will generally use a variation of the Image header that is augmented with the word “DataQuest” on the right side of the header. Web applications that are highly integrated into the functionality of the main CDE Web site may use the appropriate one of eight different “Topic” headers that correspond with the colors of the different topic areas of the main CDE Web site. Specific pages within any Web application (except the main page and/or logon pages) that require a shorter header height, or that require a header layout that is more appropriate for printing, may use the “Report” header.

The appropriately sized standard footer must be used in combination with all of the approved header types except the Report header, which has its own recommended corresponding Report footer that is used instead of the standard footer.

Web application pages that are on CDE Web sites must use an approved header and footer combination for every page of the Web application.

Headers/Footers Approved Use
Headers/Footers Approved Use

All layout table-based (non-CSS) headers and/or footers.

May only be used by legacy applications that are not to be significantly updated.

CSS Image header and standard footer.

Used for most Web applications.

CSS DataQuest header and standard footer.

Used for Web applications that are part of DataQuest.

CSS Topic headers (eight styles that correspond to each topic area on the main CDE Web site) and standard footer.

Used for Web applications that are highly integrated into a specific topic area on the main CDE Web site.

CSS Report header and Report footer.

Used only for specific CDE Internet pages within Web applications that need a shorter and more simple header and footer. Use of the Report footer is recommended, but can be omitted so the page has no footer if appropriate.

Report Header and Footer

The Report header and footer combination is only to be used for specific CDE Internet pages within a Web application that require a shorter and more simple header. Examples of pages that can use this header and footer are Web application pages that include report results, pages that are specifically intended to be printed, or signature/confirmation pages that are designed to be mailed back to the CDE.

The Report header include has two lines available for text, which must be limited to the following:

Breadcrumbs are not required on pages using the Report header, but may be included if they utilize the standard style for breadcrumbs and if they are included on the first line of the page below the Report header.

A page title using an <h1> heading must be used at the top of the page immediately below the Report header and breadcrumbs (if they are present). No other <h1> headings may be used on a page. See the Headings section of these Design Standards for more information.

In addition to the standard CSS files that must be used, all pages using the Report header must use the CSS files that have been created specifically for use with these pages.

Page Width

The width of the content on any page viewable by users must fit without scrolling horizontally on an 800 x 600 screen resolution. The width of the page must be fixed at 750 pixels or less and centered. If absolutely necessary, some reports may exceed 750 pixels. In this latter case, the page width must not exceed 95% of the screen width. Tip: If an existing page currently uses one or more layout tables with a 100% width to define the page width, the table can be enclosed in <div> tags and the <div> tag attribute can be set to 750 pixels.

Contact Information

Web applications only require contact information on the main entry page or the login page (or both) for the Web application. Contact information is allowed, but is not required on subsequent pages.

External Cascading Style Sheets

Approved styles and formatting must be used on all Web application pages that are displayed for users. Applications that are posted to CDE Web sites must link directly to an appropriate standard cascading style sheet (CSS) file located in the /css/ folder at the directory root and must utilize the standard CSS styles. If this directory is not available to the Web application developer, then the appropriate CSS files must be requested from the CDE and used as external CSS for all pages in the Web application.

Use of HTML font tags are not allowed.

CSS must be used for page layout. Tables may not be used for page layout. See the Tables section of these Design Standards for more information on acceptable use of tables on CDE Web sites.

Custom Left Navigation

If a Web Application uses its own custom left navigation, it must use a generic CDE header (no topics) and link text in the custom left navigation must be different from common navigational link text on CDE Web sites (e.g., Contact US, or Home). An exception to this is anything developed using the Publications template.

Fieldsets

Information on Web forms should be broken into manageable chunks using the <fieldset> (Outside source) and <legend> tags, where applicable. This practice makes the form more accessible for screen readers and improves the usability and appearance for sighted users.

Tabs

Tabs can be used, but should conform to the tab example in the following ways. They may only be used below a standard heading, standard breadcrumbs (if any), and the standard <h1> (application title) and <h2> (page title) headings. Tabs must also be in a single row, contained within the width of the page header/footer and the content div, and they should conform to the shadow, light, and dark color usage of the example.

Related Content
Questions:  Web Services Office | tsdweb@cde.ca.gov
Download Free Readers