dita and information architecture for responsive web design
DESCRIPTION
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.TRANSCRIPT
![Page 1: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/1.jpg)
DITA and Information Architecture for Responsive Web DesignWhy DITA and RWD are made for each other.
![Page 2: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/3.jpg)
The DITA GuyThe Responsive Guy
Who Are These Guys?
![Page 4: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/6.jpg)
A Short Story: Going Back to My Roots
![Page 7: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/7.jpg)
The First Professional Website I Worked On
![Page 8: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/8.jpg)
The Most Recent Website I Helped Launch
![Page 9: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/9.jpg)
Yellow Pencil Specializes in Making Responsive Websites
![Page 10: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/10.jpg)
Phil the Responsive Guy
Web + IBM + Responsive=
That DITA stuff sounds familiar
![Page 11: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/11.jpg)
The Web is Not Just on the Desktop
![Page 12: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/12.jpg)
Slide TitleSlide content goes here
image concept courtesy of Brad Frost (bradfrostweb.com)
![Page 13: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/13.jpg)
Slide TitleSlide content goes here
image concept courtesy of Brad Frost (bradfrostweb.com)
![Page 14: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/17.jpg)
Information Development Trends 2014 (Hackos)
![Page 18: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/18.jpg)
Information Development Trends 2014 (Hackos)
![Page 19: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/19.jpg)
What is Responsive Web Design (RWD)?
![Page 20: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/23.jpg)
Navigation adapts for screen size & touch
Appropriate Navigation
![Page 24: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/24.jpg)
Are Tricky
And there are some interesting approaches.
Responsive Tables
![Page 25: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/29.jpg)
Understanding and Designing for User Priorities
![Page 30: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/30.jpg)
RWD in action
![Page 31: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/31.jpg)
“Structuring” Content
Before After
![Page 32: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/32.jpg)
“Structuring” Content
• Good content should be concise
• Reuse content & structures where possible
![Page 33: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/33.jpg)
Do Cattlemen Need Mobile?
![Page 34: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/35.jpg)
<DITA> + RWD = ?
![Page 36: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/40.jpg)
Examples of How DITA + RWD Can Work Together
![Page 41: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/41.jpg)
An Example Most of You Will Know…
![Page 42: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/42.jpg)
DITA + RWD Demo
http://yellowpencil.com/dita-demo/
![Page 43: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/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 Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/44.jpg)
Questions?
![Page 45: Dita and Information Architecture for Responsive Web Design](https://reader035.vdocuments.site/reader035/viewer/2022070302/54889d27b47959140d8b5789/html5/thumbnails/45.jpg)
Phil Kneer: [email protected]: @pkneer
Keith Schengili-Roberts: [email protected]: @ditawriter
www.yellowpencil.com
Get in Touch to Find Out More