A Digital Media Strategist Will Assess the Overall Design of Your Website

This is the fourth article in an eight-part series which describes the role of a digital media strategist in improving the website operations of a company or organization.

Studies show that the typical website visitor will spend only a matter of seconds (the exact number of seconds is a matter of some debate; suffice it to say that it’s a short amount of time!) before deciding whether to spend more time exploring your website or abandon it for another site.

Much of the basis for that decision comes down to the visitor’s initial impression of your site. This points to the vital importance of your design. The design of your site is about all your visitor can react to in those initial seconds. If they believe your site is unprofessional in its appearance, they will quickly abandon it. If your layout confuses them (by placing common elements such as navigation, logos, etc. in nontraditional places on the page, for example), they will leave.

A well-designed site builds trust between you and your site’s visitors.

And so, to ensure that such confidence is established, your digital media strategist will assess the design of your website on the basis of several criteria:

1. layout
2. web-standards compliance
3. color
4. imagery and product photography
5. typography

Layout
The first thing a digital media strategist will look for when examining your website’s layout is a consistent theme across all the pages of your website. Such consistency helps visitors to your website know they are still on your site when they navigate from page to page. Again, this builds trust between you and your site’s visitors. They will know yours is a professional organization which has the resources to invest in a professional website.

The second thing a digital media strategist will look for when examining your website’s layout is the existence and positioning of a few basic elements which should be part of every website’s design:

1. Your identity. Each page on your website should include the name of your company or organization, often combined with or made a part of a logo. Similar to a consistent theme, the existence of your logo and/or company name on each page of your website ensures that your visitor knows they are still on your site as they navigate through its pages. The logo and company name traditionally appear in the upper left-hand corner of your pages, and web surfers are accustomed to looking for these elements in that location.
2. A search field. All but the very smallest of websites should include an area devoted to internal site search. Many website visitors prefer searching to browsing, and it’s therefore important to place the search field and its associated components in the same, prominent location on each page of your website. Traditionally, the search field is placed either as close to the upper right-hand corner of the page as possible within the overall design or sometimes in the center of the masthead.
3. Navigation. The most important things about a website’s navigation is that it appear in a consistent place on every page, that it is readable, and that it is easily used by visitors who wish to browse your site. Traditionally, main navigation appears in a left-hand column or near the top, just under your logo and organization name. The exception to this is traditional blog design which often places navigation in a right-hand column.
4. Content. Ultimately, the most important thing about your website is its content. Visitors to your site come looking for information. The information you are trying to convey to your visitor should therefore be the focal point of your design and layout. The various aspects of the appearance of your website (general color scheme, layout, graphics and photography, etc.) should be used to draw your visitor’s attention to your content. As Jason Beaird says in his book The Principles of Beautiful Web Design, “…. design should please users but draw them to content.”
5. Footer. The footer of your site typically includes copyright information, credits, contact information and sometimes text links to the major sections of your site or to other areas of your site which might not warrant inclusion in your main navigation (privacy policy, terms and conditions of use, etc.). Website visitors are accustomed to finding this information at the bottom of the page.

Your digital media strategist will examine your website to make sure these basic elements appear 1) in their traditional location; and, 2) in the same location across all the pages of your site.

The third thing a digital media strategist will look for when examining your website’s layout is the effective use of white space. When a person visits a website which doesn’t employ whitespace effectively, he/she can easily become paralyzed and not take action because everything on the page may seem to have equal weight. And if your visitor does not take action when they visit your website, you have almost certainly failed to accomplish your objective. White space serves to draw the user’s attention to the important parts of your page by giving more prominence to areas which do have copy or imagery. This helps your user to take action and proceed along a path which corresponds to one of your website’s objectives.

Web-Standards Compliance
Many companies and organizations do not even know there are such things as web standards, let alone implement them on their websites. But compliance with current web standards, as defined by the World Wide Web Consortium (the W3C), is a very important aspect of developing and maintaining an effective website.

Why is compliance with web standards important? Here are just a few reasons:

