October 24, 2011 Event Summary
“What Information Creators Need to Know about Designing Content for Mobile Devices”
At our lively, highly interactive October 24th event, presenters Randy Scovil and Lana Rausch fielded dozens of great questions from audience members — and still managed to cover everything they set out to do, and more! (See a summary of key takeaways, the presentation downloads, and Lana's and Randy's profiles at the bottom of the page.)
In case you missed the event, the focus was on those of us who create standard Web content or PDF documents that contain instructional material, marketing copy, user guides, software manuals, business procedures, or academic reports. The exploding popularity of mobile devices means that we need to start thinking about how to adapt these kinds of materials — or design them from scratch — for tablets and even smart phones, where feasible. Readability, usability, aesthetic design, and technical issues all come into play. All of these aspects combined will make some kinds of content adaptations work decently and others not work very well for one or more types of devices.
Here's a familiar scenario: You (an information creator) are accustomed to developing content in a Microsoft Office program (e.g., Word, Excel, PowerPoint), a graphic design package, a layout program, an HTML editor, or some other kind of authoring tool. You then typically share or deliver the outputs from these programs to their intended audiences. You might deliver them in their native formats (e.g., as Word, Excel, or PowerPoint files), as graphic images, as HTML pages, as PDF files, or as Flash files, for example.
In the "good old days," your audiences — your colleagues, clients, customers, students, etc. — viewed your content mainly on their desktop or laptop setups. All of a sudden, however, you're realizing that more and more of your viewers are trying to pull up your elegantly designed user manuals, detailed brochures, fancy PowerPoint presentations, or complex spreadsheets on their tablets and smart phones. Yikes! What does that mean?
Will your familiar output files be viewable on mobile devices? In short, some will and some won't. For example,
- Flash content won't play on Apple devices. This restriction is not likely to go away.
- Some file types require special viewers on the devices, such as Microsoft's Mobile Viewers for Microsoft Office.
- PDF files should be able to open and display on most or all devices, using the Web browser resident on that device, a plug-in to the browser, or a PDF reader.
But even if your content will open on a mobile device, does that mean it will be easy to read? Many times, the answer is no — because it wasn't designed with a small screen in mind.
This presentation explained the options for 1) continuing to create and publish content yourself so it's better optimized for mobile devices, and 2) determining when the content might be better served as a mobile app, and how to define your requirements when recruiting and working with a mobile app developer.
Part 1: How can you better optimize your content for mobile devices?
If you don't consider the visual arrangement of your content, your audiences may need to tap, gesture, or otherwise push the content all over the place to get from one end of a page to the other! Here are some of many key ideas:
- It's a whole new world with mobile devices - there are different opportunities, constraints, capabilities, and radically changed screen real estate to deal with.
- Creating mobile content means using new strategies - you'll need to think differently about your target display areas and plan accordingly.
- Multiple device usability and aesthetic design matter - your goal will be to design your content for multiple devices with different screen dimensions and viewing constraints.
- Performance considerations are critical - you'll need to know about battery life and processing speed in relation to various modes and file formats, and also whether to design the content to be downloaded or displayed online.
Part 2: How do you know when the content merits being turned into a mobile app?
Many kinds of content could justify adding a mobile app developer to your team to take the content to another level. Perhaps it's because you already know you want to create an app. But at other times, it might be a judgment call on your part, such as when you are advising a client on how to best satisfy a particular content delivery need.
In these cases, it's important to understand the design process and more about the limitations and capabilities of mobile devices so you can generate a coherent plan. It isn't about how to create the apps yourself, but with a little background on some available tools, you'll be able to better communicate to mobile app developers what you want to do.
Key Takeaways from the Discussion:
Certain ideas that emerged during the conversation were especially helpful in propelling our thinking toward the new mobile paradigm. For example:
- For smart phones in particular, displaying traditional documents is largely impractical because of screen size, even with special reader applications that are capable of opening those documents. This challenge is not nearly as great with tablets, so anticipating which mobile-user audience you aim to support is critical when strategizing your display options.
- Portable Document Format (PDF) no longer seems to be the ubiquitous and reliable "medium of exchange" in the mobile world as it has been in the desktop and laptop worlds. Although most mobile browsers can display PDF in one way or another, downloading a PDF document onto a mobile device often requires a special PDF reader app, and the process isn't nearly as straightforward.
- Downloading or caching content becomes particularly important if one wants to view something later when not within range of an accessible wi-fi network. Other tactics may become necessary, such as e-mailing documents to yourself while visiting a site, but you may need to open them from a laptop or desktop.
- The new common denominator for successfully displaying content across all or most devices is the combination of HTML and CSS (cascading style sheets). Within a set of rapidly evolving best practices, one can design content and basic navigation, as well as do automatic device detection, in a way that successfully accommodates most devices. E-readers also fall into this general category.
- The new challenge for content creators is asking ourselves what types of HTML-based content to create, and what it will look like (worst case) on the tiny real estate of smart phones. For example, should we create special, mobile-only versions of our Web sites that have a limited amount of content to display? Can (or should) we convey that content with text, images, and video only, and avoid downloadable documents (which many of us use as marketing pieces and in our professional productions)? And how will our content look on each kind of device — especially if we're aiming for a "one-source-fits-all-gracefully" approach?
- Fortunately, authoring systems such as Dreamweaver 5.5 can do much of the "heavy lifting" in helping us simulate each type of output display as we're designing content. Dreamweaver 5.5 lets us see how the same content would appear side by side on different screen sizes, resolutions, and browsers. A few other types of authoring systems (and various free tools) are finally starting to incorporate this capability. As they do, the burden will begin to shift from the content creators to the authoring systems to keep track of and handle many of the variables.
- When it comes time to graduate to an app, instead of attempting to create one-source-fits-all, HTML-based content, we have a choice between Web apps and native apps. Native apps benefit from the ability to target specific devices and operating systems (e.g., iOS or Android) to produce the most optimized, feature-rich user experience. Web apps have the advantage of being platform, device, and browser independent, but also tend to be a bit more restricted and less powerful in certain ways. Working with an app developer to implement the desired features and functions is much easier once we've had exposure to more of the terminology and a few simulation tools (see the presentation for details).
See below to access the presentation, which covers many of the fine points on these concepts and more, and includes Randy's and Lana's contact details.
Downloads & Resources
For best results, please use the following tips when downloading files:
Download Randy's and Lana's updated presentation:
Randy Scovil has taught computer science at Cuesta College and Cal Poly for over ten years. He is an active mobile developer and Chief Instigator of Yes We Do Apps, which develops apps for both the iOS and Android platforms. He taught some of the first college courses in mobile development in the country, with full-semester courses in both iOS and Android. He developed the iOS and Android apps for Cuesta College, among the first in the nation by a community college. Randy has an extensive media and marketing background, having worked in broadcasting for over 25 years, primarily as a program and marketing director for large-market radio stations. He was the play-by-play voice of Cal Poly Athletics for ten years and is the co-creator of the Cuesta TV project. He also served on the Softec Board of Directors for eight years. Randy received his Master’s Degree in Computer Science from Cal Poly and a B.A. in Telecommunications and Film from San Diego State University.
Lana Rausch trained in graphic design in the Bay Area at California College of the Arts and has been a graphic designer for over 15 years. As lead print designer at Cuesta College, she made the change to Web designer when Cuesta’s site was redone from the ground up. She has garnered numerous design awards and has spoken at technology conferences about web design and content management systems. She is employed at Cuesta College and is the owner of LR Design.
SLO TBC usually holds its events on the 4th Monday of the month from October through June. We generally take a break over the summer and resume in the fall. For more information, please contact us.