How to Build a Small-Business Web Site, Part 3: Advanced Design

Part 1 looks at essential elements of a business Web site. Part 2 offers basic site design guidelines.

Anyone who’s tried designing a Web site or working with a designer knows that the job inevitably turns out bigger and more complicated than expected. Some have created a graphically rich thing of beauty only to discover that half the users visiting the site are frustrated by slow wait times. Links or downloads may not work quite the way they should — or the site simply doesn’t turn up on any search engines.

These kinds of problems can be rooted in a number of things, from poor planning to more subtle issues such as an inappropriate choice of “mechanics” for the job. Did you create a navigation nightmare? Did you overdo the Flash content, making the site persona non grata with search engines? Or did you simply overdesign the site and underdeliver on functionality?

Beyond the basics, when it comes to the subtleties of Web design, planning is everything — from getting a handle on user needs and behavior to figuring out the right tools to make your site deliver on its intended promise.

Web design can be boiled down to three essential elements, said Manvinder Saraon, group marketing manager of the small business Web division for Intuit.

“One part is the look and feel of the site,” Saraon told TechNewsWorld. “The second is the functionality and its ability to serve your customers’ needs. The third is, are you doing the right things right to ensure that your site will appear prominently in search engines?”

Before you get to the nuts and bolts, however, you first have to adopt a user-centric view of what your site is all about.

Great Expectations

“Defining users and user goals is absolutely key when you’re planning your site,” said Peter Kirkpatrick, director of electronic communications for Toronto-based q30 design.

“It all has to do with the context of your content and user expectations,” Kirkpatrick, a specialist in design services for SMBs, told TechNewsWorld.

In the case of a media company, for example, users would expect to enjoy a feature-rich, fully immersive animated experience when visiting the site. Anyone visiting a financial services business, on the other hand, would want tons of information to be at the ready and easy to find.

Another consideration is the audience’s viewing capabilities, Kirkpatrick noted. “Is your audience likely to have high-resolution screens or the latest plug-ins? Do they want to access Web-based information from a phone or handheld device? These are all issues that you need to consider when deciding on your design platform.”

Flash Forward – or Not

One of the first things to discuss with any customer is the HTML-or-Flash decision, Kirkpatrick said. “If the site is a more immersive, versus a text-based, experience, probably Flash or a Flash-like platform is best. If they want access to information — including from cell phones and handheld devices — then you need to take that into account before committing too much to Flash.”

From a designer’s perspective, Flash offers a lot more freedom when it comes to content and provides wonderful opportunities for animating sequences. HTML is more limiting, since it has a more defined set of rules. At the same time, HTML is a more searchable environment, since search engines focus on text. Flash, for the most part, is not, although that is improving somewhat.

Flash can be a very powerful tool for product demos or training, but “it’s almost an ‘anti-search’ [platform], because it’s mostly images — search engines don’t read those,” explained Saraon. So, the best advice is to use Flash for what it does well, such as voice-overs and animation, because it does a great job of … capturing attention. Use text for what search engines can read.”

Most businesses now opt for hybrid versions that deliver the best of both worlds. You can use Flash to animate sequences or add components, but you should use it as a layer on top of HTML to make sure your site is searchable, Kirkpatrick advised.

For those with a Flash-heavy site, it’s also important to ensure that you have an HTML version on your server to aid search engines.

One other item of note is that adding animation is not a plug-and-play proposition, Saraon warned. “Keep in mind that you will need some hand-holding. The integration may not be hard, but the creation of the files is challenging for the average small business owner.”

Mapping Your Mock-Ups

Whatever the choice, mapping out your site is one of those critical stages that deserves all the attention you can give it. Poor planning can lead to many perils and pitfalls.

“You need to really talk through the goal of the site and hammer out the details,” said Sam Wong, who used to run his own design shop before joining Adobe as a solutions engineer for creative Web. “Without a goal, it’s hard to know how to help.”

To do the job right the first time, good mock-ups are essential. “This helps you to understand what the site should look like based on the ideas that are given,” said Wong.

A wireframe serves as a means to review general content. That is usually done by a project manager or business analyst, depending on the type of company. Getting a handle on the visual content might require a bit more application work, said Wong.

“Many times a customer is unable to visualize flat designs, and if you give [them] the screenshots, they don’t know how to move back and forth between navigation points and how links work,” he commented. Web-building tools such as Adobe Fireworks allow designers to rapidly prototype Web sites and application interfaces (called “hot spotting”) in order to create an interactive mock-up.

When you’re in the building process, Wong advised, you need to clearly define your ongoing content requirements. “Are you building the site with the intent to change content constantly, or will changes be minimal? Changing content is very simple with HTML, JavaScript or PHP, so they make perfect sense for sites such as blogs that require a lot of updates. But you can always add some nice Flash widgets for parts that you don’t need to change often.”

Keep a Clear Head

The biggest problem folks have with their Web sites is that they tend to overthink the whole design process, said Saraon. “You always have to see it from a visitor’s standpoint and not get carried away. The more you delay them, the harder it is to get your visitor to stick around. I’d say that 99 percent of the time, they’ll skip a two-minute animated introduction to your site anyway — and they’re expensive to design.”

If you focus more effort on tools that serve your marketing purposes, you’ll be further ahead, he said. “You need to work on embedding tools that capture leads, promote sales and build relationships. That might be a form, a newsletter subscription, or different 1-800 phone numbers based on search marketing.”

Also, bear in mind that content management and design is a continuous, iterative process.

“The Web is not an end game,” said Kirkpatrick. “You’re not designing a brochure and sticking with it. It evolves, and ensuring its longevity can be a struggle. Understand the relationships between the different pages. Build as much flexibility into the site as you can. Review your site and tweak it often, and consider a wholesale change every couple of years to take advantage of newer technologies.”

How to Build a Small-Business Web Site, Part 1: Nuts and Bolts