Information Everywhere: Flexible Content with Responsive Design

2,465 views

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,465
On SlideShare
0
From Embeds
0
Number of Embeds
663
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Information Everywhere: Flexible Content with Responsive Design

  1. 1. www.doctohelp.com Nicky Bleiel STC Technical Communication Summit May 19, 2014 broughttoyouby Information Everywhere: Flexible Content with Responsive Design
  2. 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. 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. 4. www.doctohelp.com The Power of Being Responsive
  5. 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. 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. 7. www.doctohelp.com Going “Beyond the Tri-Pane”
  8. 8. www.doctohelp.com Responsive Examples
  9. 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. 10. www.doctohelp.com Why the Time is Right for Responsive
  11. 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. 12. www.doctohelp.com
  13. 13. www.doctohelp.com
  14. 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. 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. 16. www.doctohelp.com http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  17. 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. 18. www.doctohelp.com A (Very) Short Primer on Responsive Design
  19. 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. 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. 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. 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. 23. www.doctohelp.com
  24. 24. www.doctohelp.com http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design
  25. 25. www.doctohelp.com Adapting for Responsive Design
  26. 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. 27. www.doctohelp.com Simple > Complex
  28. 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. 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. 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. 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. 32. www.doctohelp.com Questions? Contact information: Nicky Bleiel ComponentOne Pittsburgh, PA nickyb@componentone.com www.doctohelp.com Twitter: @DocToHelp @nickybleiel
  33. 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. 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. 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

×