We’re updating SiteBuilder!

We conduct frequent user tests and review your feedback from the blog and our customer support center to plan our development, and we take it all into account (drop-down menus anyone? we hear you). We can’t talk about all that we’re planning, but we’re happy to announce that we’ve just finished an exciting update to our award-winning SiteBuilder website-building tool. Here’s product designer Jerry to tell you all about it –  Phil, Editor

We’re always trying to find ways to make it easier for you to build and maintain your websites, so based on your feedback we’re making some changes to SiteBuilder that we think will make it more efficient to use.

Visual Redesign

The first change is visual: when the update is made in the next few days, you’ll see that we’ve updated the icons in the toolbar at the top of SiteBuilder; same function, easier to identify icons. We’ve also refreshed the look of the element menus and shortcuts too, but that’s just the start for those…

Updated Shortcuts

SiteBuilder used to have four element shortcuts: Text, Image, Rectangle, and Site Navigation. By looking at which elements were used most frequently, we identified several that really should have a shortcut. So here’s the new list of element shortcuts: Text, Image, Photo Gallery, Media File, HTML, Rectangle, and PayPal Button.

If you want some extra screen space to work on your website, you can hide and show the shortcut bar by clicking the arrow button.

To make room for this expanded list, we removed the shortcut for Site Navigation. Why? Because most people create their websites using one of our design gallery’s templates with a site navigation already built in. Of course, if you’re starting your site from scratch or need to add another site navigation menu to your site (for example, to create a footer of links), you can still find that element in SiteBuilder’s element category menu. Only now you’ll look for it in the new Design & Links category…

New Element Categories

One key thing we’re doing is reorganizing SiteBuilder’s website-building elements into new, more useful categories. As we developed new elements over time, our old categorization got outdated, with too many main categories and none with labels. We wanted to regroup elements in a more efficient way that would be easier to use.

The new menu organizes all elements in five main categories, each of which has more specific subcategories to make elements easier to find:

• Content – Here’s where you’ll find elements for adding text, images, media content (like audio and video), and custom HTML to your site; everything you use to talk about your business in your own words, sounds, and images.

• Design & Links – These elements create the structure of your site, including navigational structure and the overall visual design of your site.

• Communication – This category has elements that let you interact with your customers, either through social media channels like your social networking site pages or a feed to your blog, or directly through email and chat. This category also has form elements that let you collect feedback and information from your customers.

• Information – This category holds elements for information display like your location, time and date, and the weather.

• E-Commerce – Anything related to selling through your website can be found here, like PayPal buttons and shopping carts, the SimpleStore add-on, and, if you have an e-commerce package, your Storefront.

Personal Elements

The five main categories hold elements that are best suited for building a professional-looking business website. The remaining elements have been given their own category called Personal Elements, because they’re often used on personal websites. If you want to access those elements, just select View > Show Personal Elements.

We know that there’ll be some adjustment for those of you who know the existing menus like the back of your hand, but we really believe that you’ll find the new categories make better sense and will be easier to learn and use.

Descriptions

Another goal of the redesign was to make it easier to understand what each element does without having to consult a help menu. In the new SiteBuilder, when you mouse over an element in the shortcuts bar or in the main menus, you’ll get a description of the element and some notes about how best to use it. If you want more detail you can always go to the Help tab (the one with the question mark on it) in the element’s properties editor, but now we’re putting the basics front and center so you can build more intuitively, and more quickly.

New Element

We’re also adding a new element called “Social Networking” to help you take advantage of the power of social networking sites to help you grow your business; we’ll be covering that in another post in a couple of days.

That’s it for now! We hope this refresh of SiteBuilder will make it even easier for you to build a great-looking website. We’ve scheduled the update for the next week, so stay tuned, and let us know what you think!

Add a new page to your website’s navigation menu–it’s easy

We just streamlined the process you can use when adding a new page to your website with SiteBuilder.  Now it’s  easier to add a link in your site navigation menu to your new page. Here’s Jerry to tell you about it – Rochelle.

When you start working on creating a website, you need to decide what links to include in your site’s navigation menu. It’s important to give your site visitors an easy way to access key pages on your site with a single click, but, if you have a lot of pages, you don’t want to clutter up your navigation menu with a link to every one of them.

We’ve made it a little easier to make that decision right when you add a new page to your website.  Now when you add a new page with SiteBuilder, you’ll see a new option that makes it a simple matter to either add a link in your site navigation to your new page, or remove it. You can always add or remove a link to your new page later by editing the navigation element, but the new option makes it more convenient.

