The Client’s Guide to Design

6

Web Design

The web is liquid...not only in its capabilities but in its design. Flexibility is the key to success with the best marketing tool ever invented.

Nobody set out to invent a new marketing tool; it just happened that way. The Internet was originally intended to provide government with a secure method of communication in case of catastrophe; but in the absence of catastrophe, the market found a use for it. The rest, as they say, is history.

But if you had asked marketers to describe their perfect system, what they described would sound an awful lot like what we have: a near-universal system which allows businesses to deliver any message to any customer instantaneously and relatively inexpensively. The web combines text and photos with video and audio. You read it; you watch it; you listen to it; you interact with it. It can be virtually whatever you need it to be.

And that makes it dangerous. You can’t afford to have a bad web presence. Having a cheap, slapdash website is like wearing an ill-fitting, moth-eaten suit on a blind date. The web has made first impressions more important than ever before; and your chance to make a good one can be measured in load times.

The good news is that what clients need to know is in large part already internalized: everyone today is a web user, and everyone is familiar with the tension between expectations and performance. When you connect to a website, you’re usually looking for something specific; if that site, for whatever reason, fails to deliver the information, you simply leave and go elsewhere. So the secret to a good website is as simple as this: figure out what your customers want and give it to them.

That still leaves open all the questions relating to how. Because the Internet is so highly technical, dealing with websites can be daunting for many clients. So we’ll leave aside the most technical aspects and focus on what you should know to get the best website possible.

How A Website Works

Static vs. Dynamic

In the beginning of the Internet, connecting to a website was little different from opening a file located on another computer in your office network. You used Microsoft Word to open a .txt file that was resident on a computer across the room from you; you used Netscape Navigator to open a .html file that was resident on a computer three states away. The actual protocols that governed the connections between computers on the network were different and more complex, but the workflow was essentially the same: you were simply opening a file. In doing so, you downloaded the information in the file into temporary memory within your browser, along with all the dependent files like images, and the browser put together a visual representation that matched the designer’s intentions. That’s still how a static website works.

But that didn’t do much to tap the latent capabilities of the Internet, and it wasn’t long before dynamic websites became first more common, and then dominant. A dynamic website responds to requests for information by executing a script that draws that information from a database and conforms it as an HTML document before downloading it to you. What your browser receives is still HTML (that’s the language browsers understand), but no such file actually exists on the website. It’s created by request. (Sometimes, pages are held temporarily in the website’s cache for frequently-requested information, purely in order to speed up the process.)

A good example of this is a search engine. When you enter “rotary flange” in a Google search, you aren’t taken to an HTML document on rotary flanges lying somewhere deep in the bowels of Google; instead, your request prompts a script that searches their database of indexed pages for that particular set of keywords. The results are ordered by Google’s algorithm, then conformed according to the parameters set by a template file, and downloaded to your computer in less than a second’s time. It’s so immediate it tends to obscure how much is actually going on.

It can be difficult to tell, simply by looking at the final result on your screen, what kind of site you’re dealing with—a Google search page is ridiculously simple compared to the mind-boggling engineering that underlies it. It’s also possible for the opposite to be true: that the most incredibly complex and beautiful web page can be a simple text document sitting on a server. For clients, the bottom line in choosing which type of site to use is often a balance between cost and control: dynamic sites are usually more expensive to produce, but are more flexible and offer easier editing capability for the end user.

Content Management Systems

This brings us to a consideration of the content management system, or CMS. A content management system is exactly that: a system that allows you to manage the content, rather than the structure or design, of a website. In fact, you can also manage structure (by adding or deleting pages, for instance) or design (by switching between design themes) using virtually any modern CMS; but the main point of these systems is to allow end users to edit the information on their sites easily, without having to call in the designer to make the changes for them—an expensive and potentially time-consuming process. If, for instance, an event has changed its venue from 123 Address Street to 456 Location Lane, you don’t have to wait for your designer to work your site update into his schedule; you simply log into your CMS, navigate to the relevant page, and edit and save it. The process is little different from filling out a form, and can be accomplished in only a little more time than it takes to describe it.

This becomes especially important when the content that needs to be updated is something that changes regularly, like inventory. Using a CMS allows you to add, edit, or delete as you need to, whenever you need to do it, using any web-enabled device from any location.

Proprietary vs. Open-Source

Content management systems can be categorized in many ways, but the most useful is probably their terms of service: some are proprietary, and cost money to use, while others are available free of charge.

There are many proprietary systems on the market today; the most prominent example is probably Squarespace. These systems will do everything you need a CMS to do; some are intuitive and easy to use, some less so (which is true of open-source systems as well). The great advantage of using a proprietary CMS is that (usually) you pay as you go: the cost of the CMS is simply added on top of the hosting charge, and is usually quite modest. If you produce the site yourself, using one of the available design templates, then getting a presence on the Internet can be quick and inexpensive.

The disadvantage of using a proprietary system is that it’s proprietary: most will only work on the server owned by the service. If for any reason you decide to part ways with the company—for instance, if you love the website but hate the customer service—you’re out of luck: the site cannot be moved. It would have to be completely reproduced using a different CMS, which might not be possible depending on which functions are included in the site design.

