Chapter 14 – The Website

Estimated Reading Time: 23 minutes

It’s funny to think that the Web, which hundreds of millions of people use every day for shopping, dating, gaming, news, and socializing, began as a technology to help improve, of all things, physics research – a topic of interest to only a fraction of the world’s population. Yet today the Web is huge.  According to What Technology Wants by Kevin Kelly, himself a chronicler of the early days of the Web, it holds more than a trillion pages.

Twenty years plus since the first website was created by physics researcher Tim Berners-Lee at the European Organization for Nuclear Research (CERN) in 1991, we are already several generations away from its original Spartan black text with blue hyperlinks on a white page.  We’ve moved from professional design to rich media and animation to social media inclusion to the requirement of usability and availability on mobile devices.  All of these innovations been driven by the insatiable consumer demand for Web content and the critical role the Web has assumed modern in business.

With the amount of time consumers spend online and the use of the Web by businesses searching for partners and suppliers, the Web has become a vital marketing tool.  A well-constructed website has been transformed from merely expected to an indispensable mechanism for product differentiation and competitive advantage.  Despite the centrality of the Web in both our business and our personal lives, however, many marketing teams are not truly optimizing their website.

This chapter will lay out the process for developing a new website from scratch, starting with the establishment of website goals; moving through the primary considerations of usability, design and content; and the on to development. These are followed by sections that can be applied to a new or existing web site: getting found, maintaining content, optimizing for conversion, and measurement.  The chapter concludes with special considerations for microsites, ecommerce sites, and mobile websites.

Establishing Website Goals

The initial step in utilizing the Web as a marketing tool is, of course, to create a viable website.  Before you undertake any development work on the site, however, you need to identify the site’s primary goals.  Is the site intended to educate, inform, entertain, or sell a product?  The goals, along with the target audience, will determine the site’s function, design and content.  Sharing these goals with the Web team, management, and rank-and-file employees will help avoid any number of artistic and functional arguments and increase the likelihood that the project will be a success.  You should also involve customers and partners in the process if possible – the site is intended for them, after all.

To clearly define your needs, goals, and objectives, you should ask yourself more detailed questions, such as:

• What are your primary business objectives, and how can the Web help you achieve them?
• Who will use your website, and what are their tasks and goals?
• What information and functions do your users need, and in what form do they need them?
• How do users think your website should work?
• What hardware and software will the majority of people use to access your site?  Will they be using a laptop, a tablet, a smart phone, or some combination of these tools?

Site Fundamentals: Usability, Design, and Content

After you have agreement on your goals, you are ready to begin work on the three fundamental aspects of your site: usability, design, and content.

Usability

Usability measures the quality of a user’s experience when interacting with a product or system – whether a website, a software application, mobile technology, or any user-operated device.  In general, usability refers to how well individuals can use a product to achieve their goals and how satisfied they are with that process.  As it relates specifically to the Web, usability is the measure of the quality of a customer’s experience when he or she interacts with your website.

Usability is a combination of several factors, including:

• Ease of learning – How fast can a user who has no previous experience with the website learn it sufficiently well to accomplish basic tasks?
• Efficiency of use – Once an experienced user has learned to use the website, how fast can he  accomplish tasks?  A site that is efficient to use will likely bring users back.  This tendency, along with the quality of the content, will help achieve what Web developers call “stickiness,” meaning the amount of time users spend on a site and the likelihood they will return.

• Memorability – If a user has visited the website before, can he or she remember its setup and functions well enough to use it effectively the next time?  Or, does he or she have to start all over again and relearn everything?  Significantly, when users must remember information on one Web page for use on another,  they can remember only about three or four items for a few seconds.

• Performance – No matter how intuitive or efficient the site is to navigate, poor performance is a killer.  A site’s performance can be affected by the servers and network that host it, the network of the user, and the content on the site.  Users become frustrated if a Web page does not load immediately.  A study by KISSmetrics showed that 25% of users abandoned a Web site after waiting just four seconds, and the majority of mobile users would abandon a site after ten seconds.[1]   In the same study, KISSmetrics found that every additional second of load time reduces conversions by 7%. When designing a new site or augmenting a new one, always test the performance to make sure the combination of content and a typical user’snetwork speed does not cause slowdowns.

Design

