Homestead Blog

One of our product designers, Jerry, wrote in January about the nuts and bolts of using Homestead’s color tools. Here he is again to give you the next in his series on color: how to choose good colors for your website design – Rochelle.

Last time I talked about how to use tools like the color picker to customize your site. Now that you know how to pick colors, maybe we should talk a little about what colors you should consider using in the first place.

There are two very important characteristics of color that you should be familiar with and keep in mind as you make decisions in the design you your websites: aesthetics and usability. Both can have a profound affect on the effectiveness of your site, and they don’t always work hand in hand.

The aesthetics of color

There are many things to consider when choosing colors for a site; your preferences, the mood you want to set and your site’s message or purpose are just a few of them. These factors are unique to you and your site, and the choices you make convey a great deal to your visitors, who respond to them in their own highly individualistic way.

Colors often have personal and cultural associations to your visitors that you should try to keep in mind. Here are a few useful generalizations about some basic colors (depending on who you are, you may disagree!):

• Red: aggressive, passionate, vital, energetic
• Orange: fun, cheerful, exuberant, positive
• Yellow: light, cheerful, easy going, optimistic, warm
• Green: tranquil, fresh, healthy, deeper green associated with wealth
• Blue: serene, dependable, secure, faithful, associated with the sky and sea
• Purple: sophisticated, royal, mysterious, blend of passionate red and serene blue

Successfully choosing colors along aesthetic lines is a lot easier if you have an idea who your audience is and what you want to convey to them.

Beyond the more intangible aspects of color selection, there are also a few practical things to pay attention to, since your color choices also have a big impact on how easy your site is to use.

The usability of color - contrast and readability

It’s important to make sure the text on your site is readable. That means not only using the right font and text size, but also making sure there’s enough contrast between your site’s text and the background behind it. Black and white contrast nicely, but if you to use a different background or text color, things get a little trickier.

We’ve all been to websites that seemed a little color-happy; think about how you reacted to those, and whether you had trouble reading any of the text on them. Remember, it’s not enough to have your site look pretty; it needs to convey your message properly and easily too.

As a general rule, a color contrasts the most with the color on the opposite side of the color wheel, and brighter colors stand out against a darker background. You can find contrasting colors by looking at the color circle of the Color Picker, which is basically a color wheel.

Just keep in mind that some colors will have great contrast to each other but look ugly together. However, you can generally find contrasting colors that look good together. The best sanity check is to find a few people to look at your site and give feedback on how easy your content is to read and how good it looks.

Highlighting

Color contrast can also be used to highlight, which can be very useful when you need your users to see something specific on your site. Whatever it is you want to draw attention to should look different from everything else. The trick is to keep the “everything else” consistent throughout your site so your intended highlights pop out.

Here’s a rough guideline: use a small number of colors (four or fewer) that compliment each other for each of your pages. Then have one or two highlight colors. Trying to use too many colors makes nothing stand out, since visitors perceive a difference wherever they look on your page!

Be very critical about deciding what the really important things are on your pages. You don’t always need to use color contrast to draw attention; sometimes, good layout will lead your site’s visitors to where you want them to go. Color isn’t your only tool in good design.

Colorblindness

Colorblindness should be a special consideration. About 10% of males have some form of colorblindness, the most common being some form of red-green colorblindness (blue-yellow and achromatic colorblindness are rarer). For these people, colors close to red and green appear to have much less contrast than they do to those with full color vision, so red-green combinations should be avoided where contrast is important.

An advanced class in usability

For those who want (a lot) more detail about the usability concerns related to color, NASA’s Ames Research Center has a site on color usage in critical applications such as flight. They emphasize usability and don’t really consider aesthetics. They don’t care if it’s pretty – after all, they’re designing color schemes for pilots and others who need to process data very quickly. But it can be useful reading if you’re interested.

The grain of salt

While aesthetics and usability don’t necessarily conflict (and often don’t), leaning more towards one sometimes means making compromises to the other. When making these tradeoffs, it really comes down to deciding which direction benefits your site’s message and your visitors more, as long as the tradeoff isn’t too extreme. Usually though, there is a way to accommodate both aesthetics and usability.

Things can get a little complicated with color, but if you keep the needs of your site and your visitors in mind you should have no trouble finding a good balance. If you have any specific questions, write in with your comments and I’ll try to answer them.