Here’s how it works. To begin, add a new page in any one of the usual ways:

1) Click the New Page button in the toolbar

2) Select File, then New Page from the menu

3) Right-click and select New Page from the File Manager

You’ll get the familiar page template selector. It looks like this if you’re using a design from our Design Gallery:

Or like this if you’re using a design from SiteBuilder:

Here’s where the new option comes in.  To add your new page to your navigation menu, make sure there is a checkmark in the box labeled ‘Add this page to my site’s navigation.’ By default, that checkbox is checked automatically; if you don’t want your new page to have a link in your navigation menu, just click the box to remove the checkmark. If you don’t have a navigation menu on your site, you won’t see that option at all.

Then make sure you give your new page a title. Search engines use page titles as part of their calculation for determining how prominently your site will appear in their search results.  Perhaps more importantly, your page title will appear as part of the link to your site in those results.

When you’ve finished, just click Next.

The next step is deciding on the details of the link to your new page. Again, if you don’t have a navigation menu on your site, you won’t see this page.

Here’s how that works:

1) If your site has more than one navigation menu, choose the menu you want to use for your new link. Otherwise, the new page link will be automatically added to the only navigation menu on your site.

2) Next, decide where you’d like your new link to appear in your navigation menu. By default, SiteBuilder will add the new link to the end of your menu, but you can move it wherever you like in the menu by using the buttons below the list of links.

3) Now it’s time to give your new link a name. If you gave your new page a title as I suggested, SiteBuilder will by default give the link to that page the same name.  If you prefer a different name (something shorter and more appropriate for a link, perhaps), you can change it here.

4) To finish, you can change the name of the file for your new page, and where it will be stored. By default, SiteBuilder will use your page’s title as the page’s file name, but you can change both file name and location by clicking the change file name or save location link.

When everything looks good, just click Finish, and you’re done!

Hope this makes things easier for you.  If you have any questions about this new process, please let us know!

YouWant it, YouGot it: the new YouTube video element

If I’ve heard our members say it once I’ve heard it a thousand times: “When are you going to make it easier for me to add a YouTube video to my site?”  I really didn’t want to start on another thousand times, so… we built it!  We’ve just added a new YouTube element to SiteBuilder; here’s Jerry, the product designer responsible for it, to tell you about it — Rochelle.

You’ve probably noticed that websites now use lots of video. Services like YouTube have made it possible to add videos to a page by copying and pasting some HTML code into it. Some of you have already used SiteBuilder’s HTML Snippet element to add a video this way.  But it ain’t easy.  Adding HTML code can be kind of complicated, and frankly it isn’t the way we wanted to make you do it.

So we built you something I think you’ll like: the new YouTube element in SiteBuilder. No need for understanding or handling HTML code anymore–adding a video to your site is as easy as copying and pasting the URL of the YouTube video from your browser’s address bar.  You’ll also be able to see how the video player will fit in with the rest of your site on the SiteBuilder stage (the draft layout you see as you work on a web page in SiteBuilder).

Let’s try it out and add a video to a web page.  First, let’s drop the YouTube element onto our site by simply clicking it in the element menu under the “add images and files” element icon:

When you first drop your element on the SiteBuilder stage, it will look like this:

Now let’s find a video on YouTube to add to our page. To get there, go to www.youtube.com in your web browser, or just click the ‘YouTube’ link in the Properties Editor.  Let’s add my favorite video of the Internet Fairy. All we have to do is highlight or select the URL in the address bar and copy it.

You’ll find the URL you need in the address bar at the top of your screen:

We simply highlight that address from the YouTube page and copy it.  Then we go back to the page we’re building in SiteBuilder, and paste that URL into the ‘YouTube URL’ field in the properties editor in SiteBuilder.

You’ll notice that the element on the stage now shows us how the player will look on our web page.  We’ll be able to see the video itself when we’re done editing our element and we preview or publish our page.

We can control the way the video behaves, too.  There may be times when you’ll want a video to begin playing automatically as soon as a visitor gets to your page. In general, though, unless the video is the main focus of the page, you’ll probably want to let your visitors decide whether or not to watch the video. This is especially true if you have more than one video on the page. So for now we’ll leave the ‘Play Automatically’ option unchecked.

You can also choose whether or not to let YouTube suggest related videos to your visitors when they’ve finished watching your video. You’ve probably seen YouTube recommendations before; they look like this:

You get to decide if other content from YouTube would be appropriate for your purposes, or whether it would be distracting.  For now, let’s leave ‘Include Related Videos’ checked.

