Although a website is just a collection of web pages, the collection is not random. A central theme ties the web pages together with common elements such as branding, logo, layout, and formatting. On really large websites, the interweaving of these elements can be quite complex. Each of Google’s websites, for example, has its distinct identity and yet you can identify it as a “Google website”. It takes a small army of designers and illustrators to achieve such a “Similar But Distinct” identity.

But it’s fairly easy to establish a unifying theme for the web pages of a small website, such as yours. And you can do it all by yourself; a common header and footer is all that’s usually necessary. Naturally, it would make immense sense if you could design a template for headers and footers once and use it on all of your web pages.

A template isn’t all that revolutionary a concept. You’ve probably built a template in your word processor for your letterhead or for a boilerplate, for example. Many widely-used applications save you the trouble of repetitive formatting by allowing you to make templates. Therefore, it shouldn’t come as a great surprise to you that you can build page templates in Office Live Small Business as well.

A web page template in Office Live Small Business has two components: information and design. The information component consists of the text and images that are specific to your website, such as your company name, logo, slogan, copyright notice, and so on. The design component deals with choosing the right font, colors, background pictures, and other such visual elements. Once you configure the necessary settings, you’ll have a shell, so to say, which will appear around the content on your web pages.

Choosing a title for your website

A website’s title is usually the name of the business it represents. My little company is called Acxede, for example. Therefore, it’s logical that my site’s title mimics my company’s name. Now, there’s only so much real estate available on a web page for the title. Because Acxede happens to be a short name, it can fit into most page layouts. But if your business is incorporated as Anthony Donaldson’s Vacuum Cleaner Sales, Service, and Rentals Incorporated, this scheme of things breaks down. What do you do then? A good rule of thumb is to echo whatever name is on your business card. Unless your business card is the size of a postcard, you’d have shortened the name to something like Anthony Donaldson Inc. Use that as your site’s title.

People often want to set their domain name as their site’s title. Because my company is called Acxede, it would, of course, be terrific to have acxede.com as my domain name. And I do. Unfortunately, not everyone is that lucky. More likely than not, the domain name you want is already taken. Let’s say that you’re Sam and you own a deli called, naturally, Sam’s Deli. Everyone just calls it “Sam’s”. It wouldn’t be unreasonable for you to want the domain name sams.com. The trouble is that Sam’s Publishing has already snapped it up. Okay, so how about samsdeli.com? Nope. Another Sam owns it. So you’re forced to settle for a domain name that doesn’t echo the name of your business; something like samsfreshfood.com, perhaps. Nevertheless, your website’s title should still say “Sam’s Deli” because that’s the name of your business, no matter what domain name you ultimately settle on.

Now that you know more about setting a website’s title than you ever wanted to, let’s get around to doing the honors.

Time for action – setting the site title

1. Pull down the Design Site menu from the Page Manager toolbar and select Design site. A new window opens, displaying the Microsoft Office Live Small Business Web Design Tool web page with Site Designer as the active tab.
2. Click on the Header button on the ribbon. The Customize Header dialog opens.
3. Replace the text Welcome to my site in the gray box in the Site Title section with your site’s title. I’m going to set it as The Office Live Guide for the site that I’m building—this article’s companion site.
4. Pull down the select options for the font face just above the title. You’ll see a choice of seven fonts: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS, and Verdana.

   Why only seven? After all, Microsoft Word seems to have a hundred. The reason is that in the Web’s architecture, the task of displaying a given font is delegated to your browser. Not every browser can display every font. If a browser can’t display a font that you’ve specified, it displays one that it thinks is right. Such a substitution might distort your web page. But these seven fonts are, more or less, the least common denominator; most browsers support them. Therefore, the chances of your web pages being distorted are quite slim if you choose one of these seven.

   So which of these seven should you choose? Follow this two step process:

   • If one of the fonts in the list looks like the font on your letterhead or the sign above your office, choose that one.
   • Not even close? Choose either Georgia or Verdana.

   Most fonts, such as Arial or Times New Roman, came to computer displays from the world of print. They were designed to look good on paper. Making a font look good on paper is relatively easy because text is printed on paper in very high resolution. On a monitor, however, pixels of resolution are at a premium. Besides, the resolution can vary from monitor to monitor. Therefore, text will look better onscreen if you use fonts that are designed specifically for monitors rather than using fonts that are grandfathered from the print world. Georgia and Verdana are designed specifically for monitors and so they’re the ideal candidates for the text on your web pages.

   Set the font you’ve chosen. I’ve set it to Georgia.

5. Next, pull down the adjacent select options for the font size. You’ll see a choice of seven font sizes. They’re conveniently numbered from 1 to 7. Size 1 is the smallest and size 7 is the largest. For some inexplicable reason, people often choose a size that’s either too big or too small. I recommend size 5 for the title. That’s just about right for most websites built with Office Live Small Business.

6. One thing you’ve got to remember, though, is that: Thou shalt use Georgia or Verdana in size 5 for your site’s title is not the eleventh commandment. I’ve suggested these settings because, in my experience, they are just about right for most websites built with Office Live Small Business. They make the header appear proportionate to the text on the web pages. But, they may not be right for your site if its title or slogan is either too long or too short. Come back and experiment with the font face or size of the header elements if your pages look out-of-whack after you finish building your website.

   Set the font size you’ve chosen. I’ve set it to 5.

