STC Summit 2015 Hypergraphics for visual-first help

<g id="page_elements">

<polyline fill="#74B74A" points="356.13,126.07 338.659,143.612 321.13,126.07 "/>

<path fill="#FFFFFF" stroke="#000000" d="M365.617,114.654c0,6.627-5.373,12-12,12h-230c-6.627,0-12-5.373-12-12v-7.5

c0-6.627,5.373-12,12-12h230c6.627,0,12,5.373,12,12V114.654z"/>

<path fill="#D1D3D4" d="M1105.136,1417.218c0,6.627-5.372,12-12,12H55.188c-6.628,0-12-5.373-12-12v-124.493

c0-6.627,5.372-12,12-12h1037.947c6.628,0,12,5.373,12,12V1417.218z"/>

<path fill="#E7E8E9" d="M1095.617,1407.654c0,6.627-5.373,12-12,12h-469c-6.627,0-12-5.373-12-12v-81c0-6.627,5.373-12,12-12h469

c6.627,0,12,5.373,12,12V1407.654z"/>

<path fill="#E7E8E9" d="M546.617,1408.654c0,6.627-5.373,12-12,12h-469c-6.627,0-12-5.373-12-12v-81c0-6.627,5.373-12,12-12h469

c6.627,0,12,5.373,12,12V1408.654z"/>

<g><g><line fill="none" stroke="#000000" stroke-width="5" x1="510.764" y1="1293.321" x2="502.097" y2="1301.988"/>

<polygon points="495.856,1308.229 501.058,1295.842 502.563,1301.521 508.243,1303.027 "/>

</g></g><g><g><script type="text/javascript">

