Department of Surgery Website Guidelines

Headlines

Headers are the anchors of page navigation, making it easier for people to understand and digest the information, as well as improving user experience. Headlines are also important for search engine optimization (SEO). Google ranks pages in a search based on how they are built with SEO in mind. Headers should be ordered based on importance with the most important information above the secondary information.

[H1 or Header 1] This header is the largest on the page and serves as the title for the page's content. Each page should only have one H1 header.

[H2 or Header 2] This header text guides visitors to a specific section of the web content. H2 subtitles help divide web pages into bite-sized chunks of information.

[H3 or Header 3] This is a subheading of the H2.

H1, H2, and H3 headings are all available in three different weights: regular, thin, and bold. The Department of Surgery has chosen to primarily use the regular weight for headings in the site. All headers should be left aligned on the page.

Headline Size 1

Headline Size 2

Headline Size 3

Headline Size 4

Headline Size 5

Headline Size 6

Block Quote

The Department of Surgery has chosen to use a block quote to introduce page content.

The block quote is a great opportunity to highlight key content on the page

Top Navigation

• The top navigation menu has a standard format across all CU Anschutz websites and isn’t intended to be customized.
• The top navigation menu is reserved for the Department of Surgery as a whole, not for individual Divisions or programs. (This ensures that visitors can easily get from one part of the departmental website to another.)

Side Navigation

• The side navigation is arranged according to each Division/Section. You can create an unlimited number of sub-sites within sub-sites, each with its own side navigation menu.
• For simplicity and ease of use, Dan Robinson recommends the “standard” side navigation menu, which you can see on this page and almost everywhere else in the Department of Surgery website.
• There’s also an “accordion” side navigation menu you can use (example). This style of menu allows for multiple menu levels that the user can open and close. If you have a complex site and want users to be able to navigate it via a single side menu, the accordion menu could be a good fit.
• On small screens (e.g., smartphones and smaller tablets), all content collapses into a single column, and the local navigation menu moves to the top of the page, but you have to click the “In This Section” button/heading for it to drop down.
  

Padding

Whenever content needs to be separated on a page, padding is added to create a clear definition where one section begins and one ends. We use padding to give us some "negative space" or breathing room between text or an image and its containing border. Please reference the template below for examples of appropriate padding.

Department of Surgery Division Template

---

Arranging Content

The Department of Surgery has Identified two helpful widgets to help organize content and condense several pages into one page. Google prioritizes pages with content within tabs over accordions. Please note, Sitefinity only allows a maximum of 6 featured tabs. If there is more content than will fit on 6 tabs, please use accordions.