Get Informed
Anatomy of a Website
Hero…favicon…footer all can be a foreign language to some, but below we break down the sections to a website so that you have some understanding what your web developer may be talking about. Click the hotspot icons to read more on what each element is!
Favicon
A favicon is a small 16×16 pixel icon that is part of your branding. Its main purpose is to help visitors locate your page easier when they have multiple tabs open. Favicons work best as simple images or one-to-three characters of text.
Site Name
This is your site name most commonly this is your business name. This shows up in your browser tab.
Custom Domain Name
Hero/Header
This is a banner image, also referred to as a header or hero image. This is above the fold, or before people have to scroll down. This area should be used to make the most "impact" for your business.
Dropdown
Use of dropdown links help organize pages out, but keeping your main navigation short and sweet. These can be internal links, anchor links, or external links.
Heading Styles
These are heading styles. Heading 1 is generally the largest, Heading 2 is generally a bit smaller
Index/Section
This is a section or index containing a heading and body copy (often a short introduction).
Banner Image
This is an a banner or background image. Horizontal or landscape images are best for these sections.
Index/Section
This is a second section/index that contains more content such as an image, title, buttons or links and a description.
Call to Action
Using buttons in a contrasting colors pulls attention to visitors to click on these buttons to see more.
Footer
The footer of your page contains usually ways for people to go through your site again with quick links, contacting you and then any unlinked pages (from your main navigation)
Call to Action Section
This is a fourth section/index that is also a call to action section. Because it is next to the footer, it is often referred to as a ‘pre-footer’ section. It should take your user to somewhere important and have purpose.
Footer Links
Quick links are commonly used to redirect people back to pages now that they are at the bottom of the site.
Newsletter
Have a newsletter? Footers are a great place to add a form to opt-in to your newsletter!
Let's Connect
Show where people can connect with you! Email, location, phone number, and don't forget your social platforms!
Privacy & Terms
Always ensure that you have these links somewhere on everyone page of your site. The footer helps by having a spot for your copyright, privacy, terms and then possible site accrediation.
Favicon
A favicon is a small 16×16 pixel icon that is part of your branding. Its main purpose is to help visitors locate your page easier when they have multiple tabs open. Favicons work best as simple images or one-to-three characters of text.
Site Name
This is your site name most commonly this is your business name. This shows up in your browser tab.
Custom Domain Name
Hero/Header
This is a banner image, also referred to as a header or hero image. This is above the fold, or before people have to scroll down. This area should be used to make the most "impact" for your business.
Dropdown
Use of dropdown links help organize pages out, but keeping your main navigation short and sweet. These can be internal links, anchor links, or external links.
Heading Styles
These are heading styles. Heading 1 is generally the largest, Heading 2 is generally a bit smaller
Index/Section
This is a section or index containing a heading and body copy (often a short introduction).
Banner Image
This is an a banner or background image. Horizontal or landscape images are best for these sections.
Index/Section
This is a second section/index that contains more content such as an image, title, buttons or links and a description.
Call to Action
Using buttons in a contrasting colors pulls attention to visitors to click on these buttons to see more.
Footer
The footer of your page contains usually ways for people to go through your site again with quick links, contacting you and then any unlinked pages (from your main navigation)
Call to Action Section
This is a fourth section/index that is also a call to action section. Because it is next to the footer, it is often referred to as a ‘pre-footer’ section. It should take your user to somewhere important and have purpose.
Footer Links
Quick links are commonly used to redirect people back to pages now that they are at the bottom of the site.
Newsletter
Have a newsletter? Footers are a great place to add a form to opt-in to your newsletter!
Let's Connect
Show where people can connect with you! Email, location, phone number, and don't forget your social platforms!
Privacy & Terms
Always ensure that you have these links somewhere on everyone page of your site. The footer helps by having a spot for your copyright, privacy, terms and then possible site accrediation.
