I Converted My Digital Breakouts from Classic to New Google Sites

The summer before my senior year of high school, I had to read Crime and Punishment for my AP Literature class. At first glance, the book’s 545 pages seemed an insurmountable challenge. Then I realized that if I read 10 pages a day, every day, I would complete the novel with time to spare before the first day of school. That’s exactly what I did.

A similarly daunting task presented itself when Google finally allowed Classic Sites to be converted to New Sites this spring. I had 14 digital breakouts created in Classic Sites. The Classic and New Sites platforms are very different. Simply clicking the “Try it now” button only starts the work of making a site visually appealing.

Additionally, I wanted to improve the digital breakouts as I converted them. Starting the third week of June, I set out to convert all 14 breakouts by the end of July. It took six weeks of working like Charlie when he landed a job in a mailroom on Always Sunny, but I am proud to say, much like reading Crime and Punishment 23 years ago, it is finally done. Read on to learn about the changes I made, which digital breakouts are affected, the edtech tools I used, and how I addressed accessibility.

Changes made:

• Nicer design – Classic Google Sites rendered unattractive websites. New Sites makes beautiful websites. Classic sites did not have the option to have a banner at the top of a page, so that was the foremost design issue to address when converting to New Sites.
• Fewer browser tabs – One of my concerns with edtech is the overwhelming amount of tabs students and teachers constantly have open in their web browsers. While I was unable to completely eradicate multiple tabs, I was able to reduce the number of tabs in most of the digital breakouts.
• Favicons and site logos – I added a favicon and site logo (usually the same image) for each site. This avoids the generic Google Sites favicon and makes the site feel more immersive.
• Accessibility – I regret that I did not consider accessibility when I created the 14 digital breakouts. Thank goodness I learned so much about accessibility from my colleague Lindsey Blass when I worked for SFUSD. As I converted the digital breakouts I was able to use what she taught me about color contrast, narration, and alt text to make the breakouts more inclusive.
• Some locks have changed. For teachers who have used any of these breakouts before, please have a look to see how they have changed.
• The URLs are all the same. One great aspect of the conversion is that no URLs change. There is no need to update links anywhere they have been published.

Digital Breakouts Updated:

Social Studies

Let’s start with a four-pack of 60’s-70s US history digital breakouts I am especially proud of:

• Cuban Missile Crisis – The Cuban Missile Crisis was the very first digital breakout I created. I was never satisfied with it so I completely revamped it. Realizing the Armageddon Letters and Time Ghost YouTube channels told the story better than I can, I leaned heavily on their content. Another big change is the breakout is now sequential, meaning students work on one lock at a time to advance to the next lock. There are four locks in total.
• Defeat Barry Goldwater – This is most difficult of my digital breakouts. It could be a whole class exercise or an end-of-year US II review because it focuses on the Summer of 1964, a critical time for the Civil Rights Movement and US escalation in Vietnam. Warning: I did not reduce the number of tabs in this breakout. There are a lot of them.
• Shirley Chisholm: Unbought, Unbossed, & Unlocked – This digital breakout tells the story of the first Black woman to run for president – Shirley Chisholm. It broke my heart when beta testers told me they did not know about her. US II teachers: if you try just one of my digital breakouts with your students, please make it this one!

Other Social Studies digital breakouts I updated include Escape the Guillotine (French Revolution), Ratify the Bill of Rights, Decide the 1800 Election (Alexander Hamilton), and Sell World War I to the American Public.

Math

• Combine Like Terms & Save Halloween – This very popular breakout is now more user-friendly.
• Liberate the Sphero – A good breakout for reviewing broad concepts with 7th and 8th-grade students or to introduce Spheros and digital breakouts. to Math teachers.
• Escape to Summer Vacation – Another broad review for 7th and 8th-grade Math. This breakout is much less complicated now and uses fewer browser tabs.

English Language Arts

• Langston Hughes-themed Poetry Breakout – I am so fortunate my colleague at Gravelly Hill Middle School Suzanne DeConto approached me about collaborating on a digital breakout to help her 7th-grade students review poetry. The result is still very popular and received a shout-out in USA Today!

EdTech Tools Used:

I used a number of tools to improve these digital breakouts:

