Resources‎ > ‎Website Design‎ > ‎

Website Design Details

by Tim Isbell

Setting up a good website is complex. But if you have average Microsoft Office level skills then you can do Stages 1 and 2, which gets you to a prototype. For Stage 3 you may need the help of a tech-savvy friend. If you don't have one, this site points you to a couple of modestly priced setup services.

First skim this web page.
Then launch into Stages 1 and 2 and see how it feels. At the very least you will have developed some website design skills - and most likely the experience will encourage you to move on through the rest of the stages. 

Once you get a site set up you and your users can create pages, link them to other pages, update/revise them, and add gadgets. Your work of climbing the web design learning curve will certainly pay off in ministry.

One last thing before you dive in. I point to many links which are subject changes that are beyond my control. So I've included enough key words in each link label for you to feed them into any search engine to find comparable content.

You may find it helpful to print out this web page to use as a road map (about 9 pages). OK, here we go...


Stage 1: Sign-up for free Gmail

If you are not familiar with website design, this is a quick and easy way to give it a try: sign up for a free gmail account with Google and build a site in that account. If you like the experience, you can upgrade to a Google Apps account which uses your own domain name. Once your domain is set up, you can copy your gmail website design into that.

You may say (like I did), “But I don’t want another email account!” Please sign up anyway. If you don't want to use it, just go to the Settings>Forwarding tab and forward any incoming gmails to your preferred account. Later you can decide the ultimate fate of your gmail account. Most likely, by the time you finish developing your site you will decide it is worth keeping the gmail account alive.

The payoff that comes with your gmail account is that now you have full access to the following powerful applications:

  • Sites. You’ll develop your website using this.
  • Calendar. You will probably use this for your church calendar, church calendar(s) which you can link it to appear on your website. 
  • Documents. You'll need this for the Contact Me function, and you'll surely use it for many more things.
  • Photos (Picasa). A useful app for resizing, editing, and putting pictures for your site. You can even link a Picasa album to play a slide show on your site. Here's a great 38 minute You Tube webinar of how to use Picasa.
  • Maps. You’ll link to this to provide directions for people to find your location.
  • Translate. You might use this for rudimentary translation situations.
  • Reader. This is a great tool to aggregate your news and blogs. Other people will use their readers (Google or other readers) to receive your posts/feeds.
  • Groups. You can use this to set up collaborative groups.
  • … and more

Beyond these, there are a couple more free Google items I find invaluable:

  • Feeds/Posts. This lets you send announcements of new site content to subscribers.
  • Google Analytics. This one monitors the traffic on your site and provides useful data to you.


Stage 2: Start designing your site

Get familiar with Help & Training videos

Open up your gmail account and at the top of the page notice the free apps that come with your gmail account. Choose Sites and browse around the online help systems. Don’t try to learn much, just get to know your way around.

There's also a great set of training videos available. If you use Outlook or another form of email, you'll find these gmail training videos especially helpful in getting productive in gmail. Regardless of your previous email experience, you will find helpful insight in the training video series: Managing your inbox: Gmail Tips and Tricks. And there's a small company named Kirksville Web Design that offers a growing range of video clips on how to do things within Google sites.

Also, look at the Google Sites Help files. There are some other companies offering help for Google sites, and one of the best I've found is Steegle.com.

Choose a site template

Click on Sites and start setting one up. Choose a Site Template which will become the framework for your entire site. Choose the template primarily on its framework; For more guidance check Google Site Templates. My site (this one you are viewing right now, isbellonline.org) uses the Professional Site template (in the Business section). The Google Site Template library also has a church site template.

Once you have selected a Template you can experiment with various color Themes to change the colors, etc. To find these Themes go to Manage Site, then look down in the list to Site Appearance>Themes. There are several trade-offs. For example, the Print Page link, way down in the footer of every page, will be in the same color as all the other links on your site. So you need to choose a Theme where that link color shows brightly enough. You can customize the link colors well enough, but you'll need to experiment until you find link colors that show up strongly in the body of your page as well as in the footer. You can change the background of the footer, too. Another major trade-off in Theme selection is how the Print Page function works across various browsers. Initially I used the Slate theme until I discovered that the Print Page didn't work well on Chrome and Safari. So I changed my site to Vinyl Panel (I use Leather Panel for my Math Coaching site). 

