“to remain static is to lose ground” - stc-india.org help... · • responsive (any device, ......
TRANSCRIPT
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.1
“to remain static is to lose ground”
- Dave Packard
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.2
Amit Pujar
Priyanka Nair
Visual help
Visual
help
open your eyes to a new world of
technical documentation
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.3
• What is Visual Help?
• Challenges
• What’s under the hood?
• Layer, layer, layer…
• Q&A
(because a picture (visual) is worth a thousand words… )
what we are trying to solve for our customers…
configure 3rd party app
dude, where’s my server??
• Reduce time to set up, install, configure, deploy and use our products.
• Information is sometimes spread across different sections, or even different docs.
• It takes too much time to download, search online and read up before starting to set something up.
• Customers sometimes make their own ready reckoner/cheat sheets to make things simple for them.
Our customers’ businesses are time-critical and they
need to deploy our products faster!!
• Visual Help is an HTML-based information system built using screenshots and
HTML/CSS markup.
• Information is task-based – with more visuals, less text.
• Crisp, concise, and clear - no ambiguity.
• Linear in approach – every task has a logical start and finish – with a link to the next
procedure.
• Responsive (any device, any OS - anywhere in the world).
create content faster, get reviews faster, and publish faster!
• Reducing text – removing redundant content.
• Creating highlights and callouts – without having to use image editing tools.
– Its easier to replace changed/updated screens and make some quick markup changes.
– Its easier to localize (change only text in the HTML).
• Helping customers identify, and relate to, what is happening on the screen and perform tasks accordingly.
• Making it responsive (content must be available on tabs, phones, computers, laptops).
design, develop, test, back to the drawing board, design, develop, test…
highlights
callouts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/visual_help.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
• HTML5
• CSS3
• JavaScript
• Content Optimization
• Responsive Web Design
HTML Page
Image Container Layer
Image Layer
Highlight/callout layers
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.9© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.