better dita graphics for a multi-screen world
DESCRIPTION
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.TRANSCRIPT
![Page 1: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/1.jpg)
Better DITA Graphicsfor a multi-screen world
Joe Pairman
![Page 2: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/2.jpg)
Implemented DITA at HTC
Jointly with SDL, designed image rendition plugin for SDL LiveContent Architect
Designed mobile content delivery platform
Now consulting at Mekon
![Page 3: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/3.jpg)
I’ll provide a complete recipe for defining an automated graphics solution…
![Page 4: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/4.jpg)
I’ll provide a complete recipe for defining an automated graphics solution… !
!
…but first some background on why we really need to do this.
![Page 5: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/5.jpg)
Visual communication has always been important in tech comm
![Page 6: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/6.jpg)
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”
![Page 7: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/7.jpg)
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”
![Page 8: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/8.jpg)
We're much more visual these days
![Page 9: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/9.jpg)
Photo sharing has
exploded
![Page 10: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/10.jpg)
Even sober statistics need an
over-the-top font and background
![Page 11: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/11.jpg)
Our end users clamor for more screenshots and videos
![Page 12: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/12.jpg)
Strong branding demands high-quality images
![Page 13: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/13.jpg)
We're more web-y too
![Page 14: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/14.jpg)
Primary place we look for
content is on the web
![Page 15: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/15.jpg)
Graphics may boost visits from
organic search
![Page 16: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/16.jpg)
And, of course,
“mobile”
![Page 17: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/17.jpg)
Not tame little “mobile” tasks but the whole thing
![Page 18: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/18.jpg)
So change the navigation, but don't leave things out!
![Page 19: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/19.jpg)
Responsive design is mainstream
![Page 20: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/20.jpg)
It's challenging to cater for multiple screens
![Page 21: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/21.jpg)
Display size
Images should fit containers, but …
![Page 22: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/22.jpg)
Display size
…not all images should use the full
container width
![Page 23: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/23.jpg)
Display size
…not all images should use the full
container width
![Page 24: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/24.jpg)
High resolution displays - low res images are blurry if scaled up - high res images need extra bandwidth & storage
![Page 25: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/25.jpg)
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
![Page 26: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/26.jpg)
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=“[email protected] 2x, [email protected] 3x" width="500px" alt=“Test image">
![Page 27: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/27.jpg)
“Art direction” - key visual info should be clear no matter the image display size
![Page 28: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/28.jpg)
<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>
“Art direction” - key visual info should be clear no matter the image display size
![Page 29: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/29.jpg)
How do DITA users cater for multiple screens?
![Page 30: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/30.jpg)
Graphics survey: less than half cater for multiple screen sizes
![Page 31: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/31.jpg)
More than half of survey
respondents feel it's difficult
![Page 32: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/32.jpg)
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.
![Page 33: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/33.jpg)
We tweak manually
![Page 34: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/34.jpg)
We tweak manually
![Page 35: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/35.jpg)
With graphics, we’re still stuck in DTP-land!
![Page 36: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/36.jpg)
It doesn't scale across different outputs and screen sizes
2 minutes tweaking × 50 images per publication × 3 outputs × 10 languages =
50 hours
![Page 37: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/37.jpg)
Nearly half would use
more graphics if it were easier
![Page 38: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/38.jpg)
Just as with our textual content, our graphics need automation
![Page 39: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/39.jpg)
Using any tool with a command-line interface…
![Page 40: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/40.jpg)
We can scale or
crop
![Page 41: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/41.jpg)
…even preserving important information automatically
![Page 42: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/42.jpg)
![Page 43: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/43.jpg)
We can automate
vector graphics
conversions too
![Page 44: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/44.jpg)
Over half of respondents
use SVG
![Page 45: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/45.jpg)
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.
![Page 46: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/46.jpg)
... in fact, SVG resizing can be automated fairly easily
![Page 47: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/47.jpg)
And it’s easy to rasterize vector graphics automatically
![Page 48: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/48.jpg)
... we could automate the production of SVGs …
![Page 49: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/49.jpg)
… 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.
![Page 50: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/50.jpg)
…or to make translation easier
![Page 51: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/51.jpg)
We could even have dynamically regenerating images
![Page 52: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/52.jpg)
We could even have dynamically regenerating images
Fig. 9. From top to bottom are the metro maps of Stockholm, Mexico City and Sydney. (left) The geographic layouts. (middle and right) Thefocus+context results are automatically determined using our system.
6 CONCLUSIONS AND FUTURE WORKS
We have introduced the concept of focus+context layout for metromap visualization. This technique is particularly useful when visu-alizing a complicated map on a mobile device because unnecessarytransportation lines are abstracted. By entering the start and destina-tion stations, our system determines the user-oriented layout fully au-tomatically. The best route to the destination of a visitor is magnified.The names of focal stations are labeled. In addition to highlighting
the focal route, the contextual parts of the map are retained to per-sist within the screen to show the basic geographic information. Ourmethod preserves the metro map criteria when relocating stations suchthat the visual artifacts are minimized. The experimental results verifyour focus+context visualization technique.
We have successfully tested our program on a desktop PC. Giventhat the algorithm is designed for displaying maps on a small area, wethus plan to implement our method on a mobile device and raise thetechnique to a product-level system.
![Page 53: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/53.jpg)
… which is all fine, but how do your image editing tools know what transformation to do and what parameters to use?
![Page 54: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/54.jpg)
IA to the rescue!
![Page 55: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/55.jpg)
What did we do to
overcome DTP?
![Page 56: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/56.jpg)
We tagged textual content semantically
![Page 57: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/57.jpg)
We modularized
and chunked
topics
![Page 58: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/58.jpg)
We defined pieces of information for the role they played (not how they should look in any particular situation)
![Page 59: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/59.jpg)
Icons Simple screenshots Diagrams
We can do this with graphics. They can be grouped by role…
![Page 60: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/60.jpg)
…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
![Page 61: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/61.jpg)
Defining the rules.
![Page 62: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/62.jpg)
1. Audit graphics & define the roles they play
2. Define content types and output requirements
3. Research transformations 4. Define naming scheme
![Page 63: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/63.jpg)
Auditing graphics is an excellent chance to apply minimalism
![Page 64: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/64.jpg)
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.
![Page 65: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/65.jpg)
A role is not the same as a graphics format!
Icons Simple screenshots
We can’t treat these PNGs the same way
![Page 66: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/66.jpg)
1. Audit graphics & define the roles they play
2. Define content types and output requirements
3. Research transformations 4. Define naming scheme
![Page 67: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/67.jpg)
Icons need to fit
comfortably in body text
or tables
![Page 68: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/68.jpg)
Keep proportion across whole docset / repository?
![Page 69: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/69.jpg)
Resize or highlight diagrams?
![Page 70: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/70.jpg)
Source image Output type and corresponding renditionsPDF 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.
![Page 71: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/71.jpg)
1. Audit graphics & define the roles they play
2. Define content types and output requirements
3. Research transformations 4. Define naming scheme
![Page 72: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/72.jpg)
Research the commands & parameters you’ll use
![Page 73: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/73.jpg)
Source image Output type and corresponding renditionsPDF 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 convert -resize required_height input_file.pngDefinition
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 required 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.7\batik-rasterizer.jar" -m image/jpg -bg background_color -w required_width -q 0.9 input_file.svg
![Page 74: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/74.jpg)
1. Audit graphics & define the roles they play
2. Define content types and output requirements
3. Research transformations 4. Define naming scheme
![Page 75: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/75.jpg)
Source image Image suffix
Inline icon -inlineicon
Definition table icon -tableicon
Smartphone screenshot -640x1136screenshot
Tablet screenshot -768x1024screenshot
Diagram -drawing
Filename suffixes are simple and reliable
![Page 76: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/76.jpg)
What next?
![Page 77: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/77.jpg)
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
![Page 78: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/78.jpg)
Two main approaches: 1. Store the source image;
render output images when publishing
2. Render images on import to CCMS
![Page 79: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/79.jpg)
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
![Page 80: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/80.jpg)
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)
![Page 81: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/81.jpg)
Render graphics
Store in CMS
Import graphics
DITA processing
DITA processing
DITA processing
Publish
Approach 2: Render images on import to CCMS (storing source image too)
![Page 82: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/82.jpg)
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
![Page 83: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/83.jpg)
Use a config file format
— there will be
tweaks!
![Page 84: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/84.jpg)
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
![Page 85: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/85.jpg)
Results
![Page 86: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/86.jpg)
By applying IA techniques to graphics transformations…
![Page 87: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/87.jpg)
…we get a pushbutton solution that’s vastly more efficient.
2 minutes tweaking × 50 images per publication × 3 outputs × 10 languages =
50 hours
![Page 88: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/88.jpg)
As with move from DTP to structured authoring, content developers may feel less control
![Page 89: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/89.jpg)
But automation creates space, time for real design work
![Page 90: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/90.jpg)
…and gives customers all the info they need,
where they need it.
![Page 92: Better DITA Graphics for a Multi-Screen World](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554bae15b4c905ae618b564a/html5/thumbnails/92.jpg)
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