March 2008
Web 201: Complementing Design and Function By Cathy Owano

Good websites don’t just happen. A lot of forethought, planning and organizing goes into creating a website that is useful, purposeful and resourceful. Once you have a master plan for your website — the things you want to accomplish or offer — it’s time to consider design and functionality. The way a website looks and how it works should always complement each other.

When in Doubt, Keep it Simple

Blinking text, screaming audio, multiple assaults of punctuation (!!!!!!) and text that is hard to read will not entice visitors to stay and find out more about your garden center and what it has to offer. One of the main goals for your website’s design should be not to annoy or frustrate your web visitors.

Treat your website like you would the physical attributes of your garden center. You would not put a maze of obnoxious signs and clutter in front of your garden center, requiring everyone to struggle through there to get to your plants, gift center or other resources, so why obliterate your website’s purpose and intent by keeping customers from getting to the information, products and expertise?

Your garden center’s website should be pleasant to look at and easy to navigate. It should make sense. Everything visible should pertain to your business or the related industry, validating that this is where they will find the information, help and products they’re looking for.

What features should be considered in a website’s design? Here are a few:

Navigation menu. What are the menu item choices? Where do they go? You should consider placement of the menu (left, right, bottom, top), the style (static, cascading, flyout, drop-down, mouse overs, etc.) and intuitiveness. Can visitors find your navigation, and is it easy to figure out? Or do they have to jump through hoops and dodge fires? Make it as simple as you can. Does the menu physically cover your content at any point? Will it prevent the visitors from clicking on something? Look at other websites and how they incorporate navigation. Which do you like? Which are confusing or hard to use?

Colors. Think about the colors for the background, content area, navigation menu, font and logo. Your colors should complement one another. A hot-pink background with red blinking centered text and a neon-green logo may not be everybody’s cup of tea. In fact, it might not be anyone’s cup of tea. Your web designer should come up with a “palette” of colors that will be used on your website: Three to seven colors that go well together can be used to help coordinate, organize and help tie all the site’s elements together.

For instance, use the same color on each of the navigation menu buttons. This groups the menu elements as one entity. Perhaps use another color for the “moused over” view of the buttons. Again, it should be the same color when any of the navigation menu buttons are moused over. It unifies and stabilizes.

Organization. Plan it out. Know what you want to present right now and what can wait, and know your website. The top person in your company right on down the employee line should know what is on your website and where people can find the information they need. If you expect your employees to know where everything in your garden center is, they should also know where everything on your website is.

Font and formatting. Consider both typeface and size. Avoid annoyingly small, large or hard-to-read fonts. Overemphasis is also not a good idea: Nothing should be bolded, italicized, ALL CAPS and underlined at the same time. Limit yourself to one of those at a time. Have a particular size for your headlines or titles of your pages, another size for the body text, and then decide what should be italicized or bolded.

For instance, are captions to your photos going to be italicized or in a different color? How do you set it apart from the rest of your text? And how about special features such as sales or clearances? How would you draw attention to these offerings? You might consider special font characteristics or colors, such as regular prices listed in strikethrough text, with sale prices beside them, bolded and red.

Underlining is a tricky choice on a website. Because most hyperlinks are underlined, people tend to think that anything underlined is a link. So if you choose to use underlined text that is not a link, use it sparingly to avoid creating frustration.

White space. White space refers to the amount of space around each of the elements on your web pages. For instance, does the text slam right up against a photograph, or is there some buffer space between the photo and the surrounding text? Do things feel crowded? Busy? Cluttered? Are there a lot of elements on your page or is there some breathing room and it feels like you can get from one thing to another without feeling pressured? (“Click me!! Click me!!”)

The design of a web page isn’t that far removed from a publication’s page. The same elements that can make the flow of information work on a printed page also can help keep your web pages clean, unhurried and vital.

Loading time. How long does it take your web page to appear completely in a web browser? If you want to use photographs and graphics, make sure that the time it takes to download these items and present your page doesn’t frustrate your customers. If your homepage and all associated graphics don’t load in roughly 10 seconds, you may have too many graphics or photographs or other elements that could somehow be streamlined. Can you use a thumbnail or smaller version of the photo?

Traditionally, thumbnails can be clicked on or hovered over, and a larger version of the photo will pop up in a new window. This involves a little work for your web visitor (they have to click or hover on the thumbnail), but it also helps keep your page’s load time down. It’s something to consider if you want to present a lot of photos of products or flower types. If the load time interferes with someone clicking on an item and getting right to what they want to know about, they may wander away from the page.