The design of a website must support usability.  In addition, the site is an expression of your brand, so its design should reflect your identity.  Keep in mind that users will make an immediate judgment when they view your site, unconsciously assessing whether it is trustworthy, welcoming, relevant, and professional. Your design should support the image you want to portray.

Below are specific design considerations for the different parts of a website.

Home Page

A home page should clearly communicate the site’s purpose, and it should clearly indicate all of the major options available on the site. Generally, the bulk of the home page should be visible in a single screen or “above the  fold” – a term borrowed from newspaper publishers meaning  the top half of a folded newspaper –  and it should contain a limited amount of text.   Content you want all visitors to see must be placed above the fold.

Designers should provide easy access to the home page from every page in the site so users can get back to where they started.  The first action of most users is to scan the home page for link titles and major headings. Requiring users to read large amounts of text can slow them considerably.  Some readers will avoid reading it altogether.

Navigation

Navigation refers to the methods people use to find information within a website.  A site’s navigation scheme and features should enable users to find and access information effectively and efficiently.  Create a common, site-wide navigational scheme to help users learn and understand the structure of the site. Use the same scheme on all pages by consistently locating tabs, headings, and lists. Many users expect to find a site map – a kind of table of contents  – in the footer of the page..   Locate critical navigation elements in places that will suggest “clickability;” for example, lists of words placed in the left or right panels are generally assumed to be links.

Lastly, users expect to be able to search within a site to find what they need.  Make sure to provide this capability. A search box should be located in the top right corner of the home page and subpages.

Subpage Layout

Subpages are pages that are one level down from the home page.  They are sometimes called second-level pages, with the home page being the top-level page.

Well-designed headings make it easier for users to scan and read written material. Designers should strive to create unique and descriptive headings and to incorporate as many headings as is necessary to enable users to find what they are looking for.  Headings should provide strong cues that orient users and inform them about page organization and structure. Headings also help classify information on a page. Each heading should be helpful in finding the desired target.

On long pages, include a list of contents with links that take users to the corresponding content farther down the page.  Also, provide feedback to let users know where they are in the site.  A common method to accomplish this goal is to insert breadcrumbs – horizontally arranged text that tells users where they are in the site’s navigation and helps them find their way back ”home.”

A well-designed website will enable users to access important content from more than one link.  Establishing multiple paths to access the same information can help some users locate what they need. When you’re designing the site, always remember that different users will try different approaches to finding information. Different users may also search for information using different terms.

One fundamental rule for a user-friendly design is to display a series of related items in a vertical list rather than as continuous text.  A well-organized vertical list format is much easier to scan than horizontal text, whether prose or a list.

Finally, your site’s graphics should add value to and increase the clarity of the information contained on the site.  Pictures are often more powerful than labels in compelling a user to take a desired action.

Alt Text

Another basic design rule is to use text equivalents for all non-text elements, including images, graphical representations of text and symbols, image map regions, animations (e.g., animated GIFs), sounds, audio files, and video.  Using text equivalents is referred to as alt text, and it is useful for search engine optimization as well as usability.  Users will often hover their pointer over an image to read the alt text.

Content

Content is simply the information provided on a website.  For a website to achieve its goals, the content needs to be engaging, relevant, and appropriate to the audience. Below are a few fundamental rules for selecting and creating useful content.

• Clear language –  When you are preparing prose content for a website, use familiar words, and avoid the use of jargon, just as you would for good marketing collateral. If you must use acronyms and abbreviations, make certain they are defined on the page in language that typical users will understand.  Shorten for readability – minimize the number of words in a sentence and the number of sentences in a paragraph. Make the first sentence of each paragraph descriptive of the remainder of the paragraph. Also, use upper- and lower-case letters appropriately; write in an affirmative, active voice; and limit prose text on navigation pages.
• Prioritize –  Organizing content includes putting critical information near the top of the site and ensuring that all necessary information is available without slowing down the user with unneeded information.
• Build for scanning – People scan before they read, so structure each page to facilitate scanning. Use clear, well-located headings; short phrases and sentences; and small readable paragraphs.
• Group – Make certain to group together all of the information that is related to a topic.  This system minimizes the need for users to search or scan the site for related information. Users will assume that items that are placed in close spatial proximity or that share the same background color belong together conceptually.
• Visual aids –Tables, graphics, and other visuals are great for aiding understanding. Make sure to pick the best one.  Presenting quantitative information in a table (rather than as a graph), for example, makes it easier to read the numbers themselves.  Presenting it as a graph illustrates trends or relative size. Usability testing can help you determine when users will benefit from using graphs, tables, or other visualizations.
• Less is more – Do not overload pages or interactions with extraneous information. Displaying too much information can confuse users and hinder their ability to assimilate the information they need. Help users focus on their desired tasks by excluding information that task analysis and usability testing indicate is not relevant.

