Homestead Blog

Some pictures are worth more words than others – Part III

July 1, 2008 by Ron, Creative Director

Ron, from our Creative Services group, is back to give you some more insight into how to use imagery more effectively in your website design – Rochelle.

In part 1 of my discussion on using images when building your website, I talked about how to choose good existing images from free resources like the Homestead Image Library. Part 2 was about dealing with copyright issues when using image services.

Today, in part 3, I’d like to talk about using your own images in your website. Taking your own photographs is probably the best way to make sure you’re getting the exact image you need for your purpose, particularly if you have an online store.

Photos of your products are arguably the single most important part of your online store. A great image gets your customers excited about your products, and gives them the confidence to complete their purchase from your store.

The great news is that it isn’t hard to take impressive photos of your products if you keep a few simple tips in mind:

Make your product stand out – Try using a white background to make your images jump off of the screen. Whatever background you choose, make sure that the object you’re photographing stands out against it. It’s often a good idea to use the same background consistently for all your products, so they’ll look great on the catalog page (where all the thumbnails are displayed side by side).

Avoid camera shake – Use a tripod to avoid moving the camera and to get the sharpest possible picture. This is especially important when using natural light.

Lighting is everything – Avoid using the built-in flash on your camera, especially in close-up situations; it can look harsh and flatten out the object. Turn the flash off and experiment with other methods of lighting, either using natural light or external lighting.

Experiment with DIY lighting – There are inexpensive lighting boxes available at photography stores, but finding other ways to diffuse light can be fun, and they don’t have to cost a lot of money. Try using two sunlight-adjusted fluorescent bulbs in clamp lights with a reflector, and aim them at a wall near the object to bounce the light onto your product.

Put your products on ice – My own favorite trick is to use a simple plastic ice chest or cooler as an impromptu product stage. The cooler provides a lovely even light that’s often perfect for illuminating what you put inside. Find yourself a white-lined plastic cooler large enough to fit your products, then bring it outside to a nice shady spot. Put your product inside and shoot away!

Get closer – Most digital cameras have a macro focus setting; use it to bring your camera within inches of your product to make sure the details are in perfect focus. This key setting is often accessed by a button that has an image of a flower on it.

Get creative – Finding creative ways to photograph your products can add excitement to your store. For example, instead of photographing your nature-themed jewelry on a table, imagine hanging it on branches. If you need inspiration, you can look on the Web; find ways to emulate the most inspiring product photos you can find.

Let software polish your images – There are many free or inexpensive software solutions out there that can help you optimize your photos to look great on the web, and they don’t have to be difficult to use. Look for programs that have simple tools to adjust brightness, contrast and size, and those that can save images to your computer in .jpg format.

Make your images the right size – When resizing your images for use in your online store, look at your product detail pages and choose a size that works well with the layout you have chosen. A good rule of thumb is to keep them around 300 pixels wide.

Do it yourself – Consider making your own thumbnail images instead of allowing the Store software to create them for you. You’ll have more control and make the smaller versions of your product photos look more sharp and crisp.

I hope these tips encourage you to try your own photographs. With very little practice you’ll find yourself taking professional-quality photos in no time!

Posted in Good Design, Tips and Tricks | 3 Comments »

Extreme Makeover: Online Website Editor Edition

June 24, 2008 by Sam, Product Designer

“So,” I hear you say, “about those posts by Brian on user testing: does that stuff really work?” Well, yeah! Here’s Sam to tell you about how we use it ourselves, and what surprising things you can find out with it – Rochelle.

SiteBuilder Lite is the award-winning software that helps people easily create beautiful websites and connect with their customers, friends and loved ones in ways that they never could before. Homestead members have used SiteBuilder Lite to create websites for charitable organizations, non-profits and family photo albums. We’re proud of the way this little tool has touched so many lives. We’ve put a lot of effort into it, and we were pretty proud of how it worked.

And then we tested it. And here’s what we found.

We know you’re looking for clearly labeled buttons that are easy to understand, and that you want to add and delete entire text blocks without hunting all over the screen for the right button before giving up and calling customer support.

We know you want to add personal images – the elements that bring websites to life – to your websites and place them anywhere you like, so that your message, your vision, can be broadcast to the world.

