Designing for Multiscreen — Multiscreen-ready layout and content! (5/6)
The 5th one of 6 things you should consider when developing strategies for digital services across multiple screens
More and more people are using more and more screens. Users expect to access information on all relevant screens. Thus digital services require a holistic strategy.
Together with Pascal Raabe, from the UI/UX studio ustwo™ I’m going to introduce six practical tips (in an article series) that can help you improve your own digital products and services by employing an effective multiscreen strategy.
- Think multiscreen
- Know your screens
- Put the user at the centre
- Context is King
- Multiscreen-ready layout and content!
- Challenges are chances
This is the fifth article. The last one will follow in November.
5) Multiscreen-ready layout and content!
Everything stands and falls with data suitable for multiscreen. Flexible and dynamic layouts and (!) content are paramount. This requires appropriate content management workflows and a suitable content strategy. Of course the content should never be isolated from the potential user and the context of use.
A modern information offering needs to be accessible on every relevant device. However even within the separate device classes there are enormous differences in terms of the screen size and resolution. Employing flexible, scaleable and adaptive layouts that respond to the device or screen and its properties are a must (see also Marcotte and Tran).
There are two different approaches: Either the content layout adapts to the changing width when reducing the browser size or you define two or more breakpoints for the output on different devices. Breakpoints are thresholds for which new or different layout templates, rules and definitions apply.
Luke Wrobleski identified five general layout patterns: Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweaks, Off Canvas. These patterns differ in the alignment of the different layout elements depending on the changing screen width. For some only the content area shrinks, others change the alignment of elements at certain breakpoints to be displayed below the main content or somewhere else.
Not only the layout but also the content should adjust to the different situations. The content depth should always be the same since some users access information exclusively on mobile devices. That’s why we should not differentiate between mobile and other content. There is only one information and it is accessed, displayed and used in different ways.
In order to design a sensible layout you should know the scope, type and format of the content (Content First). It makes a difference whether you need to display long or short copy, images, galleries, or videos. Concept, design, and implementation need to go hand in hand.
An information service needs to respond flexibly to behavioural patterns, bandwidth, processing speed, and other variables of the device in use. Only like this we can fully embrace the capabilities of the different devices.
Content is smart when it adapts fluidly and flexibly to devices, layouts and the appropriate context of use. Josh Clark uses the metaphor “Content like water” to explain this concept. No matter whether you fill a cup, a bowl or a glass – it always adapts exactly to the shape of the vessel. That’s how flexible content should be too.
In addition, future friendly content is accessible to everyone, adaptable, findable, convertible, connectible, reusable, and archivable. Never hide content from users and always enable them to adapt them to their needs and requirements (screen readers, layout, contrast, text size). Metadata makes content easier to find. Good content is easy to modify and easy to connect with other services. It is format-independent or at least easy to convert to a different format. It is flexible in regards to aggregation, combination, transfer, conservation (e.g. Read Later) and archiving. You can find more about this topic in a German report by Markus Erle.
Cloud computing, content mamanagement systems and APIs play an important role in the flexible display and transfer of content. Josh Clark says “The API runs the show” (This quote is from his talk at MobX Conference 2011). In order to create and maintain multiscreen ready information and data we need backend systems with flexible content management structures. With a common backend or CMS for all content you can avoid redundant and inconsistent data in your maintenance.
The more elegant and granular the content, data and information the more flexibly they can be used across devices. Formatting is the job of the presentation system. Formatting only belongs into the data holding system in a reduced form. (Visually) Unformatted copy is much easier to integrate into other information services (app, software, news) and easier to display on different devices, screens and applications.
After introducing the COPE principle (Create Once, Publish Everywhere) at NPR, they are able to broadcast information everywhere, fast and efficiently. The new interface had a large influence on the mobile strategy as it wasn’t necessary anymore to develop an app or service for every channel separately.
If possible the content, structure, and presentation should be separated strictly from one another. The following trisection is recommended:
- Creating and maintaining the content
- Information architecture, structure of the content elements and metadata
- Presentation and display depending on the medium, device and context of use.
The more independent from the actual use the content is captured, the more flexible it can be applied to different media and channels – regardless whether it is print, TV or the Internet.
Structure is more important than presentation
Before you develop a layout or a visual design you need to know what kind of content is to be published. Because information is not only consumed on a particular platform but also aggregated to create new information packages through other applications, it is important to focus on the design of the information instead of the design of the display (content design vs. visual design).
In order to display or aggregate information optimally, they need to be clearly structured, for example using meta data or meta information. Only well structured data can be accessed through an interface. Structuring the information is the basis of a media-neutral content strategy.
“The future of mobile is structured content.” – Karen McGrane
You should also have a look at Karen’s talk about “Content in a Zombie Apocalypse”. Just great!
Authors must be able to create or edit contents upon the basis of the semantic significance as well as be able to maintain and manage content relationships and usage types.
“We’re gonna have to break content creators out of the mindset that their job is creating web pages and instead give them tools that help them envision how their content will be published in new ways.” – Karen McGrane
Content Management and Content Manager Experience
Many CMSs are largely unsuitable for platform-independent content maintenance. Interfaces are often unattractive and the user experiences for the author or editor leave something to be desired: Usage is no fun. However, it is exceedingly important to motivate those people to create and maintain the information. This aspect is one of the main topics of my last talk “Next Generation Information Experience” at Usability Professionals 2014 in Munich (Slides in German).
Stay tuned for the last article, because ”Challenges are chances”. Any questions? Just send me an e-mail.
With the „Multiscreen Experience Design“ project we gathered and developed a number of patterns, methodologies, and insights and compiled them in a book (published 2013 in German by digiparden, an imprint of SETU GmbH). In this article series I introduce(d) some important aspects of a useful and user-friendly multiscreen offering.
Update (12/14/2015): If you’re more interested in the topic. My new English book “Multiscreen UX Design” is available sind 14th December 2015.