• Google Tour Creator – Google Tour Creator lets anyone create 360° VR tours using Google Street View images. What a great tool for storytelling! I used Tour Creator in Richard KNICKSon, Decide the 1800 Election, and Ratify the Bill of Rights. Here is the tour I created for Richard KNICKSon:

• EdPuzzle – EdPuzzle adds questions to YouTube videos. It also crops YouTube videos. New Google Sites now allows for embedding external tools so EdPuzzle is fair game. I wish it rendered perfectly with the next tool.
• ThingLink – ThingLink is the go-to weapon in the fight against multiple browser tabs. YouTube videos, Google Slides, and Google Forms render perfectly on ThingLink images – with no need to open new tabs. If only EdPuzzles did too! Escape to Summer Vacation benefited greatly from ThingLink. ThingLink also a video component. I used that in Unbought, Unbossed, & Unlocked. I wish it also cropped videos.
• Google Drawings – I replaced Google Drawings hotspot image maps with ThingLink images because they do not open new tabs for YouTube, Google Slides, and Google Forms. I still used Google Drawings to create favicons (512×512-pixel dimensions) because it produces transparent images.

Additionally, I used Google Drawings for those times when I did not like the options my chosen Google Sites theme generated for section backgrounds.

Create a Google Drawing with 800×200 pixel dimensions and use it as an image for the section background. Or just make a copy of this Google Drawing and change the color as needed.

LunaPic – LunaPic is a great website for adding artistic effects to images. Ignore the 1997 web design – the site is actually very powerful. And it’s free. I used LunaPic to manipulate the site banners for Cuban Missile Crisis, Decide the 1800 Election, and Liberate the Sphero.

Canva – Canva is another wonderful tool for manipulating images. It is a freemium site. I use the free version. Use either the YouTube thumbnail template or set 767×280 pixel custom dimensions to make a Sites banner. I used Canva to make the site banner for Sell World War I to the American Public and the Eiffel Tower ThingLink images in Liberate Paris (middle school version) (high school version).

Soundtrap – The Soundtrap mobile app is great for recording quick sound clips. It works on any Play Store enabled Chromebook. I detail how I used sound clips in the Accessibility section.

Google Forms – Classic Google Forms are still more customizable for background colors and fonts. I did not convert any of my classic Forms to new. Google recently announced that classic Forms will migrate to the new editor soon. I hope this does not change the fonts and colors on these forms because…

FontFace Ninja Google Chrome Extension – The FontFace Google Chrome extension is great for identifying fonts on websites. I used it to match the fonts in my classic Google Forms to the fonts in Google Sites themes. Please note: this extension does not work well with the Google Sites editor. I often clicked “Publish” before sites were complete so I could use Fontface Ninja to identify fonts in the “view published site” version.

Colorzilla Google Chrome Extension – The Colorzilla Google Chrome extension grabs the hex code of a color on a website. That color can then be used in components of a digital breakout such as Google Forms and Google Slides.

Accessibility:

• WebAIM Color Contrast Checker – The WebAim Color Contrast Checker website details the contrast between any two colors using hex codes. If colors don’t have enough contrast, the site has clickable levers to adjust a color until there is enough contrast. I used this to ensure text and background had enough contrast in Google Forms and Sites.
• Narration in Tour Creator – Add audio to points of interest in Tour Creator. When I discovered this, I was excited!

I LOVE the ability to add audio to points of interest in #GoogleTourCreator! When embedding into #GoogleSItes, simply click the gear icon and it works! Great for #accessibility. #GoogleEDU #GSuiteEDU #ISTE18 #ISTE2018 pic.twitter.com/uzxrQgsFbH

— Tom Mullaney (@TomEMullaney) June 25, 2018

I LOVE the ability to add audio to points of interest in #GoogleTourCreator! When embedding into #GoogleSItes, simp… twitter.com/i/web/status/1…—
Tom Mullaney (@TomEMullaney) June 25, 2018

• Alt text for images in Google Sites – One final tip for accessibility – add alt text to images so students with screen readers know what an image depicts. Click the image to add alt text:

Thank you for reading. I hope these digital breakouts are useful for your classroom or better yet, inspire you to create your own. Please comment below, tweet me @TomEMullaney, or email me (mistermullaney@gmail.com) if you have questions, need hints, or notice a mistake.