Multi-screen Content Authoring

Editor's Notes

• #2: At the Adobe Thought Leadership Day, I talked about the challenges and opportunities of supporting applications that will be displayed on devices with a wide variety of sizes. For the last thirty years or so the designers of personal computing software have had a fairly consistent canvas with which to work. Viewing screens for most computers have been in a range of approximately 10-14 diagonal inches. Screen resolutions in the past twenty years have been fairly static as well. It was possible to deliver our user experience in one presentation flavor. The UI would scale automatically from desktop to laptop and even to netbook. UA designers enjoyed not having to worry very much about how our information would look and feel on different displays.
• #3: This has changed quickly and dramatically. The Smartphone storm kicked off by the iPhone created enormous demand for devices with dimensions of less than three inches on a side. Similarly, Apple’s launch of iOS sparked a furious drive by software developers to create applications to fit this new form factor. The big question in mobile software development became how to create an effective user experience. At least in the Apple ecosystem, the iPhone maintained a very consistent size over time. From 2007 through the iPhone 4S, the dimensions have been essentially the same. Other phones used a similar screen size and for a short time it appeared we just had one new category to deal with. Then along came Android which opened up the market for smartphones and apps even more. Its free operating system and open source underpinnings made it possible for hundreds and thousands of different-sized devices to crop up in just a few years. There are currently over 3,900 distinctly different devices using Android. Suddenly we have screen sizes for phones and tablets covering almost every possible variant between the iPhone and the desktop. On top of that we now have developers looking to display apps on 60-inch living room displays. And software is being designed to be displayed in dozens of car entertainment systems. What is a UA person to do?
• #4: One of the things we must to do is start thinking about what this means for the design and delivery of our user assistance. Whether we are doing Help for native OS apps or presenting content in a mobile browser, we need to address the wide and growing fragmentation of devices. Beyond screen dimensions we need to deal with varying screen resolutions, UI elements and OS components that are proprietary to individual platforms, and do all this in the evolving culture of rapid product interation.
• #5: What we don’t want to do is take the approach of having the content designed for the desktop squeezed into a screen the size of a candy bar. We’ve all seen this personally on our mobile devices. A tiny page display that requires a lot of pinching and zooming to try and read what has been squished beyond recognition. Hopefully we can entertain a more graceful and efficient adjustment. Ideally we should strive to match the amount and the type of content with a particular device. A smartphone is used in a different way than a desktop application. It makes sense that we try to adjust our UA UI to best fit the profile of individual devices. However, crafting individual solutions for this explosion of devices isn’t practical. We probably don’t have enough resources to put to the task of supporting dozens and hundreds of different devices. And we probably couldn’t keep up with the speed of growth anyway.
• #6: One possible solution lies with the emergence of HTML 5. Partnered with CSS3 and JavaScript, and with the support of browser makers, HTML 5 offers a way to single-source our content in an intelligent and scalable way. Using HTML elements we custom tag common objects in our user interface. We craft style sheets for major device “types”. And we use another web technology – media query – to match the device with the right style sheet. The result can be a single set of source files that can be automatically transformed to look and work differently on different devices.
• #7: This demo shows how to use a media query for a responsive, scalable design.A web app and associated web-based Help content is stored as a single set of content files on a server. The content is accompanied by several cascading style sheets. Depending on the type of device, the content is dynamically adjusted to change what is displayed and how it is displayed. Large screens can show more information and have a more robust set of navigation tools. Smaller displays hide certain feature so as to optimize the information flow for a particular display.
• #8: A set of media queries direct the device browser to load the appropriate style sheet. In this demo, there are four media queries based on the screen dimensions of four different categories of devices: a typical desktop display, a ten-inch tablet (currently iPad), a seven-inch tablet (currently Kindle Fire), and a phone.
• #9: Using just these four “buckets” supports a significant percentage of the installed user base of devices. It is likely they can continue to do so for several years. However, it will not be difficult to support emerging screen sizes with a few new buckets. We may have ones for home entertainment screens, automotive displays, and information kiosks. In addition to adjusting the look and feel of the content, the CSS can control the language through conditional text. Selectors can be set to hide and reveal variants such as “tap” and “click” based on the device type and the type of i/o.
• #10: When using an array of style sheets as described here, it can be very helpful to establish a parent CS file. This defines an overall look and feel for the family of deliverables. The typeface, color palette, and background can be defined and managed in one master file. The child style sheets inherit the global attributes and fine-tune them for their individual media types.
• #19: So as you move forward with your inevitable support for mult-screen devices, consider the following:Adopt a system that gracefully adapts its information presentation. Simplify and focus your content development with a single-source core. Adjust to varying device types by separating presentation from content with HTML, CSS, and Media Query. As a final note, look into the “mobile-first” approach being espoused by Luke Wroblewski and others.
• #20: At the Adobe Thought Leadership Day, I talked about the challenges and opportunities of supporting applications that will be displayed on devices with a wide variety of sizes. For the last thirty years or so the designers of personal computing software have had a fairly consistent canvas with which to work. Viewing screens for most computers have been in a range of approximately 10-14 diagonal inches. Screen resolutions in the past twenty years have been fairly static as well. It was possible to deliver our user experience in one presentation flavor. The UI would scale automatically from desktop to laptop and even to netbook. UA designers enjoyed not having to worry very much about how our information would look and feel on different displays.