Homestead Blog

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!

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.

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!