Here’s the second in our series on how to make your site “friendlier” to the search engines your visitors are using to find you. In an article in the Homestead Newsletter, we offered members an opportunity to submit their sites for a chance at having them analyzed to see how search engine friendly they really were. Our winner this week is Milton Ridge Historic Chapel. We had one of our professionals take a look at the Milton Ridge site so he could make some suggestions for changing its design to improve its “search engine optimization” (we call it “SEO” for short). Here’s David to give you his analysis and tips on good SEO practice -Rochelle

We all know now that it’s just not enough to have a pleasant looking website anymore. If you want to attract visitors to your site, you need to make sure the search engines are fully aware of your site and what it represents. When people search the Web for what they need, you need those search engines to guide them to you.

I analyzed the Milton Ridge site with an eye to making its design more search engine friendly. What I found can help Milton Ridge specifically, but can also serve as general lessons that we can all use as we build or maintain our websites.

1) Change your title tags – The titles of your web pages are important sources of information for search engines and customers alike, particularly your home page. It’s best to focus on titles that contain two (possibly three) keyword phrases. One should be your brand (probably your company name), and the other a common search term for your business. Since Milton Ridge is a wedding chapel, I ran a couple of searches on wedding chapels and wedding services. It looks like “chapel wedding maryland” (which yielded 12 daily searches) and “find wedding services” (19 daily searches) might be a good fit. I recommend this title tag: “Find Wedding Services at Milton Ridge Maryland Wedding Chapel”. That’s a manageable 61 characters.

To edit your page title, make sure you’re editing your home page, then click the Page Info button at the top of both SiteBuilder and SiteBuilder Lite. In SiteBuilder, a “Page Properties” editor will appear on the right side of the page; in SiteBuilder Lite, a popup will appear. Just fill in your desired text in the “Page Title” box.

2) Add Text Copy to the Front Page: Milton Ridge has an attractive video on their front page. It’s a good selling tool for visitors to the site, but it doesn’t do anything for the search engines to help people find the site in the first place. I recommend that Milton Ridge add a text description of their business on the front page – this makes really good content for search engine spiders. More than that, this is the page where most visitors will land. Text copy will help your customers understand your business and help close sales.

For Milton Ridge, I would at the very least try adding this copy underneath the navigation bar and above the video: “Find all-inclusive wedding services at the Milton Ridge Wedding Chapel. Located in the rolling hills of Maryland, we provide the perfect setting for your wedding and reception. Call us at 240.372.4442 today”. In addition to this minimum amount of suggested text, I really recommend adding even more information and copy relevant to your visitors.

3) Getting Links: Milton Ridge has some interesting partners listed on their services page. Some of them might have their own websites - like the minister, the florist and the DJ, for example - so I’d recommend asking them to add a link from their site to yours. If possible, it’s best that anyone linking to your site uses your keywords as the anchor text for the link. For example, a good link to Milton Ridge would be something like this: “We are a proud provider of DJ services to Milton Ridge Wedding Chapel.”

Here’s a bonus tip: all links to your site should go to just one URL if possible, and it should be the simplest possible. In Milton Ridge’s case, that would be the simplest available: http://www.miltonridge.com. However, Milton Ridge is using a different URL - http://www.miltonridge.com/index.html - to link to their home page.

That would be OK if everyone used that URL, but most sites linking to them will probably opt for the simpler http://www.miltonridge.com. What’s the problem? If someone’s website links to them using both http://www.miltonridge.com/index.html and http://www.miltonridge.com, search engines will treat these as two different links to two different pages. In effect, they’re creating duplicate content and splitting their links into multiple pages, diluting their impact on search engine results.

I hope this second installment of our tips for making your site more search engine friendly is helpful! Here’s my disclaimer: these free tips should help make your website more attractive to search engines, and are provided to help educate all Homestead members on how to design a more effective website. Please remember, they’re not meant to be comprehensive, and I can’t guarantee that you’ll immediately rank higher in search engine results. But I do think they’ll help. Milton Ridge has a beautifully designed site, and these tips should help them attract even more business with very little effort.

