Mobile first? Content first? No! Device driven Content!

Mobile first? Content first? No! Device driven Content!

If you talk to Web Designers, the question «Mobile or Desktop first» is often discussed. This issue is actually of no relevance any more. We have so many output devices; besides the classical screen or smartphone we have watches, refrigerator panels, large TVs and intelligent house control screens.  We do not know if those devices are mobile or not, they just display content information. The size and mobility is not the key question. The important matter is: How do we present the content on those devices? The answer is: with the method of device driven content!

How do we present content in an intelligent way?

Thanks to Ethan Marcotte we know about Responsive Web Design (RWD). A website created with RWD will display a different interface depending on what device is used to access the site (definition  This solution is useful, but it solves only part of our problem. In my understanding, RWD has nothing to do with the content. We need a completely different content on the different devices! Not only the order of the content (e.g. headline, teaser, text, image, video etc.), but also the content itself has to be different. What does it mean?

  • We need different headlines and lead texts on different devices. On the large TV screen the headline can be longer than on the tiny internet watch on our wrist. The lead needs to be shortened and shortened more the point.
  • We also need a different structure in the main text for the different devices. I do not write an article in the same way if I have 3000 or just 1500 characters available. I cannot just shorten the text at the end. No way!
  • The same is true for images and captions. A photo may fill just a small part of an article on a large screen, but the whole screen on a smaller device. I have also to deliver a different content, different cropped parts of the image.

The bottle neck CMS

We all agree that the content has to come from on central place, presumably a database. Unfortunately the Content Management system is not the answer to our problem. The text editors of TYPO3 and WordPress are useful to hierarchically structure and format the text content. But they cannot be used to structure the content from an output point of view. Karen McGrane calls the current CMS «the era of ‘desktop publishing’». What we also need is a Content Markup Language (CML). HTML gives the structure of a document, the CML would control to which device the content outputs to (device style).

The HTML command <h1>Title simply gives the text the structure of a heading. But it does not say whether the heading should be used for a tablet PC or a smartphone.  We could use the data-* attributes of HTML5 which are supported in all major browsers:

<h1 data-content-type='tablet'>American unemployment rate decreases by 3%</h1>
<h1 data-content-type='smartphone'>Unemployment decreases by 3%</h1>
<h1 data-content-type='pc'>Good news: American Unemployment decreases by 3%</h1>

Preferably the data-content-types would be numbers and the CMS would control with the help of the User-Agent or WURFL how to output the content.

A possible solution

We need an intelligent CMS which offers to enter different headlines depending on the output device. We should also be able to choose different images and videos from. In the main text it should be possible, to select different sentences and add one or more device style.


An improved User Agent should report back the pixels per inch and the actual width of the screen as well as the bandwidth.  Depending on those parameters we could deliver a custom tailored output to the customer. This is device driven content!


Example from The Guardian with different Headlines

What does it mean for learning?

We need different content format in different learning environments. Let us imagine we are learning a completely new topic (for example chemistry, multimedia, economics etc.). We are working 90% part time and therefore have to optimize our learning.  We live in the suburbs, walk to the station, ride the train for half an hour and bicycle to work.

  • Walking: We listen to an audio podcast of our topic (on an iPod shuffle for example). The speaker explains what we could see on the pictures.
  • Riding the train: We continue the topic where we have left before during walking and continue to watch the lesson on a smartphone. The pictures we have not seen before are displayed now as a summary. Since the screen is small the lesson mainly consists of images and videos.
  • Bicycle: On the bike we hear only the most important points of the lesson as a summary.
  • Work: We have a powerful desktop PC and have now the multimedia presentation of the next topic. Have a look at the WDR example

We therefore should have the possibility to program different learning environments where different contents are presented.

Comments are closed.