Decide on site width and top-level framework.

There are many choices in choosing how wide a site should be, and they all depend on your viewers' screen sizes. Templates come with a choice of width, but you can change it (at least a little, sometimes a lot). I found Patrick Burt's blog very helpful: How Tall and Wide Should I Make My Site?. The isbellonline.org site width was fixed at 915 pixels at the outset, but in 12/2012 I changed it to 980 pixels to better fit tablets. I would have gone to the setting that changes the site size proportional to the screen, but that messes up the use of the photo at the top of my Home page. Maybe I should eliminate the photo... but I like it. The nlnc.org site fills the whole horizontal screen.

Design a logo for the title bar.

The easiest way is to choose a template and just edit the title bar there. If you want a custom logo it's best to ask a graphics designer for help. I started developing a custom logo for isbellonline.org using Aviary, but after a few hours I realized that my designs looked amateurish and I really only need this kind of artistic skill once. So I asked my son, a real graphics designer, for help. You can see the result at the top of this page. If you stare at it for a while you'll see the subtle message it conveys. The result came out far better than if I'd struggled through it myself. If you don't have a graphics designer son or friend, try Logoworks. I believe the cost is pretty reasonable.

Create some pages

There are several built-in templates, so give them all a try just to discover how they work. You will probably use all of them somewhere in your site.

Web Page

This is the blank page template that you will use most often. It’s a good one to practice writing and editing text in, and inserting pictures in. 

One thing that you will notice is that the editing capability is less robust than on, say, Microsoft Word. For instance, in Word when you misspell a word it flags it for you and even offers to change it. But when you are working on the text of a Google website you may notice that there is no spell checker working. There is a spell checker available if you are using a Chrome browser - the spell checker is built into the browser! To access it go to the Chrome settings menu in the upper right hand corner of the browser. Click on "Settings" and then go down to "Advanced Settings" and click on that. You will see the option to turn on spell checking. When you turn it on you'll find that it works for most Google applications that you access through the Chrome browser (sites, docs, etc).

If you are using another browser that doesn't support this function, you will want to switch to Chrome before you tackle big text writing projects directly on a Google site.

Announcements Page

This is a way to highlight, or elevate, new content from anywhere within your site to a gadget that you can place on your Home Page so that a viewer doesn't have to look all through the site to find out what's new. An example of this gadget is the "IsbellOnline News" box on the right hand side of the my home page. This gadget elevates a snippet of the Announcement page to the home page. Clicking on one of the items in the "Tim Isbell Recent Posts" box takes you to the full post on the Announcements Page. For guidance read Cloud's Using the Recent Announcements Gadget. Here's a helpful YouTube introduction: Create Announcements Page in Google Sites.

Inside my Recent Posts gadget it you will notice that I also offer RSS and email subscription options. I'll cover these more below.

Taken together these functions can operate much like a blog, or as a sort of "marketing tool" to inform people what's new or timely on the entire site.

List Page

I only use one of these, but it serves a very powerful function. It is the page type that I use for the Sermon Chart. This is fast becoming the page where users can search for a sermon material from across my entire library of sermons. While the page defaults to sorting on the left-hand column, you can see that a user can sort on any column.

Filing Cabinet Page

There are two ways you can offer attachments to your viewers. One is to insert them into the Attachments section at the bottom of every web page. The second is to organize attachments in Filing Cabinet pages. For an example, click on Sermon Chart page. Look at the second column; when you click on a Lection/Downloads item you will jump to one of my Filing Cabinet Pages underneath. You can see this organization more clearly by going to my Sitemap and browsing down into the Preaching Resources branch. Directly under Preaching Resources is a whole bank of Filing Cabinets that hold all the sermons that I post online.

Add content

Importing text is not just copy/paste!

