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.

1. www.doctohelp.com
Nicky Bleiel
STC Technical Communication Summit
May 19, 2014
broughttoyouby
Information
Everywhere:
Flexible Content with
Responsive Design

2. www.doctohelp.com
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 nickybleiel.com.

3. www.doctohelp.com
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. www.doctohelp.com
The Power of
Being Responsive

5. www.doctohelp.com
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. www.doctohelp.com
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
http://easy-readers.net/books/adaptive-web-design/

7. www.doctohelp.com
Going “Beyond the Tri-Pane”

8. www.doctohelp.com
Responsive
Examples

9. www.doctohelp.com
Responsive Examples
http://www.microsoft.com/
• How does it work? http://moz.com/blog/seo-of-responsive-web-design
• http://docs.couchdb.org/en/latest/intro/why.html (TOC)
• http://www.lycos.com/ (menus on top/bottom)
• http://getbootstrap.com/2.3.2/getting-started.html#download-bootstrap
(top menu > collapsing menu)
• http://www.westminster-abbey.org/home
(menu stays at top and bottom. Includes breadcrumbs) (founded 960!)
• http://forum.camendesign.com/
(uses search as main navigation … includes an index)
• http://showme.doctohelp.com/WidgetExplorer/ (collapses)
• http://showme.doctohelp.com/wpghres1/

10. www.doctohelp.com
Why the Time is
Right for
Responsive

11. www.doctohelp.com
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. www.doctohelp.com

13. www.doctohelp.com

14. www.doctohelp.com
Being Responsive = Better SEO
http://www.smartinsights.com/search-engine-optimisation-seo/mobile-seo/googles-changing-recommendations-on-seo-
for-mobile/
http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.html
http://www.bing.com/blogs/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-platforms-
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. www.doctohelp.com
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
http://bradfrostweb.com/blog/mobile/content-parity/

16. www.doctohelp.com
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

17. www.doctohelp.com
But there’s more …
• Increase in user task completion
• Continuous Publishing - No longer need to
build and maintain “web” and “mobile web”
versions

18. www.doctohelp.com
A (Very) Short
Primer on
Responsive Design

19. www.doctohelp.com
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. www.doctohelp.com
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. www.doctohelp.com
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 */ }
http://stackoverflow.com/questions/16704243/best-widths-for-apply-media-queries-for-a-responsive-website-satisfying-portrait
<link rel="stylesheet" media= "(min-
width:320px)" href="css/mobile.css" />

22. www.doctohelp.com
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.
http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/

23. www.doctohelp.com

24. www.doctohelp.com
http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design

25. www.doctohelp.com
Adapting for
Responsive Design

26. www.doctohelp.com
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. www.doctohelp.com
Simple > Complex

28. www.doctohelp.com
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. www.doctohelp.com
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: http://uxmag.com/print/32025

30. www.doctohelp.com
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. www.doctohelp.com
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. www.doctohelp.com
Questions?
Contact information:
Nicky Bleiel
ComponentOne
Pittsburgh, PA
nickyb@componentone.com
www.doctohelp.com
Twitter: @DocToHelp
@nickybleiel

33. www.doctohelp.com
References/Further Reading
Adaptive Web Design: Crafting Rich Experiences with Progressive
Enhancement by Aaron Gustafson http://easy-
readers.net/books/adaptive-web-design/
Responsive Web Design by Ethan Marcotte
http://www.abookapart.com/products/responsive-web-design
Implementing Responsive Design by Tim Kadlec
http://www.implementingresponsivedesign.com/
Compilation of Responsive Sites: http://mediaqueri.es/
Creating a Mobile-First Responsive Web Design by Brad Frost
http://www.html5rocks.com/en/mobile/responsivedesign/
Responsive Patterns (a collection)
http://codepen.io/bradfrost/full/xkcBn
Beyond Squishy: The Principles of Adaptive Design
http://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-
adaptive-design/
Twenty Best Responsive Web Design Examples of 2012 (Get with
the Future blog): http://socialdriver.com/2012/07/20-best-responsive-
websites/
Responsive Design Newsletter: http://responsivedesignweekly.com/

34. www.doctohelp.com
References/Further Reading
Mobile Responsive Design 101: http://www.copyblogger.com/mobile-
responsive-design-101/
Common Responsive Web Design Pitfalls: http://www.sitepoint.com/4-
common-responsive-web-design-pitfalls/
Unified Device Design by Luke Wroblewski
http://static.lukew.com/unified_device_design.png
Google developer guidelines for building mobile optimized websites
https://developers.google.com/webmasters/smartphone-sites/
Demonstration of content stacking
http://www.jordanm.co.uk/lab/contentchoreography
“A List Apart” Responsive Web Design by Ethan Marcotte
http://alistapart.com/article/responsive-web-design
Stats on mobile device web traffic
http://www.marketingprofs.com/charts/2013/11010/web-traffic-from-
mobile-devices-up-78-year-over-year and
http://mashable.com/2013/08/20/mobile-web-traffic/

35. www.doctohelp.com
References/Further Reading
How Does Responsive Design Ensure Audience Response on Mobile
Devices? Business to Community Blog
http://www.business2community.com/marketing/responsive-design-ensure-
audience-response-mobile-devices-0758181#M5izPOSuPQzBBiK2.99
The Limits of Responsive Design http://www.paulolyslager.com/limits-of-
responsive-design/
Why 2013 is the Year of Responsive Web Design
http://mashable.com/2012/12/11/responsive-web-design/
What a Surprise: 2013 a Lousy Year for PC Sales http://www.zdnet.com/what-
a-surprise-2013-was-a-lousy-year-for-pc-sales-7000025002/
Gartner Analysts on PC Slump (ZDnet) http://www.zdnet.com/gartner-
analysts-suspect-pc-slump-has-bottomed-out-despite-q4-decline-7000024993/
How Responsive Design Improves User Task Completion
http://www.paulolyslager.com/how-responsive-design-improves-user-task-
completion/
The Psychologist’s View of UX Design http://uxmag.com/articles/the-
psychologists-view-of-ux-design
Am I Responsive? http://ami.responsivedesign.is/
Building Websites Optimized for all Platforms (Bing Webmaster Blog)
http://www.bing.com/blogs/site_blogs/b/webmaster/archive/2012/03/07/building-
websites-optimized-for-all-platforms-desktop-mobile-etc.aspx