I am not a web designer. Lest that be unclear, let me call it out.

I am not a web designer

But, I can imitate, and I can figure things out. Except programmable thermostats. Baffling.

It’s no secret that Google Sites themes are uniformly mediocre. I went searching for tutorials on how to do better, and found some help—not much—and a company, Kirksville Web Design, who specializes in them. This was a pretty big help, because I got to look at actual sites that I knew could be done in GS. I could either pay them for templates, or figure it out.

This isn’t a tutorial on how to use Google Sites, nor on how to create web images. I’m assuming you know enough about both. (I use Inkscape to create a lot of my graphics.)

Now, if you want a really professional site, hire a professional designer like Kirksville. But if you want a decent looking site, here are instructions for creating a simple, better design. The reference web site—again, designed by Kirksville—is Aim for ‘A’. The basic layout features a notched design.

Notched Site Design Layout

That’s not so attractive, but the final site I created is.

image

Initial Setup

Create a Google Site (GS) with a blank template and the Blank Slate theme. You’ll get a pretty ugly page.

image

Edit the page and add some text.

image

Now we’re ready to edit the Site Layout

Site Layout

  1. Only activate Header and Horizontal Navigation (deactivate Sidebar). Set Site Width to Custom 1000px (press Enter in this text box to save the setting).
  2. Click the Header to edit, and set height to 130px. This is what gives the upper notched effect. Less height increases the notch.
    image
  3. Click the Close button. This gives us a centered site.

image

Now, choose Manage Site.

Manage Site

In the General page,

  1. Uncheck Show Site Name at Top of Pages
  2. Click Configure Search. Uncheck “Enable Search.” This gets rid of the search box.
  3. Under Mobile: Check Automatically Adjust Site to Mobile Phones
  4. Save

Now open the Themes, Colors, and Fonts page. For the header and footer, you’ll need the following. I used png files, but you could use jpg or gif as desired.

  • A single-color image 1px wide by 200px high, named header-background.png. I chose color #646464.
  • A single-color image 1px wide by 100px high, named footer-background.png.I chose color #646464.
  • A header/logo image 1000px wide by 130px high, named header.png. I made the image’s background color #646464 to match the header color. A more advanced (and better) technique is to surround the logo/text with a transparent box only as big as needed, to save download size.

Make these changes.

  1. Entire Page
    1. Background color: #c8c8c8.
    2. Image: header-background.png. Repeating horizontally fills the space without downloading a large file.
      image
    3. Wrapper: footer-background.png. Note Vertical Position is “bottom.”
      image
  2. Site header
    1. Background Image: header.png. No repetition. (see More about Headers, below).
      image
  3. Content area
    1. Background color: white
  4. Save.

Et voila!

image

There’s clearly more that should be done to make this attractive, but this gives you a good start.

More About Headers

The Hudson CMA web site has a centered logo. I didn’t use a 130x1000 image for this. Instead, I surrounded the logo in a transparent box to give the margins I wanted. Then, instead of adding the logo using Manage Site > Themes, I added it using Site Layout > Header.

image

One isn’t necessarily better than the other, though they can lead to differences in how the horizontal menu is placed. More on that in another post.

References

Google Sites: Build Your Own Theme

Summit Stuff: Designing Google Sites

GSites Gallery   Great inspiration

Google Sites Web Design  A site maintained by Kirksville

Site Template  If you want to buy templates

Kirksville Web Design