I’m excited to introduce a new feature to the Homestead Product Blog that we plan on making a regular thing – SEO analysis of members’ sites. We ran an article in the latest Homestead Newsletter about Search Engine optimization (SEO), and offered members a chance to submit their sites so we could choose one and do a detailed evaluation of it to see how well it followed good SEO design guidelines. Here’s David, our in-house SEO, to give you the results. - Rochelle

Most of you know that it’s not enough to have a great looking website. If you want to do anything more than impress your friends with your site, you’re going to want to attract visitors to it. And that means making sure the search engines know about your site, so they can direct customers to it when searches are made. And that means making sure your site is designed properly to work well with those search engines.

When we offered to do a detailed analysis of a member site to demonstrate good SEO design, we got a lot of submissions. Our first winner is Luminous Day Spa of San Francisco, California. I took a look at that site with an eye to optimizing its interaction with those crucial search engines, and here’s the result:

How it ranks now

First of all, the site is listed, and that’s good. Here’s how I found out: I entered site:luminousspa.com in the Google search window to find the pages they’ve indexed. Here are the results.

However, there’s room for improvement. Being listed is important, but ranking high in your business category is what you’re after. This site doesn’t rank very highly for its own brand keyword - its name: Luminous Day Spa. Your goal is to be #1 on the list of results on your brand keyword; here’s how this site currently ranks in search results on the Google search engine, and here’s how it ranks on Yahoo’s.

What Luminous Day Spa should do

1) Optimize for your brand name.

2) Identify an additional keyword that you want to rank highly for. Small sites should have only one additional, or a maximum of two, to avoid diluting the effect. Your additional keyword/phrase should be relevant to your business, have built-in popularity that will generate traffic, and yet not have too much competition (if you’re a real estate site, choosing “real estate” is not the best idea because all your competitors will be using the same phrase).

For this site, I’d consider using Day Spa San Francisco. The search engines have enough flexibility that they can “rank” you both for those words and for variations like day spa San Francisco, or spa San Francisco ca, etc. We used a free online tool to help identify new keywords for Luminous Day Spa; here are the results. Whatever keyword/phrase you choose, make sure you stick with it and optimize your site for it.

Tips for Luminous Day Spa to rank higher for their keywords

1) Remove the splash page. A splash page is often used as a sort of pre-home page, and visitors often find them unnecessary at best. They’re not ideal for search engines either, and they’ll just ignore any Flash or image content on them anyway.

2) Generate a “sitemap” for your site, and submit it to search engines. A sitemap is just what it sounds like - in a special format - and it can make your site easier for visitors to navigate your site, and easier for search engines to “crawl” so they can rank it properly.

There are websites out there that will generate a sitemap for your site for free. Here’s the sitemap one of them created for Luminous Day Spa. Instructions on the site make it easy to integrate a sitemap with your own site.

3) Use title and description meta tags – you can reread Lloyd’s earlier post in this blog on how to add meta data to your site.

• For titles, keep them to a maximum of 60 characters, making good use of your keywords and placing them as close to the beginning of the title as possible. For our example, I might try this title, which you’ll notice is my suggested keyword/phrase, plus the added State:

Luminous Spa | Day Spa San Francisco California CA

• For descriptions, keep them to fewer than 160 characters. Again, make good use of your keywords, and make sure you include your unique selling proposition, and your call to action. For Luminous Day Spa, I might try this description:

Visit Luminous Day Spa and enjoy our premium therapeutic massage services and treatments today. Our ultra-elegant facilities are located in San Francisco, CA

For both titles and descriptions, make sure each page has individual content. Luminous Day Spa should only use the recommended title and description for their Home page, and then vary them to describe each page uniquely.

4) Change the page header to an image, and insert an alternate image tag like this - Luminous Spa | Day Spa San Francisco California CA. Consider adding your phone number and address in text form to your header image so they appear on all pages.

5) Try to incorporate your keywords in various forms two to three times in the writing on each page, like San Francisco, CA Day Spa, and Day Spa In San Francisco California.

6) Add this keyword-rich footer to your pages - Copyright© 2007-2008 Luminous Day Spa, San Francisco California CA.

7) Ask the Homestead Help Center for help in doing what’s known as a “301 redirect” or “permanent redirect”, so people clicking on http://luminousspa.com will be automatically directed to http://www.luminousspa.com. These two pages are treated uniquely by the search engines. By combining them, you remove the risk of duplicate content and point all links to one canonical page.

