Homestead Blog

Here to talk about one of my favorite elements in SiteBuilder is… me! - Rochelle

People put forms on their websites for all kinds of things – collecting info from their customers or clients, soliciting feedback on their business, even taking basic orders online.  SiteBuilder’s Form Elements are some of our most powerful, since they let you set up your very own customized forms.

I think many of you are already a least a little familiar with our Form Elements, so in this post I just wanted to point out some tips and tricks that are probably not so well known. To set the stage, I’ll briefly skim over the basics first; feel free to skip ahead if you’re already familiar with them.

The Basics
Form Elements are ONLY available in SiteBuilder (not in SiteBuilder Lite).  You access them from the ‘Element Palette’ which is just below the top toolbar as shown in the following image:

• - Select the element you want based on the kind of information that you want to collect, or the way in which you want to collect it.  For example, if you want to collect open-ended feedback from people, use a Multiple Line Textbox.  On the other hand, if you want to have people choose from a set list of options you provide them, then use a Checkbox or Option Buttons.
• - Don’t forget to drop a Text Element for use as a label next to the form (for example, you might use a Text Element to put the label “Your Name” next to a One Line Textbox)
• - If you’re not sure what something is, just drop it in and see what it looks like!  See what kinds of changes you can make to an element by making changes to it in the Properties Editor on the right side of the screen.
• - You should ALWAYS include a Submit button on your form.  Otherwise, people using your form won’t have a way to send you the information you’re having them enter.

Ok, now for the more advanced stuff

Make it look good!
Forms that look good tend to have a consistent look and are laid out in a clear manner, making them easier to read and therefore easier to fill out.  Here are just a few tips to make this kind of housekeeping easier:

• Align your elements – I’ve already blogged once before about how to align elements.  Aligning is a must with forms; they really benefit from having items within them aligned, making them much easier to read.  At Homestead, we generally right-align the labels in one column, and left-align the Form Elements as another column.
• Style it! – Don’t forget that every element in SiteBuilder can be customized to suit your needs.  Using the Properties Editor, you can generally change the font, color and style of the text that appears in the element, as well as making certain fields required or inserting default text.
• Extra spaces – This is a bit of a ‘hack’ but it does work: if you want to have a Form Element sized exactly right, you can always add extra spaces to a field to make it look better.

Personalize it with a custom thank you page

In addition to selecting HOW you would like to receive the feedback sent to you via your forms, one of the other most useful options for the Submit button is that you get to choose where your visitors go after they submit the form.  You can just type in a customized message, but if you really want to give your visitors a holistic experience you might consider building a “thank you” page.

How do I make sense of my form submissions!?!?!
I bet this is one of the issues I hear most about from our users, and it’s something that we haven’t perfected…yet .  When you receive your form submissions, you can either get them sent to you via email, or as text files in the Form Manager (which you can import into Excel or some other spreadsheet program later).  Sometimes, the items may be in the wrong order or not well-labeled.  Here’s an image of a sample email delivery of a form submission with confusing content:

Now, here’s another example, this time using the technique I’m about to explain:

See how the information is better organized?   Here are a couple of tips that can help you do the same thing.  This is a little tricky to explain, so please bear with me. 

Element layer order
The order in which items in a form submission appear is based on their layer order.  The element on the lowest layer on the page is what appears at the top of the submission.  This is also what determines the “tab order” – the order in which tabbing from field to field in a form works.  So if you dropped the One Line Textbox element first, then that will be the top item in customer submissions.   To make lines of a customer submission appear in the same order as your form is laid out, do the following:

1. Right click on the first element.
2. Select Element Layer Order, then Bring to Front
3. Repeat with the next element, until you’ve done this to each element in your form.

Usually, I build out the whole form and then, once I’m done, right click each Element and bring it to the front.  This will put everything in the order that you want it to appear.

Name your Elements
Use the Rename button in the Properties Editor to label your Form Elements so that the submissions make sense to you.  You can change the name of the field from “One Line Textbox-2″ to something that is more meaningful, like “Name”, so your form submissions will be more clearly labeled.

See forms in action!
Check out the sample form I made to demonstrate many of the ideas I’ve talked about here: SAMPLE FORM Here’s what you’ll see:

• - I’ve included every single Form Element just to give you an idea of what each does.  Warning!  Don’t feel compelled to use every type of form on your own site.  You won’t get any brownie points for it – only use what makes sense for your particular needs.  In the interest of being complete, I’ve also included a “Reset” button - but most people caution against using the “Reset” button since sometimes people will accidentally click it and erase everything they had entered.
• - If you Submit your form, you’ll get to see my custom thank you page!

Since this is a fake form, feel free to click around in it and submit it (but please don’t expect a response :).

I hope these tips were helpful.  Try making a form for yourself and then test it out; sometimes experimentation is the best way to figure something out.  If it’s still confusing, feel free to leave a question in the comments section here in the blog and I’ll try to elaborate more. Have fun!

The above painting, The Treachery of Images, is by Rene Magritte. The French caption translates to “This is not a pipe”. The caption seems to contradict the subject, but not really. That’s not a pipe…it’s a picture of a pipe. You can’t stuff it with tobacco and you can’t smoke it.

OK, ready for a seamless transition from Belgian surrealist art to contemporary web design, specifically the use of buttons on websites? Here we go - consider this image:

At first glance, the button label is contradictory. But upon further inspection it’s totally accurate. When you move your mouse over the image, the cursor doesn’t change into a pointing finger. And if you click on the image, nothing happens. No matter how much that image may look like a button, it just isn’t one.

Now let’s look at an actual button. As you can see, the orange image of a button shown below is also accurately labeled. When you move your mouse over the image, the cursor turns into a pointing finger. When you click this button, something happens.

In fact, let’s all click it now so we can read the rest of this post.

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.

We’ve been working hard behind the scenes on some exciting products to help our members get more visitors to their websites. Here’s Amr & Lindsay to tell you about one of the latest- Rochelle

A short while ago we released an online directory that is exclusively open to Homestead member sites. Only Homestead members can place a listing in it, but it’s open for browsing to anyone when they’re looking for products and services. To give you an idea what a listing looks like, here’s an example:

Tens of thousands of people visit Homestead.com daily, and that number continues to grow. And they all have easy access to the Homestead Directory, and therefore your company profile and your website. And because listings in the Homestead Directory are limited exclusively to Homestead members, you’ll stand out as one of a select number of businesses within a specific category. In other words, you won’t be drowning in a sea of your competitors.

We’re also working on increasing traffic to member sites listed in our directory by promoting it to the major search engines. When someone is looking for a travel website, we want one of the first options they see to be the Homestead Travel and Recreation Directory (one of the major categories within our directory). If you’re listed there, your site could get some very valuable exposure.

Our goal is to help you gain a stronger presence online, and to create an entry point for you into the world of search engines. We know a lot of members are busy running their businesses, so we wanted to make it easy to get their sites some immediate exposure. Getting listed is easy – just fill out some simple information and your listing will be online within days.

For more information about the Homestead Directory, just visit homestead.com and click on the Get Traffic tab at the top of the page. To visit the directory itself, go to directory.homestead.com.

So come check out the directory and get yourself listed!

Here’s our creative guru Ron again with the second part of his series on tips for choosing good imagery for your site – Rochelle.

A few posts ago I gave you some tips for picking good photos from the Homestead Image Library. Those tips also work well for other online sources of photographs and illustrations. But beware: unlike the free images you can find in the Homestead library, most other images available on the net are protected by copyright, so your use of them on your site will be legally restricted.

If you’re willing to pay a little, you can search for images on the many stock photo sites available. Make sure that you are searching for royalty-free images, and pay attention to the usage license that you are accepting. Some sites have web resolution imagery they’ll let you use for as little as a few bucks!

These sites have pretty sophisticated search engines and you can really narrow your search to find just what you want. Here’s a trick I use a lot: if I find a photo that I like, I’ll search for other images by the same photographer to see if there are other good ones I can use!

Other fruitful sources of good imagery are sites that bring you a selection of free images with creative commons licenses. These can usually be used if you give credit to the photographer on your site.

I’ll close off this post by emphasizing one very important thing: the key to using images you find on other online galleries is to make certain it is OK to put them on your site, and to follow all guidelines associated with using the pictures. That’s a simple matter, really, so go on and have fun searching!

Coming up in part 3: Taking your own photos

Our support specialists spend their days answering a lot of questions about website functionality and design, so they have unique insight into things you can do with SiteBuilder that aren’t widely known. Here’s Ben to tell you about one of his favorites - Rochelle

