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.

Dita and Information Architecture for Responsive Web Design


Published on

Increasingly people are reading your technical content using a mobile device. How can you ensure that your DITA-based content can be read equally-well by a lineman using his weatherproofed tablet 18ft above the street, or an electronics engineer using her smartphone in a clean-room environment?

The answer: responsive content. But designing effective responsive content is not just a matter of picking an HTML template and hoping for the best: you need to think about how your content will be presented, its priority to the user and how they can navigate through it.

In this presentation Keith Schengili-Roberts and Phil Kneer from Yellow Pencil will talk about the information architecture considerations behind the creation of effective responsive design for technical content.

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

Dita and Information Architecture for Responsive Web Design

  1. 1. DITA and Information Architecture for Responsive Web Design Why DITA and RWD are made for each other.
  2. 2. Keith Schengili-Roberts • Senior Content Strategist at Yellow Pencil • Lecturer on Information Architecture at University of Toronto • Runs • DITA XML training/consulting Phil Kneer • User Experience Designer at Yellow Pencil • 15+ years of experience in communication design, branding, responsive web design and coding • Self-professed “design geek” with a passion for creating usable things that solve real problems Who Are These Guys?
  3. 3. The DITA GuyThe Responsive Guy Who Are These Guys?
  4. 4. We are a web design agency that focuses on content first, responsive design projects. We work with large Enterprise CMS driven sites and solve large, messy, complex content and usability issues. Who is Yellow Pencil
  5. 5. We make clients with big messy web problems better at communicating on the web. What that Really Means
  6. 6. A Short Story: Going Back to My Roots
  7. 7. The First Professional Website I Worked On
  8. 8. The Most Recent Website I Helped Launch
  9. 9. Yellow Pencil Specializes in Making Responsive Websites
  10. 10. Phil the Responsive Guy Web + IBM + Responsive = That DITA stuff sounds familiar
  11. 11. The Web is Not Just on the Desktop
  12. 12. image concept courtesy of Brad Frost (
  13. 13. image concept courtesy of Brad Frost (
  14. 14. The Web Comes First 81% of Canadians use the web first when looking for services.
  15. 15. We’re at the Tipping Point 50% of smartphone owners primarily use their phone to access the internet.
  16. 16. Keep it Consistent 90% of consumers who own more than one device use multiple devices to accomplish a goal.
  17. 17. Information Development Trends 2014 (Hackos)
  18. 18. Information Development Trends 2014 (Hackos)
  19. 19. What is Responsive Web Design (RWD)?
  20. 20. Responsive Web Design (RWD) uses a single set of code to deliver a cohesive web experience to all users, no matter what their connection or screen size What is Responsive Web Design (RWD)?
  21. 21. Media Queries + CSS = Fluid Layouts customized for screen size How Does it Work?
  22. 22. Everything resizes (including images and video) to fit the size of the display Flexible Layouts & Images
  23. 23. Navigation adapts for screen size & touch Appropriate Navigation
  24. 24. Are Tricky And there are some interesting approaches. Responsive Tables
  25. 25. RWD = Standards Based & Device Agnostic, Works on All Modern Browsers. Cross-browser/Device Support
  26. 26. Benefits of Responsive Web Design • Reduces long-term costs of ownership • Streamlines authoring/content management • Reach a wider audience/universal access to your content
  27. 27. • The RWD process should focus on the needs of your audience • IA considerations come into play dependent on how/when/why users are viewing your content and content priority RWD is Simple – not easy
  28. 28. RWD can be combined with DITA content • Create a RWD framework and templates • Generate HTML based on your current workflow RWD and DITA HTML
  29. 29. Understanding and Designing for User Priorities
  30. 30. RWD in action
  31. 31. “Structuring” Content Before After
  32. 32. “Structuring” Content • Good content should be concise • Reuse content & structures where possible
  33. 33. Do Cattlemen Need Mobile?
  34. 34. RWD and Content Priority Desktop design: Call to action priority #1 Content elements not prioritized: Call to action is lost Content elements prioritized: Call to action remains priority #1
  35. 35. <DITA> + RWD = ?
  36. 36. What You Need to Consider • Content quality • Design and user-experience quality • Your CMS’ build efficiency
  37. 37. • Content needs to be well-written and focused on user’s needs • Think in terms of re-usable “chunks” (content modelling) • Think of prioritization in terms of what is displayed Content Quality
  38. 38. • User Centered Design • Design for mobile first + Progressive Enhancement • Design For Content First Design and User-experience Quality
  39. 39. • Content Models and Wireframes express the same concepts differently • Collaboration is key Content and UX Go Hand in Hand
  40. 40. Examples of How DITA + RWD Can Work Together
  41. 41. An Example Most of You Will Know…
  42. 42. DITA + RWD Demo
  43. 43. DITA + RWD combines structured content with user centered experience across all devices. Talk to us to get the best of both worlds.
  44. 44. Questions?
  45. 45. Phil Kneer: Twitter: @pkneer Keith Schengili-Roberts: Twitter: @ditawriter Get in Touch to Find Out More