(Update: Unfortunately, 301 redirects are not currently possible at Homestead.)

8 ) Any URLs used on your site should be written in lower-case letters, and hyphens should be used. For example:

• http://luminousspa.com/Policies.html should be written as http://luminousspa.com/policies.html

• http://luminousspa.com/giftcertificates.html should be written as http://luminousspa.com/gift-certificates.html

9) Provide “alt tags” for each of the images used on your site that describe what activity they represent. Make sure you caption them with good descriptions. For the Luminous Day Spa site, the ‘spa pictures’ tab could especially use this treatment. No pun intended.

Some additional tips to help site usability for Luminous Day Spa

1) Luminous Day Spa has a “Join the Mailing List” feature. Good idea, except that it’s an image, which will not help your search engine ranking. Consider using a link, not an image, to get people to join.

2) Bonus: Add an ‘About Us’ page, and post customer testimonials – these function as confidence builders for your visitors.

The importance of Links

The steps we’ve just gone over can work a lot of magic on the Luminous Day Spa site to increase its profile with those all-important search engines. And there’s another way you can increase your site’s search engine ranking: getting links.

Links to your site from other sites are very important. They’re commonly called ‘inlinks’, or ‘backlinks’, and they can be a key indicator of site popularity to search engines when they rank search results. The idea is that if people link to you, they must know about you and think enough of your business to provide easy access to your site.

We tested the Luminous Day Spa, and found just a couple of those important inlinks to the Luminous Day Spa site. Here are the results of two tests, the first using the “www” prefix on the URL, the second without the “www”. Notice how the search engine treats those URLs differently:

• Result using “www”
• Result without “www”

Getting Links

What’s the solution? There are a couple of easy methods you can use to increase the number of people linking to your site:

• Online directories provide a place for you to advertise your business and provide links to your site. Make sure they’re not just fee-based directories that let any site in. The more selective the directory, the better it is for SEO ranking.
• Encourage others to link to your site: partners, your vendors, local business associations, customers, friends… and don’t forget your own personal website and those of any of your other business owners!

A final note – managing your online reputation

Business referral sites like Yelp.com and Yellow Pages sites are rising higher in Google and Yahoo search engine results pages. Here are a couple of quick tips on using them to help manage and boost your reputation:

• Ask your customers to visit those sites and provide feedback on your business.
• Make sure the information they have on your business is correct.
• Provide links on your site to them, so your visitors can see what others are saying about you. For example, you could say “See what people are saying about us at Yelp.com” on your site, and make Yelp.com a link to the appropriate page on Yelp.com. These kinds of links are excellent confidence boosters for your customers as well.

And make sure you update and work on your site regularly, because if it becomes “stale” both search engines and your customers will lose interest in it.
That’s about it! Luminous Day Spa, congratulations on a visually pleasing site, and I hope that these tips will help you get the attention from potential customers that it clearly deserves. These tips are designed to help you get traffic, but also to improve the experience your customers have while on your site. After all, at the end of the day, you want to turn traffic into customers who will enjoy your site and keep coming back.

A lot of you have noticed how you can modernize your site by using our rounded rectangle element. Here’s Chris, one of our graphic designers, to show you how to make rectangles with neat, rounded borders - Rochelle.

Have you ever looked at Homestead’s website and envied its rounded gray border? Well here’s a quick tip that you can use to give your site the same professional look.

Creating the pieces

The key to this technique is using two rectangle elements, one carefully layered on top of the other. Here’s how it’s done. First create a new rectangle with the rectangle tool above your page. Next, choose a rounded corner type and the color you want your border to be in the ‘Basics’ tab on the right of your screen. In this example I’ve chosen the Small Rounded option and the color gray to imitate the look of the Homestead site.

Now position and resize your rectangle to fit your needs. Once you are satisfied with your rectangle, write down its position and size information. My rectangle information looks like this:

Right-click your rectangle and select Clone.

You’ll notice that your new clone looks exactly like your original rectangle, which isn’t going to do. In the ‘Basics’ properties change your clone’s color to the color you would like your content to sit on. For our example imitating Homestead’s look, we’ll use white.

Sizing and positioning the clone to make a border