In truth, proprietary systems have little to offer other than their DIY approach…and even then, a true do-it-yourselfer would probably opt for the other type of system: open-source. The most prominent example here is WordPress, which is the most-used CMS in the world by far (and is the system used by Asheville Design Works). Unlike a proprietary system, it must be installed on a server; on the other hand, it can be installed on practically any server, and moving it from one server to another is easy. Once installed, it works in a manner similar to all other content management systems; it is robust, extensible, and reasonably secure if configured properly. For the do-it-yourselfer, there are many free and commercial themes available, just as with proprietary systems; the main difference is that the CMS is free.

DIY?

The makers of content management systems have worked out a process that’s meant to make it easy for non-designers to create usable websites, without any special technical skills. You browse through a catalog of themes—pre-made designs—and after choosing and installing the one you like best, you simply swap out the theme’s generic content for your own.

Usually, commercially available themes look great (being the main selling point of the service, they have to); free themes are more hit-and-miss, but many of them are also carefully crafted and beautiful. And the process of swapping out content (text, images, logos, labels, etc.) is generally straightforward and easy. But the problem with a do-it-yourself approach is the very same one clients face at the beginning of the design process: do they have the expertise necessary to complete the project successfully?

The reason pre-made themes often look engaging is that they’re carefully designed (note: by professional designers) to be eye-catching, and all their components work together to support the overall design. In this process, it’s the idea of the design that comes first; the components of the theme are chosen or rejected based solely on how well they support the overall design. This is exactly how design should work; and working on themes allows a designer to do his best work without constraints.

But design clients necessarily introduce constraints: the photos must be of their product, their staff, their service. The typography and color scheme are frequently defined by a usage manual. The logo is what it is, and may not even fit into the logo block of a pre-made theme. Once you start swapping out elements, it can be a bit like swapping out parts on a car, based solely on what you have on hand: things don’t look as good, and often don’t even work.

It’s at this point that hiring the services of a professional designer begins to make a lot of sense. He will have the needed expertise and experience to create a functioning website tailored to the needs of the client, without having to resort to an off-the-shelf template.

1

2

3

In their final forms, before customization, free and commercial themes generally look great (Image 1); but once you begin to swap out components like photos and text, the design can rapidly go downhill (Image 2). But starting with the same materials used in the themed design, it’s possible to design a site that works just as well as any available template, but is unique, effective, and sharp-looking (Image 3). (Included in the new design is a new logo, because swoosh.)

E-Commerce

Buying and selling over the Internet is the ultimate in interaction. It’s also a complicated subject, and one that is best addressed on a case-by-case basis. But there are a few things clients should know going into those consultations.

As with content management systems, e-commerce solutions can be roughly divided into two different kinds: in this case, those you buy, and those you rent. One of the most popular (if your site is done in WordPress) is a plugin called WooCommerce. Its core functionality—which may be all you need—is free. For more complicated shopping carts (involving purchase orders, or drop-shipping, or interfacing with a customer relations management tool, for instance), the extensions to WooCommerce come at a price. Usually the price is modest, but if adding on several at once the investment can quickly balloon into a significant one.

But once you’ve paid for everything you need in a WooCommerce setup, you own it. There are no continuing fees, as there are with the second type of e-commerce solution. Services such as Shopify, Volusion, and Ecwid charge a monthly fee based on the level of service. Again, if you have a complicated shopping cart system, you will pay more (perhaps much more) for it; and you’ll pay it every month. One of the advantages of using a commercial system is that the service is usually good; the main disadvantage is that in the long run it can be significantly more expensive.

Features & Fads

The Internet has seen a lot of fads come and go; and the ingenuity of developers is such that whenever someone has a new idea, somebody will find a way to implement it. That doesn’t mean that the ideas are always good—just that they’re possible.

When it comes to deciding which design features to include in a website, what clients most need to keep in mind is that their message is paramount. Anything that serves to promote that message effectively is a good idea; anything that gets in the way isn’t.

Image Sliders

One of the best examples is the recent fad for image sliders. You’ve probably seen these, although you might know them by a different term: slideshow, for instance, or carousel. Instead of a single image, a succession of images occupy the space in turn. The transitions between images can take a number of different forms, including some pretty complex ones that leave you wondering, “How did they do that?” But unless “how did they do that?” is the message of your website, you’ve already compromised your marketing, because your visitors are concentrating on an effect rather than on your message.

Sliders are popular among designers; they’re far less popular among the public. Mostly, the reason is a phenomenon dubbed “banner blindness”: we’ve been conditioned to expect that anything we see moving on a website is an ad, so we ignore it. That, unfortunately, also goes for any kind of motion graphic that isn’t an ad. And some people simply don’t like motion graphics at all, considering them distracting.

Either way, though, sliders can work against your intentions, even when people do notice them. Let’s say you have four messages you want to deliver (products, services, events, or a mix of any or all of these), and can’t decide which of them is most important. So you decide to make four different slides, and let them rotate at the top of the home page. And let’s say the display time is set for each one at six seconds. A visitor comes to your website; and in five seconds he locates the page he wants in your navigation and clicks away from the home page. That means he’s only seen one of your important messages; the other three never get a chance to display.

