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.

1. DITA and Information
Architecture for
Responsive Web Design
Why DITA and RWD are made for
each other.

2. Keith Schengili-Roberts
• Senior Content Strategist at Yellow Pencil
• Lecturer on Information Architecture at University of
Toronto
• Runs www.DITAWriter.com
• 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. The DITA GuyThe Responsive Guy
Who Are These Guys?

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. We make clients with big
messy web problems better at
communicating on the web.
What that Really Means

6. A Short Story: Going Back
to My Roots

7. The First Professional
Website I Worked On

8. The Most Recent Website I
Helped Launch

9. Yellow Pencil Specializes in
Making Responsive Websites

10. Phil the Responsive Guy
Web + IBM + Responsive
=
That DITA stuff sounds familiar

11. The Web is Not Just
on the Desktop

12. image concept courtesy of Brad Frost (bradfrostweb.com)

13. image concept courtesy of Brad Frost (bradfrostweb.com)

14. The Web Comes First
81% of Canadians use
the web first
when looking for
services.

15. We’re at the Tipping Point
50% of smartphone
owners primarily use
their phone to
access the internet.

16. Keep it Consistent
90% of consumers who
own more than one
device use multiple
devices to accomplish
a goal.

17. Information Development
Trends 2014 (Hackos)

18. Information Development
Trends 2014 (Hackos)

19. What is Responsive Web Design (RWD)?

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. Media Queries
+
CSS
=
Fluid Layouts
customized for
screen size
How Does it Work?

22. Everything resizes (including images and
video) to fit the size of the display
Flexible Layouts & Images

23. Navigation
adapts for
screen size &
touch
Appropriate Navigation

24. Are Tricky
And there are
some interesting
approaches.
Responsive Tables

25. RWD = Standards Based & Device
Agnostic, Works on All Modern Browsers.
Cross-browser/Device
Support

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. • 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. 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. Understanding and Designing
for User Priorities

30. RWD in action

31. “Structuring” Content
Before After

32. “Structuring” Content
• Good content
should be concise
• Reuse content &
structures where
possible

33. Do Cattlemen Need Mobile?

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. <DITA> + RWD = ?

36. What You Need to Consider
• Content quality
• Design and user-experience quality
• Your CMS’ build efficiency

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. • User Centered Design
• Design for mobile first + Progressive
Enhancement
• Design For Content First
Design and
User-experience Quality

39. • Content Models and Wireframes
express the same concepts differently
• Collaboration is key
Content and UX Go Hand in
Hand

40. Examples of How DITA
+ RWD Can Work
Together

41. An Example Most of You
Will Know…

42. DITA + RWD Demo
http://yellowpencil.com/dita-demo/

43. DITA + RWD combines structured
content with user centered
experience across
all devices.
Talk to us to get the best
of both worlds.

44. Questions?

45. Phil Kneer:
phil@yellowpencil.com
Twitter: @pkneer
Keith Schengili-Roberts:
keith@yellowpencil.com
www.DITAWriter.com
Twitter: @ditawriter
www.yellowpencil.com
Get in Touch to Find Out
More