To create the border effect we will have to alter both the clone’s position and size information. First step, reset the position value: select your clone and add the thickness of the border to the left position value. In our example my rectangle’s left value is 25, and I want my border to be 1 pixel thick. 25 + 1 = 26, so I would change the left value to 26. Change the clone’s top position in the same way and you’re almost done!

You’ll notice that the clone is now too big for the effect you want. That’s easy to fix with the second step: adjusting the rectangle’s dimensions. Just take the thickness of our border, which for our example is 1, and multiply it by 2. Take that new number (2), and subtract it from both the width and height. That gives us new values for the dimensions of our clone, 748 wide and 728 high.

If you’re following along with our example your position and size values should now look like this:

That’s it! Your two nested rectangles now appear to be a single rectangle with a neat, rounded border, with everything lined up perfectly. Just drop your content right on top, and you’re done!

One of our designers on the product team, Jerry, has strong opinions on what constitutes good design. He gets especially energized about the use of color; here’s the first of a few posts to come on good use of color in your site design – Rochelle.

Color choice is important to consider when designing the look of your site. SiteBuilder and SiteBuilder Lite give you lots of flexibility in selecting colors. You’re not limited to the 30 standard colors in the color menu; the real power is in the last option in the menu: Custom.

When you click on Custom, you get the ‘Color Picker’, a tool you can use to select from a LOT more colors. The 30 standard colors are at the upper right of the Color Picker, but if you go ahead and use the circle and the vertical bar to the right of it, you’ll have the flexibility to choose from around 16.7 million colors!

And don’t be afraid that you’ll never be able to match a custom color again. In SiteBuilder, as you use custom colors the Color Picker will remember them and place them conveniently in a box to the lower left, so you can specifically select them again, just as you would any “standard” color.

Having millions of colors to choose from means you can find colors that are perfect for your site. However, it’s also very easy to come up with some combinations that, um, don’t work so well. Obviously, poor color choices can make a site ugly to look at, but be careful: even pleasant color schemes can be bad if they make a site hard to use.

Coming up in part 2: Color Selection

Lloyd from the Product team has an idea for you that may help your site rank higher in those all important search engine results - Rochelle.

Once you have a website with good content and design, it’s time for you to think about how to let people know about it. And in the online world, that means letting search engines know about it.

You can raise your profile with search engines in a number of ways, including submitting your site address to them, listing it in one or more online directories or having people you know create links to it. But there’s simpler way to help make your site show up in relevant search results just by making a few simple additions to your “Meta tag” field using SiteBuilder or SiteBuilder Lite.

Search engines regularly scour the net for new and updated sites, and one of the characteristics of a site they look for in their search are keywords used in the site’s “Meta tags”. Meta tags live under the surface of websites where they can’t be seen by visitors, but they assist search engines in classifying a website. And they’re very easy to add to your site.

In SiteBuilder Lite, click on the Page Info button that can be found near the top-right corner. You will find entry fields for ‘Page Title’, ‘Description’ and ‘Keywords’.

When choosing keywords and descriptions, please consider the following points:

o Think about what keywords you want associated with your site.
o Use the best keywords in your Page Title and Description.
o Place the words most associated with your site first.

In SiteBuilder, you can add or edit your Meta tags by clicking on Format from the menu, and then selecting Page Properties.

When you select Meta Tags under your Page Properties as shown below, you will find the entry fields for Description and Keywords. When you’re done, you can apply your changes to every open page in your site by clicking the Apply To All button.

Give the search engines some time to do their indexing, and you should start to see your website showing up higher in the results pages when your keywords are entered. Happy Online Marketing!

========== Important Added Information ==========

Please remember that search engines like to see Meta tags that are specific to the page on which they’re used. For that reason, the “Apply to All” feature may be most useful when you’re first setting up your site and you have key words that you’d like to apply to all the pages on it. Using it early also means there’s less of a chance that you’ll accidentally overwrite any key words already there. After you’ve used it, however, you’ll want to customize each page individually to make sure each page is described uniquely.

Here’s Sam, a Homestead Product Designer, with a few words describing a new enhancement to a couple of our elements in SiteBuilder. - Rochelle

SiteBuilder fonts number just twenty nine
For some customers, that is quite fine
From Arial to Wingdings we have a good set
But what about Mangal, Batang, or Sevnet?

