Better DITA Graphics 
for a multi-screen world 
Joe Pairman
Implemented DITA at HTC 
Jointly with SDL, designed 
image rendition plugin for 
SDL LiveContent Architect 
Designed mobil...
I’ll provide a complete recipe for 
defining an automated graphics 
solution…
I’ll provide a complete recipe for 
defining an automated graphics 
solution… 
! 
! 
…but first some background on 
why we...
Visual communication has always 
been important in tech comm
Graphics illustrate relationships, 
demonstrate subtle concepts 
“territorial water 
claims of 3nm 
and 12 nm” 
“continuou...
Graphics illustrate relationships, 
demonstrate subtle concepts 
“territorial water 
claims of 3nm 
and 12 nm” 
“continuou...
We're much more visual 
these days
Photo 
sharing has 
exploded
Even sober 
statistics 
need an 
over-the-top 
font and 
background
Our end users clamor for more 
screenshots and videos
Strong branding demands 
high-quality images
We're more web-y too
Primary 
place we 
look for 
content is 
on the web
Graphics 
may boost 
visits from 
organic 
search
And, of 
course, 
“mobile”
Not tame little 
“mobile” tasks 
but the 
whole thing
So change the navigation, 
but don't leave things out!
Responsive design is mainstream
It's challenging to 
cater for multiple 
screens
Display 
size 
Images should fit 
containers, but …
Display 
size 
…not all images 
should use the full 
container width
Display 
size 
…not all images 
should use the full 
container width
High resolution displays 
- low res images are blurry if scaled up 
- high res images need extra bandwidth & storage
High resolution displays 
- low res images are blurry if scaled up 
- high res images need extra bandwidth & storage 
- we...
High resolution displays 
- low res images are blurry if scaled up 
- high res images need extra bandwidth & storage 
- we...
“Art direction” 
- key visual info should be clear no matter the image 
display size
“Art direction” 
- key visual info should be clear no matter the image 
display size 
<picture> 
<source media="(min-width...
How do DITA 
users cater for 
multiple screens?
Graphics survey: less than half 
cater for multiple screen sizes
More than 
half of 
survey 
respondents 
feel it's 
difficult
Graphics production seen as 
inefficient and expensive 
Cost and effort of localizing graphics, especially 
screenshots, i...
We tweak 
manually
We tweak 
manually
With graphics, 
we’re still stuck in 
DTP-land!
It doesn't scale across different 
outputs and screen sizes 
2 minutes tweaking × 
50 images per publication × 
3 outputs ...
Nearly half 
would use 
more 
graphics if it 
were easier
Just as with our textual content, 
our graphics need automation
Using any tool with a command-line 
interface…
We can 
scale or 
crop
…even preserving important 
information automatically
We can 
automate 
vector 
graphics 
conversions 
too
Over half of 
respondents 
use SVG
Some felt it could be easier to 
work with SVG... 
It would be great to use a vector graphic and have it 
automatically si...
... in fact, SVG resizing can be 
automated fairly easily
And it’s easy to rasterize vector 
graphics automatically
... we could automate the 
production of SVGs …
… for example, to highlight 
important info 
These Wikipedia and Wikimedia Commons images are from the user Chris 73 and a...
…or to make translation easier
We could even have dynamically 
regenerating images
We could even have dynamically 
regenerating images
… which is all fine, but how do 
your image editing tools know 
what transformation to do and 
what parameters to use?
IA to the rescue!
What did 
we do to 
overcome 
DTP?
We tagged textual content 
semantically
We 
modularized 
and 
chunked 
topics
We defined pieces of 
information for the role they 
played (not how they should 
look in any particular situation)
We can do this with graphics. 
They can be grouped by role… 
Icons Simple screenshots Diagrams
…and processed automatically 
based on rules you define 
If the source 
graphic is a: 
And the output 
format is: 
Do this...
Defining the rules.
1. Audit graphics & define the 
roles they play 
2. Define content types and 
output requirements 
3. Research transformat...
Auditing graphics is an excellent 
chance to apply minimalism
Categorize remaining images by 
the visual role they play 
Examples: 
Role Description 
Inline icon Needs to fit well into...
A role is not the same as a 
graphics format! 
We can’t treat these PNGs the same way 
Icons Simple screenshots
1. Audit graphics & define the 
roles they play 
2. Define content types and 
output requirements 
3. Research transformat...
Icons need 
to fit 
comfortably 
in body text 
or tables
Keep proportion across whole 
docset / repository?
Resize or highlight diagrams?
Source image Output type and corresponding renditions 
PDF Web (lo-res) Web (hi-res) 
Inline icon PNG Control display heig...
1. Audit graphics & define the 
roles they play 
2. Define content types and 
output requirements 
3. Research transformat...
Research the commands & 
parameters you’ll use
Source image Output type and corresponding renditions 
PDF Web (lo-res) Web (hi-res) 
Inline icon PNG 1. Use ImageMagick t...
1. Audit graphics & define the 
roles they play 
2. Define content types and 
output requirements 
3. Research transformat...
Filename suffixes are simple and 
reliable 
Source image Image suffix 
Inline icon -inlineicon 
Definition table icon -tab...
What next?
1. Audit graphics & define the 
roles they play 
2. Define content types and 
output requirements 
3. Research transformat...
Two main approaches: 
1. Store the source image; 
render output images when 
publishing 
2. Render images on import to 
CC...
Approach 1: Store the source 
image; render output images 
when publishing 
Render 
graphics 
Import 
graphics 
Store in 
...
Approach 1: Store the source 
image; render output images 
when publishing 
• Pros: more flexible 
• Cons: slower publishi...
Approach 2: Render images on 
import to CCMS (storing source 
image too) 
Render 
graphics 
Store in 
CMS 
Import 
graphic...
Approach 2: Render images on 
import to CCMS (importing 
source image too) 
• Pros: publishing performance 
better, can au...
Use a config 
file format 
— there 
will be 
tweaks!
1. Audit graphics & define the 
roles they play 
2. Define content types and 
output requirements 
3. Research transformat...
Results
By applying IA techniques to 
graphics transformations…
…we get a pushbutton solution 
that’s vastly more efficient. 
2 minutes tweaking × 
50 images per publication × 
3 outputs...
As with move from DTP to 
structured authoring, content 
developers may feel less control 
9QVPQVYGCMKPI!
But automation creates space, 
time for real design work
…and gives 
customers 
all the info 
they need, 
where they 
need it.
Questions? Thoughts? 
joe.pairman@mekon.com
Acknowledgments 
Slide 11: Video by Mark Poston. 
http://goo.gl/HUvvwk 
Slide 18: Graphic by Strangeloop. 
http://goo.gl/u...
Better DITA Graphics for a Multi-Screen World
Upcoming SlideShare
Loading in …5
×

