Exploring the 4 Types of Headers in Google Sites Across Different Devices

Headers are an essential element of any website, and Google Sites offers four distinct header types to enhance the visual appeal of your web pages. In this tutorial, we will delve into each header type and analyze how images are displayed on different devices, including mobile, tablet, and large screens. We conducted tests using a 4x3 image to observe how each header type crops the image in various scenarios.

1. Cover Header

The Cover Header is designed to display the image in full on desktops, creating an impactful visual experience. However, on wide screens, the image is cropped from the top and bottom, ensuring the central portion remains visible. On mobile devices, the left and right sides of the image are dramatically cropped, focusing on the center. Tablets experience a moderate crop on the sides to fit the header size.

2. Large Banner Header

With the Large Banner Header, the image is displayed at half of its full size on wide screens, allowing other content to be placed alongside it. Similar to the Cover Header, wide screens crop the top and bottom of the image dramatically. On mobile devices, the image is cropped from the left and right sides, whereas tablets only experience a slight crop at the top and bottom.

3. Banner Header

The Banner Header showcases the image at one-third of its full size, making it ideal for sites with multiple content sections. On wide screens, the top and bottom of the image are dramatically cropped, revealing only the central part of the image. However, on mobile devices, the image is displayed in its entirety, preserving the full impact of the picture. Tablets, like wide screens, crop the top and bottom of the image but with a less drastic effect.

4. Title Only Header

As the name suggests, the Title Only Header does not display an image at all, focusing solely on the site's title. This header type is perfect for minimalistic designs or when you want to put more emphasis on textual content. Regardless of the device, only the title will be visible in this header style.

Conclusion:

Google Sites offers a variety of header types, each catering to different design preferences and content requirements. When selecting a header type, it's essential to consider how your images will be displayed across various devices, such as mobile, tablet, and wide screens. By choosing the appropriate header type, you can create a visually appealing and cohesive website that resonates with your audience across all platforms.

Remember to experiment with different images and header types to find the perfect combination that aligns with your site's goals and aesthetics. With Google Sites' versatile options, you have the tools to craft a captivating and engaging web presence. Happy designing!