<![CDATA[ function bktitle() {

var bktitle = window.open

("PDF-bookimprintpage-bktitle.xhtml","bktitle","resizable=yes,width=500,height=220,left=100,top=100,scrollbars=yes");

bktitle.focus();

return false;

}

Hypergraphics for Hypergraphics for visual-first helpvisual-first help

SVG, CSS, JavaScriptSVG, CSS, JavaScriptDave Gardiner

What’s happening in tech comm?What’s happening in tech comm?

2/23#stc15

3/23#stc15Image: David Sandonato / 123RF

““Interactive Interactive infographics”infographics”

(But “hypergraphics” (But “hypergraphics” sounds more “techie/geeky”)sounds more “techie/geeky”)

Take a closer look at …Take a closer look at …

4/23

<section>

<header>

http://www.w3schools.com/htmL/html5_new_elements.asp

New semantic elements

<audio>

<track><video>

New media elements

<canvas><svg>

New graphics elements

#stc15

<nav>

HTML5 SVGHTML5 SVG

5/23http://www.w3schools.com/htmL/html5_svg.asp

#stc15

… It’s a high-quality graphics format for displaying interactive sketches

and technical illustrations

What’s in it for technical communication?What’s in it for technical communication?

6/23#stc15

Can be done with SVG

You want mobile-first docs

You’ve seen touch gestures for web apps How about interactive documentation for a similar user experience?

And created with cost- effective graphic design tools

7/23

Emerging trends, emerging challengesEmerging trends, emerging challenges

“We need an alternative way to display tables

on mobile devices”Charles Cooper & Ann Rockley, STC Summit 2014

#stc15

8/23

Otherwise…Otherwise…

#stc15

9/23

Reformat tables into web topicsReformat tables into web topics Fragment into web topics

Create visual interfaces

#stc15

Cool idea #1: Hypergraphic web topicsCool idea #1: Hypergraphic web topics

10/23

Online help document with links to hypergraphics for accessing reference info and procedures

Hypergraphics link to standalone web topics for online help

#stc15

What’s under the hood …What’s under the hood …

11/23

It’s text, just like HTML5 Use a text editor to add CSS styles & interactive HTML elements

<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1212.553px" height="640px" viewBox="0 0 1212.553 1600" preserveAspectRatio="xMidYMid meet"><defs><style type="text/css"><![CDATA[svg {width: 99%;height: 99%;position: relative;top: 0;left: 0; #stc15

Hyperlinking in SVGHyperlinking in SVG

12/23

<a xlink:href="PDF-chaptitlepage-chaptitle.xhtml"

xlink:title="Chapter title"

onclick="return chaptitle('chaptitle')">

<text class="overlay" transform="matrix(1 0 0 1

325.3223 297.1016)" fill="#ED1C24" font-

family="'ArialMT'" font-size="36">Title of

Chapter</text>

</a> HTML linkingHTML linking

Javascript eventsJavascript eventsfunction chaptitle() { var chaptitle = window.open ("PDF-chaptitlepage-chaptitle.xhtml", "chaptitle", "resizable=yes,width=500,height=410,left=100,top=100,scrollbars=yes"); chaptitle.focus(); return false; }

#stc15

CSS3 media queriesCSS3 media queries

13/23

@media screen and (orientation: landscape) {#smallscreen {display: none;}}@media screen and (orientation: landscape) {#bigscreen {width: 30%;height: 80%;}}@media screen and (orientation: portrait) {#bigscreen {display: none;}}@media screen and (orientation: portrait) {#smallscreen {width: 80%;}}

Modify the style/display of whole or parts of graphics Reference ID or class values of SVG elements in the CSS Set breakpoints, orientation, device aspect ratio …

Incorporates RWD:

http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/

Display, resize, …

display: none/block/inline

fluid grid – resize to browser width/height

#stc15

14/23

Cool idea #2: Translation / localizationCool idea #2: Translation / localization SVG <switch> element changes language based on a user’s browser settings

‘Single-source’ graphics for global markets – draw once, use in many places (multilingual)

#stc15

JavaScript for interactivityJavaScript for interactivity

15/23

JavaScript functions and libraries extend interactive functionality (animations, touch gestures, draggable objects …)

#stc15

Even further with jQueryEven further with jQuery

16/23

External SVG file is referenced in an HTML5 page

HTML5 pages are the basis for documentation (i.e. for navigation, accessibility, metadata, SEO) Hypergraphics can ‘talk’ to jQuery (integrate interactive sketches with mobile help)

#stc15

17/23

+ JavaScript to open external HTML files in <div>

Export SVG from illustration tools + <a xlink:href> for hyperlinking + <title> and <desc> for screen reader accessibility

+ jQuery to use interactive SVG within HTML5 files, and responsive web design

Cool idea #3: Visual mobile-first docsCool idea #3: Visual mobile-first docs

#stc15

Best viewed with …Best viewed with …

18/23

Varies depending on CSS, JS, fonts, styling, video

Firefox

IE

HTML5 title and desc ARIA attributes in SVG

× Screen reader support poor/inconsistent

(NVDA in FF locally, Chrome online, mobile)

No one tool does everything CorelDRAW / Illustrator produce clean markup, ‘OK’ SVG output options

×Most ‘SVG editor’ tools produce inline CSS styles

Opera (Andr.), Chrome

×Proprietary ns declaration

Some hand-coding to implement JS and SVG functionality

Several tools – graphics, JS editor, SVG optimiser

jQuery libraries for touch gestures are promising

#stc15

What this means for information designWhat this means for information design

19/23

#stc15

Retain existing information architecture,add a visual interface to ‘restructure’

what users interact with

Minimize interaction with complex hierarchical document structures that

are a barrier to finding information

20/23#stc15

SVG - A more direct route from task/SVG - A more direct route from task/workflow sketches to user interfaces?workflow sketches to user interfaces?

So… why use hypergraphics?So… why use hypergraphics?

21/23

What’s big in tech comm …

What SVG hypergraphics offer …

HTML5 • A web tool that integrates with online help

CSS3 • Use media queries, animations and many CSS styles

Responsive web design • Graphics resize to fit device screen • Display and style content depending on device

specs, orientation, browser size…

Infographics / sketching • Finally, graphics and sketches are put to good use with interactivity (illustration tools can output SVG)

Video / rich media • A place to embed videos with interactive illustrations

Mobile-first • Integrates with JavaScript, jQuery elements• “Work in progress” to automate implementation

of coding

User experience (UX) • Restructure information architecture into task-based interfaces

• Combines several web technologies into engaging experiences that make learning easier

#stc15

Today ... Today ...

22/23#stc15

SVG 1.1 + editing toolchain

Håkan Dahlström / Wikimedia Commons 

SVG 2 + JS/HTML graphics editor

+3 years+3 years

23/23

W: xmplar.bizE: info@xmplar.bizTw: @copebooxSk: copeboox1M: +61-424 003020

Questions?Questions?

#stc15

svgdocs.net