1. How to Deal with the
Explosion in Device Sizes.
Joe Welinske joe@welinske.com twitter: welinske
2. Desktop – a dozen or so variants
iPhone/iPad–6
Windows Phone ??
Android 3900+
Automobiles – ?dozens?
Televisions – ?dozens?
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. Match amount and type of content
with a device…
…without crafting solutions for each
device
responsive design adaptive content
no shrinking from desktop
no expanding from iPhone size
no cross-platform handicaps
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.
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. 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
9. 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
10.
11. Introduction to CSS Media Queries:
http://tinyurl.com/b4cx9rk
W3C Media Query Spec:
http://www.w3.org/TR/css3-mediaqueries/
iOS Developer Library: http://tinyurl.com/aycbkp4
12. Device-specific instructions with
conditional text
Interaction-specific instructions and
user-defined variables
Micro-concise text for mobile
Multiple TOCs
18. A graceful adaptation
using HTML/CSS/Media Query
to flow your crafted content
automatically and intelligently
19. How to Deal with the
Explosion in Device Sizes.
Joe Welinske joe@welinske.com twitter: welinske
Notas do Editor
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.
