Pimp Your Google Site

Nancy Minicozzi

bit.ly/nmroxnardsites

bit.ly/nmroxnardsites

Nancy Minicozzi

About Nancy

+NancyMinicozzi @CoffeeNancy coffeenancy.com

Styling Google Sites

They do exist.

For more inspiration, visit sites.google.com/site/gsitesgallery/ and sites.google.com/site/sitesexamples199/

it’s not just what it looks like and feels like. Design is how it works.

- Steve Jobs

As quoted by Walker, R. (2003 November 30). The Guts of a New Machine. The New York Times. Retrieved 6 March 2016, from http://www.nytimes.com/2003/11/30/magazine/the-guts-of-a-new-machine.html

Basic principles of web design

• Purpose for each page
• Quick, well-organized communication
• Typography (sans serif, 16px)
• Color palette & white space
• Images
• Navigation (3 clicks)
• Grid-based layout
• Give them an F
• Mobile-friendly

Based on ShortieDesigns.com, http://shortiedesigns.com/2014/03/10-top-principles-effective-web-design/

GOOGLE SITES

Functional, but adding the style is up to you.

Beware the Template Gallery

Personalize your site

• Color Palette
• Background
• Fonts
• Layout
• Header

​

• Footer
• Search
• Favicon
• Navigation
• Even more!

Gear > Manage Site >

themes, colors, and fonts

Color

palette

Color Palettes

Using Color

• Header
• Background image / texture
• Menus
• Fonts

​

​

• Colour Lovers & Photocopa
• Adobe Color CC
• Color Combos
• Material Palette
• Coolors
• Paletton
• Colorzilla Chrome Extension

​

Background or Header

Images & Textures

• Background Image Generator
• Copyright Friendly Symbaloo webmix

• Subtle Patterns
• Pixabay
• Unsplash
• Freepik

Custom Headers in Google Drawing

Search Box

Gear > Manage Site > General >

Configure Search

• Enable or disable
• Change to or add custom search

Header position determines search box location

Fonts Fonts Fonts Fonts

but not Arial or Comic Sans

• Legibility
• Consistency
• Serif v. Sans Serif
• Guidelines:
• 16 pixels
• Max. 3 fonts
• Max. 3 sizes each

• Font Pair
• 5 Google Font Combinations
• 10 Useful Google Font Combinations
• 6 Google Font Pairings that Don't Suck
• 10 More Awesome Google WebFont Pairings
• Google Fonts
• What Font? Chrome extension

Custom Favicon

• 16x16 pixel icon
• favicon.ico
• Gear > Manage Sites > Attachments
• Upload

Create or Find

• Dynamic Drive
• Favicon.cc
• Favicon Generator & Gallery
• FreeFavicon

​

Identify your site in tabs and toolbars

Boring

Snazzy

Snazzy

Built in

Layout Options

Gear > Edit site layout

Top, Bottom, & Side to Side

• Header
• Height
• Alignment
• Logo: default, none, or custom
• Customize system footer
• Enable/disable custom footer
• Set site width

Need to measure? Page Ruler Chrome extension

Navigation

Horizontal navigation

• Prettier
• Easier for end user
• Set appearance in Gear > Manage Site > Themes, Colors, and Fonts
• Must be manually arranged

Sidebar navigation

• Enable or disable
• Default is alphabetical order; can be manually rearranged

A little HTML won’t hurt

Manual Image Resizing

• Insert image, choosing either S, M, or L for the size (100% = full page width, Original = original image size)
• Click HTML
• Find the img tag (usually <img src=... or <img alt=...)
• Edit the width and height PROPORTIONALLY, then Update & Save

• PRO TIP #1: Give your image a good filename before uploading it
• PRO TIP #2: Set one dimension to a specific number, then set other to “auto” so the computer does the math for you.

WANT more bling?

Create a custom layout

Tables are your friends

1. Click pencil to edit page
2. Insert > Table
3. Click in cell and drag handle to adjust width
4. Add content
5. Edit table HTML to make borders disappear
1. Click inside table
2. Click HTML button
3. Change table border and border width to 0
4. Update & Save

Still need

Here are a few goodies for you

Custom buttons

Find image online, add to site

OR

Draw in Google Draw

Publish to web & insert via URL

THEN

Click image and redirect its link to go to desired page

Slideshow Gadget

4:3 Slides presentation Insert Gadget > Slideshow maker (using Google Slides)

Set delay, autostart, looping Add URL and SAVE, adjust other settings

Grab URL Click OK, then save the page

​

Complete write up and video tutorial available at Steegle.com

Image Mouseover

Upload 2 images of the same size to your site

Insert > Gadget

Search Public gadgets for “rollover”

Select the one hosted on Google

Add links to images

Social media, you say?

Twitter Feed Gadget

Insert gadget by URL: http://www.opensourceteacher.ca/Twitter_Timeline.xml

For complete directions, visit James Petersen’s website

Instagram Widget creator:

Insert using Embed gadget; change http to https before saving

Snapwidget (allows comments, but shows ads)

Thanks!

Any questions?

• @CoffeeNancy
• plus.google.com/+NancyMinicozzi
• coffeenancy.com

Credits

Special thanks to all the people who made and released these awesome resources for free:

• Presentation template by SlidesCarnival
• Images by Unsplash and Pixabay
• James Petersen for the Twitter widget and basically everything he does

​

Bling photo: The original uploader was Calliopejen at English Wikipedia - Transferred from en.wikipedia to Commons., CC BY 2.0, https://commons.wikimedia.org/w/index.php?curid=2006717

​

All content created by Nancy Minicozzi in this presentation is published under a

Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.

​

SOME RIGHTS RESERVED