Personal and Social Responsibility

Sample Website Layout

Homepage Layout

A website is different from other text-based publications because viewers do more than just read - they interact with contents through exploration of links and sometimes audio, animation, and video. Although the content of websites varies greatly, effective websites capture the attention of viewers and make it easy for them to find information.

A website is a collection of pages all linked to one another. Within this collection is the homepage, the page you see first when you go to a website. The homepage is like the first part of a book in one as it contains the title page (header), table of contents (navigation), and introduction (content).

Here are the common elements of a homepage.

Element

Information contained

Location

header

  • the name of the website (organization, business, topic, etc.)

  • can include a graphic banner

  • at the top, spanning across the page

content or body

  • contents of the page including text, images, and links to other pages

  • may include information presented as audio, video and/or animation

  • below the header

  • occupies most of the page

navigation bar

  • provides links to the other pages of the website

  • may include a search tool

  • vertically on the left side of the page, or horizontally across the top underneath the header

footer

  • copyright statement

  • date of creation or last update

  • email link to a contact

  • name of company, organization or individual responsible for the site

  • can include links to help, feedback, and FAQs

  • at the bottom, spanning across the page

Some home pages include interactive features to help locate information or use the site. These include:

  • A site search tool that allows you to type in a key word or phrase. The tool will then provide you with the pages in the site that contain your keyword or phrase.

  • A FAQ (frequently asked questions) page providing answers to common questions, often with a link to the correct page to get more information.

  • A site map which graphically represents the organization of the website. The map typically lists the pages in a hierarchical fashion. Users can link directly to pages from the site map.