Homestead Blog

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!

Brian is a user interface designer on the product team who works very closely with people we invite to our user testing sessions. Here’s the first in a series of articles he’ll be bringing you on the importance of testing your site for customer friendliness – Rochelle

How “user-friendly” is your website? This is an important question for any website owner who wants people to use his or her site. Depending on the answer, you could have a website that people bookmark and browse every day, or you could have a site that people can’t stand looking at for more than a minute.

Think of your website as a supermarket. Even though you may have the products that your customers are looking for, if they have to wade through disorganized piles of junk just to figure out where to go, chances are they’re not going stick around for very long. Similarly, if visitors don’t have a good experience while browsing your website, they won’t want to come back, much less purchase what you have to offer!

A good way to measure the user-friendliness of your website is to actually test it on users. User testing involves watching people perform common tasks on your site, such as finding information or making a purchase, and observing how they go about doing it. By watching their interactions with your site, you can discover problems with its design—problems that may not have occurred to you simply because it’s your website, so you already know how it works.

The first step toward conducting a user test is to figure out what your goals are. What is it that you want any user to be able to do and/or accomplish on your site? For example, if you sell products on your website, your goals may include things like “purchase a product” or “find shipping information.” If your website is informative, then your goals might be “find a list of your services” or “access contact information.” You should try to identify at least five to ten goals that you’d like any visitor to be able to accomplish on your website.

Once you’ve decided what yours goals for customers are, how exactly do you test the usability of your website? In our next user testing post, we’ll go over the details of how to prepare for a user test and how to conduct it. In the meantime, don’t forget to identify those goals!

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.

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.

Kim from the product team is here to tell you about a resource that can really help you if you run an online business – Rochelle.

For those of you who have found the product blog to be helpful, you should take a look at our collection of newsletters at http://hsnewsletter.homestead.com/. We publish two different kinds of newsletters, one devoted to websites, the other to our ecommerce product Homestead Storefront™. Both focus on tips and techniques that can help our members improve the way they use our products and services. Our goal is to give you advice that can make a real difference in your online business.

Both the website and the Homestead Storefront newsletters have new issues released every quarter. We are working to make them more interactive by encouraging members to give us feedback on their own tips so we can share them with other Homestead members. So if you’re interested in learning more about how to use your site to increase business, please take a look and let us know what you think!

Most of you know we’ve recently added some new features to our site and in our tools. One of the features I’d like to highlight here is the ability to add some useful symbols to your text using the following keyboard shortcuts in SiteBuilder (sorry, this isn’t available in SiteBuilder Lite):

Ctrl + Alt + C = the copyright symbol ©
Ctrl + Alt + T = the trademark symbol ™
Ctrl + Alt + R = the registered symbol ®

  Here are those symbols shown in SiteBuilder: 

One of the reasons we put in these shortcuts is because Homestead member Karina posted a comment on the blog asking for an easier way to enter these symbols (special thanks to Carla for posting her temporary workaround). We regularly share feature requests we get from your suggestions with our Development team, and one of the developers thought he’d like to take this one on. And now you have it!

So please enjoy, Karina and Carla, and anybody else who has a need for these symbols. And please, keep letting us know what features you’d like to see, and we’ll continue our efforts to try and add them to our products.

There are lots of great new things in the pipeline at Homestead.  Here’s product designer Rina to tell you about our new tools to help you manage your PayPal sales - Rochelle.

If you sell things on your website using PayPal buttons you may have already noticed this, but we’ve just implemented new tools for you to use in managing your PayPal activity. The new tools don’t change the way your PayPal buttons function; they provide a new and improved way for you to add products and manage your transactions.

If you’re a Gold or Platinum member, when you log in to your website account you’ll see a new link in the menu on the left side of your website account. This link is called Selling Online, and you’ll now find all ecommerce tools and products (including PayPal button management) organized within it.

Underneath Selling Online you’ll find a link called Store Manager. Clicking that link opens the new Store Manager page. It contains the same functionality as the old PayPal page - it gives you instructions on how to get started with PayPal, a place to enter your PayPal email address, and links to the PayPal site itself. The new layout of this page makes this information easier to read and understand.

The Store Manager page also has a link that says Launch Product Manager:

Clicking that link will take you to the brand new PayPal Product Manager page:

This new Product Manager is organized into two columns, making it easier for you to look at your products. Using it is simple. To add a new product, click the Add new link in the left column and a form will appear to let you add your new product information. Click the Save button when you’re done.

Your product will now show up in the left column where existing products are listed. As you add more products, each will appear there organized alphabetically.

To edit a product, click on the product name in the left column and you’ll be able to edit its information in the right column. To delete a product, just click the Delete this product link at the bottom of the form.

We think you’ll find the new Store Manager and Product Manager make it much easier to use PayPal buttons on your site. Nothing’s changed about how those buttons work for your customers, or how you can place them on your site using SiteBuilder, but now you have an easy way to manage them!

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!