This will sound cumbersome, but it’s a fact of life in web design. Do not simply cut text from a word processed document and paste it into your website. It may look okay in some browsers, but you want your website to look good in whatever browser your visitors happen to use. Here's my practice: When I have several paragraphs to write I compose in Word because it has handy editing capability and it has a good grammar checker. But I don’t waste time formatting in Word. Then I Select All, Copy it to my clipboard, and Paste it into Notepad (which comes with virtually every PC). Believe it or not, next I Select All of the text from Notepad, Copy it to the clipboard, and then Paste it into my web page. The process of putting it in and taking it out of Notepad strips the formatting!

Now that it’s in my web page I use the Google sites formatting functions to make it pretty. In the Google Sites Format menu I make heavy use of the standard formats. For example, I use the "Sub-heading" selection for the Stage 1...9 headings on this page (the top level that shows up in the Table of Contents gadget). And I use the "Minor heading" for the next level down, which appears as the second level in the Table of Contents. Everything else is "Normal paragraph text," which I sometimes highlight in blue just to draw attention to the start of a new sub-topic. If somewhere along the way my formatting gets messed up, I use the Remove Formatting tool from the Sites editing toolbar to give me a clean start. If all else fails, I put the text back into Notepad and re-strip the text and start over. This process ensures that no matter what browser my viewers use they will see properly formatted text. 

Inevitably I do a lot of text editing after my text is in my web page. Fortunately, Google sites has a fine spell checker that saves me from posting too many typos. I wish it had a grammar checker!

One last thing. The default Themes generally come with 10 point normal paragraph text (as in this paragraph). In my case I want to use 12 point (as in the rest of this webpage). Unfortunately there is no simple way to change the paragraph font size of your Theme, so if you want to change the size you will need to do it manually, paragraph by paragraph, page by page. At least for now this is the only real option.


Importing pictures & graphics

Here’s what I have learned: Do not just take a picture from your camera and post it on your site. If you do that it is usually contains too much data so it takes too long for a viewer’s browser to load. Instead, reduce each picture's digital content to something smaller than about 100k. You can download Picasa to your personal computer for free from Google, and use it to pretty extensively edit your photos. Picasa Web is an online version which also offers substantial storage for your photos and robust syncing with Picasa on your computer, and now that it's integrated into Google+ it provides adequate photo editing capability. Picasa (on your pc), Picasa Web, and Google+ work well together, but you will need to spend a couple of hours figuring out how to "pilot" these three products.

For advice on re-sizing photos for use on the web go to Picasa and Picasa Web Albums Help > Exporting From Picasa: Exporting photos. For example, here's how I process the photos that you see at the top of my homepage: I open Picasa (on my personal computer), select a photo, double-click to enter the Edit mode, pull down the File tab, and then click "Export picture to folder ..." where I chose the re-sizing option of 800 pixels. This produces a reasonably small file size that looks good on the screen. Then I used the Crop function in Picasa to size it for my page (my target is 740 by about 140 pixels), and save it to a picture folder. Every few weeks I Insert a different picture in the slot at the top of the page.

Here's a little more insight on what happens to picture sizes as you send them from tool to tool.

  1. With my Droid smartphone, I took a photo with an original size of 2.2M.
  2. Using Picasa on my laptop I imported it, and then used the email function inside Picasa to send it to a friend via email. The received size of the photo was 500k; obviously Picasa re-sized it before sending - probably so that it fits through most email systems. 
  3. Then I put the photo in a Picasa "Album" (on my laptop) and synced the Album with my Google+ account on the web (in the "cloud"). From there I was able to share it with friends and they could download it in what is called the "original" size. However, it wasn't the original size from the camera; it was the original size that Picasa uploaded to my Google+ account: 500k. This is because I have Picasa on my laptop set to upload at a size optimum for web viewing. There is an option to store it as the original size, but I don't use that for things that will only get used on the web anyway.
  4. Finally, I sent the original sized photo as a simple email attachment through gmail, which delivered it at the full 2.2M. Google mail handles up to 25M emails, which is more than some email systems accept.


Rather than take all the pictures yourself and mess with all the sizing issues, it's much easier to look for copyright-free pictures online, such as at iStockphoto. You will want .jpg, .png, or .gif formats. If you have a picture in another format, you can usually find a way to reformat it using Picasa.

Screen shots