What else do we know?

We know that you didn’t find those things. At least, not in the way you wanted them. That’s why we test our tools with real people like you, so we can find out it if we’re building things you really want.

SiteBuilder Lite could do some of those things before…but, the question was, could we make them better? It turns out that yeah, we could, and now we have!

First of all, we improved the look of the element buttons to make their function clearer:

Before:

After:

Next, we made it easier to see how to delete a text element by adding a little button that says, well, delete:

Before:

After:

And we’ve given image handling the same sort of treatment. We added replace and delete buttons right on the border of your image elements. You can also drag and drop images easier now. To move an image, just “grab” the image anywhere you like – you’re no longer limited to the top border:

Before:

After:

In addition to these changes, we’ve improved the “import image” window in SiteBuilder Lite so that it is more straightforward to import an image from your computer and preview it before adding it to your website.

Hope you like the new changes! We’re still on the lookout for ways to improve SiteBuilder Lite. Again, that’s why we test – we realize that you, our members, have a lot of time and effort invested in your websites. The success of your businesses depends on your sites, so we are constantly on the lookout for ways to make things easier for you, either by adding new elements or improving existing ones.

We have a lot of our own ideas in discussion and in the production queue, but if you have any of your own please let us know. Stay tuned for more to come, and thanks again for using Homestead!

Posted in SiteBuilder Lite, Tips and Tricks | 9 Comments »

Setting up PayPal for your SimpleStore

June 13, 2008 by Rina, Product Designer

Here’s product designer Rina with her third and final post on Homestead’s new SimpleStore – Rochelle.

In the last two posts, we covered an overview of the new Homestead SimpleStore product, how to get it set up on your site, and how to fill it with products. Today we’ll finish off with the financials. All you need to do is get a free PayPal account, and then connect that account to your store.

The PayPal account you’ll need is called a “PayPal Business Account with Website Payments Standard.” It’s a mouthful, but we put in a link so you don’t have to search PayPal’s website for it. Just go to your Store Manager in your online website account by logging in and selecting Selling Online, followed by Store Manager, in the left-hand menu. (Multi-site users, remember to ascertain that you’re on the right site!) Under the PayPal section of this page, you’ll see a link that says Get a PayPal Account. Click on that and follow PayPal’s instructions to get your account set up.

This PayPal account is your online payment processor and all you need to run your SimpleStore’s finances. With it, you can accept all major credit cards, bank transfers, and PayPal payments without any online merchant accounts. You customers will check out through PayPal’s secure transaction system, and payments will be received into your PayPal account. You’ll add financial information to your PayPal account during setup so that you can move funds from your PayPal account directly into your bank account. Please note that it may take a few days for your financial information to be confirmed.

When you’re done setting up your PayPal account, return to the same Store Manager page and enter the e-mail address you used to register for your PayPal account into the box. You can also update your e-mail address in SiteBuilder by clicking on the second of the three Edit button in the ‘Basics’ tab. (For SiteBuilder Lite, the Manage Store and PayPal Settings link will return you to the Store Manager page).

And you’re done! Now you have a fully-operational online store that matches the rest of your website. I think you’ll have a lot of fun with SimpleStore. Happy online selling!

Posted in Advanced Features, Ecommerce, SiteBuilder, SiteBuilder Lite | 3 Comments »

Adding products to your SimpleStore with the Product Manager

June 12, 2008 by Rina, Product Designer

Here’s product designer Rina with the second of her posts on Homestead’s new SimpleStore – Rochelle.

In yesterday’s post, I gave an introduction to our new Homestead SimpleStore product, explaining some of its benefits and how to get one onto your website. We’ll start where we left off in the last post, with our SimpleStore element positioned and designed to suit our tastes.

Now that the SimpleStore is ready to go, let’s fill it with products. SimpleStore can display up to 100 products (you can actually load it with an unlimited number of products, and you choose up to 100 of them to show your customers at any given time). There are two ways to edit your product information: using your website editor (SiteBuilder or SiteBuilder Lite), or by logging in to your online website account.

To access your products in SiteBuilder, simply click on the SimpleStore element to select it. The properties editor pane to the right will then show the properties for your SimpleStore . On the ‘Basics’ tab, there are three Edit buttons—one to edit your product data, one to connect your PayPal e-mail address (we’ll talk about that in my next post), and one to set your currency.

