Multi-screen Content Authoring

815 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
815
On SlideShare
0
From Embeds
0
Number of Embeds
421
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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?
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • Multi-screen Content Authoring

    1. 1. How to Deal with the Explosion in Device Sizes.Joe Welinske joe@welinske.com  twitter: welinske
    2. 2.  Desktop – a dozen or so variants iPhone/iPad–6 Windows Phone ?? Android 3900+ Automobiles – ?dozens? Televisions – ?dozens?
    3. 3. Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit adipisicing elit, sed do eiusmod tempor amet, consectetur dolore magna aliqua. Ut incididunt ut labore et adipisicing elit, sed Screen dimensions do eiusmod tempor quis nostrud ut enim ad minim veniam, incididunt exercitation ullamco laboris aliqua. Ut labore et dolore magnanisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in enim ad minim veniam, quis nostrud reprehenderit in voluptate velit esse cillum exercitation ullamco laboris nisi ut Screen resolution dolore eu fugiat nulla pariatur. Excepteur sint aliquip ex ea commodo consequat. occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit in reprehenderit Duis aute irure dolor anim id est laborum. Lorem ipsum dolor sit esse cillum dolore in voluptate velit amet, consectetur UI Elements adipisicing elit, sed do eiusmod tempor eu fugiatut labore et dolore magna aliqua. Ut incididunt nulla pariatur. Excepteur sint occaecat cupidatatnostrud enim ad minim veniam, quis non proident, sunt in laboris nisi ut aliquip ex exercitation ullamco culpa qui officia ea commodo consequat. Duis est irure dolor deserunt mollit anim id aute laborum. in Proprietary OS reprehenderit in voluptate velit esse cillum Lorem ipsum dolor sit dolore eu fugiat nulla pariatur. Excepteur sint amet, consectetur adipisicing elit, sed occaecat cupidatat non proident, sunt in culpa do officia deserunt mollit anim id est ut qui eiusmod tempor incididunt laborum. Components labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Rapid interation  – approx. once a year per device
    4. 4.  Match amount and type of content with a device… …without crafting solutions for each deviceresponsive design  adaptive content  no shrinking from desktop  no expanding from iPhone size  no cross-platform handicaps
    5. 5.  HTML5/CSS (DIVs) Style sheets for device “types” Media queries match SS with type Tag all objects in source “Structured Authoring” Result  Single source content file  Looks/works differently on different devices.
    6. 6. Samsung Nokia Galaxy Kindle iPhone Note Lumia Tab Fire cs cs 7” Phone Tablet Source cs cs 10” Desktop Tablet 1080 x 1280 x Galaxy iPad 2 iPad 3 724 720 Tab
    7. 7. Samsung Nokia Galaxy Kindle iPhone Note Lumia Tab Fire cs cs 7” Phone Tablet Source cs cs 10” Desktop Tablet 1080 x 1280 x Galaxy iPad 2 iPad 3 724 720 Tab
    8. 8. Samsung Nokia Galaxy Kindle iPhone Note Lumia Tab Fire cs cs 7” Phone Tablet Parent CS Source cs cs 10” Desktop Tablet 1080 x 1280 x Galaxy iPad 2 iPad 3 724 720 Tab
    9. 9. Introduction to CSS Media Queries:http://tinyurl.com/b4cx9rkW3C Media Query Spec:http://www.w3.org/TR/css3-mediaqueries/iOS Developer Library: http://tinyurl.com/aycbkp4
    10. 10.  Device-specific instructions with conditional text Interaction-specific instructions and user-defined variables Micro-concise text for mobile Multiple TOCs
    11. 11. PhoneLaptop TV
    12. 12. Tablet Car PhoneLaptop TV
    13. 13.  A graceful adaptation using HTML/CSS/Media Query to flow your crafted content automatically and intelligently
    14. 14. How to Deal with the Explosion in Device Sizes.Joe Welinske joe@welinske.com  twitter: welinske

    ×