Homestead Blog

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.

For another in our series of posts on good design tips, I have my own favorite tool that you can use to make your site look a little more professional. Best of all, it’s easy to use!

A favorite feature of mine in SiteBuilder is the easy alignment tool. I look at a LOT of web pages as part of my job, and one of the things I see that can make a website look especially unprofessional is when the elements on a page don’t quite match up with each other. You may not even be able to pinpoint why it looks bad when the alignment is off by only a few pixels, but even that small amount can make a big difference in the way you feel about a web page. The reason may not be obvious, but sometimes you just feel when there’s something not quite right about a web page. Fortunately, those problems are easy to fix on your own site with SiteBuilder. Whenever you have elements you want to align, just select them and in the Properties Editor you’ll see where you can align them either vertically or horizontally.

Figure 1. Before aligning:

Figure 2: Elements aligned!

You can also use this tool to center elements! It’s a short and simple fix, but one that will make your pages look sharper and more professional. Give it a try!

Adding to our series on good web design, customer support manager Jon is here to share his favorite element with you, the Site Navigation Menu - Rochelle

Do you want to make navigating your website easier, or create some consistency with your links? The Site Navigation Menu Element is the way to go. It’s been around for a while, but I think a lot of members probably aren’t familiar with it, which is a shame. Simple text links or single buttons have their place, but if I have more than a few pages to link to, I always reach for the Site Nav Element.

It’s there at the top of SiteBuilder, looking like a little compass, beside the Rectangle Element. The Site Nav Element has a lot of options in it, but don’t let that intimidate you, it’s still easy to use. And I think it’s the best way to add links to your pages.

Let’s start with the high points. The Site Navigation Menu Element is what we call a “global” Element. That means that when you use it you’re creating a menu that can be used on several different pages without having to re-create it every time. It’s sort of like a QuickSite design for your link menu; once you create and name a Site Navigation Menu, you can add that Menu to different pages.

Also, any changes you make to it are global. If I create a Site Navigation Menu and call it “JonMenu1″, I can add that “JonMenu1” menu to any page on my site including, let’s say, my Index page, my Contacts page and my Testimonials page. Now, if I change the color of the “JonMenu1″ on my Index page, that color change will also take place on the menus on my Contacts and Testimonials pages. That’s what we call a global change.

And because the Site Navigation Menu is a single Element, you don’t have to worry about aligning individual buttons every time you move the menu around. Moving the Site Navigation Menu moves all of the links in that Element as a unit, neatly and cleanly.

One of the most powerful things about the Site Nav Menu is that you can add a mixture of different links to it. Email links, links to existing pages or files in your Homestead account, or external links… just because they’re all in one Element doesn’t mean that you’re restricted to a single type of link. You can also specify that some links will open in the same window, while others open in a new browser window. That’s particularly useful if you want your homepage to remain open when you provide your guest with a link to an external website!

I think that once you get a taste of the Site Navigation Menu Element, you’ll be hooked. It’s easy to learn how to use it. The best advice I can give is to just jump right in with both feet and experiment with it. Once you create your first Site Navigation Menu, you’ll see how easy it really is, and how valuable a tool it can be to your website design!

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!

We’ve added a new option to the rectangle element in SiteBuilder. Here’s Sam, a Homestead Product Designer, to tell you all about it. - Rochelle

Web designers are always looking for ways to give the websites they build a clean, modern look. A simple technique they use a lot these days is rounding off the corners of page elements like buttons, backgrounds and borders. Rounded corners can give elements a smoother, more natural feel.

You might think a web designer would choose to use rounded corners merely to improve a website’s aesthetic look, but there’s something more to this subtle design technique. We’ve found that smoothing out corners of individual elements actually makes the information that they present easier to read. Rounding your corners is a simple step, but it can do much to clarify your message. It communicates subtly to readers how your information fits together, and how each element is differentiated from other information on the page.

You can see how others have used rounded corners by checking out these websites: A16, Links to Your Heart and PromoCOASTERS.

So how can you add rounded corners to your site? Well, we’ve just added that capability to our most recent SiteBuilder software update! Specifically, we’ve added the ability to round the corners of rectangle elements; check out the new “Corner Shape” box in this screenshot:

You can play with the choices of a small, medium or large rounded corner to see which you prefer for your site. One thing to keep in mind is that when you view the corners in SiteBuilder, they might look a bit jaggedy (yes, I know that’s not a real word but you know what I mean). But once you publish the page, they will turn out as smooth as glass.

Personally I love the look of rounded rectangles, so I hope you’ll enjoy this new tool in SiteBuilder and take full advantage of it on your own sites. Have fun with it!

We’ve had some good feedback about our post on centering your page content vs. left-justifying it. Kevin, JP and Andy have commented on the effects of centering when using an image as a background. I thought the answer might be worth sharing with the rest of you.

There’s an important thing to keep in mind when you are designing your page, and that’s the idea of “tiling”. You may be familiar with the concept from adjusting the background on your Windows desktop. When the image chosen is smaller than the background it needs to fill, it automatically multiplies to fill the space with enough identical copies of itself to fill the background. The finished background looks like it is made up of rows of tiles with your image on them, laid side by side.

Tiling is the default for Homestead SiteBuilder and SiteBuilder Lite. Patterns provided by Homestead are designed to look good when tiled to make up a full background, but most other images really aren’t suitable for that use.

There is, however, an easy way to use one of your images as the background on your page and have it look great: set your background to a solid color, and drop in your image as an Element in the center of your page. Remember, your page is like a collage, with each Element layered on top of the preceding one. If you choose a matching or complementary color to the background of your image, your image will float in the center as if it were framed there.

(more…)

When we first started this blog a mere month ago we thought that we’d only be posting about new features or services. Reading all your comments made us think that perhaps we should expand the “mission” of the blog to include talking about how the product works today. So, I thought I’d introduce what I’m hoping will be regular feature on the blog: “Good Design.” We’ll try to post some sort of design tip on a regular basis, in hopes of taking what the Homestead Product Team has learned here and sharing it with all of you.

The idea for the first topic in this series came because I’ve noticed that a few people (Donna, Nancy and others) have commented on the blog that their pages look fine on a smaller monitor, but they don’t like the way their pages can look on larger monitors.

One of the biggest challenges of web design is that it can be hard to know how your site is going to appear to people visiting your site, because they’re using computers that are different than yours. While you might have a large 21-inch monitor set to a high resolution, one of your customers might be using a 15-inch monitor set to 800 x 600 pixels resolution. To better illustrate this issue, I thought it would be fun to take a photo of the monitors used by a few of the people here at Homestead showing a site that I designed for some friends of mine using SiteBuilder.

This 15 inch monitor (resolution 1024 x 768 pixels) belongs to Amr in the Marketing Team.

This huge 21 inch monitor (resolution 1920 x 1200 pixels) belongs to Brian in the Product Design Team.

You can see that your site visitors can have a very different view of your website than you do, depending on the size and settings of their monitors.

In Donna’s post, she specifically mentions that she doesn’t like “large white space on the right hand side.” It’s really easy to change that in SiteBuilder simply by centering the content of your page in the browser window.

My friend’s website centered on Brian’s large monitor.

In fact, some of the most popular sites on the web, like CNN or ESPN, do exactly that. For fun, you can drag your browser window wider or narrower while looking at these sites to see how the space on either side of the content changes, but the width of their actual page doesn’t change. Most sites used to be left-justified for the most part, but lately more and more sites, professional sites like CNN and ESPN in particular, have moved their content to the center. At Homestead we’ve been reviewing that issue ourselves, and with our next software update (end of summer) the default setting will be for all new pages that are “built from scratch” to be centered instead of left justified. If you’re using a QuickSite, any new pages you create will continue to match the justification of your Quicksite.

In the meantime, if you’d like to center-justify your content you can follow these easy steps:

1) Open SiteBuilder
2) Click on the “Page Info” button in the top toolbar of SiteBuilder.
3) Click on the “Advanced” tab in the “Page Properties Editor” on the right side of the application.
4) Click the check box for “Center Contents on Page”

I hope this helps address some of the questions people have had with how their sites look on different monitors. If you have other suggestions for design topics to cover please let us know. Remember, if you have more specific questions you can always create a help ticket at our new help center.

I hope this was helpful!

-Rochelle