Building the Site

Once you have some considered the usability, design and content for a site, it’s time to start building it. Here are the steps to assure success.

Content Inventory

A content inventory is a list of everything that is contained on your site. When you are developing a new site, you should create an inventory of the content as it is being developed.  As the site matures, the inventory will keep you updated as to what is on the site, how old each page is, and when each page was revised or needs to be reviewed.

Many websites grow by accretion. Organizations keep adding pages to  their sites, but few of them ever remove dated or superfluous pages.  This is a serious error.  After a while, if you don’t keep a content inventory, the Web or marketing team have a harder and harder time keeping all of the website’s content up to date.

When you are revising an existing website, start with a content inventory of what is on the site. Then, create a planned content inventory for the new version of the site based on your site’s goals and objectives.

To perform a content inventory, create a spreadsheet or use a database application to categorize and describe the information on every page of your site. Your inventory should include the following elements:

• The overall topic or area to which the page belongs
• The page title and URL
• A short description of the information on the page
• When the page was created, when it was last revised, and when the next page review is scheduled
• Who wrote the page (if you know), who is currently responsible for the page, and the contact information for that individual
• The expiration date of the page (if there is one)
• Other pages that this page links to
• Page status – keep, delete, revise, in revision process, planned, being written, being edited, in review, ready for posting, or posted.

If you use a spreadsheet or database, you can sort the inventory by any of the categories of information you have. The primary category might be the overall topic or area so that you can view all of the pages that relate to the same information.  For maintenance purposes, you may also want to sort by date of last update so that you can view all of the old content on the site and review these pages to determine if they need to be updated.  There are also applications that can scan your site to check for broken links.  A content management system that can keep track of page versions and help web teams search for content is a good idea for larger sites.

Creating a Site Map

To help you get the content organized, you may want to create a site map.  A site map is a visual representation of the information contained on your site. You can create a site map that looks like a company organization chart, with textual descriptions inside boxes, connected by lines, that descend in a hierarchy from the home page.  Or you can create one in outline form, indenting for each sub-level.   This approach has the added advantage that you can easily create a navigational site map from it.  Figure 1 below shows a snippet from the site map for culinary sauce producer Kagome’s revised website.

Creating the Wireframe

A wireframe is a basic, visual illustration of a Web page. The term comes from the line drawings engineers create to illustrate three dimensional objects before they are produced. The purpose of a wireframe is to illustrate the features, content, and links that need to appear on a page so that your design team can mock up a visual interface and your developers will understand the page features and how they are supposed to work.

A wireframe indicates where each item should be placed on a page. In addition, it performs the following functions:

• It identifies all of the features on a page.
• It prioritizes the features so that the most important ones are prominently positioned.
• It visually communicates this information to the rest of your design team via a diagram of the page.

Wireframes can range from a simple mock-up of an information-based page to an extremely complex diagram illustrating an intricate process with several steps, such as a product purchase. They do not dictate how a site should look.  Wireframes can be created using various tools, from a simple word processing program to a complex diagramming program. Figure 2 below shows the wireframe created for the new Kagome site.

Developing and Publishing

An outside contractor or IT resource is usually responsible for taking what Marketing has designed and developing it into a working website.  Covering all the details involved in Web development is beyond the responsibilities of a marketer, and therefore outside the scope of this book. There are, however, some important things a marketer needs to remember to make the process go smoothly and without surprises:

• Developers on the team – involving developers in the project from the beginning can save a lot of misunderstanding and finger pointing when it comes time for development. We developers can point out potential issues early on.  Plus, their understanding of the overall goals of the site will help them.
• Content management – using a content management system allows teams to preview content and save older versions of pages in case you need to roll back changes.
• Staging server – having a staging server allows the marketing team to preview new pages before they are published to the world.
• Style Sheets – Cascading Style Sheets (CSS) are templates that specify the look and feel of a Web page.  CCS makes it easier to develop and later to modify Web pages, and can simplify the creation of sites tailored to display on specific mobile devices.
• Never Assume – make sure to spell out explicitly all integrations, compatibility requirements, and any details that are beyond the site map and wireframe. Anyone who has ever built or remodeled house knows how many issues and oversights stem from assumptions. Common oversights are integration with the sales and marketing systems, instrumentation for measurement, and little things like favicons – the small icons that appear in the browser navigation bar, tabs and bookmarks.

 

Getting  Found

Building a great website doesn’t guarantee that people will flock to it.  Even if you are a known brand or purveyor, poorly developed sites can reduce your online visibility. Even the best websites are of limited value if searchers can’t find and access them with minimal effort. This section examines strategies to enhance your site’s online visibility. It focuses on three key elements: search engine optimization, maintaining links, and social media.

Search Engine Optimization

Search engine optimization (SEO) is the process of increasing the visibility of a website in search engines.  Greater visibility means that the site will appear both more often and closer to the top of the list of search results.  These features will increase the likelihood that a prospective customer will click on the link that points to your site.  Remember that SEO refers to unpaid, or natural, search results.  This process is different than search engine marketing (SEM), which we discussed in the previous chapter.

SEO is an important marketing consideration. According to the Pew Internet and American Life survey,[2]  73% of Americans use a search engine, and 59% of them use one every day. Although the details of the search algorithms are complex trade secrets that are always changing, SEO can be thought of as aligning your site with the mutual goals of search engines and online users.  Your content should be useful, popular (read “credible”), and, of course, easy to locate.   The list below summarizes the basic elements of SEO.

• Page Content – As amazing at it may sound, people forget to include keywords in their content that are important for search.  Sometimes when page content is reworked, previous SEO work is overwritten.  A common mistake is putting keywords in graphics and therefore hiding them from search engines.  First and foremost, pages should be written so that customers find them appealing and easy to navigate.  However, designers must also take into account the functionality of search engines.  As one example, all images should have alt text for search engines to scan.
• Page Titles – A very common mistake is the failure to include the important keywords in the page title.  Many sites use the same title for all pages; for example, the company name.  This is a mistake.  Instead, each page that you want customers to find must have the keywords in the title; for example, the names of your products.
• Page URLs – URLs should always be written in user-readable words and not Web developer shorthand.  As with page titles, the URL should include the keywords.  A simple way to do this for product pages is to incorporate the product name into the URL.
  • Meta Tags – These are descriptive tags included in the HTML code that describe the content of that page, including an overall description, keywords and language.  Meta tags are not as important as they used to be, because many people tried to cheat on SEO by loading meta tags with keywords that were popular in searches but not actually included on that page.  Nevertheless, meta tags enable search engines to review the page content more efficiently and thoroughly.  Likewise, images should have an alt tag that provides a description.  For example, use a descriptive tag “red_tricycle.jpg” rather than  “pic00276.jpg.”
  • Inbound Links – The popularity of a site or a page is judged by the amount of other sites that link back to it.  Therefore, the popularity of the sites that link to yours is important.  Ensuring that other sites link back to yours is critical to SEO.  Convincing the media, partners, customers, and others link to your site — or at least to particular parts of it — is a critical component of link building.   We do not recommend working with shady link-building services or “link-spamming” companies you do not have a legitimate relationship with.
  • XML Sitemaps – An XML sitemap is a .xml file that lists all of your pages and indicates when they were updated. It displays the structure of your website and where your pages reside, and it makes the search engine spiders that crawl your site  more effective.

Maintaining Links

Broken links cause two problems: They irritate users, and they prevent search engines from following a link to that page.  Many websites suffer from broken links at some point, often after they have been redesigned and the navigation changed.  Although your site may look fine after the redesign, all of the links into the pages may not work.  This problem will reduce the number of inbound links – what some people call “link juice” – and potentially reduce your ranking in search results.  To prevent this from happening, monitor your site for broken links, consider SEO impact when you modify your site architecture (and therefore your URLS), and always redirect old URLs to new ones to preserve your inbound links.

Social Media

Finally, you should incorporate social media share features into your website.  Including these features will enhance your visibility in two ways.  First, interested users can share your site with their friends and peer groups. As we discussed in the chapter on social media and WOM, these people may be influencers or connecters.

Secondly, social media sharing creates more inbound links, which helps your SEO.  Actively linking back to your website from your blogs and press releases is also a good practice that can improve your ranking. See chapter 7 for more discussion on social media.

Optimizing Websites for Conversion

The previous section discussed strategies for bringing people to your website.  This section addresses the next step in the process, namely, When people locate and access your site, what do you want them to do?  Going further, do you want them able to explore the entire site or to focus their attention on just a part of it that you designed for them with your offer?  If you are in business to sell products and services, your website should have conversion mechanisms, such as lead capture forms or ecommerce functions, built in to achieve these goals.  Far too many sites are informational, but they fail to move the business forward for lack of, or poor execution of, conversion features.

Calls to Action

As with other forms of direct marketing, then, you should include calls to action (CTAs) on your site.  They should certainly appear on your landing pages to reiterate the offer and CTA from the direct marketing piece that drove them there.  Below are some guidelines for properly incorporating CTAs into your site. For a more detailed discussion of CTAs, refer back to Chapter 9 on direct marketing.

• Wording – CTAs contain words that urge the reader, listener, or viewer to take an immediate action.  Common CTAs on the Web are “Click Here,” “Download Now,” and “Register Now.”
• Size and Color –The CTA text should be larger than the surrounding text.  Ideally the CTA is a color graphic to attract attention.
• Position – The CTA should be placed above the fold, so consumers can view it on any device.  Typically the CTA is the most important element on the page, so it should get a prime spot.   Web page viewers typically scan a page from left to right, top to bottom.  Therefore, positioning the CTA top right to bottom right above the fold is ideal.
• Test, Test, Test – There is an ideal combination of offer and CTA wording, design, and positioning that you should strive to achieve.   We recommend you test all of these continuously until you feel a page is optimized.  Even after you have completed the testing, however, you should continue to monitor CTAs over time and watch for declines in conversions, at which point you need to start tweaking and testing again.

Landing Pages

In online marketing, a landing page is a lead capture page – a single Web page that appears in response to clicking on a PPC or banner advertisement, or a link in an eDM. The landing page should display copy that is a logical extension of the advertisement, for example using the same language and graphics.  Any company that links from a paid search ad to their home page, rather than a dedicated landing page, is throwing money out the window. That’s because users can navigate from the home page to anywhere on the website they choose to visit – and not convert.  Here are a few suggestions for optimizing landing pages:

• Make sure the copy and offer match the ad.  This sounds obvious, but many organizations don’t do it.  When the ad copy does not match the landing page content, potential customers have a “something’s funny here” moment, or, even worse, they believe they have been misled.  Either way, conversions suffer.
• Remove site navigation – Why direct potential customers to a dedicated landing page only to offer them the freedom to roam around your site?  Many people leave in navigation capabilities out of ignorance or because they are too lazy to do the extra work above and beyond cloning a page that contains their navigation.  Don’t be one of them.
• Include a picture – If you are selling a product or offering a free white paper, include a picture of it on the landing page.  Consumers generally respond well to pictures of the offer.
• Make the lead capture form short – To minimize form abandonment, make the form short.  Request only the information you need.

Measurement

Your website should be instrumented for measurement.  There are many things you can measure that are useful to tuning your marketing efforts as well as to understanding your business: total visitors, referring sites, time spend on your site, and so on.  As was the case with advertising, marketers have access to a number of tools and services for measuring a website.  The two most popular are Google Analytics and Adobe Marketing Cloud (formerly Omniture).  You should take measurement needs into account when you design and develop a website.

An area of special focus for website measurement should be measuring conversions.  As discussed in Chapter 9 on direct marketing, a conversion is the completion of a desired action to achieve a business outcome.  These actions include signing up for a newsletter, registering for an asset, asking to be contacted, and purchasing a product, just to name a few.  Of all the things you want to be able to measure and report on, response to your marketing offers should be top of the list.  Website measurement is covered in more detail in Chapter 20.

Specialized Websites

