The document discusses how DITA (Darwin Information Typing Architecture) content and responsive web design (RWD) can work together effectively. It provides background on Yellow Pencil, a web design agency specialized in content-first and responsive design projects. The presentation then covers key principles of RWD including fluid layouts, flexible images and navigation, and benefits such as universal access across devices. Examples are given of how DITA content structures can map to RWD frameworks to generate optimized HTML for different screen sizes.

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. Slide Title
Slide content goes here
image concept courtesy of Brad Frost (bradfrostweb.com)

13. Slide Title
Slide content goes here
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