Clicking on the first Edit button will pop up a window with the Product Manager.

To access the Product Manager in SiteBuilder Lite, click on your SimpleStore element to select it. The top left corner of the screen will now display two buttons and a link for your SimpleStore . Clicking on the Manage Products button will pop up a window with the Product Manager.

Finally, you can also access the Product Manager by logging in to your website account. Then use the left hand navigation menu to find the Store Manager sub-section within the Selling Online section. This opens the Store Manager page, which you can think of as your behind-the-scenes SimpleStore manager. The Store Manager page is where you can access the Product Manager, set your store’s currency, and connect your PayPal account to your store. It also contains an instructional section on the right side of the page, which provides helpful tutorials and videos on how to set up your store if you get confused.

For users with multiple sites, please make sure that you are signed into the correct website before managing your product information. A quick way to know whether or not the site you’re signed in on has SimpleStore is to check the background color of the instructional section on the right side of the page—if your site has a SimpleStore , it will be orange; otherwise, it will be blue.

Open the Product Manager by clicking on the Launch Product Manager link on the page.

Adding your products using the Product Manager

Now that the Product Manager is open, it’s easy to add your product information to your SimpleStore . You can enter information like product name, a description, and a price – which will be fed into your SimpleStore’s built-in search tool.

SimpleStore lets you upload a picture for each product. Here’s a word of advice – I would use a good-sized product photo. SimpleStore automatically creates a smaller-sized image to be displayed in your store, and when your customers click on it the image will be displayed in its actual size.

You can also choose to assign up to two attributes for each product. For example, in my sample store I sell cookies. For my chocolate chip cookies, I created an attribute called ‘Chocolate Type’ and listed the options as ‘Milk’, ‘Dark’ and ‘White’, so a customer could choose to buy dark chocolate chip cookies from me, if that’s what he or she wanted.

You can also place your products into an unlimited number of categories. Categorizing your products is useful because your customers can then choose to display just ‘vegan’ cookies, for example, if that’s what they are looking for.

If you need to manage your attributes or your categories separately from your products – say you want to rename a category or edit the options in an attribute – you can do so by clicking the Categories or Attributes label on the left side of the Product Manager, then clicking the specific category or attribute that you want to edit. Don’t forget to save when you’re done!

Now that your SimpleStore is loaded with products, in tomorrow’s post I’ll show you how to set it up to accept your customers’ payments!

Posted in Advanced Features, Ecommerce, SiteBuilder, SiteBuilder Lite | 2 Comments »

Introducing SimpleStore

June 11, 2008 by Rina, Product Designer

For those of you who want an easy way to sell things on your websites, have we got something for you! Here’s product designer Rina to tell you all about our new SimpleStore product – Rochelle.

There is a common misconception that if you have a website, you’re equipped to sell online. However, if you really think about it, all you have is real estate. Where’s your storefront? Where’s your shopping cart? How do you accept your customer’s payments? And if you have more than just a handful of products, how does a customer search through all of them?

As many of you may know, Homestead offers something called Homestead Storefront, an advanced ecommerce product designed to give you a way to offer your customers all those services and more. Storefront is jam-packed with great features, including shipping and billing tools, inventory management and QuickBooks integration.

Sometimes, however, people just don’t need all the advanced functionality of Storefront. They want to sell online using something simpler.

So here it is—the Homestead SimpleStore! The SimpleStore is just what its name implies: a simple way to add a store to your website, and one that matches the look and feel of your site to boot.

SimpleStore provides you with a clean, intuitive layout that makes it quite easy to give your customers a professional-looking store, complete with built-in shopping cart, product search and category browsing capabilities. You’ll be able to accept credit cards online without a merchant account by using a free PayPal account.

Perhaps best of all, you don’t need to learn any new tools to fit it into your existing website—the SimpleStore is simply another element in SiteBuilder or SiteBuilder Lite!

Here are a few sample stores that we’ve built. Click on the screenshots and you’ll be taken to each SimpleStore sample. Feel free to play with them as much as you want, just to see how they work. And don’t worry—you won’t actually purchase anything because for these samples we didn’t set up a PayPal account to accept orders.