1. Web pages which comply with web standards load more quickly because the code which controls the presentational aspects of a page (font specifications, layout, line spacing, margins, padding, etc.) is placed in a file which is downloaded once and then stored (cached) on the user’s computer. As the user visits other pages, the presentational aspects are then controlled by the file stored on the user’s computer. And so the file which includes the content of the page can be smaller (because it doesn’t include the presentational aspects) and thus load more quickly.
2. Costs for bandwidth (the rate at which data flows through a digital network) can be significantly reduced because file sizes will be smaller.
3. Changes to the presentational aspects of a website can be made quickly and easily because only one file needs to be changed.
4. Newer browsers are becoming less and less tolerant of code which does not conform to web standards, so if your website does not employ what is known as “valid” code, with time your site will be less and less likely to render correctly in current browsers.
5. Creating websites which comply with web standards saves a company soft costs because multiple versions or approaches for different browsers no longer have to be created.

Compliance with web standards involves the following steps:

1. including the appropriate DOCTYPE in the head of each page on your website. Your DOCTYPE tells current browsers which version of XHTML or HTML your pages use and how to display your pages. If your DOCTYPE does not match the version of XHTML or HTML you actually use, the results (in how your site displays) can be interesting, to say the least.
2. including the right character set in the head of each page on your website. Employing an appropriate character set ensures that the text on your website will be readable.
3. separating presentation from contact by defining presentational aspects within your cascading stylesheet (CSS) file and including content in your html, php, asp, or jsp files.
4. using valid markup (HTML, XHTML, etc.). The W3C offers a free markup validation service at http://validator.w3.org.
5. employing valid CSS. The W3C offers a free CSS validation service at http://jigsaw.w3.org/css-validator/.

Color
The color scheme of your website can play an important role in how visitors respond to your website.

The effective use of color will help your visitors discern where on the page your navigation appears, which blocks of content go together, which elements on a page are most important, etc.

Your digital media strategist will assess the use of color on your website to make sure that your color scheme matches your site’s objectives. The colors you choose for your website should:

1. be complementary according to accepted color theory; and,
2. convey the message you desire within the cultural milieu, gender, age, and social class of your target audience.

Imagery and Product Photography
The graphics you use on your website can either help visitors to your website to complete the action you would like them to take or they can place a barrier between your visitors and the desired action. Product photography can be used to persuade your visitors to purchase your products or it can persuade your visitor that your products are not worth buying.

Your digital media strategist will evaluate the product photography and other imagery you use on your website. She will examine your graphics to make sure they follow these guidelines:

1. The correct file format should be used. Photographs should be saved in .jpg format. Graphics with a limited number of colors, such as logos, should be saved in .png format unless you know that your visitors are using outdated browsers, in which case limited-color graphics should be saved in .gif format.
2. Web graphics should be optimized for fast load time. This will improve your visitors’ experience and reduce your bandwidth costs. If you can keep the overall page weight (the combined file size of the file which contains your XHTML code, the file sizes of the images displayed on the page, and the file sizes of any multimedia files such as Flash files, video files, etc. which appear on your page) to 50-100K, you’ve done a good job.
3. Product photographs, since they are directly related to selling product, should be of higher quality than most graphics on your website.
4. On an ecommerce site, you will want product photographs (either the main image or alternate views) which demonstrate scale and show the product in use.
5. If your budget will allow, consider employing rich-media imagery such as that offered by companies such as Adobe Dynamic Media  to enable zoom, dynamic image sizes, rotation, swatching, and dynamic addition of icons.

Typography
The overarching purpose of your website is to communicate information. The overwhelming majority of that information is contained in the text on your website. This is why typography is one of the most important aspects of your website.

Your digital media strategist will evaluate the typography used on your website according to a variety of criteria:

1. Is the text on your website resizable by the user in all browsers? This allows the visually impaired to adjust the size of the text on your website to be more readable.
2. Does the color/background color combination on your website make the text on your website easily readable?
3. Does your stylesheet specify a line-height which increases the readability of your main narrative copy?
4. Is the line length of your main narrative copy optimal for reading comprehension?

Do you use visual cues such as headings, sub-headings, bold text, numbered lists, bulleted lists, etc. to help those who scan web pages rather than read them in their entirety (this actually describes the majority of web surfers today)?

In the next installment in this eight-part series, we will discover that a digital media strategist will appraise the content and copywriting of your website.

Image courtesy of laRuth. Used by permission.