Three Keys to Designing for the Web

The Formula to a Successful Web Presence

Too often, when companies are approaching a redesign of their website, they’re centric to one thing only: “We need a fresh, new look,” or, a designer’s favorite words, “Make it pop.” But in my experience, the happiest website owner/manager is the one who has figured out that having a great-looking website is only one component to a successful presence on the Web. For true success, you must entertain the notion that there are three main components: branding, usability, and visibility. Whether you’re designing a website for yourself or for your client, it’s your responsibility to take part in forging a synergistic relationship of these three factors—no matter how big or small.

Doing business on the Web isn’t really all that different than doing business in the traditional brick-and-mortar sense. Most people want to walk into a store that’s well organized, clean, reflects a positive and professional image, and gives a feeling of security and trust. If given the choice of buying a product from another store that lacks any of the above qualities (and assuming that the price point is the same), a customer is most likely going to buy from the first store. Store #1 has maintained a good level of synergy in its branding, usability, and trustworthiness (which for the purpose of this example, we can equate to good visibility).

The same thing can be said for the Web. There are some scary websites out there. In fact, there are many websites that are—apparently—built only to rank in the search engines, and little more. This is also known as search engine optimization, which is usually referred to as SEO. Simply put, SEO means designing a website so that search engines can easily find Web pages and index them, which in turn increases a website’s visibility and makes it easier for people to find your client’s site. SEO is very important for a website’s visibility, but as mentioned earlier, visibility is only part of the equation.

At the end of the day, my job is not only to help my clients grow their businesses, but help them build confidence in their online presence through improved branding initiatives, better usability, and ultimately an honest and well-researched approach to being found on the Web, ergo, SEO. It’s not to stuff their website with a bunch of text and clutter up the user experience. There has to be a balance.
Think about it: If you own a store located at a high-traffic intersection, but it looks terrible, guess what—no one is going to come in. If you build the best-looking store in the state, but it’s located in the middle of nowhere—no one is going to come in. If you build a store at the right intersection and it looks very nice but you have no cash registers or workers to direct people to completing a transaction—no one is going to come in.
So to recap, there are three main components to success:

Branding: The look and feel of the website. Branding should be unique and talk-worthy so that people will want to speak about it all the time.

Usability: The equivalent of making it easy to find items in your store and making sure that completing a transaction is as easy and pleasurable as the shopping experience itself.

Visibility: Or designing for SEO, which is something you can work toward by following some very useful design tips discussed later in this article.

Now, let’s dig deeper into each of these intertwined components to gain success on the Web.

Branding is more than just a logo

Your client’s brand should be representative of everything their business stands for. It should encapsulate their attitude, while remaining professional and unique. Something that comes to mind is Seth Godin’s book, Purple Cow—read it if you haven’t. The brand and all of its components should be present in the client’s collateral (the look and the copy), Web design, user experience of the website, content within the website, logo, load time of the website, interactive features, and—well—everything that has to do with the company. So as you can see, brand extends to things that you might not normally take into consideration. Here are some things to think about and discuss with your client to really take their brand and their site to the next level.

Use of colors: Research the psychological and physiological impact of certain colors and how that could be useful toward your client’s brand. Also be aware that your choice of colors should remain accessible to the color blind and provide enough contrast.

Use of language: What’s your client’s demographic? Psychographic? Ethnographic? Depending on their business, these are all factors that will impact how your client reaches their audience through the content in all of their online and off-line collateral.

Website load time: Imagine making people wait for hours to get into a store just to browse around. Unless you are Apple selling the latest iPhone, you’ll probably have a large number of people turning away at the door. The same is true of websites. Keep the page load to a minimum through the use of clean, semantic HTML and CSS; better image-compression techniques; external files for JavaScript and CSS; and a number of other factors. Consider testing your site on a dial-up connection as well.

Cross-browser compliance: Wouldn’t it be strange if 70% of a website’s visitors couldn’t see the store logo, or all the shelves were upside-down to them? Business owners want to reach 100% of their audience, not just a select few. Spending the extra time to make sure the website is cross-platform and cross-browser compatible can save your client (and you) many headaches (although it will cause a few at first during testing).

Accessibility/Section 508 compliance: Here’s a term that seems to be thrown around all too often in our industry. Compliance ranges from being completely neglected to partially fulfilled to so overdone that the site itself becomes unusable (passing the Cynthia test alone doesn’t really mean you’re compliant, you know). Being compliant for accessibility (that’s compliance for blind, color blind, and disabled) is just, well, the right thing to do. And, as it happens, a website that’s accessible is most likely going to be search-engine friendly.

Amount of quality information: This is the information age and people are no longer happy with just being told about something and leaving it at that. Through the Internet, every 5- to 65-year-old has become a researcher, and common sense dictates that before they spend their hard-earned money on things, they want to know everything about the product—see it, feel it, touch it, and know all of its pros and cons. It’s not just about providing pages of information, but rather useful information such as allowing customer feedback, ratings, a voting system, or whichever applies to help your client be as honest as they can to their customers. The more pages of quality information provided, the more opportunities for search engines to find the website, by searching for the words that happen to appear on any given page.

Case studies: Service-based businesses, enterprise service, and solutions providers take note: Case studies are one of the best ways to entice prospects to call. It also provides a measure of “transparency” that companies should maintain not only to show proven effectiveness of their products and services, but also have bragging power without the ego.

Press releases: It’s one thing for your client to release new products all the time, but it’s another to show their customers that they’re active in their industry internally and externally through press releases. If your client uses these same press releases through various distribution methods (Business Wire is an example) and uses their keywords in the anchor text of the links, these press releases can also have great SEO benefit by gaining links on other websites pointing to your client’s website.

