Designing Your Site Part 2

Once you have a basic Google Site up and running, you can add content in lots of interesting ways. From embedding docs, maps, and video, to creating automated lists and feeds within the site, to integrating external resources such as Google Drive and Google Groups, there is a lot you can do to build a really functional, easy to navigate Site. This session will look at all the different things you can do to build content on your site, and even adding custom domains, etc.

Revisiting the Customisation Options

If you've done Part 1 of this workshop, you should already know this, but just in case, here's a reminder about the Colors, Themes and Fonts dialog in Sites. In here you can specify the look of just about every component of the site. (for anyone that knows a little about building websites using more traditional tools, this section is where the CSS is defined)

Go to the Action Menu > Manage Site > Themes, Colours and Fonts, and work through the settings to make the site looks how you want it to look. Start on the left and choose the general section you wish to define, then from the middle panel choose the specific sub-component you want to define, then in the righthand panel set the specific parameter for that item.

In the example below, a change is being made to Colour of the level 2 Header in the Content Area (that's the section of the page that displays the actual page content).

The advantage of defining changes in the styles panel like this is that if you decide to change a component you only need to make that change in one place once to affect the entire site. This is particularly the case with text... you definitely should not make page by page font changes to text! So, for example, if you wanted to increase the size of the font across your Site, you'd do it in the customisation settings once, and not on each page individually.

There are a LOT of options in here so it's worth spending some time experimenting with what's possible. It's also worth noting that the overall theme you choose (Simple in the example above) will impact of the way the options apply. Different base themes will apply the customisations in different ways. Play!

Help with picking a Colour Scheme

You can improve the visual look of your Site by coming up with a consistent and well balanced colour scheme. To do this try using a sampling tool to pick up a dominant colour from your main graphics. There are a number of good Chrome extensions for this, such as ColorZilla (http://goo.gl/6zI1g) which adds a button to Chrome that lets you pick up a colour with a virtual eyedropper tool and get its Hex Code number.

Once you know the hex colour for your main colour, try using a tool like Adobe Kuler (http://kuler.adobe.com/) or Color Scheme Designer (http://colorschemedesigner.com/) to generate a full colour palette. Both these tools use the science of colour theory to come up with colour combinations that work well together, so even if you don't have an artistic streak, you can still use colour like a boss!

Kuler can even come up with a palette based on a photo or image, so you get a palette that matches your artwork perfectly. Sweet!

Once you know the hex codes of the colours you want, go back into Sites, go to Actions Menu > Manage Site > Themes, Colours and Fonts and use those hex codes to fine tune your colour scheme. Just paste your chosen hex code number into the field below the colour picker dialog...

Adding Page Content

As you create your pages you'll obviously need to add content to them other than just plain text. In edit mode, click the Insert menu for a range of things you can add to your page, grouped into three main sections...

Inserting Common Objects

• Image - For adding photos to your site. Just upload and insert on the page. Note that after uploading you get options to define the alignment (left, centre, right), image size (S, M, L, 100%, Original), and you can define whether or not text wraps around the image. Each image come with a link which points to itself as a default. You can either change the link to a new URL, or remove it completely.

• Tip: It's a good idea to resize your images prior to uploading to your site. Although you can use the S, M, L buttons to change the size at which an image displays, it does not change its filesize... so a large image will still take just as long to load on the page even if it's set to display in a small size.
• Link - select a piece of text to act as the link them choose the Insert > Link option. You can link to an internal Site page, or to an external URL. Note the check box to define whether a link open in a new window of not.
  • Note: There also an option to link to App Scripts. That's getting pretty geeky and probably for a Part 3 workshop!
• Table of Contents - If you've applied styles (H2, H3, H4) to your text from the format menu, this option will automatically create a table of contents based on those styles. See example at the top of this page.
• Sub Page Listing - If your page has subpages (pages created under other pages) you can use this option to create a directory of those. If you didn't create the ideal page structure when you made the pages, you can always restructure them by going to Actions Menu > Manage Site > Pages and drag the list into the structure you want.
• Horizontal Line - For adding a horizontal line as a page divider.
• +1 Button - Adding a +1 button to your page will let Google+ users add a vote to it. It's a bit like the Facebook Like button.

Inserting Gadgets

Gadgets are insertable active blocks that do stuff on your page. They contain code that can insert dynamic content into your pages. To make sense of the first three options you need to know that when you create a new page in your site you can create different page types...

• a standard Web Page,
• an Announcements Page (like a blog),
• a File Cabinet (a place to upload and store files within the site, but now with Drive folders there are much better ways to do this)
• a List (for making, well, lists of stuff)

These different page types come with gadgets that can surface their content elsewhere on the site. You can also customise the look of these gadget blocks in the Colours and Fonts section called Content Area Gadgets.

• Recent Posts - If your Site contains an Announcements page (or more than one), you can use the Recent Posts gadget to show those posts anywhere on the site you wish. For example, see the Latest News section on the front page of this site. Those items are being pulled from a hidden Announcements page.
• Recently Updated Files - If your site contains a File Cabinet (or more than one) this gadget can show a list of files that have been recently changed. Although useful, this is a legacy way to achieve this result. Now it's much better to insert a Google Drive folder to get a similar result. It is easier to manage the files and uses none of your Site storage quota.
• Recent List Items - If your site has a List page (or more than one) this gadget can show you a list of recent items. The actual list page can be hidden from the public view of the site, but surfaced anywhere you wish.
• Text Box - Create an outlined text box on the page, filled with whatever content you want, complete with all HTML styling options. Good for calling out a specific piece of text, highlighting examples, quotes, etc.
• HTML Box - Creates a box in which you can enter any HTML, CSS or Javascript code. If you want to use this, you should probablyread this.
• More Gadgets - There are tons more gadgets you can add to your pages, and you can browse through the Google Gadget gallery to see what's available. Not everything works as well as it might appear so try them before you rely on them too much. There are some good ones in there, but there is a lot of rubbish too!

Inserting other Google stuff

The last column offers ways to embed pretty much any content created with other Google tools. This area had had some improvements recently so there's lots to explore.

• Apps Script - If you can write your own App Script, or find code that someone else has written, you can insert it into your Site. To use scripts you need to first add them to your Site in the Manage Site section, and then you can call them when you need them. It's a bit beyond what we cover in this workshop, but you can read more about it here.
• Calendar - This lets you take calendar content that you already manage in your Google account and surface it in an embedded calendar on your Site. You can customise it quite a bit, defining which secondary calendar layers to include, which view to default to, which options to include, etc. If the calendars are shared with multiple users, then several people can contribute dates and events on their own Google Calendar, and have it automatically update on the Site. Too easy!
• Chart - If you have a chart that's been generated by a Google Sheet, you can embed that chart here. It's all live and linked, so if you update the numbers in your sheet then the chart on the Site will automatically reflect the changes.
• Drive - This one gets really interesting. You can insert ANY file or folder from your Google Drive, including Docs, Sheets, Slides, Drawings, Forms, images, videos and even whole Folders. (inserting a Folder is a better way to include a file list than the old style File Cabinet). You can define the size of the viewing "portal" on the page for most of these Drive objects, The file that appears on the page is always a live view of the file in Drive, so it's always showing the most up to date view of it.
  • One catch though... if you insert a Drive file into your Site make sure that the file has been shared to Anyone with the LInk, otherwise when people click on it they won't be able to see it if it hasn't been shared with them.
• Google+ - Insert any public Google+ Post, Photo or Album directly into the page. This is a fairly new option.
• Groups - If you run discussion forums using Google Groups, you can surface those discussions here. Check the visibility settings of the Groups though, as unless they are visible to the person logged in they won't be able to be seen.
• Map - App an interactive Google Map to your Site. You can also now add a map from your legacy My Maps collection or the newer Maps Engine Lite service. This means you can create custom maps with dropped pins, etc, and have them show up in your Site. If you need to change the zoom level on your map just zoom in to the desired level before you embed it... it will show in whatever state you got it to when you embedded it.
• YouTube - Just what it says. Embed any YouTube video, all you need to do is paste in the URL of the video you want and choose the size you want. Note than you can also choose custom sizes if now of the default options suit. A nice feature of embedding videos is that they don't show any pre-roll advertising.

Note that many of these gadgets offer the choice of putting a border around them (or not), having a title displayed (or not), and various sizing options. I usually prefer to not include borders and title because I think it fits visually into the page design better, but sometimes you might want them if they suit your Site. Experiment with the options and see what you like!

Adding Image Maps

This is a really cool way to add another form of visual navigation to your site by creating an image map with Google Drawings.

Publish your work

Don't forget to make your Site visible to the world (or just your domain, or just individual people... you choose) once you are ready to "go live" with the Site.

1. More > Sharing and permissions
2. Set your permissions
3. Save the change

Setting up your Site on a Custom URL

By default, your site has a URL like https://sites.google.com/site/betchaboysummit/, but you can set it up with a web address such ashttp://www.summitstuff.com instead. Makes it easier for people to remember, and looks more like a "real" website.

A domain can be bought for about $10, and connecting it to your Google Site is not very hard to do. Here's how...

A few more resources...

Here's just a couple of links from some of my GCT and AppsCT colleagues. They might help you take your sites to the next level!

• Official Google Sites Support Page
• Google Apps for Edu Certified Trainer, Sites notes
• Google Sites Crib Sheet

Also, check out this article from GCT Chad Griffiths about how he made this interesting looking site.