Great Website Content: Balancing Form and Function

The theme of this blog is based primarily on the 100+ year old phrase "Form (ever) follows function." The origin of the phrase dates back to Louis Sullivan's 1896 article "The Tall Office Building Artistically Considered." The great American architect believed that a building's shape should be primarily based on its intended function. The credo was taken to imply that decorative elements were superfluous in modern buildings. However, Sullivan himself neither thought nor designed along such dogmatic lines during the peak of his career. Indeed, while his buildings could be spare and crisp in their principal masses, he often punctuated their plain surfaces with eruptions of lush Art Nouveau and Celtic Revival decorations.

While those principles made sense for much of the last century for buildings and objects alike, times have changed a little. Digital technology provides us with many more functions to be squeezed into smaller and smaller spaces. As a designer and content architect, I too strive to first consider the "function" a website or page before giving in to my more creative desires. After all, creative embellishments are primarily subjective.

To be an effective web designer is to hold content form and function in relative balance. However, we must first consider the purpose of the content we're authoring. Only once we're confident that we understand it's purpose, are we free to make it look better.

I have to say, I sympathize with anyone tasked with taking some content, putting on a web page and having it look good. I've been doing this for a very long time so you might call it natural but to the layperson, a blank page can be an intimidating place. No matter how good your site's theme looks, you can really lose design points if you drop the ball on your page content.

I've been on the hunt for good online resources for content managers that aren't designers by trade or otherwise. It has not been easy. Every resource I've found appeals to web professionals. As they say, "if you want something done right..."

A common scenario:

Your boss just handed you a Word document containing a couple of boring paragraphs and nothing else. You have now been tasked with making this content look good. Here is a list of things to consider:

1. Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.
2. Fonts, font sizes, and font colors are consistently used
3. Content provides meaningful, useful information
4. Content is organized in a consistent manner
5. Information is easy to find (minimal clicks)
6. Content does not include outdated material
7. Content is free of typographical and grammatical errors
8. Avoids the use of "Click here" when writing text for hyperlinks
9. If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/nonvisited status
10. If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided (accessibility)

Closing tip: Try to look at your text as block elements rather than just text. This will help you organize your text content as visual blocks and see how these blocks interact/relate to other elements such as images, video, content boxes, etc.

One of the first things you notice about a website is the color palette. The colors of your site can determine the 'mood' of your site. This is one of the most dominating elements of a website's first impression. The first step in designing a good website is choosing complimentary colors (i.e., colors that get along). We've all seen color swatches at the hardware store offering a small collections of colors that 'go well together.' This is important for setting the mood or theme of a room. Your website is no different. 

The following websites are GREAT resources for finding colors that blend well together:

1. www.colorcombos.com
2. www.colorblender.com
3. www.colorschemer.com
4. www.colourlovers.com

Color is used to evoke emotion. Consider the following examples. Which site is soothing and gives you a sense of warmth and which is loud and gives you a headache?

Well balanced color is essential to consistency and flow in a website. This was the reason we created "strict colors" within Marketpath CMS. With strict colors enabled, website content managers need not worry about matching colors on their own. We add your website's unique palette of colors to the editor so keeping your content consistent is a snap!

How important are good directions? Have you ever received directions so bad that they got no where but all the wrong places? From a usability standpoint, a good website will always answer three basic questions:

1. Where am I?
2. Where have I been?
3. Where can I go?

Studies have proven that the navigational structure of a website is one of the most critical elements for establishing credibility with visitors. Credibility is what stands between your site and a new customer. If you succeed at delivering a visitor directly to the information he or she is looking for in the shortest amount of steps, your credibility goes up. Conversly, if your site requires a lot of guess work and back button usage, your credibilty will suffer. 

Maybe it’s my design background or the fact that I grew up in the back of a print shop but this is a sensitive subject for me. I was taught typographic conservatism by my grandfather who once told me that in print, you never use more than two typefaces. And if you use two, make sure they are in the same font family; e.g., sans-serif with sans-serif, serif with serif, etc. In most cases, this is no different for the web. There is a fine line between typographic variety and font clutter.

In a recent update of Marketpath CMS, we implemented stylistic limitations for two reasons: 1) maintain design consistency and uniformity; 2) simplify formatting for our users. Like form and function, there is a balance between giving too many options and simplifying the process.

Rant Sidebar: Every night before bed, I pray to the Gods of typography that the typeface 'Comic Sans' is wiped from the face of the planet.

How many times do you visit a website and get exactly what you went there to get? If you’re experiencing what I’m experiencing, your seldom do. I tell my customers and prospects to repeatedly ask themselves who their website serves and what they’re looking for. If you’re having trouble thinking of what content to put online, that’s where you start.

It seems the most commonly missed and hardest to find information is adequate contact information. The key to a happy customer is making sure they, at the very least, “think” you care.

Whitespace is the empty or “negative” space between elements on a page. Those elements can be anything from paragraphs and bullet lists to images and advertisements. Utilization of whitespace in webpage layout is underrated and all too commonly underused. Whitespace can benefit visitors by preventing the feeling of being “overwhelmed” or being annoyed by too much "going on." Whitespace can also be used to create emphasis; focusing visitors on the most important information.

Look at the difference between the following website screenshots:

Figure 1

Figure 2 

Do you “feel” the difference between the two designs? What is the general feeling you get from figure 1 compared to figure 2? Figure 1 has an open and airy design creating a sense of sophistication and calm while Figure 2 exudes frustration and stress. Which would you rather your audience feel?

When managing the content on your website, don’t be afraid to add some space between elements. It may be subtle but can really improve the visual effectiveness of your content.