The layout of your webpage is a key aspect of the Early Childhood Learning and Knowledge Center (ECLKC) site design. It enhances users’ experience and helps ensure consistency across the website. Page layouts are composed of several elements arranged in multiple ways with a certain purpose. Explore this page to select the most appropriate arrangement for your content.
General Page Layouts
| Page Layout | Purpose | Allowed Elements | Specifications, Limitations, and Examples |
|---|---|---|---|
| Article | Regular HTML page, most commonly used to display content on the website |
| Inline images, infographics, and block quotes are limited. They must be accordingly distributed in the text to keep the page responsive. Accordions, dropdowns, tabbed content, embedded videos, playlists, or view-only Smartsheets might be used sparingly, following elements standards. |
| Full Publication (PDF) | Introduces the link to a stand-alone PDF file with 6 pages or fewer, including an HTML copy of the content. |
| Inline images, infographics, and block quotes are limited. They must be accordingly distributed in the text to keep the page responsive. No hyperlinked text from introduction. Examples: |
| Short Publication (PDF) | Introduces a stand-alone PDF document with more than 6 pages, displaying an extended description below the “Download the PDF” button. |
| No more than one image. No hyperlinked text from introduction. The extended description is a summary of the content, preferably including the main subjects and SEO keywords in about 2-3 paragraphs. Example: The Family Partnership Process: Engaging and Goal-Setting with Families |
| Video | Page displaying the video player. Videos include webinar recordings and video clips. |
| Video players are displayed in a 640 x 360 proportion only. The introduction should include only one paragraph. Additional resources should be used sparingly. Video attachments should be five or less, preferably documents mentioned by presenters if it is a webinar. For videos that introduce a prepackaged course, we recommend using a tabbed content element and packing attachments in a downloadable zip file. Examples: |
| Podcast | Page displaying the audio player. |
| Podcasts are displayed through a blue player bar, without images; however, the Head Start Talks app requires a feature image. Feature image: 660 x 308 px Example: Continuity of Care Podcast |
| Learning Module | Displays an interactive learning module, built in Storyline or other special software application. |
| Learning module max. width: 900 px |
| Video Series Playlist | Displays videos that are part of a series. |
| The selected video plays on the left, and the column on the right lists the other videos in the playlist. The blurb and additional resources for each video appear below the video when selected. Each individual video page can be accessed by selecting the title on the left. Videos may be displayed in any specified order or sequence. We recommend limiting the number of videos in a playlist to 10. |
| Podcast Series Playlist | Dynamic series of podcasts. |
| Inline Image: 600x400 px (for the ECLKC). Feature image: 660 x 308 px (for the Head Start Talks App). Example: Research on the Go |
| Resource Items Series | Displays resources in a series. Each individual resource is an exclusive part of that series. |
| The number of resource items is not limited. Examples: |
| Explore Cards Series | Displays resources in a series through Explore cards. Each individual resource is an exclusive part of that series. |
| The number of Explore cards is limited to 9. Examples: |
| Resource Items Collection | Displays resources in a static collection. Each individual resource can be stand-alone or part of another series. |
| The number of resource items is not limited. Useful for collection of external resources. |
| Explore Cards Collection | Displays resources in a static collection through Explore cards. Each individual resource can be stand-alone or part of another series. |
| The number of Explore cards is limited to 9. Useful for collection of dynamic series or collections, or for external resources. |
| Descriptive Dropdown Collection | Displays resources in a static collection through descriptive dropdowns. Each individual resource can be stand-alone or part of another series. Useful for large collections. |
| Descriptive dropdown collections might be introduced by an embedded video or a playlist. Example: Transition to Kindergarten |
| Dynamic Series or Collection | Dynamic series or collection displaying resources sorted with a specific criterion and based on a determined content type or taxonomy field(s). See Dynamic Collections and Taxonomy Fields. |
| Recommended use for series or collections of internal resources. Introductory text with a length of 40 to 100 words, describing scope and content. Feature image: 600 x 400 px minimum. Examples: |
| Book | Displays a series grouped together by an outline. The outline allows the user to quickly scan the content. |
| Designing the outline is the first step in generating a new book. The cover page is the landing page for the book, but it is not part of the outline. It introduces the book. The book may contain pages with an article, publication, video, video playlist, and learning module layout, including all the allowed elements. It cannot contain other series or collections. While any existing individual page can be added to a book, it cannot be part of any other book. |
Special OHS Use Layouts
| Page Layout | Purpose | Allowed Elements | Specifications, Limitations, and Examples |
|---|---|---|---|
| Topic Page | Exclusive design for topic landing pages, this layout is not used for other purposes. |
| Introduction: 60 to 100 words (recommended) Fifty-fifties: 4 maximum Featured Resources: 5 maximum Explore Resource Cards: 9 maximum Example: Children with Disabilities |
| Blog | Displays a writer’s or group of writers’ observations or opinions. It may include a video recording (video blog). |
| The post may include a list of resources below the blog, but always ends with the short author biographical note in italics. Feature portrait image: 480 x 640 px Example: Early Head Start: The First Step Toward School Readiness |
| Event | Promotes registration for a national event, in-person or virtual. |
| An event will appear in the Upcoming Events river page and in search results. Event feature image: 290 x 180 px |
| Job Posting | Provides a list of jobs related to education anywhere in the U.S. The Job Center is a voluntary service and does not list every available Head Start or early care and education job. |
| The Job Center section is used by grantees and agencies interested in recruiting staff. |
| Story | Shares a Head Start program story, involving a participant, who can be a member of the staff, the community, or a family. |
| Participant contact information is required, but not shared on the page. Image feature image: 540 x 540 px Examples: |
| Webform | Allows OHS and Centers to collect information from users. | Webforms are used for specific sections of the website. Example: Contact Us | |
| River Page | Customized dynamic series or collection displaying resources sorted with a specific criterion and based on a determined content type or taxonomy field(s). See Dynamic Collections and Taxonomy Fields. |
| Introductory text with a length of 40 to 100 words, describing scope and content. Feature image min. width: 600 x 400 px Examples: |
Last Updated: August 21, 2024