One of the best things about using the new YouTube element to add a video is that you can now customize the player’s appearance and see the changes directly on the stage.  For our example, let’s choose a different color for our player; how about dark blue:

Here’s how that will look:

We can also add a border of the same color to outline the player more:

And then we can preview our work; notice that the video plays right on the stage:

If we like what we see, all we have to do now is publish it:

And that’s it!  Adding a video is now just a simple copy and paste from your browser to SiteBuilder. Give it a spin; I recommend starting with Ninja Cat, one of my personal favorites: [http://www.youtube.com/watch?v=muLIPWjks_M].  Have fun!

Making a mailing list, checking it twice…

After writing about the form elements a couple of weeks ago, a few people at the office suggested that I write about the mailing list elements as well. If you have a domain with email service, creating a mailing list is an excellent and easy way to keep your visitors informed about your business, club or group, and is a good tool to get them more involved as well.

Mailing List Overview

It’s easy to set up a mailing list for your website. In fact, you can set up as many mailing lists as you like. Basically, a mailing list is a collection of names which you can use to send information to multiple recipients at the same time.

I like to think about using mailing lists in two different ways: external and internal. As an example, let’s use a site that my friend uses to manage their Japanese drum group, San Francisco Taiko Dojo http://www.sftaiko.com/contact_booking.html.

First, the more traditional, external way to use a mailing list is as a consolidation of your customers or people who might be interested in your business. In my example, we’ve created a mailing list for people who are interested in finding out about upcoming performances or concerts that San Francisco Taiko might be doing.

Another way to use a mailing list is as an internal tool. If you have several people in your organization who might be responsible for the same job (e.g. answering general questions about your business or responding to sales inquiries), you might want to set up a mailing list that includes that group of people (e.g. sales@yourbusiness.com or info@yourbusiness.com) That way, if a customer sends an email to that address it will automatically go to everyone on the mailing list, and anyone would be able to answer it.

Setting Up Your Mailing List

Before you add any mailing list elements to your website, you’ll need to set up your mailing list. Note that you MUST have a domain in order to set up a mailing list!

1. Login to your account at www.homestead.com.
2. Click the domains & email link in the left-hand menu.
3. Click the email services link. If you have multiple domains, you may be prompted to choose the appropriate domain name. The Email Manager page will appear.
4. Click the Create Mailing List button.
5. Select an email address for your mailing list. This will be the address you use to send messages to your mailing list.
6. Enter email addresses for anyone you want to receive messages you send to your mailing list. Separate the addresses with a comma, or by pressing Enter or Return on your keyboard.
7. Click the Save button to save your mailing list.

Once your mailing list is saved, you can send mail to your mailing list at any time by simply entering the mailing list address (the one you created in step # 5) into your email program.

The Mailing List Elements

Now you’re ready to use the Mailing List elements that are in SiteBuilder!

There are three elements for you to choose from:

• Join the mailing list – this element lets users automatically submit their email address to the mailing list of your choice.

• Remove me from the mailing list – this element gives your visitors the ability to opt out of your mailing list by simply entering their email address. Keep your visitors happy by allowing them to choose the amount of e-mail they receive.

• Mail the mailing list – use this element in conjunction with the Join the Mailing List element. That way, visitors who are interested can join and then email something to your website’s mailing list quickly and easily. Note that you may NOT want to let people email something to your mailing list so easily! This is the kind of element that might be better for a club or organization that has a password-protected page.

As with all elements, there are a bunch of things that you can customize on them including font, color, image used and custom messages. Just check out the Properties Editor to see what you can change:

Note that you can also use text links to let people email your mailing list. Just highlight the text that you want to use as your link and use the “Email Address” option.

Hopefully you’ve found this post useful, and you can now unleash the power of Mailing Lists on your site!

Oh, one final word of caution – there’s a limit of 1500 characters for each mailing list. This roughly translates to a limit of 60 to 80 email addresses.

If you hit this limit, here’s a little trick that I use which I like to call “embedding mailing lists”. When I get near the limit I create a new mailing list that I name something like “MailingList2” or “MailingList3” (depending on how many mailing lists I have), that will hold any new addresses I want to add.

Then I just add that new mailing list to the original one, so that whenever I address something to the original mailing list it will include everyone on the new mailing list too!

It sounds kind of crazy, but it works!

Setting up PayPal for your SimpleStore

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!

Adding products to your SimpleStore with the Product Manager

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!

Introducing SimpleStore

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!

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

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.

Introducing the new Homestead Photo Gallery

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!

Using Form Elements for Fun and Profit

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!