Google Sites Layouts Vastly Improved My Digital Breakouts Site

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:

• Spoken-word poems page of the Langston Hughes-themed poetry digital breakout.

Using Layouts

Find the layouts tool under the Insert menu 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.

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:

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

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:

  

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

  

• 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.