TechWhirl’s coverage of WritersUA 2012 is sponsored by Madcap Software. Find out more and download a trial copy of Flare 8.
Presenters: Scott DeLoach, Clickstart; Dave Gash, HyperTrain
By now, most writers know that both HTML and CSS have been updated with new standards. However, browser and tool vendors are just now beginning to support them. At WritersUA, Scott DeLoach and Dave Gash each gave presentations that covered aspects of the new technology that impact user assistance and thoughts on how we’ll be dealing with HTML5 and CSS3 in the coming year.
HTML5 and CSS3 to the Point by Scott DeLoach
Scott DeLoach is the founder of ClickStart, a web design company, and the author of HTML5 to the Point and CSS to the Point. His presentation consisted mostly of examples illustrating the new features in HTML5 and CSS3.
CSS3 and User Assistance
Many of the new properties in CSS3 fixed workarounds that people have been using and provided standardized ways to accomplish the same formatting.
Currently, Safari, Chrome, and Firefox have the best support for CSS3; they support all properties.
Of particular interest to technical writers:
- Fonts: You can now specify a font. You should still specify font sets for compatibility with older browsers.
- Multiple columns: Firefox and WebKit-based browsers handle this differently.
- Togglers (dropdowns) and tooltips: You can now create these without JavaScript.
CSS3 allows code to sense device size, orientation, and pixel ratio directly without JavaScript. This will be useful for anyone creating mobile versions of websites or user assistance.
It also provides better control over print output. Among other things, you can set page size, crop marks, and rotation using page-specific styles. However print styles are poorly documented. DeLoach has been experimenting with them and will post information about them on his website.
Impact of HTML5
Although HTML5 is fairly new, many sites (including Google) are now using it. Safari and Chrome have the best support.
HTML5 incorporates many new elements but their use is optional. As with CSS3, many of the new features replace coding previously done in JavaScript. For example, there’s now a menu tag for creating menus and many new events for tracking user input. Some older elements are no longer supported – the blink tag is finally gone!
With its new features for animation and user interactions, HTML5 has been described as a Flash killer. Adobe and Google both have tools to convert Flash to HTML5. For an example of animation using HTML5, see wildernessdowntown.com.
Even if you’re developing user assistance for older browsers that don’t support HTML5 well, workarounds continue to appear. Remy Sharp has created an HTML5 enabling script that you can add to your site so you can use HTML5 features with any browser, including older versions of Internet Explorer.
DeLoach pointed out several new features of particular interest to technical writers, specifically the structure tags: header, footer, section, article, aside, and nav.
Writers or web designers who have to work with forms and user input will find many new features for controlling validation. You can now modify validation messages, including their format, without scripting and spell check user input.
I found this an interesting and exciting presentation. HTML5 and CSS3 should make life a lot easier for anyone creating web-based online help, once the help authoring tool vendors start providing support for the new features. (For an example of HTML5 output, see the online help for MadCap Flare 8.0).
If you want to experiment with HTML5 and CSS3, check out DeLoach’s books or refer to the HTML5 and CSS primers on the web sites for his books.
User Annotations with HTML5
Dave Gash owns HyperTrain.com, a training and consulting company based out of San Diego specializing in user assistance, online publishing, and related technologies.
In contrast to Scott DeLoach’s presentation, Dave Gash focused on one area of HTML – how to allow a user to annotate a web page. He created a demo during the course of the presentation.
So why allow users to create their own annotations? It allows them to add missing information and emphasize what’s important to them.
User annotations have a long if somewhat checkered history. Microsoft’s early help system, WinHelp, let users add annotations, but they would be lost if the help file was modified by even one byte. Some web-based help systems used scripting to add user annotations, but they weren’t a cross-browser solution. Over time various third-party solutions appeared, such as Flash 6, Google Gears, and the Dojo toolbox, but they’re all browser- or application-dependent and use different APIs.
HTML5 web storage offers a solution:
- Data is stored locally.
- Coding works across browsers (but storage is local).
- Data persists across user sessions.
It’s well supported by recent versions of most browsers.
During the rest of his presentation, Gash demonstrated a simple user annotation system for a web site and showed key points of the code. You can view the site here and download the code from the Resources tab of his website.
It was obvious that this technique, although it requires some scripting, is far simpler than previous methods, and should be well within the reach of any writer who is comfortable with current HTML coding and scripting.
