This responsively-designed template was created for departments/programs/special initiatives/offices. The fixed layout has space for a "hero" (banner) image (A), page title (B), a "body" section that can accommodate copy and images (C), and a column on the right reserved for a menu/nav. (D), with an area below for office location, hours and links to social media channels (E).
A common practice among institutions of higher learning, standardization ensures brand consistency and provides website visitors with a more cohesive user experience. Further, this approach makes it easier for the web team to troubleshoot and updates the website as needed.
A) Typically a photo, the same hero image can be displayed in three different resolutions —small, medium, and large— the hero, and the text overlay ("Organization" in this example), are optional. The hero is attached to the homepage "content-type" and will automatically appear on every page.
B) The system is programmed to automatically make page titles uppercase.
C) Body copy should not be too dense and make use of styles for readability. Please make sure to use the correct semantic structures for headings. There are several ways you can add photos.
D) Ideally, the number of menu items should not exceed six. The italicized bold text and red dot are visual cues that indicate the current page. The menu's location and design cannot be changed.
E) The more detailed, the better. If linking to social media channels, don't forget to update those social media channels. As in the case of the hero, this information will appear on every page.
Interested in doing more? Here are a few examples of what other users are doing on their websites: