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