“Where are my fonts?”
People often will write
“I use them in Word…
I’d like them on my site!”

Well now they’re all there
Every font Word can show
Is in two of our elements:
Anti-aliased text and logo

We’ve made it so you can use any font
Custom logos and headers will look like you want
They render as images as you will see
So your site will appear as you meant it to be

Since visitors don’t have the fonts that you might
SiteBuilder makes images so your pages look right
But search engines cannot read them at all
And big images slow your page to a crawl

For large content sections, we would suggest
The text element will serve you the best
It uses the fonts, that all browsers display
“Your website is great!” people will say

Now you can use any font on your computer in the the anti-aliased text and logo elements in SiteBuilder!

Homestead has a lot of good resources for you to use when building your website that you may not know about. Here’s Bryan from Quality Assurance to tell you about one of his favorites. - Rochelle

Did you know that Homestead has a library containing tens of thousands of free, public-use images that you can add to your site? Need some pictures of food for your restaurant’s website? Search for the word ‘food’ in the Homestead image library, and you’ll find approximately 12,618 food-related images to choose from! Think that your babysitting website could use a few pictures of kids playing? Search for the word ‘playground’ and find 109 playground-related images that are free for you to use. For pretty much any type of website that you may be creating, the Homestead image library has a number of high-quality images that might meet your needs. To access the Homestead image library, simply add an image element in SiteBuilder or SiteBuilder Lite, then follow the instructions and click the Our Image Library button. You can search for whatever type of image you’re looking for; it’s fun to browse and easy to use! Try it on your own: a few high-quality, relevant images can greatly improve the look of your site. Enjoy!

In response to your questions regarding our two website editing tools, Sam, a Homestead Product Designer, talks about the differences and benefits of SiteBuilder vs. SiteBuilder Lite. - Rochelle

Some of you already know this, but our newer members may not: Homestead offers two different ways of creating and editing your websites - SiteBuilder and SiteBuilder Lite.

SiteBuilder is our flagship, full-featured website editing tool. You download it from the Homestead website and install it on your own computer to use. SiteBuilder offers an expanded list of useful elements you can add to your website that you will not find in SiteBuilder Lite, including shapes, forms and web polls. With SiteBuilder, you can edit your website’s background, as well as add various advanced text effects. Also, with SiteBuilder you can work on your website without an Internet connection, and save your work on your computer until you are ready to publish the edits you’ve made to your site online.

SiteBuilder Lite, on the other hand, does not require a download at all: it runs in your web browser. After logging in, you just click to open SiteBuilder Lite from Homestead’s website. While online you can make easy changes to your site like editing text, images, the navigation menu and even your logo. You can’t save your changes without publishing them directly to your website, but many people find SiteBuilder Lite easier to use, particularly if they don’t need all the features in the full-featured SiteBuilder.

The cool part is that no matter which tool you use, and no matter how many times you switch between the two, your website will always be up to date. Any changes you make with SiteBuilder Lite will sync up when you open your website in SiteBuilder, and vice-versa.

Hope you’ve found this useful. If you have any suggestions, please let us know!

Check out the new, updated version of our online website editor SiteBuilder lite! Don’t worry, we haven’t made any changes to what software people call the “rich feature set”; you might call it simply “the stuff it does.” It still does all the same, good “stuff” you’re used to, but we’ve updated the way it looks, and we think we’ve made it even easier to use.

Now when you make changes to your site in SiteBuilder lite, all the pages on your site are listed on the left hand side, instead of tabs at the top. Some people were confused about the tabs, so we got rid of them and listed your pages on the left instead. Now it’s easier to rename them, reorder them, and just navigate between them. Removing the tabs also made it possible to activate the links at the top of your pages, so you can navigate through your pages just like a visitor would.

Maybe best of all, these changes make room for a lot of NEW functions and great stuff we’re working on right now that will help you manage your online home better. Stay tuned to this blog, we’ll let you know when we’re about to add something new.

We hope you like the way the new SiteBuilder lite works. Let us know what you think; it’s user input that lets us know how we’re doing. In fact, it was our users who asked for the changes we’ve just made! At Homestead, we believe we’re all part of the same community, so feel free to share your ideas with us. Your opinion matters!