Microsites, online stores and mobile websites are three specialized types of websites. The core ideas above – usability, good design, interesting content, ease of search – all apply, but there are both nuances and unique attributes for each that marketers should keep in mind.

Microsites

A microsite is a small cluster of Web pages that are organized around an event or a topic.  When microsites are tied to an event, for example, all of the information is made available in an easily accessible location.  In the event is sponsored by a company, then the microsite might reflect the show theme, even if it differs from the corporate identity.  Sometimes a microsite is designed to educate on a topic.  In this case, a single page would not be adequate, and you may want to give the visitor more to explore.  Microsites for new product launches, education on trends or laws, explorations of diseases are just a few examples.

There are also times when microsites have their own URLs.  This practice somewhat blurs the distinction between a website and microsite.  However, if a microsite is limited in size and is dedicated to a specific topic, then it qualifies as one.  Pharmaceutical  companies sometimes create microsites for specific drugs, like www.claritin.com or www.viagra.com.

Ecommerce Sites and Online Stores

There is an entire science behind selling online.  Companies that derive a significant amount of revenue online more than likely are using an application to run their online store.  Nonetheless, a number of the same Web design principles apply.  The store should reflect the organization’s brand so users know they are in the right place.   In commerce, where money is being exchanged, trustworthiness and professionalism are especially important, and the online store should evoke those traits  The site should be easy to navigate and search.  SEO is vital (competitors often battle over natural search rankings) so that new customers can find your products. SEM is more common in driving traffic.

Online stores pay particular attention to calls to action and offers.  Most ecommerce teams spend a great deal of time testing CTAs and offers.  Lastly, if users must make comparisons, between two products, it is best to place the items being compared side-by-side.

Mobile Sites

Users are accessing the Web in record numbers from their mobile phones on the go, and from their tablets at home and in the office. By 2015, research firm IDC predicts the number of people accessing the Web via mobile devices will surpass the number of people doing so via PCs.  Marketers need to (a) pay special attention to how people use your website on mobile devices and (b) consider designing mobile versions of your site.

All of the same design, usability, and content principles that we have discussed apply to mobile sites. In addition, there are some additional considerations that apply specifically to mobile sites.  As of the writing of this book, only a minority of companies with websites had mobile sites – a missed opportunity. Below are some best practices for creating mobile sites:

• Use Case – The first thing you need to learn is whether mobile users are using your site in the same way on mobile devices as they do when using viewing it on their laptop or desktop computer.  For example, users of sports sites and news sites may be interested only in the latest scores and headlines on their mobile phones, and not in long-form articles or archives.  So, the content may be more limited and the navigation simpler.  Calls to action may be changed to appeal to things people might do when they are on the go, such as use a coupon in a store.
• Screen Size – Even if the use case is the same, given the much smaller screens on phones, the site will need to reduce the amount of content and the way it is displayed.  Forcing users to continuously zoom in to read microscopic text is a usability no-no.
• Finger Size – People are increasingly using touch navigation on smart phones, so navigation needs to be easy to manipulate with thumbs or index fingers.
• Dedicated Mobile Site – Mobile sites are increasingly using the m.company.com domain, rather than the www.company.com domain syntax.  Even if users do not type the mobile URL into their phone, your website should detect that they are on a mobile device and direct them to the mobile site.
• Apps – Many organizations are taking advantage of custom applications, or apps, on smart phones and tablets.  Apps improve the viewing experience and they add useful functionality, increasing the stickiness of your organization or content.  A best practice is to sense a mobile platform when a visitor hits your m or www site and offer a link to your app.

As of the writing of this book, an interesting trend was emerging.  Consumers were beginning to use multiple devices to accomplish a single task.  According to research by Google, not only are consumers increasingly reading email, shopping, and reading news on a variety of devices, but they are doing so sequentially, moving from their computer to their phone and back again to achieve a task.[3]  In fact, two-thirds of respondents stated that they used multiple devices to make a single purchase. Many consumers now “showroom,” scanning prices via their phone at a retail store and then comparison shopping later that day from their tablet or PC.  What should marketers conclude from this research?  Basically, that marketers need to make the user experience familiar to the user while simultaneously taking into account the differences in devices. In some instances, marketers will need to contemplate multiple devices when they determine their website goals.