Now, how do you get one of these? SimpleStore is currently available for Gold and Platinum website members as a paid add-on to your website account. If you have one of these accounts, you can easily add a SimpleStore to your site by logging in to your online website account and finding the Selling Online section, followed by the Simple sub-section, using the left-hand navigation menu.

Getting the SimpleStore on your website

After purchasing the add-on, you can just drop your SimpleStore onto your existing website like you would any other element in SiteBuilder or SiteBuilder Lite. In SiteBuilder, the SimpleStore element will appear under the coin icon in the menu above your page after you purchase the add-on:

In SiteBuilder Lite, the SimpleStore element is the green shopping cart entitled ‘Add Store’ that shows up in your element palette after you purchase the SimpleStore add-on.

Your SimpleStore element will first appear on your page in its default size and color. The example below shows how my store first appeared in SiteBuilder, right after I added the SimpleStore element to a new store page.

It’s really easy to change these defaults. Your SimpleStore element acts just like any other part of your website, so you can use the tools you’re used to in SiteBuilder or SiteBuilder Lite to make the changes you want. Resize and position your store wherever you like on your page, or change around your store’s size, colors, font and more until it blends in perfectly with the rest of your website design.

Building a SimpleStore is fast, and it’s fun too. Tomorrow I’ll show you how easy it is to add products to your new SimpleStore!

Posted in Advanced Features, Ecommerce, SiteBuilder, SiteBuilder Lite | 10 Comments »

Testing your site – how to prepare for a user test and how to conduct it

June 3, 2008 by Brian, Product Designer

A while ago we had Brian, one of our user interface designers, write about the importance of user testing. He works very closely with people we invite to our user testing sessions, so he knows what he’s talking about. Here he is with a follow-up, this time with tips on preparing and conducting your own user tests – Rochelle

In my last post I mentioned how important it is to look at how “user-friendly” your website is. If it’s user-friendly, it’s far more likely that your visitors will come back and make visits to your site a regular thing.

User-friendliness is one of the most intangible and hard to define characteristics of any website. It can be really hard for someone who has built a site to make that determination alone. The very best way to find out how friendly your site is to your visitors is to ask the visitors themselves.

At Homestead, we bring in a group of users every month and just watch them use our website. It’s been invaluable to see where some of the design choices we make work out well, and where some fail. It gives us an opportunity to fix things where necessary, and make Homestead a better product to use. Several changes we’ve made over the past year have come about from observations made in user testing, such as the redesign of SiteBuilder Lite we did a few months ago.

Most software companies test their websites with real or representative users. Some companies, such as Google and Microsoft, have entire teams of people and advanced fancy equipment to test. However, you don’t need to be a large company with vast resources to test the usability your website. All you need is time and a little help from your friends.

Mapping out tasks

Last time I talked about deciding what your goals were for visitors coming to your site, like making a purchase, submitting a survey, finding your location etc. Once you’ve identified those, put yourself in the shoes of your visitors and map out the tasks you think they should do in order to accomplish each of those goals. Each task should be something a user on your site would typically do to accomplish one of your goals.

For instance, if one of your goals is for a visitor to make a purchase, the tasks they need to accomplish might be searching for a product, selecting a size, choosing shipping options and inputting payment information.

Some tasks should take less than a minute to finish, others will take more. It all depends on how complicated the task is. Come up with an ideal length of time for each task. For a simple five page information-based website, any task should not take more than a minute or two. For an ecommerce website with many products, tasks may take several minutes.

During your test you’ll have an opportunity to see how long it actually takes users to accomplish your goals. Don’t be discouraged if each task takes longer than you expected. Either you misjudged, or you just identified an area of your site that needs improvement (more on that in another post).

Who to test

Now that you’ve identified your tasks, you need to identify who your target users are. If you’ve made it this far you probably have a good sense of who they are. If you sell products, such as pet supplies, a target user might be dog owners. If you’re an electrician, a target user might be a homeowner.

To run a proper test you’ll need to observe at least five people using your site. Ideally these five people should be representative of your target user group. If you can’t find representative users, use family and/or friends.

