The masthead is an optional layout element which appears at the top of your page, incorporating a large image or video, as well as an area for a short text snippet and a link. When done right, this area can offer a great opportunity to introduce a site or topic in a stimulating, visual manner.
Defining a purpose for the masthead
There are two primary types of images on a website: functional and decorative.
Functional images
The purpose of a functional image is to provide users with information. Some of examples of functional images include:
- A photo of a staff member with the purpose of helping people identify what the staff member looks like.
- A chart or graph illustrating data
- A logo
Decorative images
The purpose of a decorative image is to add visual interest to the page. Its primary role is to invoke a feeling or idea, not convey specific information. The masthead, as it was designed, falls into this category.
Choosing masthead images
When choosing masthead images, there are several things to keep in mind:
- The masthead size and aspect ratio are fluid: Because of the responsive nature of the Millersville website, the masthead displays at different aspect ratios depending on the size of the screen it’s being viewed on. This means your image may be viewed as a wide, short rectangle, or a shape that more closely resembles a square. Images with one main focal point work better, as you don’t have to worry about portions of the image being cropped off on smaller screens.
- Masthead image should NOT contain text: As mentioned in our previous article about creating accessible websites, text within an image is not accessible. Additionally, because your image is cropped to fit different screen sizes, text may not be entirely visible at certain sizes. Instead of adding text to your image, use the provided content box to create a dynamic text overlay. This ensures your content with be visible and readable to all users.
- Size images appropriately: Exact proportions have been provided to help you upload correctly sized images for this area. Using images that are too small will result in a low-quality, pixelated appearance on your site. Using images that are too large will affect page load times, creating a frustrating experience for our users. Please see our guide on resizing images in Photoshop for instructions on the best way to crop and size and your images.
Where to find images
- University Communications and Marketing: Our marketing department is working hard to provide up-to-date, quality imagery for all of our various marketing initiatives. You can view a sample of what’s available in our image repository or contact them directly and share your needs.
- Take your own: You may not be a professional, but it’s still original, relevant imagery. Just keep in mind the guidelines outlined above when taking your own photos.
- Don’t use one: Masthead images are not required, so if you feel it’s not adding anything to your page, just uncheck “Masthead” in your page options.
Please do NOT search for images on the web, as they are likely to be copyrighted, which could cause trouble for the University.
The content of this blog entry was accurate at the time of publication. You can find the most current information about the masthead area and other Cascade-related topics in our Cascade wiki documentation.
Up next:
- Attend a workshop; your users will thank you
Upcoming training sessions:
- Monday, November 18 @ 2 p.m.