Most modern computers come with some sort of screen shot clipping tool. It allows you to select a particular part of the screen, mark or highlight specific items within it, and save save just that section as an image, such as jpeg. For the few screen shots on this web page I used Snipping Tool, a free accessory that comes with Microsoft Vista. To find it, just go to the Start button in the lower left-hand corner of your screen, go to Programs, then find the Accessories folder. The Snipping Tool (or something like it) should be in this folder. I'm sure there are fancier tools for this, but this one works well enough for me.

Inserting Links

Open a page to Edit, select some text, and in the toolbar at the top of the page click Link. Notice that it opens to the default to link to an Existing Page within your site; give this a try.

Also notice that you can link to a Web Address in any site external to yours. Navigate to any web page external to your site; you can even use the one you are now reading. Now return to your site and click Link, select the Web Address option, paste in the URL of the external web page. When I link to an external page, I usually like it to Open this link in a new window (or tab) in the browser, so click the little box in the bottom left corner. Save your page and test the results.

Inserting a Table of Contents

Get to know this gadget. Just open a web page, go to the Insert tab (the same tab you go to to insert a picture), and insert a Table of Contents. Experiment with it for a few minutes. I've used this 3 times along the right side of this long web page (top, middle and bottom) to help viewers find their way around. This gadget keys off of your use of the heading text formatting described a few paragraphs earlier.


Inserting a Sub-page Listing

Sometimes you will use a page to introduce a large number of sub-pages tucked underneath it. There's always a sub-page listing in the footer of every page, but sometimes it really helps the viewer to be able to see the sub-page listing right up at the top of the page. To see a good example, click on Christian Teachings

Attachments

You will probably want to attach various documents to your website for viewers to download. In isbellonline.org I offer Word files containing sermon notes, and also many PowerPoint files. Churches sometimes post attachments of permission slips for children or teen outings so parents can download the forms and fill them out the night before and send them along with their kids to the event! You can add all kinds of attachments at the bottom of any web page, or you can put them in a Filing Cabinet page (it is one of your choices in the Create New Page function). For more guidance read Google Sites Help > Attaching a Document.

Inserting a calendar

For how-to details, go to Google Sites – Insert a Google Calendar.

Collaborative webpage development

If you have a team working on the site you will need to do a lot of collaboration among team members. It is tempting to just start sending emails, but before you do that I encourage you to take a look at the Comments section at the bottom of each webpage. If you own the site, you can see a space where you can add comments. If you invite your teammates into collaborative status then they will have this privilege, too. This is a good way to keep your team organized. Outsiders can view your comments, but not make them. So when you finish the page you'll want to delete the comments. For more on this, go to the Google Help Sites area and type in Comments.

Google sites also allows page-level sharing. This means that if you want to collaborate with someone on a certain page, or a certain subsection of your site, you can give them editing permission to just that page or section. On the pull-down menu go to Manage site, on the left side of the page choose Sharing and Permissions. Now look at the upper right side of that page and click on Enable Page Level Permissions. Kirksville Web Design has a Page Level Permissions 3 minute video to show you how.


Security & legal issues

Establish guidelines for all co-Owners and Collaborators (people who can create and edit content) to make sure your site doesn't drift into legal or security problems.

Pictures

We live in a very security sensitive culture, especially when it comes to children. So don't post pictures of individuals without their consent, or the consent of their parent(s) if they are a minor. Especially don't post a child's last name next to their picture (I don't even post their first name). You may decide that you can post group pictures, but not with names.

Phone numbers

Don't post these without the owner's consent. In general it is best to only publish office numbers, or sometimes a mobile number.

Naked email addresses

If you put naked email addresses on your site you invite spam! Spammers use software is to “crawl” your website's HTML code searching for snippets that look like emails. Then they spam those addresses or sell them to people who will. In the New Life site, we used a few instances that look like naked emails. But in every case Rich wrote some code to hide these from crawlers. I don’t know how to write this code and Rich doesn't want to make a career of this, so in isbellonline.org I use a Contact Us gadget to solve the problem.

