What you see isn’t what you get

On the web, what you see isn’t always what you get. This is why it’s so important to keep your focus on content, rather than how your website will look once your article or web page is written and published.

The way you update content on your website is via your content management system (CMS). As the name suggests, it’s a way to update your content, not how your website looks.

But what is content? On the web, content consists of text (often referred to as ‘copy’), images (pictures, logos, etc.) and sometimes ‘richer’ media, such as video or audio.

Copy

Of the various types of content, copy is probably the most complex. Your CMS will take care of image resizing and how video and audio are displayed but copy needs a bit more attention.

Types of copy

Copy can take all sorts of forms. The most obvious is a simple paragraph of text, but there are all sorts of other ways of presenting text:

• Headings of varying levels of importance
• Emphasised text (eg. bold/italic text)
• Bulleted lists (like this one!)
• Numbered lists
• Quotations
• Links to other web pages

But how is content different from styling?

Right; bear with me here… This next bit’s all about changing the way you think about writing the content for your website.

A website is a vehicle to communicate your content to your audience. Nothing more.

If your content is properly written it will be accessible to pretty much everyone and everything (search engines like Google come into the ‘thing’ category).

Design versus content

As the content producer for your website, the responsibility for making your documents accessible lies with you. And, remember, that’s a good thing as you’ll be reaching the widest possible audience!

Your web designer’s job

Your web designer’s role is to ensure the content you’ve taken so much care over is conveyed in such a way that it caters for the massive number of ways in which a website can and will be consumed by your visitors.

It used to be so easy…

In the not-too-distant past, the web was consumed on desktop computers. Their screens were similar in size. Then laptops arrived, but this didn’t change things too much as they had pretty similar sized screens and were interacted with in the same way – keyboard and mouse.

It was a bit more like print in that you knew exactly how your website would look for pretty much everyone.

But smartphones arrived and changed everything.

Not only were they used by touching the screen, for the most part, but the screen itself was much smaller than the screens we’d been used to viewing the web on.

Tiny screens

It’s possible to read a web page on your mobile phone’s screen, but it’s a pain if it’s just a tiny version of a site that was designed to be visited by people using desktop monitors. You have to double tap the area you want to zoom in or, or ‘pinch’ in until the text is at a readable size.

To solve this problem, your website should be designed for as many screen sizes as possible. This may involve some design changes that go beyond simply altering the layout.

And other means

Your content can also be saved for reading later using services like Instapaper, Pocket or Readability, where your formatting is removed and your content is presented in the way the reader decides they want it to be presented. Apple’s Safari browser has this functionality built in, so that the main content is taken out of a web page and displayed in a nice, readable way.

Then there’s those with sight impairments who don’t actually see your website at all! It is read to them by their screen reader.

So how your website looks is by the by in a lot of cases!

So it’s even more important to ensure your content is properly marked up so they know which words you’ve placed emphasis on, which phrases are headings, rather than paragraphs, etc.

Redesign

And what about when it comes to making design changes to your website? You probably don’t want to have to rewrite all of your content every time your site is redesigned. Especially if you write a blog that might contain hundreds of articles!

Thinking about your content independently from how it will look is a massive time saver too!

If it’s written properly the headings, lists, bold and italic text, quotations, etc. will simply take on the new look when the redesign is done. Zero effort on your part!

Interpretations

Another great reason not to focus on how your content looks is that every web browser has its own way of interpreting the code that tells it how the page should look.

An example might be useful here… If you write a heading for a blog post and the last word wraps onto a new line, you might think about losing a word so that the design feels tidier.

But, after painstakingly deciding how to write the heading using less words, you might look at the same webpage in a different web browser or on a different operating system (Windows as opposed to your iPad) the text may be ‘rendered’ slightly differently, pushing the last word onto a different line anyway! So all of your attention to the detail of the design was for nought.

Couple this with the nature of a website—adapting to as many different screen sizes as possible to offer the best possible experience—there’s no avoiding a lone word on its own line at one screen width or the other!

The moral of the story

Your content is likely to be read by not only devices of varying screen sizes, but also by services that don’t necessarily look like your website.

Decoupling your content from how it will look makes it reusable and accessible.