DITA and Information Architecture for Responsive Web Design Why DITA and RWD are made for each other.
Dita and Information Architecture for Responsive Web Design
Dec 05, 2014
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.
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
DITA and Information Architecture for Responsive Web DesignWhy 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 TitleSlide content goes here
image concept courtesy of Brad Frost (bradfrostweb.com)
Slide TitleSlide 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: [email protected]: @pkneer
Keith Schengili-Roberts: [email protected]: @ditawriter
www.yellowpencil.com
Get in Touch to Find Out More
Related Documents