However, make sure that that their technical proficiency is roughly the same as your target group. If you believe your target group is not tech-savvy, you probably don’t want to pick your nephew getting his degree in computer science.

For a good test you should schedule between 30 and 45 minutes of time with your users, either at your home or business, or at their residence. Remember, they’re doing you a favor so take them out to lunch or bake them some cookies for lending you a hand.

I hope this gives you enough tips to help you plan for your own tests. In subsequent posts I’ll discuss how to conduct your tests and how to interpret your results. If you have questions, let us know!

Posted in Tips and Tricks | 5 Comments »

Write an article for the Directory – we’ll make you famous!

May 23, 2008 by Thai Bui

One of our technologists, who is also the father of a homicidal two-year old, is as passionate about our technology as he is about helping his child reach the age of three. Here he is to talk about one of our newer initiatives, the Intuit Business Directory – Rochelle.

There are really only two things that get me out of bed in the morning: my 2-year-old jumping on my head, and thinking of ways to get Intuit and Homestead members’ small businesses more traffic. I’ve given up on coming up with solutions to my daily head-banging, but we’ve been burning the midnight oil on the idea of generating more traffic for members.

The ideas generated have ranged from silly (free Super Bowl ads for everyone!) to sillier (my 2-year-old jumps on everyone’s head until they visit an Intuit or Homestead website).

But now I think we’ve got it.

We have just launched the ability for businesses in the Intuit Business Directory to write short articles about their areas of expertise. Here’s how it works:

1. Small business owners write articles about their industry. Not advertisements, not insults hurled at competitors, not even ramblings about what the cat had for lunch, but helpful articles that can give visitors reading them the kind of information that they need to become informed shoppers.

2. We publish those articles in the Intuit Business Directory and drive visitors to them, so they can read them and thereby achieve enlightenment.

3. Authors of articles will get good exposure as helpful, honest, informative experts in their field, and visitors will visit their websites to see what kind of brilliant person wrote the article they just read.

Think of it this way: we’re taking the power of blogging, the popularity of Intuit and Homestead, and the might of the network of Intuit customers to generate traffic

• Blogging attracts visitors because it provides fresh, relevant content.
• The popularity of Intuit and Homestead attracts visitors just from the traffic Intuit.com and Homestead’s sites themselves get (just ask any of our Featured Sites).
• If the collective expertise of all of Intuit’s and Homestead’s members could be found on one site, I know we’d have to beat visitors away with a stick. Which of course we wouldn’t do.

And there it is. Very simple, and trust me: very effective. If you’re considering blogging to market your own site, you should really do it at the Intuit Business Directory.

So now we’re calling on all our members out there who’d like a few more customers; why not join in? Visit the directory to see what others have done at business.intuit.com. If you write your own articles, you can show your customers that you know what you’re talking about, and get a few more leads. You might even sleep better.

And if you have a 2-year-old, consider wearing a helmet to bed. You’ll definitely sleep better.

Posted in Search Engine Optimization, Website Marketing | 1 Comment »

Color me beautiful Part 2 – choosing custom colors with your visitors in mind

May 9, 2008 by Jerry, Product Designer

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 complement 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.

Posted in Good Design, SiteBuilder, SiteBuilder Lite | 6 Comments »

Introducing the new Homestead Photo Gallery

April 22, 2008 by Kramer, Product Designer

We’ve just released a new product we think you’ll like a lot. Here’s Kramer, the product designer who led the team, to tell you about it – Rochelle.

As anyone who has built a website can tell you, one of the more challenging tasks is figuring out how to effectively convey lots of information in a small amount of space, without making the page seem crammed full of extraneous stuff. I like to call this space “screen real estate”, and it’s a very valuable resource.

Large images, when viewed at their full resolution, tend to monopolize this space. Their sheer size also makes them hard to organize in groups.

A good photo gallery can solve both those problems. It can save you valuable screen space by displaying small “thumbnails” of your images (more on those later) instead of your full-size images. And those thumbnails are a lot easier to organize into groups you can use to showcase your business, products, family pictures, etc., while still providing a way to view the original images. It’s a good solution to a common problem that can also add a little flair to your website.

So we’ve added one to SiteBuilder! You’ll find the new Photo Gallery element where the outdated Photo Album element used to be, under the View Add Images and Files Elements icon in the menu above your page.

