In our last post on accessibility, we argued that designing with accessibility in mind results in better websites for everyone. In this post, we're going to explore that idea further by talking about the difference between content and presentation. Separating content and presentation will enhance the accessibility of a website, but it also helps encourage better user experience design - a win-win.

One way to illustrate the difference between content and presentation is through a classic business task - the mail merge. You have a database with customer names and addresses that looks something like this:

You need to print address labels to send a mailing to each customer, substituting in their specific name and address as appropriate. So, you create a label template with placeholders for the customer data:

Note that we don't specify the formatting of the name and address in our database. In contrast, we do apply formatting for our envelopes. However, what we format is not the actual words and numbers, but particular kinds of information - title, last name, and so on. And this is the crucial point. The people who input the customer data don't have to think or care about formatting. They just deal with the customer data - the content. The people who create the address label template don't have to think or care about what the customer data is. They just worry about how how the title and name should be formatted - the presentation. The only connection between the two worlds is through the field names - «Title», «FName», and so on. When we bring them together we get the finished product:

This separation between content and presentation was built into the design of the web from the very beginning. The core elements of HTML (the language that web pages are written in) specify the structure or function of particular elements in the page, not what they should look like. For example, the tag <h1> means a top-level heading, <p> means a paragraph, and <ul> means a bulleted list. More recently there has been a push to use semantic HTML - the systematic use of tags to provide information about meaning and function of web page elements. This is supported by the introduction in HTML5 of a number of new tags that are purely semantic - they say nothing in particular about how the elements should be presented on the web page. Examples of these new tags include <nav>, <section>, and <time>.

The tyranny of WSIWYG

For many people, thinking about web content in this way does not come naturally. We are used to creating content following the model of the WYSIWYG (what you see is what you get) word processor. In this model, you work on both content and presentation simultaneously. Perhaps the best known example of such a word processor is Microsoft Word, where the ribbon at the top of the window allows you to apply visual properties like font, font size, font color, and so on to a section of text:

While originating in word processors, this basic model has become widespread. For example, a strikingly similar ribbon can be found at the bottom of the window when composing a new message in Gmail:

For present purposes, though, the most important thing to note is that these kinds of ribbons have also shown up in popular website building tools like WordPress, as shown this ribbon from the page editor:

It's true that much of the look of a WordPress site comes from the theme rather than manually setting visual properties in an editor. For that matter, there have been themes in Microsoft Word for a while now, too. But the point is that the end user of these products is invited to think about whether they might like this phrase to be bold, and that one to be in a tad larger font.

Thinking beyond the formatting ribbon

There is clearly a place for WYSIWYG. For example, if you are using a piece of software to create a simple, one-off flyer for an event, you probably should be thinking about the font choice and text size at the same time as you consider what words to put on the page. However, I would argue this use case is the exception, especially in a business context. More often, documents fall into categories that contain many other documents of the same general type - internal memo, letter to customers, and so on. When employees write a memo, do you want them thinking about font choice? Most likely not. It's common for a business to create a memo template that is provided to all employees who might need to write a memo - this template handles the presentation side. Writing an actual memo then becomes a process of filling in the boxes - date, who it's from, who it's to, what the subject is, and so on. That is, the writer is only worrying about content.

I would argue that separating content from presentation is equally valuable in a website. Since this series of posts is about accessibility, I'll start with an argument based on that. If someone has a visual impairment and is using a screen reader, whatever you're trying to do with choice of font and text size and text color and the like isn't going to work for them. Thus, if you're going to reach that audience, you need to approach things differently: One set of content, but two types of presentation. You can only do that if you clearly distinguish content from presentation.

That being said, the central point of the previous post in this series was that designing with disability in mind often yields better results for everyone. So I'm going to continue and provide 5 additional benefits of distinguishing content from presentation that are applicable with any audience.

Reason 1: Consistency and branding

On a website, good visual branding requires developing a single style that will then be applied to a broad range of content. Most likely, some of that content hasn't even been created yet. To ensure that the style is used consistently, you need to describe it in terms of the function of various content elements, not the content itself. For example, you might decide that block quotes, such as for customer testimonials, should be styled a certain way. If you have a blog, you might decide that author names should be styled a certain way. In turn, the job of content creators is then to label their content in terms of these functions. That way you end up with a consistent use of styling across your whole site, even if the content is created by many different people working at many different points in time. And as this article discusses in some depth, consistency is a key element of successful branding.

Reason 2: Responsive design

If you follow best practices in contemporary web design, then you're already thinking in terms of one set of content, multiple forms of presentation. That's because customers may visit your website using a broad range of different devices with widely varying screen sizes and shapes. (Check out this article for a more in-depth discussion of the benefits of responsive design'). You should also be considering connection speeds. For example, phones typically have slower data connections than desktop computers in an office. So, while high-quality photographs might be great on that big screen with a wired internet connection, they may make your site disastrously slow on a phone. So even if you're only considering sighted users, it's still important to customize your site for different users' needs.

Reason 3: Multichannel marketing

Just like users interact with your content using a range of devices, you might want to take advantage of multiple communication channels for reaching your customers. In addition to your website, you might have print and radio ads, point-of-sale displays, and promotional events. As argued in this article on multichannel marketing, it's important to tell a consistent story about your brand across all those channels. The only way to do that is to make sure that your story isn't tied to any particular channel. On one channel, your message may be delivered in a visual form, while in another channel, it needs to be verbal. Again, you need to be able to think of content separately from presentation.

Reason 4: SEO

As discussed in this article on semantic HTML and SEO, the bots used by Google and Bing to build the database for their search engines are essentially visually impaired users. If you don't provide non-visual ways to communicate what the content of a page is and how it is organized, they may not be able to figure it out. And that may make it harder for customers to find you via search engines.

Reason 5: Better writing

Most of the college classes I teach have a significant writing component. One of the biggest challenges my students experience with writing is understanding the difference between form and substance. It's quite possible to write a paper where all the sentences are grammatical, all the punctuation and spelling is correct, and you've used the right font size and margins, and still not say anything interesting. One of the reasons this happens is that the superficial details of writing become a distraction, and pull our attention away from thinking about what we're trying to say. Part of the value of techniques like outlining is that they focus your attention on substance rather than form, and thus prevent you from getting distracted. That doesn't mean you shouldn't care about form - you certainly should - but you should only care about it once you clearly understand what you're trying to say.

This philosophy is embodied in the typesetting program LaTeX, which I was introduced to in graduate school as a good way to write academic papers. It uses markup that is a lot like HTML, with no formatting ribbons like in traditional word processors. Interestingly, as is illustrated by this article extolling the benefits of LaTeX, most people who are fans of LaTeX argue that it both promotes better writing and produces a more attractive end result. That's because LaTeX doesn't downplay the importance of appearances - quite the opposite. It simply deals with content and presentation in two different stages of the process. That allows you to first focus entirely on content, and then focus entirely on presentation, with the result that you do a better job of both.

Summary

In the discussion above, I've summarized many of the benefits of separating content from presentation in designing your website. In the context of accessibility, this is key for providing a positive web experience for a user with a visual impairment. But you really should be applying this thinking for all your users, whether that means a person with a visual impairment using a screen reader, a sighted person visiting your site on a phone, or a Google bot crawling your site to index it. Thinking of content and presentation as two separate things not only helps you make a more accessible website, it helps you make a better website in general.