Dita and Information Architecture for Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Dita and Information Architecture for Responsive Web Design

on

  • 528 views

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 ...

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.

Statistics

Views

Total Views
528
Views on SlideShare
516
Embed Views
12

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 12

http://www.slideee.com 9
https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • So what’s a DITA IA/consultant doing becoming a Web Content Strategist?Realization that many of the problems facing typical websites are common to most tech docs
  • - Circa 1995, soon after the Web became available to commercial interests- Started out as a Technical Writer, then a Webmaster- Evolved into an Information Architect, grappling with issues relating to transforming websites- Adding structure to content, always being an advocate for the end-user
  • - Most recent website I worked on; hopefully showing that I have learned a few things over the years ;-)- Much of the issues I dealt with while working on this website were structural- While the info here is not “structured”, same IA processes put to work here as for tech docs- Focus is still/always on the customer, focusing on what info they need when and where they need it
  • - This was one of the other things that appealed to me; this is clearly the way web development is going, and YP has expertise in this area- Challenges may seem different between web and tech docs, but the issues they face are fundamentally the same: - Focus on the user - Deliver info to user where and when needed - “Chunk” information into bite-sized pieces
  • DITA?I have been working on the web for a while (yes also a dinoasaur)Worked with similar structured content designing Learning tools& working on Large scale CMS projectsOur approach to Responsive & content strategy
  • You can no longer afford to assume that your customers only access the web from their desktop computers.
  • People are using the web. Excuse our Canuck-centric stats, but comparable numbers apply to the US. According to the Institute for Citizen Centered Services (2013), the three primary drivers of service satisfaction overall are: timeliness, ease of access, and positive outcome. Being able to complete a transaction through a single channel is the primary means to delivering customer satisfaction. The same study found that only 38% of participants could complete their transaction through a single channel.
  • People are using mobile. !People don’t use mobile as a stop gap until they get to a desktop. It’s their first choice.!says supermonitoring.com
  • People expect to do everything across multiple devices.!It’s critical to provide a congruent experience between all devices a customer may use to research or complete a transaction.!Stat by Google, 2012:http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  • So what is this responsive design stuff anyway?
  • This is a definition I like to use.
  • Talk about what’s going on with this single page designYou probably know media queries from the good old days of print stylesheets.Extended for width, height, resolution, portrait vs landscape etc.
  • This is reminiscent of the good old days of table based – proportional layouts and yes I am more than old enough to remember some of the awesome hacky nested table approaches to designing on the web.The key differences is that now everything including images scales, we can optimize layouts for readability and focus and we can scale imagesAnd we can adjust things to optimize the layouts for each screen width to optimize usability and readability
  • Mobile navigation has lots of options and which you choose depends on your needs and contentFooter listExpanding top levelOff canvasTop, right, leftAccordionThere is no one solution that fits all needs
  • Tables are tricky…Different approachesScrolling tablesScrolling table with fixed columnPick and choose Set which columns appear by default and which are mandatoryFlip rows and columns.Stack rowsWhich one you choose depends a lot on your content (we have a project that uses multiple approaches for different types of tables)
  • Responsive is part of the HTML 5 and modern standards based approach – basically means:IE 9 & newerMost mobile phonesCaveat for everythingUse of JS frameworks to ensure usability for older browsers:ModernizerHammer..jsEtcProgressive enhanceent
  • The Foundation of Responsive design is Semantic structured HTMLGood for usersGood for technologyGood for accessibility
  • Move away from large doc sets to smaller, more focused docsMinimalismStructured contentThere is a greater drive away from generic, all-purpose and more towards personalizationFocusing more on the situational needs of the userDelivering docs “on the go”Web is now the first place people turn to
  • You bet they do!Wireless broadband is being increasingly delivered to rural communitiesThere are few scenarios where broadband wireless access is not the norm
  • To understand why we think this, need to consider issues typically facing our usual clients: Content qualityDesign and user-experience qualityExisting CMS build efficiency
  • Most existing web-content is not well-written or focusedDITA + minimalism + end-user focus = idealBest web content needs to be built around re-usable “chunks” rather than locked in long-form “pages”This concept ought to be familiar to DITA usersIn RWD “chunks” can also be prioritized in terms of what is displayed
  • Responsive is not a one size fits all approach – it is at it’s core a philosophy that can include many other aspects Use the right approach for the right reasons.Mobile first and progressive enhancement allow focus Design for content first allows allows us to ensure we are designing for the right stuffUX Design is about appropriateness and effectiveness.RWD requires a well-thought-out, holistic design system. You have one design for all devices and contexts. Most older web properties were designed for desktop only. Again, DITA + minimalism + end-user focus = idealRWD can also be used to solve non-DITA specific issues, including: AccessibilityLocation-based content
  • Responsive is not a one size fits all approach – it is at it’s core a philosophy that can include many other aspects Use the right approach for the right reasons.Mobile first and progressive enhancement allow focus Design for content first allows allows us to ensure we are designing for the right stuffUX Design is about appropriateness and effectiveness.RWD requires a well-thought-out, holistic design system. You have one design for all devices and contexts. Most older web properties were designed for desktop only. Again, DITA + minimalism + end-user focus = idealRWD can also be used to solve non-DITA specific issues, including: AccessibilityLocation-based content
  • The following examples/demos illustrate how DITA and RWD can work with each other to deliver the best user experience for technical documentation
  • Need to tighten up the call to action

Dita and Information Architecture for Responsive Web Design Presentation Transcript

  • 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. image concept courtesy of Brad Frost (bradfrostweb.com)
  • 13. 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