Better DITA Graphics for a Multi-Screen World

1,472 views

Published on

Good visual communication is essential, yet graphics are often an afterthought in DITA implementations. We need a new approach to make them work well over an increasing range of screen sizes, devices, and contexts.

Graphics illustrate relationships, demonstrate subtle concepts, and build emotional connections with brands. But they have to look clear and attractive over many screen sizes and software tools. As our image libraries grow, we can't keep manually tweaking different versions for different outputs.

Image processing tools are smart enough to handle this automatically; we just need to set up the rules. But the key to success is information architecture: the same needs analysis, planning, and content type definitions that we'd apply to any structured content solution.

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,472
On SlideShare
0
From Embeds
0
Number of Embeds
228
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Better DITA Graphics for a Multi-Screen World

  1. 1. Better DITA Graphics for a multi-screen world Joe Pairman
  2. 2. Implemented DITA at HTC Jointly with SDL, designed image rendition plugin for SDL LiveContent Architect Designed mobile content delivery platform Now consulting at Mekon
  3. 3. I’ll provide a complete recipe for defining an automated graphics solution…
  4. 4. I’ll provide a complete recipe for defining an automated graphics solution… ! ! …but first some background on why we really need to do this.
  5. 5. Visual communication has always been important in tech comm
  6. 6. Graphics illustrate relationships, demonstrate subtle concepts “territorial water claims of 3nm and 12 nm” “continuous control over valve lift” “the icon that looks like two arrows merging”
  7. 7. Graphics illustrate relationships, demonstrate subtle concepts “territorial water claims of 3nm and 12 nm” “continuous control over valve lift” “the icon that looks like two arrows merging”
  8. 8. We're much more visual these days
  9. 9. Photo sharing has exploded
  10. 10. Even sober statistics need an over-the-top font and background
  11. 11. Our end users clamor for more screenshots and videos
  12. 12. Strong branding demands high-quality images
  13. 13. We're more web-y too
  14. 14. Primary place we look for content is on the web
  15. 15. Graphics may boost visits from organic search
  16. 16. And, of course, “mobile”
  17. 17. Not tame little “mobile” tasks but the whole thing
  18. 18. So change the navigation, but don't leave things out!
  19. 19. Responsive design is mainstream
  20. 20. It's challenging to cater for multiple screens
  21. 21. Display size Images should fit containers, but …
  22. 22. Display size …not all images should use the full container width
  23. 23. Display size …not all images should use the full container width
  24. 24. High resolution displays - low res images are blurry if scaled up - high res images need extra bandwidth & storage
  25. 25. High resolution displays - low res images are blurry if scaled up - high res images need extra bandwidth & storage - we need appropriate image versions per device
  26. 26. High resolution displays - low res images are blurry if scaled up - high res images need extra bandwidth & storage - we need appropriate image versions per device <img src="testimage.png" srcset=“testimage@2x.png 2x, testimage@3x.png 3x" width="500px" alt=“Test image">
  27. 27. “Art direction” - key visual info should be clear no matter the image display size
  28. 28. “Art direction” - key visual info should be clear no matter the image display size <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt=“Hikers at Rattlesnake Ridge."> </picture>
  29. 29. How do DITA users cater for multiple screens?
  30. 30. Graphics survey: less than half cater for multiple screen sizes
  31. 31. More than half of survey respondents feel it's difficult
  32. 32. Graphics production seen as inefficient and expensive Cost and effort of localizing graphics, especially screenshots, is a major reason they are discouraged here, though some teams use them. For html output in DITA we have to convert to a viewable format. We are still determining the best way to do this for our html output (source in what we upload vs converting while publishing to html). We conditionalize out most graphics for HTML output.
  33. 33. We tweak manually
  34. 34. We tweak manually
  35. 35. With graphics, we’re still stuck in DTP-land!
  36. 36. It doesn't scale across different outputs and screen sizes 2 minutes tweaking × 50 images per publication × 3 outputs × 10 languages = 50 hours
  37. 37. Nearly half would use more graphics if it were easier
  38. 38. Just as with our textual content, our graphics need automation
  39. 39. Using any tool with a command-line interface…
  40. 40. We can scale or crop
  41. 41. …even preserving important information automatically
  42. 42. We can automate vector graphics conversions too
  43. 43. Over half of respondents use SVG
  44. 44. Some felt it could be easier to work with SVG... It would be great to use a vector graphic and have it automatically size depending on the output. Or have vector graphics rasterize at build time.
  45. 45. ... in fact, SVG resizing can be automated fairly easily
  46. 46. And it’s easy to rasterize vector graphics automatically
  47. 47. ... we could automate the production of SVGs …
  48. 48. … for example, to highlight important info These Wikipedia and Wikimedia Commons images are from the user Chris 73 and are freely available at //commons.wikimedia.org/wiki/File:Map_of_Sealand.png under the creative commons cc-by-sa 3.0 license.
  49. 49. …or to make translation easier
  50. 50. We could even have dynamically regenerating images
  51. 51. We could even have dynamically regenerating images
  52. 52. … which is all fine, but how do your image editing tools know what transformation to do and what parameters to use?
  53. 53. IA to the rescue!
  54. 54. What did we do to overcome DTP?
  55. 55. We tagged textual content semantically
  56. 56. We modularized and chunked topics
  57. 57. We defined pieces of information for the role they played (not how they should look in any particular situation)
  58. 58. We can do this with graphics. They can be grouped by role… Icons Simple screenshots Diagrams
  59. 59. …and processed automatically based on rules you define If the source graphic is a: And the output format is: Do this: Screenshot from a tablet with display of 768 × 1024 pixels PDF Set nominal PPI so that 768 pixels will measure 1.8 inches (i.e. 427 PPI) Icon intended for use inline Web Create a “regular” version 25px high and a 2× “retina” version 50px high, naming them so responsive image delivery solution can use them
  60. 60. Defining the rules.
  61. 61. 1. Audit graphics & define the roles they play 2. Define content types and output requirements 3. Research transformations 4. Define naming scheme
  62. 62. Auditing graphics is an excellent chance to apply minimalism
  63. 63. Categorize remaining images by the visual role they play Examples: Role Description Inline icon Needs to fit well into inline text. Definition table icon Larger than inline icons, as the extra space in a table allows for more detail to be shown. Screenshot Can take up to the whole column / container width, but care needed so it doesn’t look out of proportion with the text. System diagram Most of these have significant detail. Care needed to preserve this detail on a small screen.
  64. 64. A role is not the same as a graphics format! We can’t treat these PNGs the same way Icons Simple screenshots
  65. 65. 1. Audit graphics & define the roles they play 2. Define content types and output requirements 3. Research transformations 4. Define naming scheme
  66. 66. Icons need to fit comfortably in body text or tables
  67. 67. Keep proportion across whole docset / repository?
  68. 68. Resize or highlight diagrams?
  69. 69. Source image Output type and corresponding renditions PDF Web (lo-res) Web (hi-res) Inline icon PNG Control display height. Inline icons should be as large as possible without overlapping or overly pushing out surrounding lines of text. Table icons should be bigger but still a set height. Needs further research as to exact sizes. Definition table icon Smartphone screenshot Control display size. Size should be based on 1.8 inches wide for an uncropped, portrait aspect screenshot. Preserve fidelity of original image. Control display size. Size should be based on 280 pixels wide for an uncropped, portrait aspect screenshot. !( Cropped images should be proportionately smaller.) Control display size. Size should be based on 560 pixels wide for an uncropped, portrait aspect screenshot. !( Cropped images should be proportionately smaller.) Tablet screenshot Diagram SVG Use full container width. In a later phase, consider whether highlighting can be scripted in illustration tool.
  70. 70. 1. Audit graphics & define the roles they play 2. Define content types and output requirements 3. Research transformations 4. Define naming scheme
  71. 71. Research the commands & parameters you’ll use
  72. 72. Source image Output type and corresponding renditions PDF Web (lo-res) Web (hi-res) Inline icon PNG 1. Use ImageMagick to get height identify -format %h !input_file.png 2. Divide height by specified !display size to get required PPI 3. Set PPI convert -units PixelsPerInch -density required_ppi input_file.png output_file.png Use ImageMagick to set height as specified per content type Definition convert -resize required_height input_file.png table icon Smartphone screenshot Use ImageMagick to set PPI as specified per content type convert -units PixelsPerInch -density required_ppi input_file.png output_file.png 1. Use ImageMagick to get current width !identify -format %w input_file.png 2. Calculate what width would be after required percentage resize specified per content type. If it would be over specified max width, then set max width as the r!equired width 3. Use ImageMagick to resize and convert to Q90 JPG convert -resize required_width -quality 90 -flatten input_file.png output_file.jpg Tablet screenshot Diagram SVG [Set width with custom XSL] Use Batik rasterizer to convert image to Q90 JPG and resize to a fixed specified width java -jar "%ProgramFiles%batik-1.7batik-rasterizer.jar" -m image/jpg -bg background_color -w required_width -q 0.9 input_file.svg
  73. 73. 1. Audit graphics & define the roles they play 2. Define content types and output requirements 3. Research transformations 4. Define naming scheme
  74. 74. Filename suffixes are simple and reliable Source image Image suffix Inline icon -inlineicon Definition table icon -tableicon Smartphone screenshot -640x1136screenshot Tablet screenshot -768x1024screenshot Diagram -drawing
  75. 75. What next?
  76. 76. 1. Audit graphics & define the roles they play 2. Define content types and output requirements 3. Research transformations 4. Define naming scheme 5. Decide technical architecture 6. Test everything
  77. 77. Two main approaches: 1. Store the source image; render output images when publishing 2. Render images on import to CCMS
  78. 78. Approach 1: Store the source image; render output images when publishing Render graphics Import graphics Store in CMS Publish Render graphics Render graphics DITA processing DITA processing DITA processing
  79. 79. Approach 1: Store the source image; render output images when publishing • Pros: more flexible • Cons: slower publishing (though some smart work on caching could alleviate this)
  80. 80. Approach 2: Render images on import to CCMS (storing source image too) Render graphics Store in CMS Import graphics DITA processing DITA processing DITA processing Publish
  81. 81. Approach 2: Render images on import to CCMS (importing source image too) • Pros: publishing performance better, can automatically create a preview resolution • Cons: less flexible, can be tricky to batch reconvert
  82. 82. Use a config file format — there will be tweaks!
  83. 83. 1. Audit graphics & define the roles they play 2. Define content types and output requirements 3. Research transformations 4. Define naming scheme 5. Decide technical architecture 6. Test everything
  84. 84. Results
  85. 85. By applying IA techniques to graphics transformations…
  86. 86. …we get a pushbutton solution that’s vastly more efficient. 2 minutes tweaking × 50 images per publication × 3 outputs × 10 languages = 50 hours
  87. 87. As with move from DTP to structured authoring, content developers may feel less control 9QVPQVYGCMKPI!
  88. 88. But automation creates space, time for real design work
  89. 89. …and gives customers all the info they need, where they need it.
  90. 90. Questions? Thoughts? joe.pairman@mekon.com
  91. 91. Acknowledgments Slide 11: Video by Mark Poston. http://goo.gl/HUvvwk Slide 18: Graphic by Strangeloop. http://goo.gl/uh2mnE Slides 41-42, 51: Research by Yu-Shuen Wang and others. http://goo.gl/kbkVw0 Slide 62: Presentation by Marie-Louise Flacke at DITA Europe 2011. http://goo.gl/ZLSolk

×