In the past, Asheville Design Works has produced websites with sliders. We will probably do so in the future; but we recommend that they should be used only as “eye candy,” and never for an important part of your marketing message. Whatever is the most important idea you’re trying to put across should always be visible on the page.

Flash

Another fad that has pretty much run its course is Flash. Sites produced in Flash used to be ubiquitous, but now compose only about 5% of the worldwide total. The death knell for Flash came when Apple refused to allow it to run on iPhones (it’s notoriously buggy and a resource hog). Ironically, one of the features most implemented with Flash was the image slider; when javascript became more sophisticated and easier to use, developers found they could accomplish the same effects without Flash. Today, even website stylesheets are capable of some of the effects previously associated with Flash; and when the specifications for HTML 5 came out, allowing videos to be embedded in websites natively, Flash became mostly useless. In the past, Asheville Design Works has produced Flash animations; we no longer do, as there is no longer a point in it.

Video

Web video is an example of a fad that outgrew its fad status and proved its worth. Having a well-produced, high-quality video on your site is among the best ways to get a message across: videos are popular, and combining images with sound is an effective way to make your message memorable. But there is one web video practice that’s almost universally condemned by the public, yet continues to haunt the Internet: autoplay.

Surveys show that a significant majority of the public (along with Google) doesn’t like videos that start automatically. Usually it’s not even the motion that bothers people, but the sound (especially when surfing at work!). The solution is simple: don’t set videos to start automatically. Allow visitors to decide to watch them or not. Just make sure to provide them with an adequate description of the video that serves as an effective call-to-action.

A completely different animal is the video background. Some experts caution that video backgrounds are only useful in limited situations, while others decry their use altogether, claiming they’re ineffective at best and harmful at worst. One thing that clients need to keep in mind is that humans are hard-wired to notice movement; almost nothing else attracts our attention better. If the video is your message, it can be effective; if it simply serves as the backdrop for your message, it’s a distraction. Worse than that, it’s a distraction that increases load times—and data charges for your visitors using phones.

In general, when deciding upon a feature of a web design, the best question to ask is, “Does it deliver your message, or just get in its way?”

Security

There are two protocols for connecting to a website: http and https. The latter denotes a secure connection, where information flowing in either direction is encrypted. That’s important if you’re operating an e-commerce site, or one that solicits sensitive information such as credit card or social security numbers. If you have a simple brochure site that doesn’t collect such information, http is good enough for you.

Except that Google doesn’t think so. More and more sites are going to https, increasing the security of the Web overall, and Google is encouraging that practice by deciding to give extra weight in its search rankings to sites that offer secure connections. For that reason alone, it’s probably worth the small extra expense to acquire a security certificate and secure hosting for your site. This is something that is usually handled by either your designer or web hosting service: you don’t necessarily need to understand the procedure, just ask for it.

SEO

And that brings us to the question of SEO. This acronym stands for “search engine optimization.” It’s what most people describe as “getting to the top of Google,” and it’s an important subject for anyone who’s at all dependent on a website. It’s also a very large subject, so we’ll limit ourselves here to only the most important aspects of it.

Google and other search engines make their living by selling ads, which are delivered to you along with the search results you requested. It’s in their interest to make sure the results they give you are as relevant as they can be—otherwise, you’re likely to go elsewhere. For that reason, search engines have expended staggering amounts of money and energy seeking the best answers to the question: how do we determine which websites are most relevant to any request, without necessitating direct human involvement? In other words, how can a machine understand what you want, as well as a fellow human, and give it to you?

Many earlier attempts at solving this problem (such as using keywords) have been largely abandoned as search engines have gotten more sophisticated. What Google has been striving for all along has now been largely achieved: a method of assessing the plain language of a website. This allows website owners to craft their message for humans rather than for machine intelligence, and avoids the necessity of older tricks such as “keyword stuffing” (in which certain critical descriptors would be repeated over and over, in an attempt to convince search engines that a page is really, really relevant).

What that means, in practical terms, is that now the best way to get good search placement is the same best way to get more conversions for your business: give your web visitors good, relevant, useful information. Anticipate their questions, and make sure there is an answer, easily found and clear.

There is, of course, much more to the strategy and tactics of SEO. One of the reasons we don’t get into it here is that Asheville Design Works routinely includes a plugin in any of its WordPress sites which handles search engine optimization; they all perform the same task, but perform it with slight differences, and so the process of explaining SEO and training clients on the use of the plugin is best done simultaneously.

But there is one critical aspect of SEO that needs to be emphasized: SEO, while important, is no more important than every other aspect of your website. Getting to the top of Google will do you no good if your website is one that turns off your customers. In fact, being #1 in any search ranking is a perilous position: you now (congratulations, by the way) have the maximum possible number of unexplored options for your visitors’ particular search terms. If they don’t immediately find what they’re looking for (or at least are given a compelling reason to stick around), they’re likely to click away and explore another option, probably more quickly than they would later, when the number of unexplored options has dwindled to only a few.