If you MUST put email addresses in: put it in a photo. For example, use a head-shot of yourself and put a caption under it. Then take a screen shot of this and place it somewhere on your site. This way viewers will see your handsome/beautiful picture and your email, but the text of your email address is not in the HTML code. Then after you upgrade to Google Apps you can do it right by installing a Contact Us form.

Intellectual property

I decided at the outset to put all my isbellonline.org content in the public domain. I do my best to give credit to my sources (especially prevalent in my sermon notes), many of who probably do not want to give away their intellectual property. So by crediting my sources my readers know that before they copy from one of these sources they need to check that source's copyright intentions. If you do want to protect your own content to varying degrees, have a look at Creative Commons licenses

Copyrights

It is illegal to use copyrighted images or other copyrighted material. So don't do it. Instead of copying someone's intellectual property, put a link in your site pointing to the information that is already publicly available at their site.

Just keep creating and refining your site until you're ready to show it to a few friends for comment. Use the Sharing function to invite them to look at your developing site. To find this, in the upper right-hand area of your site pull down the More Actions menu and then go to Sharing & Permissions.



Stage 3: Set up your domain

By now you have the beginnings of a website, but the URL for your site is too long and complex for users to remember. To fix this you need to move your site to your own domain; do this by upgrading to a Google Apps account (no longer free for an individual, though it may still be for a non-profit). Once you connect your Google Apps account to your own domain name, your domain name becomes the prominent part of your website's URL. A Google Apps account also enables you to set up email addresses based on your domain name. In addition to incorporating your domain name into your website and email accounts, Google Apps also offers many other capabilities that are described in Stage 4. So it's time to purchase a domain name and also a DNS Hosting service, upgrade to a Google Apps account, and connect them together. 

For the website you are now on, I chose the domain name: IsbellOnline.org. I purchased it from EasyDNS along with their DNS Hosting service, then subsequently upgraded to a Google Apps account and connected all these together. Before taking any action, please read on.


Prepare to upgrade to your domain

The basics

Unless you are already experienced in internet lingo and website development, I suggest you read through Basic Guide to DNS.

Buy domain name & DNS Hosting

If you already have a domain name and DNS Hosting, you can use it with your Google Apps account. If you have a domain name but not DNS Hosting, you will want to get DNS Hosting from the same vendor you use for your domain name. In my case, before I set up my Google Apps account I had already purchased 2 domain names and DNS Hosting from EasyDNS. My bill from EasyDNS is about $55/year for 2 domain names and DNS Hosting (in 2011).

If you don't have a domain name or DNS Hosting yet, don't rush out and buy them. Instead, as you go through the process of opening a Google Apps account you will get a chance to purchase a domain name and DNS Hosting from a Google Associate (such as GoDaddy). This simplifies the setup required to connect your domain name, DNS Hosting, and Google Apps products (sites, email, contacts, docs, and so on).

By the time you are done your Google Apps account will provide an ample supply of email addresses, and if you ever need more you can purchase them at a very modest price. These are all linked to your domain name. When you set up your Google Apps account you will become a Google Apps Administrator. Then if you want you can add many other people into your domain, while maintaining control of the domain environment. Or, you can hand this Google Apps Administration responsibility off to someone in your organization.

A little more about providing email addresses to your staff or coworkers: You can give each person an address such as <name>@<yourdomainname>.<xxx>. One popular format for email addresses within a group is the person's first initial followed by their last name, without spaces. So an email in my domain for John Doe looks like jdoe@isbellonline.org. Or an email in the NLNC (New Life Nazarene Church) domain looks like jdoe@NLNC.org (case insensitive). Once this is set up, every parishioner or client of your organization can easily guess the email address of anyone else in the domain. If the person wants to use other functions of your domain, but doesn't want to read mail from their email account in your domain, they can simply set their email preferences to automatically forward everything to their preferred account. In my case I divert all my emails to my domain email. Then , every couple of months I go to one of these emails and send some test email to myself just in case that email provider has the practice of shutting down unused emails.

Domain name selection tips

Make a short-list of 3-4 possible domain names that you like. In the process of purchasing, your vendor's website will check for each domain name availability, and even suggest alternatives. Choose domain names that are short, easy to remember, and meaningful.

