Let’s Raise Our Google Sites Game – Part 1: Design

Creating digital content is a real-world skill that benefits our students. Students can learn this skill by creating digital portfolios. Google Sites is a great tool for creating not only digital portfolios, but lesson or unit websites, class websites, family communication, and digital breakouts as well. I have been enamored of this tool since its current iteration dropped in Fall 2016. However, any tool is only as good as what it creates. Having seen Google Sites created by many members of my PLN, especially those focused on edtech, I have to share a hard truth:

We can do much better. I see too many sites created with Google Sites that are not visually appealing. A site can have valuable information but no one will read an unappealing website no matter how useful its content. When we work with Google Sites and expect students to create portfolios with this tool, we need to model good web design. We need to create something eye-pleasing if not eye-catching. Using Google Sites to create attractive web content is a very achievable goal for teachers and students. For an example of a beautiful website made with Google Sites, please have a look at Kris Armijo’s edtechforward.com.

But I’m not a professional web designer! Don’t worry. Here are some simple design tips to raise your Google Sites game.

Professional Photography for Site Banners and Imagery

The most effective way to incorporate good design into a website is professional photography. Do you possess neither professional photography skills nor equipment? No problem! Use Unsplash to find and use professional photos. The image at the top of this post comes from Unsplash. This website does not require users to cite them though you should. More on that later. Another great source for copyright-friendly imagery is the Wikimedia Commons. When making a Google Site for a lesson, use Wikimedia Commons images to tell the content’s story. Think about the Crash Course history series. Besides the Thought Bubble animations, all Crash Course does is use copyright friendly images to tell a story. Google Sites is the perfect platform for doing the same thing with websites.

Images are best used for site banners. As of 2019, large banner images are in style. Try a large image and see how it looks as a cover or large banner. One word of caution – an image that is too small will look pixelated as a cover or large banner.

Screen capture of banner options in Google Sites. These options include Cover, Large banner, Banner, and Title only.
Do not be afraid to try Cover and Large banner.

Here is an example of a Google Site that uses an Unsplash image as a banner:

Screen capture of a Google Site that uses an Unsplash image as a large banner.
This Google Site has a large banner from Unsplash.

Here is an example of a Google Site that uses a Wikimedia Commons photograph as a banner:

Screen capture of a Google Site that uses a Wikimedia Commons image as a large banner.
This Google Site has a large banner from the Wikimedia Commons.

To ensure the banner image is uniform on all site pages, click on the home page in the Pages menu before clicking “New page.”

Screen capture of the Pages menu in the Google Sites editor. There is a number 1 by "Home" and a number 2 by "New page."
Click “Home” then “New page” to ensure all pages have a uniform banner.

Readability Adjustment

Google Sites will default to adding a readability adjustment with banner images. Try different ways to display a title on a page. There is nothing wrong with leaving the banner image in place without any text, turning off the readability adjustment, and adding a title just below the banner.

“Bank War” is in title font.

Sometimes, it is best to have the title on the banner image and leave the readability adjustment turned on. Try each way and see which is most visually appealing.

A Google Site with a title on top of the banner image and the readability adjustment turned on.
“Map” is in title font. The readability adjustment is turned on.

The Footer

When using copyright-friendly professional photography, be sure to cite your sources. Use the Google Sites footer for this purpose. Add citations in a footer once and they appear on every site page. To add a footer, scroll to the bottom of any page and click this button:

Screen capture of the Google Sites Add Footer button. This button is found at the bottom of every page in the Google Sites editor.
The Add Footer button

This is the footer of Campfire Conundrum, my digital breakout that teaches heat transfer. I used an image from Unsplash for some design flair:

Screen capture of a Google Sites footer.
Be a good digital citizen and use Google Sites footers to cite your sources.

Make Text Pop with Color Contrast

To understand how color contrast affects web design, please have a look at some text:

Graphic with Choice 1 in dark red against a black background, Choice 2 in light blue against a white background, and Choice 3 in white against a black background. Only Choice 3 has enough color contrast between the text color and background color.
Which choice is the best?

Of these three choices, which is most visually appealing? Which choice makes the text pop? It is obviously Choice 3. Choice 1 is too dark against a black background. Choice 2 is too light against a white background.

There are easy free tools to ensure enough contrast between text and background. One is the WebAIM Color Contrast Checker. Use it to determine if there is enough color contrast. It even has sliders to help adjust colors until they have enough contrast.

