Web and Media‎ > ‎

Designing Beautiful Google Sites

The New Google Sites is a capable and easy to use tool for building websites, student portfolios and other online resources. Even people with limited web design skills find it fairly straightforward to make a decent looking Site. I'll assume that if you come to this session you have already used Sites and understand the how to create a Site with multiple pages, and add basic content to those pages. But what if you want your Site to look a little more sophisticated and fancy? What if you want to do more than the obvious stuff? What tweaks and hacks can you apply to add greater functionality and design flair to the Sites you create? This session gets geeky and digs a little deeper into the way you can design Sites and will provide you and your students with ideas for building Sites you'll be proud to show off!

Understand the Limitations of Google Sites

The new Google Sites is still a work in progress!
  • Themes
  • Behold the Grid!

Adding Standard Google Embeds

  • Google Sites has built in support for different types of Google services, and these can be easily embedded into a Sites page.
    • Drive Folders
    • YouTube, Maps/MyMaps, Calendar
    • Docs, Sheets, Slides, Charts (Drawings, PDFs, etc)

Adding Graphics

  • Inserting graphics
  • Create a page header using this template (courtesy of Alice Keeler)
  • Using Graphic headers
  • Adding Site Logos
  • Break up the page with coloured sections (Standard, Emphasis 1, Emphasis 2, or Image)

Understanding Page Linearisation

  • Understand how text and images flow together.  This is important when moving from desktop to tablet to phone layouts using responsive design. 
  • Drag and note the blue line. This will show you were an item will attach itself in the page flow.
  • Flow priority puts page wide Divs first, then Section Divs.  This has implications for how your text and images flow on a page.
  • Test your designs using Preview mode - Web, Tablet, Phone
  • Get more detailed with Chrome Console View
    • Open Developer Tools (Ctrl + Shift + i) then Toggle Device Toolbar (Ctrl + Shift + m)
    • Use this mode to preview your site in a range of specified devices, or completely responsive mode.
    • Great to see how your site will look on multiple platforms and devices.

Embedding other services

  • Twitter - Copy this embed code and try it!
 <a class="twitter-timeline"  href="https://twitter.com/hashtag/edtechteam" data-widget-id="985893993253761025">#edtechteam Tweets</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Try some of these others...
  • Google Groups (great for adding a discussion board to your Site)
  • Flipgrid
  • Streetview
  • Edpuzzle
  • Others?

Setting a favicon

More > Add Favicon

Setting custom page URLs