While it’s nice to think that everyone has kept up with or has access to the latest technology, the fact is there are still users out there with dial-up connections and older computers with less processing power than a graphics-heavy design may require. Make sure your website is as accessible to as many customers as possible.

Interactivity. Have you thought about a shopping cart, databases, Flash presentations, forms, streaming video, podcasts or RSS feeds (syndication systems used to alert subscribers that your site has been updated)?

These features also should be part of your functionality considerations, but a designer must know about them to help ensure the design will accommodate these functions. If the designer gives you a rigid template that is difficult to modify, it could create problems going forward when you need to expand your site’s offerings. Flexibility is key to a website’s design and future growth.

Making it Work

Functionality is of equal importance to your website as design — in some ways, it may be more important. If your website looks great but takes a long time to serve up your pages or process and respond to things a visitor has typed in (such as a keyword in the search engine), you will lose your visitors. It won’t matter if you have the greatest content in the industry if your web visitors can’t reach it.

Especially when you are just starting to build your website, it is important to keep things simple. Sure, Flash presentations are great, but they can take up a lot of bandwidth (processing power) and can be considered smoke and mirrors. “Show me the money,” as the famous line from Jerry Maguire suggests. Show customers what they came for, then maybe they’ll stick around long enough to explore the rest of the website or come back later to play around.

Web visitors can be impatient — we want our information NOW. So do as little to stand in the way of this information exchange as possible. You want your best information and expertise to shine for your visitor. You want your visitors to stay on your site for as long as possible. The longer they stay, the more they will find, and the more your company will become a resource for them. It’s like a Superbowl ad. Some of them are clever, funny and the talk of the town… But can you name the products they were advertising?

Follow your own links. This can be as simple as making sure all your hyperlinks go where they’re supposed to go. Test your links. Click on them. Do they point users in the right direction? If not, fix them. Did you include a link to a page you hope to build in the future? Put up a message on your page that says something to the effect of “Coming soon: exciting details on how you can grow a weed-free garden!” Then make good on your promise and post the information as soon as possible. You should not have a “coming soon” message up for longer than two weeks. If it will be longer than that, take down the link and put it back when that information really is coming soon.

If you have links to other websites, make sure you check those links now and then. Companies go out of business, move their websites or redesign their pages, which may change the addresses. Do those links still work two months after you’ve set them up? Check on them occasionally. If links are broken and your customer finds out before you do, you look inattentive and neglectful. It’s like a salesperson in your garden center who doesn’t know where the gladiola bulbs are located. You need to keep up with the information on your website and make sure it’s current.

Make it navigable. Navigation is also part of functionality. While you are most likely to have a navigation menu of some kind, you also need to have navigation between pages. If you have a section of pages on perennials, can your website visitors go right from Perennial A to Perennial B, or do they have to go back to a Perennials table of contents page to get to the next entry? Make it as easy as possible to get from one thing to another. At the same time, don’t include links to every part of the site on every page. Make your navigation helpful, not overbearing or condescending. Simple, practical, useful.

Interactive elements count. If you have forms through which your customers can contact you, shopping carts where customers can buy your products online, or a search engine, these are all places where the functionality must be top drawer. If your customers cannot reach you, make a purchase or find what they need, it reflects badly on your company.

Part of being a good merchant, vendor or expert online is to provide ways for your customer to get out of an unfortunate situation. No matter the best of intentions, unfortunate situations do happen. For instance, if the “Contact Us” form doesn’t work, you should have an “error” page (a page that is served up when someone encounters a particular error) that says, “Sorry, our form doesn’t seem to be working at the moment. However, we value your input and would love to hear from you. Please send us an e-mail at… “

Give your customer a way to still be able to contact you instead of just leaving them at a dead end. Escape routes will help you keep your customer. This is why planning and thinking through the features of your website is so important.

Check for Bugs

An essential part of making sure your website functions as it should is testing. Get a team of people together to test your website before you launch it or add something, and make sure everything works the way it is supposed to. Try to find bugs. Look for ways that things could go wrong. Make sure you aren’t putting something out there that is fragile or will “break” if too many people are on the site at once. Prepare, prepare, prepare, and you will be rewarded with a site that serves your customers and serves you as well.

In this day of digital everything, keeping up with your website is as important as keeping up with your garden center. Make sure yours is manageable, functional, and visually appealing.



Cathy Owano

Cathy Owano is a freelance writer based in the Chicago area and has been creating websites for nearly 10 years. She can be reached at [email protected].