An animated GIF of sliders on the WebAIM Color Contrast checker changing a color until it contrasts with white.
The WebAIM Color Contrast Checker determines color contrast and improves it with sliders.

The Colorzilla Google Chrome extension picks colors off websites and copies the exact color hex code to the clipboard. Paste the code into the WebAim Color Contrast Checker.

Animated GIF demonstrating Colorzilla picking a color off a website and copying its hex code to the clipboard.
Colorzilla in action.

Another way to find a color and its hex code is to Google “color picker.”

Animated GIF demonstrating Google Search's color picker.
Color Picker in Google Search

Keep color contrast in mind when choosing a color in the Google Sites Themes menu.

Animated GIF of the Google Sites Themes menu color picker.
This is an important decision!

For more information about making text pop with color contrast, please watch this video.

Organize Content with Layouts

The layouts option in the Google Sites Insert menu has made it easier to make multiple elements on a page work in harmony.

Six Google Sites layout options in the Insert menu.
Google Sites Layout options.

Here is the animated GIF of layouts in action from Google’s blog post announcing layouts:

Animated GIF from Google's blog post announcing layouts in Google Sites.
Adding layouts makes elements work in harmony. Source: G Suite Updates Blog.

Be careful when adding elements to a page. Having too many things on one page is not visually appealing. For a deeper dive into Google Sites layouts please read my blog post, Google Sites Layouts Vastly Improved My Digital Breakouts Site.

Link Pages with Buttons

Buttons are a good way to link to subpages on a site. They can work stacked vertically.

Buttons on a Google Site stacked vertically. The buttons are circled.
Buttons stacked vertically.

Buttons can also be laid across the screen horizontally.

Buttons on a Google Site laid out horizontally. The buttons are circled.
Buttons laid out vertically.

One note about buttons in Google Sites: they are a rare instance where students should be encouraged to type ALL CAPS. Buttons are meant to pop. They simply do not unless they have ALL CAPS text.

The Key to Site Identity – Add a Favicon

Favicons give a site an identity. A favicon is a small logo that appears in a web browser tab. For example, have a look at the Google Sites favicon.

The purple logo gives Google Sites an identity.

The Google Sites favicon is great. For Google Sites. It is not great for any website created with Google Sites. When users do not add a favicon, Google Sites defaults to the Google Sites logo favicon. That tells viewers nothing about the site! The good news is that adding a favicon to a Google Site is very easy. Simply click the three dots in the editor.

Animated GIF demonstrating that users can add a favicon by clicking the three dots in Google Sites.
Add a favicon by clicking the three dots.

Create a favicon by creating a new Google Drawing. Set the dimensions to 512×512 pixels. Download the image as a .png file and use it as the site favicon. For a demonstration of adding a favicon to a Google Site using Google Drawings, please watch this video:

A favicon can be the site logo as well. To add a site logo, hover the mouse over the site’s title in the upper-left corner of the Google Sites editor.

Animated GIF demonstrating how to add a logo to a site in Google Sites.
Add a site logo by hovering the mouse over the title in the Google Sites editor.

Keep it Fresh with Google Sites Newest Features

There are two new Google Sites features that add new design and organization elements to sites.

Tables of Contents

Tables of contents have the potential to be a visually pleasing way to organize site content. Have a look at this animated GIF from Google’s blog post about Google Sites tables of contents:

Animated GIF from Google's blog post announcing tables of contents in Google Sites.
A table of contents is a nice way to organize large amounts of content. Source: G Suite Updates Blog.

Image Carousels

As of 2019, image carousels on websites are in style. They are finally available in Google Sites! Have a look at this animated GIF from Google’s blog post about Google Sites image carousels:

Animated GIF from Google's blog post announcing image carousels in Google Sites.
Image carousels are finally available in Google Sites! Source: G Suite Updates Blog.

Have a look at this image carousel:

Image carousel of French Revolution post cards.
An image carousel of French Revolution post cards on this Google Site of French Revolution resources.

For more information about how to create image carousels, please watch this video:

What do you think? Are you going to make some changes to your Google Sites? Let me know or tell me how bad my Google Sites are in the comments below or tweet me, @TomEMullaney. Learn more about raising your Google Sites game in part 2 of this post which addresses Google Sites embeds.

Does your school, organization, or conference need professional development to help teachers make the most of Google Sites? Have a look at some of my offerings and connect with me on Twitter.

Photo by Ihor Dvoretskyi on Unsplash.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s