A single Google Apps account can hold many domains (such as nlnc.org), each of which can hold multiple sub-domains (such as nlnc.org/english, nlnc.org/chinese, nlnc.org/youth, and so on). Then you can map these sub-domains into english.nlnc.org, chinese.nlnc.org, youth.nlnc.org, and so on. If you're using Easy DNS, you do this mapping by setting up CNAME records to direct your sub-domains into your Google system. Then on the Google side you need to go to your Google Apps Administrator Dashboard (> Settings > Sites > Web Address Mapping> to map these sub-domains to the particular part of your Google Apps account where you want them to connect.

You can house a website at the domain level, or at the sub-domain level. The example above is what we used for the New Life Nazarene Church website. We purchased the domain name nlnc.org (we often publish this in all capital letters because the L in nlnc can easily be mistaken for the number 1 (domain names are not case-sensitive). Then inside our Google Apps account we developed 4 websites using sub-domains of nlnc.org.this domain. To the outside world, it looks like a single site. But actually it is an interconnection of 4 sites, each with its own set of owners and collaborators. We could have added a site for our preschool, but it already had its own domain name and a functioning site so we just linked to that site.

You might want to purchase an extra domain name and hold it for future needs. For example, I own both isbellonline.org and isbellonline.com. The first one is "activated" at EasyDNS; the second is "parked" at EasyDNS in case I decide later to do something commercial. Then I'll keep .org as the free site for giving away ministry resources and use the .com site for commercial purposes.

Decide on a .<what>. Churches and non-profits often use .org, but they can also use .net or .com or one of the other choices apparent from the domain vendor's website.


Upgrade to your Google Apps domain

Until now your email files, contacts, calendar, website, and any other Google applications you use are still associated with your gmail account. It is now time to upgrade to a Google Apps account. You can upgrade to an individual account for a modest price. A little later you will want to upgrade to the Education version, which has been free for non-profits (see below).

In the process of upgrading, you will set up your MX records (for email addresses) and your CNAME records. Both of these terms are among those explained in the Basic Guide to DNS (recommended earlier in Stage 3). After achieving the proper handshakes, which is called verification, between your domain name and DNS Hosting vendor and Google Apps , you will be ready to move your data (site, emails, docs, calendar, or whatever you have in your gmail account over to your Google Apps account.

At the outset, at least, you will serve as the Google Apps Administrator for your domain. So it will be helpful to get a basic understanding before moving on. So take a look a the links in the Training and Help section below.

Training and Help

Google Training Videos. There is a GREAT set of training videos available at the Google Apps Learning Center. If you are migrating from Outlook or some other email system, at least look over the training videos covering Google's mail.

Google Help systems. When you run into difficulties this is the first place to look for solutions. You can find this Help Link at the top of every web page.

Help Forum ID. On the left side of the Google Sites Help home page you will see “Help Forum.” As you get into the development process you will learn to search the help systems, but you will inevitably run into some problem for which you can't find the answer. When this happens, sign-up for a Help Forum ID and post your question for other users to respond. Most of the time you'll get an answer in a day or two. 

Steegle's site. In addition to Google Help, a man named Steegle separately offers many great resources. I usually start with the Google help materials, but if I feel a need for another view or more specific coaching, I go to the Steegle site.

KC Cloud's site. And if I feel the need for even more help, I go to the KC Cloud site.


Google Apps setup & verification

Enough background, it's time to begin the actual process of upgrading to your Google Apps account and connecting it to your domain name and DNS Hosting. Go to Getting Started with Google Apps, scan around a bit, then click on the Get Started button in the upper right hand part of the webpage. From there, just follow the Google links and iterate as much as you need. Remember, if you need more help, check Steegle and KC Cloud.

If you get stuck and it seems beyond your capability, it's time to call a tech-savvy friend. If you don't have one, consider Steegle's setup service or Google Sites Setup Service. I haven't used either of these myself, but I expect they are good and they are very modestly priced.

Verification tips

For the novice, verification is the most challenging part of the entire website design process. It's easy to get lost among details, so here's a short explanation of what you are doing in this stage. Verification sets up a handshake between your Google Apps account and your domain/DNS Hosting vendor. It is much simpler if your domain name and DNS Hosting vendor is a Google Associate, such as GoDaddy, because the most difficult steps are done automatically - it's part of the value-added of setting up a Google Apps site with a Google Associate.

There are two alternative ways to accomplish this handshake: CNAME or TXT. Check with your domain name/DNS Hosting vendor to see which they can handle (probably both). If you have the option, it's probably easiest to choose TXT. Once you choose CNAME or TXT verification, Google gives you a long code to take back and insert into your DNS host's website. Then you will return to your Google Apps setup screen and tell it to Verify. It may take a few hours for these systems to complete the verification, but especially with TXT verification it is very quick. You have 14 days to complete the verification.

If you did not get your domain name and DNS Hosting from a Google Affiliate, and especially if you happened to get it from EasyDNS, you might benefit from my experience with linking EasyDNS with Google Apps. If so, go to Tim's EasyDNS tips


Stage 4: Copy site to Google Apps account

Browse the Google Apps Suite!

It's time to move the site you developed in your gmail account over to your new Google Apps account. As the icon on the right implies, your Google Apps account provides a lot more than just the ability to publish websites. Over time, you'll want to get familiar with all, or at least many, of these applications. In my case I use:

Email, connected with my domain name.

Contacts. These are part of email, of course, but I can make my contacts available to others within my domain (such as my wife, who often asks me for someone's email address or phone number). By sharing my Contacts with her inside my domain, she can access herself at any time.

Calendar. I use several calendars, one even links my speaking schedule into this website so people can determine my availability even before they contact me personally. In addition, I use a set of calendars for a wide range of personal uses.

Tasks. I was a heavy user of Outlook Tasks and frustrated that Google worked differently until I looked closer at the Google approach. To be honest, I like Outlook Tasks a little better but I've learned how to get all my needed functionality by using the Tasks capability built inside my Google Calendar. I've even discovered (though the Google Help Forum) how to set up a Tasks Scheduling "calendar" to provide ample repeating reminders for tasks.

Docs. I use a Google Docs Spreadsheet to manage the coaching/student schedule for an Advanced Math Coaching program that I run at a local low-income apartment complex. Coaches can log in and update their availability, making it much easier to schedule coaches with students. At some point I intend to migrate most of my Microsoft Word files, including my sermon notes files, over to Google Docs. Google Docs is also a great way to collaboratively manage ministry projects that involve several people/leaders. For example, in a church you might be working on an Easter Week emphasis that involves almost all your ministry leaders. Coordinating this with sit-down meetings and emails and passing documents around as attachments is way out of date. Now all your leaders can collaborate on a single Google Docs document in the cloud - and they can access it from anywhere! Wish I had had this up and running when I was the senior pastor at New Life!

So after you get your site up and running, it's worth taking a look at the whole suite of Google Apps tools.

Now let's get back to...

Moving your site into Google Apps

In addition to the information on the Google Apps Help system, I found Steegle's instruction at Google Sites - Copy Site - Import Personal Site to Google Apps very helpful. Be sure to watch the short video at this link.

Take the time to think through your site sharing options and what you want to have done before you make it Public. Steegle's instruction provides the details on how to take your site public: Site Sharing and Visibility Options.

Now that your site is developed and moved into a Google Apps account it's time to set the site aside long enough to move whatever other Google data you have in your gmail account to your Google Apps account.




Stage 5: Upgrade to Education edition

This is a free status upgrade for non-profits. It includes more email addresses, more memory, and other applications and capabilities to manage a working group of people. You can upgrade at any time; expect it to take about a week for Google to verify your 501c3 nonprofit status. During that time you can continue working on your site, of course. 

In the upgrade process you must verify to Google that you really are a legitimate non-profit organization. To do this you will need the EIN number for your organization. If you are not sure if your organization is officially a 501c3 nonprofit, check at irs.gov Charity Check. Once you have your EIN number, you are ready to apply for the upgrade status. Go to Google Apps Administrator Help > Upgrading to Google Apps for Education.



Stage 6: Polish site

It's time to add all that other content you've dreamed about. Create more pages, link them, and generally having fun developing your site. If you have a group of people who will be adding and managing content who are not yet involved, invite them into the site as Collaborator status and encourage them to start creating. You'll need to do a little teaching, but you've done the hard work of setting up the framework so if they are just "Microsoft Office competent" they will learn fast.

Add Contact Us function

Earlier I discussed the problem with posting naked email addresses and suggested that you use the Contact Us function instead. Now that you're on Google Apps, it's time to install your Contact Us function.

In isbellonline.org this is the Contact Tim function in the left sidebar on every page. I found it in Steegle's Google Apps Script - Contact Us Form - E-mail (updated 7/5/2015 subsequent to Google's upgrade to the new Sheets). It requires creating a Form in Google Docs, creating a spreadsheet in Google Docs, getting an HTML script from a library and inserting your email address inside of it, placing the form on a web page somewhere in your site, and inserting the invitation for visitors to contact you in the sidebar (or wherever you want it to go). It sounds more complex than it is. Give it a try.

The only thing I'd add to Steegle's instruction is that when you create the form you should use one of the templates provided because the default template has a transparent background so your text may not show up if it is the same color as the background.

Send feeds from your site - nifty!

You are now far enough along to add feeds to your site. These are really powerful, offering many of the features of an electronic newsletter. The RSS feed can also serve as a form of blog.

You can send a feed of most any kind of content. My subscribers don't need to come to my site and search around to find new content; instead, I send informative posts to their news reader or their email. If you are unfamiliar with RSS news readers, watch this 3-minute video

For details, go to Sending Feeds from Your Site



Feedback & Comments forms

Some people visit your site just to get information. Many of them are interested in a way to enter a conversation with you and/or other site visitors. To accommodate this, you need to look for opportunities to ask a question or somehow open up a discussion. You don't need this on every page, but you need it on many pages.

It is pretty easy to construct a Google gadget that provides a framework for getting feedback. For an example, look at College Strategies page at mc.isbellonline.org. To implement this feedback function involves designing a Google spreadsheet with an embedded form. It sounds harder than it is. Just follow the instructions at N. Raveendran's Create your own comments form and list box. One thing I'll add to Raveendran's instruction is to go to the underlying spreadsheet and click-hold the Last-in tab at the bottom and slide it to the left-most position. This causes the Last-in to be the view that shows up on your webpage.

To implement this concept on a narrower site (such as the site you are viewing now) you may need to make a modification. The problem is that the gadgets can too wide to put them side-by-side on some sites. To work around this, you can divide the two functions onto different pages, such as at Terminal Illness. Or you can stack them vertically on one page such as at Feedback on Technology in Ministry.

If your site has a dark background some of the fonts from the spreadsheet and its form may not show up. There is no easy way to change these font colors in the spreadsheet/form themselves, but I found a simple way to change their background color: Change your contents background color (from Google Sites Help, Tips and Tricks by Beckystar).

Now, whether you've added feeds to your site or not, you are ready to...



Stage 7: Start inviting people to your site!

Make sure your Sharing is set so that everyone in the world can view your site. Then invite a couple of friends to test it out, just to make sure they can log in and browse around.

Then start inviting more people and asking for feedback. Expect them to uncover problems that you need to fix. As you progress through this process, you will soon be ready to send out an email to everyone in your address book describing your new site and inviting them to visit. You can, of course, also invite in people from your social networking sites.

While you are inviting folks in, please let me know that your site is up so I can take a look. And as you find shortcomings in my Web Design resource, please let me know that, too, so I can make it better. Just use the Contact Tim form to send me an email.

Google Analytics

In a few days, you'll start wondering, "Are people are finding and looking at my site? Which pages? How long do they stay? How many are new visitors and how many are returning? What parts of the world are they in? What are the trends over time?" When you start wondering such things it's time to implement Google Analytics. And here's a good tutorial on how to do this from Steegle: Google Sites - Adding Google Analytics.

As I have learned from doing big projects like the one you just completed, the development project is not over until you celebrate. So...


Stage 8: Throw a party!

Way to go!

We hold you in high regard! <Raucous applause>