7. Although you can choose a color for the title. The choice of color depends on other layout options as well.

   Although you can make the title bold, italicize it, or underline it, you’d do well by avoiding the temptation. Depending on a combination of factors such as the font face, font size, and resolution of a visitor’s monitor, these special effects can make the text quite difficult to read. The last thing you want to do is to inadvertently make the title of your site unreadable.

8. Your Customize Header dialog should now look something like this:

   

9. Keep the window open; you might as well set a slogan for your website while you’re there.

What just happened?

You just took the first baby steps towards building your website! Agreed, all you did was set the site title—not exactly the kind of stuff that you’d write home about, but it’s a fine start nevertheless.

Your site’s title and slogan, which you’ll set in the following section, play an important role in helping people find your site from search engines.

Choosing a slogan for your website

An Office Live Small Business website’s slogan is really just its tagline; so I’ll use the terms interchangeably. Successful businesses use catchy taglines to reinforce their brands. What comes to mind when you hear “Just do it!”? Nike. How about “Don’t Leave Home Without It”? American Express. And “Eat Fresh”? Subway, of course.

See? People subconsciously associate taglines with brands or products. Come to think of it, the whole point of building your website is to reinforce your brand. Naturally, a good tagline will go a long way towards achieving your goal.

While a tagline sounds like a no-brainer, not every business has one. If you don’t, you’re not alone. After all, you can’t spend a few million dollars to come up with one the way Nike, American Express, and Subway probably did. But if you happen to have one, it’s a good idea to immortalize it on your website. And if you don’t, now’s the time to scratch the creative side of your brain and think of one.

But don’t despair if you can’t. You may be able to substitute a description of your business for the tagline with good effect. If you’ve shortened Anthony Donaldson’s Vacuum Cleaner Sales, Service, and Rentals Incorporated, to Anthony Donaldson Inc., your tagline can be Vacuum Cleaner Sales, Service, and Rentals, or something to that effect. It may not be as potent as Nike’s tagline, but at least it tells people what Anthony Donaldson does for a living.

Time for action – setting the site slogan

1. Replace the text Add your site slogan here! in the gray box in the Site Slogan section with your site slogan. I’m going to set it to Build your own website in a day!
2. Pull down the select options for the font face just above the title and set it to the font you’ve chosen. I’m setting it to Georgia again.
3. Next, pull down the adjacent select options for the font size and set it to 4.

   Why 4? I didn’t pull the number 4 out of a hat. I chose it because size 4 is a size smaller than size 5, the size of my site’s title. If your Site Title is set to a size other than five, choose one size smaller than the size of your site’s title.

4. As with the Site Title, don’t select a color for your Site Slogan. And stay away from the B, I, and U buttons as well. Your Customize Header dialog should now look something like this:

   

5. Click the OK button at the bottom of the Customize Header dialog. It closes and you arrive back at the Site Designer.
6. Click the View button in Site Designer.

   

   You’ll be using the View button, and the Save button next to it, quite often. When I want you to click the Save button, I’ll simply tell you to save your work. If I want you to click the View button, I’ll tell you to preview your website. Whenever I refer to these buttons, directly or indirectly, you now know where to find them.

7. A pop-up message asks you whether you want to save your changes. Click OK.
8. A preview of your site comes up in a new browser window. Notice that the site now displays the new title and slogan, as shown in the following screenshot:



9. After you’ve admired your handiwork long enough, close the preview window and return to Site Designer.

What just happened?

You added a slogan to go along with your site’s title. Why so much fuss about simply setting the title and slogan? In a word: findability.

Findability? I didn’t make that word up, by the way. Honest! Well-known web usability expert Jakob Nielsen did. A site is findable if it’s easy to find; that is, it appears near the top of search engine results when a person searches for relevant terms. You can find great advice about building usable websites on Mr. Nielsen’s website at http://www.useit.com

Search engines attach considerable importance to the title of a web page. It tells them what the page is all about. But that’s not the only thing they look at. They also try to determine whether the text on the web page has anything to do with its title. Because the slogan appears on every page with the title, a strong correlation between the two and their correlation with the text on your web pages will determine your web page’s ranking in search results. To put it mildly, if your site’s title and slogan stink, so will its ranking in the search results!

Therefore, don’t take these settings lightly. If you don’t put enough thought behind them, you risk relegating your web pages to obscurity.

Have a go hero – experiment with the site title and site slogan

Although I handed down the edicts on setting the font face and the font size for the Site Title and the Site Slogan, by no means are my recommendations cast in stone. Although following my recommendations will save you a good deal of time and heartache, you’ll do a disservice to yourself if you don’t experiment on your own. Depending on how long your Site Title or Site Slogan is, you might find a better combination of these settings if you try out a few variations. Here are a few suggestions:

• If you’ve set your font to Georgia, you might want to try Verdana.
• How about Georgia for the Site Title and Verdana for the Site Slogan? Or vice-versa?
• Although I’ve recommended that you set the font size for your Site Slogan a size smaller than the font size for your Site Title, you might want to try a font size two sizes smaller than the size for your Site Title, especially if you’ve set different fonts for the title and the slogan.
• Verdana is a wide font. If your site title or slogan has several wide letters like W and M, Verdana may not be the right choice. You might want to try a similar but narrower font, such as Arial.

Try out a few variations and settle on one that you like the best. You might want to get an opinion from a friend or a co-worker. And remember, you can come back and play with these settings any time.

Pop quiz 1

1. Which of the following attributes make your website more “findable”?
   1. Your site’s header
   2. Your site’s title
   3. Your site’s font setting
   4. Your site’s slogan

The answer to this quiz is given at the end of this article.