Common Website Mistakes 3: Mixing Content and Presentation
After two culture-related articles, I want to dive into a more practical mistake: Mixing content and presentation.
Many content authors slow down their content creation processes by focusing on how the result should look like. They shorten a text to avoid a "weird" line break or - arguably even worse - introduce line breaks themselves. They add empty paragraphs or invisible elements to increase margins. They manually edit images to better fit a single appearance of a component. Not only are these actions time-consuming and error-prone, they might even introduce issues on other resolutions and devices.
Why to Separate Content and Presentation
To understand why this is a bad idea, we have to grasp the concept of separating content and presentation and why it is so useful. Computers are really good at creating renderings ("appearances") by applying presentation to content, while the return path of extracting content from an existing rendering is much more challenging. Since machines increasingly communicate with each other, we needed a way to provide content that is not polluted with design information. In the Web, we are using separate CSS files (Cascading Style Sheets) to apply presentation information to the content (which is HTML). In addition to making these documents more machine-readable, this allows us to completely change the presentation of a website without having to touch the content at all! A great example of this in action is CSS Zen Garden, a website that demonstrates to what degree you can change a website design without changing anything in the content.
For this to work, the content should not contain any information about how something should look (because that is defined by the presentation), but only what it is (because it is independent of the design). Not only does that paradigm enable easy design changes in the future, it also improves content quality and simplifies content handling by external systems.
What you can do
Website owner
Try to nudge your authors to a more content-focused approach. Once they are confident that design issues can be easily fixed later, they are more likely to focus on the content itself rather than on its design. Introducing a non-WYSIWYG interface could reduce distractions and benefit your content quality.
Content Authors
As hard as it is: Ignore the design while entering content. You typically cannot cover all cases in a multi-language, multi-device scenario anyway. Once you have your content in place, talk to the Frontend developers to make it pretty. Chances are they can fix all your design issues with a few lines of code - throughout all languages and devices.
What do you think?
Do you agree? Did you experience situations where printing culture slowed down your publication process? Is this article helpful and would you enjoy similar content? Let me know in the comments.
Aknowledgements
Photo by jamelah almaliki on Unsplash