A website is a sum of many individual parts that make up the anatomy such as the URL, the header, navigation, content, footer etc.
Frequently, we use terms when referring to websites that not everyone knows. Below is the anatomy of a Pratt Engr Template website and the terms used to describe the different regions of a site.
Regions:
Header [1]
The header is the top area of a page and consistently displayed throughout the site. It typically contains the site branding, including the Duke logo, site name, link to department or university and the site search.
Primary Menu [2]
The primary menu is main navigation of the site and typically displayed directly below the hearer.
Hero [3]
This region typically holds a large image or visual on the home page of the site. It it meant to grab attention.
Content Top [4]
The content top is primarily used to hold the Duke Alert bar.
Content [5]
The content region is where the main content for the page is displayed. This area typically holds the bulk of the page content.
First Sidebar
This is primarily used to hold the the 'secondary navigation' or sub nav menu links. It's a menu of child-pages related to the parent navigation item. This helps organize a site with lots of content – three or more levels of main menu items.
Second Sidebar [6]
The second sidebar is content that displays on the right side of the content region. It's used for adding pieces of information or media that is related to the page's content.
Content Bottom [7]
The content bottom region is displayed below the content region and both sidebars. This region spans the full width of a page. Research summaries are frequently added to this region on the home page.
Footer [8]
The footer is the bottom area of a page and consistently displayed throughout the site. It typically contains the site name and contact information, various links to affiliations, Duke or Pratt branding, and copyright information.
Vocabulary:
Breadcrumb
A navigational crumb that shows the current location of a page within a website. The term comes from the Hansel and Gretel fairy tale where children drop breadcrumbs to form a trail back to their home.
Call to Action (C2A)
A visual element asking users to complete an action. Some examples of a call to action: subscribe to a newsletter or apply to a program.
Media
Images, documents, and remote videos (i.e., YouTube, Vimeo) can be uploaded and managed in the site's media library.
WYSIWYG
Acronym for What You See Is What You Get. The editor where text and media are added using a rich text field to a web page.