Tag: Layouts

Google Sites Layouts Vastly Improved My Digital Breakouts Site

Posted in EducationTagged , , , Leave a comment

I love Google Sites and recently spent a lot of time using it to convert 14 digital breakouts from Classic to New Sites. Since then, Google has announced a new tool in the Google Sites editor – layouts. Layouts solve the problem of aligning images and elements which can be tricky because there are no guidelines like those in Google Slides and Google Drawings. For instance, a page in my Langston Hughes-themed poetry digital breakout has side-by-side YouTube videos. I could never get them to be the exact same size and perfectly aligned. Layouts solved that problem. Have a look:

Using Layouts

Find the layouts tool under the Insert menu in the Google Sites editor.

Screenshot of layouts options in the Google Sites editor.
Layouts options in the Google Sites editor.

The editor uses the picture icon but Google Drive files, YouTube videos, Google MyMaps, file uploads, and Google Calendars can also be added to a layout. I hope web embeds will join this list in the future.

Animated GIF showing elements that can be added to layouts.
Options for elements to add to a layout.

My Digital Breakouts Platform Site

I created the platform for my digital breakouts using Google Sites. For each subject area, I embedded a Google Doc that listed and linked to breakouts. I decided to revamp each subject area page using layouts. This meant using thumbnail images and text instead of a single doc for each page. Here are before-and-after shots:

Before and after images of the Math page of my digital breakouts website.

Before and after images of the World History page of my digital breakouts website.

Pro tip: When using images in Google Sites, pay attention to accessibility by adding alt text:

Animated GIF demonstrating how to add alt text to an image in Google Sites.
Click twice to bring up the crop, link, and Add alt text options.

How using Google Sites Layouts instead of embedded Google Docs improved the site:

  • Design. It’s cleaner and nice. The thumbnails are much more prominent.
  • It is searchable. The content in the embedded Google Docs was not searchable in the Google Sites search:
    Animated GIF showing that a search of my digital breakout site for the term "The New Deal" yielded no results.
    No results!

    Look what happens now that the site uses layouts with images and text instead of embedded Google Docs:

    Animated GIF showing a search of my digital breakout site for the term "The New Deal" yielding the correct result.
    It works!
  • The site is now much more mobile friendly. The embedded Google Docs did not render nicely on tablets and phones. They had to be opened in the Google Docs app to be accessed. Now they are all available with no additional apps to open.

So check out my digital breakouts site. Hopefully, you will like how I used layouts and find a digital breakout or two to use with your middle or high school students. How do you use Google Sites in your instructional practice? What Google Sites questions do you have? Please comment below or tweet me @TomEMullaney. Thanks for reading.

Advertisements