Your Mobile Content Needs to Get Presentation-Independent ASAP

Every platform is unique, and content that’s great for print isn’t likely to look as good on the Internet. Desktop and mobile website versions, as well as mobile apps, require completely different design solutions. Moreover, iOS app design is very different from app design on Android. In order to make your content flowing and user-friendly, it’s not enough just to put it onto a new platform without working on the overall design. If your materials contain integrated mapping, formatting, and styles for a particular device, you need to clear all of that data and do some new mapping and formatting according to the requirements for your new device or platform. The problem is that your styles often include additional meaning.

Photo credit: juhansonin / Foter / CC BY

The best solution is to divide visual and meaningful representation, as that will guarantee that the content is independent from its appearance.

When it comes to web, we all think we’re good designers. Authors want to control how their content looks and to have the ability to edit page mapping, choose fonts, colors, and set particular places for their images. When they’ve finished the design, everything looks fine — but only on a desktop computer. The roots of this problem are deep. Our 500-year print heritage has taught us that content and its form are tied together, so some authors can’t wrap their minds around my proposal: namely, separating what they want to say from how it will look.

As a result, we have to consider this issue in our content management systems (CMSs). Many of them allow multiple instruments for editing text, but there’s no option to move content to other platforms. In fact, if one of the content elements is used everywhere — in print, on desktop, in the mobile version, and in mobile apps — its form should be different from traditional formatted HTML. An element should be sufficient and independent.

Photo credit: evalottchen / Foter / CC BY-NC-SA

Now, let’s discuss the well-known WYSIWYG (What You See Is What You Get) principle. The history behind it is closely connected with the use of Microsoft Word and printing content on paper. Actually, the concept is rather old-fashioned, but nevertheless, it’s still very familiar to our mindset. WYSIWYG inspires you to add formatting to your content and creates a delusion that the content looks wonderful — at least on the desktop. So when publishing on mobiles, you first need to remove all the styles and formatting to make the content readable on devices with differing screen sizes. This means that all the effort you put into visual formatting is wasted and that your attempts to control the mock-up and appearance for particular devices are outdated. WYSIWYG only makes sense if you create documents that are fixed in a PDF file or on paper. So HTML and CSS not only prevent you from easy and tight control over representation, but they also make things very, very difficult.

Have you ever thought that being free from a strict mock-up is a good thing? When metadata about how content should be represented is sent to a device, it makes the final decision, making content as user-friendly as possible. The problem is that typical CMSs allow styles to be set for particular structural elements. We editors are trapped by our own mock-ups and templates, so there’s a limited number of ways to emphasize content elements because of the traditional CSS styles used in CMS systems. If a mock-up is changed for some reason, all the ways to let readers know the most important part to read disappear. The CMS bases its judgement on where the article is, instead of on the article’s content.

Even Elmo has a mobile phone. Photo credit: Ed Yourdon / Foter / CC BY-NC-SA

Several years ago, The Guardian noticed that none of the Editor’s Picks were displayed on mobile devices. How do you avoid such situations? The editors worked out a special algorithm to read the original InDesign file. The scheme analyzed the size and placement of each content chunk, and then calculated the importance of the article. Using this data, the iPad version of the magazine decides all by itself where the material should be put in the layout.

But not every company can afford such a sophisticated mechanism to calculate the weight of material based on the newspaper or magazine layout. So this solution isn’t universal and won’t work for everyone. The lesson we take from this story is not about the robots that save us from the decisions we made about the print press. We need to think deeper about encoding the meaning we want to add to our material by visual representation, without the layout tools. How do we encode it? By using metadata.

I’ll discuss metadata in more detail in my next blog post. For now, please let me know what you think about presentation-independent content!