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:
Find the layouts tool under the Insert menu 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.
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:
Pro tip: When using images in Google Sites, pay attention to accessibility by adding alt text:
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:
No results!
Look what happens now that the site uses layouts with images and text instead of embedded Google Docs:
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.
I have made fourteen digital BreakoutEDU activities. Please have a look, attempt to crack the locks, and give me feedback! Can you succeed in 45 minutes?
For those new to BreakoutEDU, hints for cracking the lock are built into the site. Some are visible, some are hidden. Some are distractions.
Update 11/25/16: I will no longer post new digital breakouts to this blog post. I am now storing my digital breakouts on this website.
Update 11/17/16: I have made a how-to resource for digital breakouts.
Unbought, Unbossed, and Unlocked teaches students about trailblazing 1972 presidential candidate Shirley Chisholm. This makes a great addition to any US history unit focusing on the 1970s.
Defeat Barry Goldwater! was designed for high school history students. The 2016 presidential election has a controversial candidate in Donald Trump. Before Trump, there was Barry Goldwater. Use this digital breakout to teach your students about LBJ, Goldwater, the Civil Rights Movement, Freedom Summer, the Mississippi Freedom Democratic Party, and the Gulf of Tonkin Resolution. Be warned – with seven locks this breakout is in the higher range of difficulty.
Combine Like Terms and Save Halloween! was a collaborative effort amongst myself, Beth Liner, Ashley Vaughn, and Sara Rodgers. As the instructional support staff at Gravelly Hill Middle School, we were tasked with making an activity to help seventh-grade students review combining like terms. We put our heads together and this breakout is the result. The amount of math involved in this breakout makes it a good choice for an entire block period or two days in a conventional bell schedule.
Decide The 1800 Election! is my attempt to capitalize on the Hamilton musical craze while teaching middle and high school students about Hamilton, the 1800 presidential election, and the Federalist-era United States. Be warned – cracking the date lock is especially tricky in this breakout!
Richard KNICKSon blends some of my favorite things, Digital BreakoutEDU, US History, and the New York Knicks! The Knicks content is window dressing to give the site a nice orange and blue color scheme while making students feel like they are in the late 60s and early 70s. This breakout is good for teaching about Watergate, Nixon, and protests against the Vietnam War.
I challenged myself to make a digital breakout for the first half of US history. The result is Ratify the Bill of Rights. This is my first breakout using DocHub, a great tool for manipulating PDFs.
I made Sell World War I to the American Public as a relatively easy way to review World War I concepts. It is mostly from the US history perspective. This breakout is good for someone just starting out with digital breakouts as it focuses more on content and less on gaming.
I designed Escape to Summer Vacation as a fun end of the year activity for Caroline Smith, my middle-school math teacher colleague. This challenging breakout tells the story of Caroline trying to escape to summer vacation. I hope you like order of operations and integers!
I made Escape the Guillotine with 9th-grade World History curricular materials. This digital breakout will help middle and high school students review the French Revolution. I used EdPuzzle to include short videos and convey hints.
I made Liberate the Sphero to commemorate the arrival of Spheros at our school and introduce math teachers to digital breakout.
Liberate Paris was made with curricular materials for 9th-grade students.
I made the Cuban Missile Crisis with materials I used for 11th-grade students. This breakout is sequential – students unlock one lock at a time as they proceed through four days of the crisis. There is a lock for each day.
These breakouts were inspired by Justin Birckbichler‘s and Mari Venturino‘s work at DigitalBreakout. Additionally, I was inspired by the work of James Sanders and Mark Hammons at BreakoutEDU.com. The work of these fine educators was integral in designing these activities. I am especially grateful to Justin for the awesome Google Sheet I copied for use in some of these breakouts.
Thank you for reading this. Please feel free to give me feedback on Twitter, @edtechtom, or in the comments below.
