Embed Size (px)
Citation preview
DITA and Information
Architecture for
Responsive Web Design
Why DITA and RWD are made for
each other.
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?
The DITA GuyThe Responsive Guy
Who Are These Guys?
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
We make clients with big
messy web problems better at
communicating on the web.
What that Really Means
A Short Story: Going Back
to My Roots
The First Professional
Website I Worked On
The Most Recent Website I
Helped Launch
Yellow Pencil Specializes in
Making Responsive Websites
Phil the Responsive Guy
Web + IBM + Responsive
=
That DITA stuff sounds familiar
The Web is Not Just
on the Desktop
Slide Title
Slide content goes here
image concept courtesy of Brad Frost (bradfrostweb.com)
Slide Title
Slide content goes here
image concept courtesy of Brad Frost (bradfrostweb.com)
The Web Comes First
81% of Canadians use
the web first
when looking for
services.
We’re at the Tipping Point
50% of smartphone
owners primarily use
their phone to
access the internet.
Keep it Consistent
90% of consumers who own more than one device use multiple devices to accomplish a goal.
Information Development
Trends 2014 (Hackos)
Information Development
Trends 2014 (Hackos)
What is Responsive Web Design (RWD)?
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)?
Media Queries
+CSS
=Fluid Layouts
customized for
screen size
How Does it Work?
Everything resizes (including images and
video) to fit the size of the display
Flexible Layouts & Images
Navigation
adapts for
screen size &
touch
Appropriate Navigation
Are Tricky
And there are
some interesting
approaches.
Responsive Tables
RWD = Standards Based & Device Agnostic,
Works on All Modern Browsers.
Cross-browser/Device
Support
Benefits of Responsive
Web Design
• Reduces long-term costs of ownership
• Streamlines authoring/content management
• Reach a wider audience/universal access to your
content
• 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
RWD can be combined with DITA content
• Create a RWD framework and templates
• Generate HTML based on your current
workflow
RWD and DITA HTML
Understanding and Designing
for User Priorities
RWD in action
“Structuring” Content
Before After
“Structuring” Content
• Good content
should be concise
• Reuse content &
structures where
possible
Do Cattlemen Need Mobile?
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
<DITA> + RWD = ?
What You Need to Consider
• Content quality
• Design and user-experience quality
• Your CMS’ build efficiency
• 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
• User Centered Design
• Design for mobile first + Progressive
Enhancement
• Design For Content First
Design and
User-experience Quality
• Content Models and Wireframes
express the same concepts differently
• Collaboration is key
Content and UX Go Hand in
Hand
Examples of How DITA
+ RWD Can Work
Together
An Example Most of You
Will Know…
DITA + RWD Demo
http://yellowpencil.com/dita-demo/
DITA + RWD combines structured
content with user centered
experience across
all devices.
Talk to us to get the best
of both worlds.
Questions?
Phil Kneer:
Twitter: @pkneer
Keith Schengili-Roberts:
www.DITAWriter.com
Twitter: @ditawriter
www.yellowpencil.com
Get in Touch to Find Out
More