Usability is more than just navigation

“How can I find what I’m looking for,” “What’s the price on this?” “What shoes would you recommend to go with this outfit?” “What do other people think of this product?” These are the kinds of questions that you might ask during a typical offline shopping excursion. Why is it then that so many e-commerce website managers, information architects, and others fail to ask these questions while they’re establishing the plan for what the website will be?

Making your client’s websites more usable will also cross the lines of making their website more search-engine friendly and also assist in presenting the best brand. Here’s what I mean…
Usability takes many forms. If a website doesn’t abide by Section 508 compliance, it’s not very usable for blind people. If a website has virtually no content, it’s not very useful to visitors and it’s not search-engine friendly. If a website has no call-to-action, or a clear path of helping visitors complete a desired action (sales, leads, more information, webinar registration, newsletter sign-up, etc.), you’re not helping your targeted audience or helping your business grow.
Lab-based usability testing will only catch so much. More often than not, the usability testing firm will get 100 or so folks who are the “target audience” and stick them in an environment where they can surf the site. They’ll be asked some questions: “What do you expect to see on this next page?” “What do you think of the way this content is being provided?” “What do you think of the colors or text?” “Where would you expect to find contact information?”

Usability testing firms will not be able to tell you if a website has enough textual content to ensure that it ranks in the major search engines. When people use search engines to research products and services, they’re usually looking for something to read. So, too, do the search engines. The more relevant content you have surrounding a particular topic, the more of an authority that the search engines believe your site to be, and the more your visitors will appreciate the user experience—you gave them the content and research material that they were looking for: it’s a win-win situation.
Wait…make that “win-win-win” (good for the brand, good for the user experience, and great for search-engine optimization).

Ten things to avoid

Here’s a list of usability no-no’s that you want to avoid in your design:

1. Small text sizes: The minimal look of tiny text is long gone. If nobody can read your content, you’ll quickly lose site visitors.

2. Splash pages: The homepage is the most important page of your site for both your visitors and search engines.

3. Low contrast: Avoid using light-colored text on white backgrounds and avoid stark color contrasts as well. A good way to test for this is to proof your design in black and white.

4. Hidden navigation: Don’t hide navigation or make it undecipherable. If you want people to browse a site and eventually contact you for services, don’t make it hard.

5. Flash: I’m not saying you shouldn’t use Flash; just don’t use it on elements like navigation or anything that someone without Flash wouldn’t be able to see.

6. Horizontally scrolling sites: While some people like to put their entire site on one page and then use AJAX to navigate between the different sections, one of the worst usability experiences is horizontally scrolling websites.

7. Broken links: Once your site is up, use a link-checking tool to identify any broken links on your site.

8. Cramped layouts: Use the rule of thirds or a layout grid to properly space all of the sections of your pages and make them easy to see. This will work wonders even in graphics-heavy sites.

9. Superfluous background images: Try to use backgrounds that can be patterned or repeated easily. This will also help decrease load times.

10. Lack of calls to action: A call to action is exactly what it implies; a simple and easy-to-see element on a page that calls on a site visitor to perform an action such as contact you, check out the latest products, etc.

Designing for SEO

Designing for SEO may be one of those items where you, the designer, may ask yourself how that could possibly involve you. As mentioned before, websites are very technical in nature and your design has to reflect not only the appearance of that functionality but also its behavior and layout.

Homepage content: For starters, your design should contain sufficient space for at least 150 words of content on the homepage and more for interior (secondary) pages.

Blogs: If blogs are to be a part of the Web strategy, try to locate your blog at www.nameofwebsite.com/blog. Set up Categories for the blog post that correlate to the main business areas and blog about those topics. This “content theme” will be picked up by the search engines and they will see the website as more of an authority on the topics. Be sure to include a way for visitors to subscribe to an RSS feed in the design.

Headings: A heading 1 and heading 2 tag (a.k.a. H1 and H2) should be accounted for in your design. These are like the topic headings of a page and are picked up first by search engines. Be sure that your design allows for these to either be rendered as HTML text, or use an inline Flash text replacement technique such as sIFR.

Subnavigation: For interior pages, or subsections of your site, a series of subnavigation is not only beneficial for usability, but also for SEO, bescause it allows search engines to further drill down into a site.

Breadcrumbs: Another navigation item of similar nature that can be included is so-called “breadcrumb trails.” These are the navigation links often seen at the top of a webpage that show the hierarchy and present location of a visitor’s path in the site. For example: Home>Rec Room>Darts>Accessories.

Optimize and name images: As you’re getting ready to prepare your design for development, keep in mind that images should be optimized for better performance. Also, use a descriptive nomenclature for your image files—this can save time during development.

URL structure: Now, more than ever, search engines place a great degree of weight to having keywords within the URL string. A good URL would be www.nameofsite.com/Category-Keyword/Specific-Keyword/.

Permanent redirect: If you’re preparing for a relaunch of a website, here’s a tip that will save your client a lot of money, time, and heartache. Too many times, websites are relaunched without any thought to redirection. For every page that existed on the legacy (old) website, a redirection should be put into place to account for the “change of address.” This takes little time, but can truly save the day.
Any 301 redirects are for permanently redirecting a page/URL. When you do this, you’re telling the search engines to pass along any SEO value that the old page/URL had to the new page/URL. Many times, there’s a misunderstanding here, and 302 (temporary) redirects are used, which do nothing to help SEO and may actually hinder any search-engine optimization efforts.

Sitemap: Finally, create a sitemap to help direct visitors and search engines to the most important pages of the website.

If you have addressed each of these items, it’s all systems go and you’re ready to help your client launch a website that should be successful on all levels.