Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Information Everywhere: Flexible Content with Responsive Design


Published on

Responsive design "frees our content" to work anywhere, anytime. Adopting responsive design means that technical communicators no longer need to spend time designing and creating deliverables for different devices. Instead, we can focus on developing and delivering quality content – where and when our customers need it.

Technically, responsive design is "Responsive WEB design", so we must deliver our help to the web to take advantage of all that RWD has to offer. But this is nothing new for technical communicators, since many of us have been delivering web based help systems for many years, and mobile help for a shorter time. Providing a single responsive output gives us the opportunity to create once and deliver to thousands of devices: new ones, older ones – and ones that don’t even exist yet.

In this talk, you’ll learn: What responsive design is. * How responsive design works; a short primer. (Content stacking and the technology behind it —media queries, fluid layouts, flexible images ― so everyone is familiar with the terminology and technologies.) * Five reasons to consider responsive design (besides the flexibility). * Nine “mobile first” content development best practices for technical communicators. (Because when you write/make other changes for mobile, then the content will work well on tablets, the desktop, etc.) * Where to find examples of responsive designs, as well as responsive design resources.

Published in: Technology, Design
  • Be the first to comment

Information Everywhere: Flexible Content with Responsive Design

  1. 1. Nicky Bleiel STC Technical Communication Summit May 19, 2014 broughttoyouby Information Everywhere: Flexible Content with Responsive Design
  2. 2. A Little About Me • 19+ years of experience as a technical communicator. • President, Society for Technical Communication. • Written and designed documentation for software products in a variety of industries. • Speaker at STC, WritersUA, tcworld, LavaCon, and CIDM. • Published in STC Intercom, tcworld magazine, TechCom Manager, WritersUA website, and the Content Wrangler. • Learn more about me at
  3. 3. What We’ll Discuss • The Power of Responsive Design • Examples • Why the Time is Right for Responsive • A Responsive Primer • Adapting for Responsive • Responsive Resources
  4. 4. The Power of Being Responsive
  5. 5. One for All … and All for One With Responsive Design, Tech Comms can create and deliver one responsive output that will work on thousands of devices – new ones, old ones, even ones that don‟t exist yet.
  6. 6. It’s All About Context Progressive enhancement is a philosophy aimed at crafting experiences that serve your users by giving them access to content without technological restrictions. Steve Champeon, Web Standards Project Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson
  7. 7. Going “Beyond the Tri-Pane”
  8. 8. Responsive Examples
  9. 9. Responsive Examples • How does it work? • (TOC) • (menus on top/bottom) • (top menu > collapsing menu) • (menu stays at top and bottom. Includes breadcrumbs) (founded 960!) • (uses search as main navigation … includes an index) • (collapses) •
  10. 10. Why the Time is Right for Responsive
  11. 11. A Few Stats • 2013 marked the first year mobile devices outsold PCs. • Web traffic on mobile devices continues to grow. • Phones account for 17% of web use.
  12. 12.
  13. 13.
  14. 14. Being Responsive = Better SEO for-mobile/ desktop-mobile-etc.aspx Google SEO ranking preferences: 1. Responsive web design is Google’s preferred configuration. 2. Sites that use one URL, but dynamically serves different HTML and CSS depending on the device. 3. Sites that have separate mobile and desktop sites (different URLs). Bing also prefers responsive content, referring to it as a “one URL per content item” strategy.
  15. 15. Content Parity – Brad Frost Mobile users want everything that desktop owners have, they want one web. In the W3C Mobile Best Practices Spec: Thematic Consistency of Resource Identified by a URI
  16. 16.
  17. 17. But there’s more … • Increase in user task completion • Continuous Publishing - No longer need to build and maintain “web” and “mobile web” versions
  18. 18. A (Very) Short Primer on Responsive Design
  19. 19. Responsive Primer • Technique for designing web pages that automatically adjust to the device accessing them. • HTML doesn‟t change, the presentation adjusts based on CSS rules specified for the device/browser • Elements size, shape, and place themselves based on the width of the browser screen.
  20. 20. Responsive Primer • No content is lost; the content and page layout adjust by stacking or collapsing. • Interactions are part of responsive design −Small screens can incorporate touch interaction, while large screen can interact with mouse/keyboard, as well as touch. • Core technologies: media queries, fluid layouts, fluid images.
  21. 21. Media Queries @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } @media (min-width:1281px) { /* hi-res laptops and desktops */ } <link rel="stylesheet" media= "(min- width:320px)" href="css/mobile.css" />
  22. 22. Fluid Grids • Use percentages, not pixels. • Grid is divided into a specific number of columns. • When the device or screen size is changed, elements will adjust their widths and heights proportionally.
  23. 23.
  24. 24.
  25. 25. Adapting for Responsive Design
  26. 26. Responsive Best Practices Need to think “Mobile First” – what works well on mobile (smaller) screens will work well on tablets, the desktop, and more.
  27. 27. Simple > Complex
  28. 28. On Writing Well The baseline experience is always in the form of text. No specific technology shapes this layer, instead its success or failure relies entirely on the skills of the copywriter. Clear, well-written copy has universal device support and does wonders to improve the accessibility of the content to users. From Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson
  29. 29. UX Perspective People don‟t want to work or think more than they have to. • They will do the least work to accomplish the task • Progressive disclosure • Affordance People have limitations • Easy-to-scan • Short blocks of text/short line lengths People crave information • Learning is dopaminergic Visual systems • Use grouping • Make fonts large enough The Psychologist’s View of UX Design:
  30. 30. Best Practices for “Mobile First” • Keep image files small. Large files increase load time; 74% of mobile users will abandon a site that takes more than 5 seconds to load. • Write concisely. Mobile users are less likely to wade through content (also reduces translation costs). • Use progressive information disclosure. Show them a little and let them choose …collapsible text, inline text, and other dynamic features are options.
  31. 31. Best Practices for “Mobile First” • Improve navigation so users don‟t use the device‟s „back‟ button and navigate away from your content. • Make links easier to use. Consider making some of them buttons. Separate them. • Streamline your Table of Contents and numbered/bulleted lists. • Clean up device-specific terminology.
  32. 32. Questions? Contact information: Nicky Bleiel ComponentOne Pittsburgh, PA Twitter: @DocToHelp @nickybleiel
  33. 33. References/Further Reading Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson http://easy- Responsive Web Design by Ethan Marcotte Implementing Responsive Design by Tim Kadlec Compilation of Responsive Sites: Creating a Mobile-First Responsive Web Design by Brad Frost Responsive Patterns (a collection) Beyond Squishy: The Principles of Adaptive Design adaptive-design/ Twenty Best Responsive Web Design Examples of 2012 (Get with the Future blog): websites/ Responsive Design Newsletter:
  34. 34. References/Further Reading Mobile Responsive Design 101: responsive-design-101/ Common Responsive Web Design Pitfalls: common-responsive-web-design-pitfalls/ Unified Device Design by Luke Wroblewski Google developer guidelines for building mobile optimized websites Demonstration of content stacking “A List Apart” Responsive Web Design by Ethan Marcotte Stats on mobile device web traffic mobile-devices-up-78-year-over-year and
  35. 35. References/Further Reading How Does Responsive Design Ensure Audience Response on Mobile Devices? Business to Community Blog audience-response-mobile-devices-0758181#M5izPOSuPQzBBiK2.99 The Limits of Responsive Design responsive-design/ Why 2013 is the Year of Responsive Web Design What a Surprise: 2013 a Lousy Year for PC Sales a-surprise-2013-was-a-lousy-year-for-pc-sales-7000025002/ Gartner Analysts on PC Slump (ZDnet) analysts-suspect-pc-slump-has-bottomed-out-despite-q4-decline-7000024993/ How Responsive Design Improves User Task Completion completion/ The Psychologist’s View of UX Design psychologists-view-of-ux-design Am I Responsive? Building Websites Optimized for all Platforms (Bing Webmaster Blog) websites-optimized-for-all-platforms-desktop-mobile-etc.aspx