I think one of the most underutilized elements in SiteBuilder is the “Image Effect” element. I get a lot of calls from members who want their site to look more dynamic and have more visual pizzazz. Most people assume that paying for Flash animation or animated GIFs is the only way to accomplish this, but that’s only because they haven’t tried SiteBuilder’s Image Effects.

Image effects allow you to have your existing images fade onto the screen, flicker on or do other neat effects when a visitor first opens your web page. Having an image effect near the top of a page can give your site a dynamic, visually arresting look similar to what “big business” sites pay Flash designers $$$ for. At the same time, since the effects are very easy to add, you don’t have to mess around with anything complicated, like HTML code. As an added bonus, since an effect only appears once - when the page first loads - your visitors’ eyes won’t be distracted from the content of your site.

You can find the Image Effect element by clicking on the Add Images and Files element button, then Add an Image Effect.

So if you’re looking to add more visual “pow” to your site, you might try Image Effects; they grab attention, they’re easy to use and they already come with SiteBuilder. Have fun, but please remember that this is one of those design elements where a little use of it can go a long way. One or two animations can make your site pop, but it can look too busy very quickly if you use too many. Visitors quickly tire of a cluttered site, so it’s best to use these effects sparingly.

Ron heads our creative department at Homestead. As a graphic artist and longtime photographer, he has a unique and experienced viewpoint on the use of visual elements in website design. Here is the first in his series on tips for dressing up your site with good imagery – Rochelle

“A picture is worth a thousand words” is especially true when considering website design. The right image not only conveys the purpose of your website, but also the values, sensibilities and legitimacy of your business.

We are inundated with images everyday. How do you pick the right ones? An easy place to start is to look around you and see what kind of images advertisers, editors and designers have used to communicate concepts in your industry. You can adopt their concepts and use that as a jumping off place for your own ideas.

I spend a LOT of time looking for images for our site and products, so believe me I know how challenging it can be to find just the right one. But it’s fun, too! In general I use three different sources for images: the Homestead Image Library, other online image repositories, and my own work. In this post I’ll talk about picking the perfect image in the Homestead Image Library.

The Homestead Image Library gives you access to thousands of good, free images. The key to finding the right one is knowing how to search. If searching by the terms that seem obvious to you doesn’t produce anything you like, try searching by the main colors of your site. By freeing you from thinking too narrowly about theme, it might broaden your perspective and reveal to you a great image that you may never have thought of otherwise.

Be open-minded and keep notes while you search. If you get ideas for other search terms while looking through the results, write them down; they can take you in new, creative directions.

Use your intuition when selecting images. What image captures your attention? Why? Ideally, the subjects in a photo should correspond to the theme of your site, but make sure that the subtle story the picture is telling is likewise in alignment with the intention of your site. Keep in mind who your visitors are, and what sensibilities they will bring when viewing the image.

I have found that choosing photographs is a very subjective business, and you’ll have as many opinions about a particular picture as there are people that you ask. My advice to you is to trust your instincts and have fun!

Coming up in part 2: Finding images in other online galleries

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!

Here’s Amr from our marketing group to tell you about his favorite web marketing tool - Rochelle

You’ve built a great website and registered the perfect domain. You’ve filled your online store with hot products and services, so now you can just sit back and wait for the business to roll in.

Too bad it doesn’t work that way. Setting yourself up online is only part of the process; you also have to make sure people find your perfect site when they go shopping on the Internet.

That’s why a key part of any serious web marketing strategy should be getting the search engines to work for you. One of the most effective ways to do that is by placing ads on search results pages, ads triggered by words the searcher used. When the ads are clicked, the searcher is taken directly to your site. We have a service called Homestead SearchLight™ that does just that.

It’s an efficient way to deliver targeted buyers directly to your website or online storefront. We pick “keywords” that best describe your business or products, then use them to create small ads that will be featured on major search engines, including Google™ and Yahoo®. Then, whenever a customer uses those keywords to search for something they need, your ad can appear on the results page.

How often those ads appear depend on the popularity of the keywords used - whether other businesses are using them as well. The beauty is that it doesn’t matter: you only pay for the visitors who actually click on your ad and are taken to your site.

Monthly reporting is included that can be used to optimize the results you get:

The service does the work for you, and you get the visitors your site needs.

You have a lot of competition out there vying for the same potential customers, so getting the search engines to work for you is pretty important. When a customer searches for a solution to their needs, better make sure that solution is you!

For more information on Homestead SearchLight, just visit www.homestead.com and click on the Get Traffic tab at the top of the page.

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.