The old Photo Album element only allowed you to display one photo at a time in a limited fashion. Along with a host of other new features, the new Photo Gallery can exhibit tons of images on a single page; in a sense, Photo Gallery is what Photo Album wanted to be when it grew up.

If you already have a Photo Album element on your page, it will still be there, functioning as it always has, but you’ll need to add any new or additional photo groupings with the new Photo Gallery element.

Here’s how the new element works. Once you’ve put one on your page, you add images to it by simply clicking on the ‘plus’ icon in the editor on the right side of your screen. You can easily add a caption to any photo while you’re at it.

Keep the experience of your site visitors in mind when you consider the size of the images you are trying to upload: large images (anything larger than roughly 1 megabyte) can take a long time to load for anyone visiting your site via a slower Internet connection.

You’ll notice that the image you’ve added appears as a small, cropped version of itself. That’s the thumbnail I mentioned earlier. For those of you who aren’t familiar with the term, a thumbnail is a small piece of an image that represent the whole image that may be too large to display on a page, particularly when arranged in a group with other images.

This thumbnailing process not only preserves valuable space on your web page, but it ensures that the thumbnail will have a high resolution for ease of viewing. It can also add a little mystique to your website, as visitors won’t know what the entire image looks like until they click on it.

In the Photo Gallery element, thumbnails are formed by “center-cropping”, meaning that the center of your image is found and then a small area is taken around that center to form its thumbnail. When your visitor clicks on a thumbnail, the original full-size image will be displayed in a window superimposed on your page.

Adding additional photos to your gallery is as easy as clicking the ‘plus’ icon and selecting another image.

Once you have added multiple images to your gallery, you can modify the spacing between the images as well as the size of the thumbnails to ensure that your photo gallery will fit whatever space you need to fill on your page.

The thumbnailed images are automatically laid out in the Photo Gallery element in a grid format. You can customize the dimensions of your grid by simply clicking on a corner of its border and dragging it. The grid will automatically realign itself within the dimensions of your border. The examples below show the same grid shaped in two different ways by this method:

Once you have finished adding images to your photo gallery, check it out in your browser, or preview it in SiteBuilder.

When your visitors are viewing a full size image, they can use the right arrow key on their keyboards or click on the right side of the image to move to the next image in the gallery; the left arrow key or clicking on the left side takes them to the previous image. Please note: you won’t be able to test that effect while in SiteBuilder’s preview mode; it’s only available to visitors to your published site.

This makes it easier for the people who visit your website, because they no longer have to close each image’s window before they go to the next one. Now they can peruse your images as if they were sitting on your couch, flipping through an actual photo album!

Another nice feature of our Photo Gallery element is that your visitors can see the full-sized images even if they have popups blocked in their browsers. This is because the images are not opening in a new window, but rather within the same browser window. This simple difference provides a more intimate, integrated experience that can really delight visitors to your site.

Photo galleries are often best placed on a page where they are the primary focus of that page, and it’s a good idea to ensure that your images somehow relate to one another. If the first image in your gallery is of your beautiful workspace, and the next one is a picture of the Loch Ness monster, you may confuse your visitors more than they’re willing to take.

I’m really excited about our addition of the Photo Gallery element to SiteBuilder. I hope you’ll have a lot of fun with it in your own websites. Enjoy!

Posted in Good Design, SiteBuilder | 38 Comments »

Make your website search engine friendly – 3 tips for Milton Ridge

April 16, 2008 by David, Product Marketing

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.

Posted in Advanced Features, Search Engine Optimization, SiteBuilder Lite, Website Marketing | 19 Comments »

Homestead Blog

Some pictures are worth more words than others – Part III

Extreme Makeover: Online Website Editor Edition

Setting up PayPal for your SimpleStore

Adding products to your SimpleStore with the Product Manager

Introducing SimpleStore

Testing your site – how to prepare for a user test and how to conduct it

Write an article for the Directory – we’ll make you famous!

Color me beautiful Part 2 – choosing custom colors with your visitors in mind

Introducing the new Homestead Photo Gallery

Make your website search engine friendly – 3 tips for Milton Ridge

Subscribe to this blog

About Us

Archives

a

Recent Posts

Links