By Alan Houser | Fellow
It has been two years since I wrote my last feature article on HTML5 (“The Story Behind HTML5,” Intercom, March 2011). HTML5 was the product of a group of browser vendors who chose to develop a standard based on evolving customer requirements, the changing nature of the Web, and the changing ways we interact with and use the World Wide Web.
Two years later, HTML5 is a resounding success, with ever-increasing adoption, continually improving browser and device support, and a growing community of users and adopters. HTML5 and its companion technologies, CSS3 and Javascript, have emerged as the global standard technologies for Web development.
HTML5 has become pervasive in our Web experience. Nearly every user of the world wide Web interacts with HTML5 in some way, whether as an author or consumer of content. Many of our smartphone and tablet applications are actually HTML5 websites. This increase in the popularity of HTML5 provides growing opportunities for the infrastructure of professionals, including technical communicators, who support HTML5-based Web development.
The Web Today
We interact with the Web differently than we did even a few years ago. Seven years ago, the iPhone did not exist. Five years ago, the iPad did not exist. Now tablets and Internet-capable smartphones have become ubiquitous. In 2013, PC sales fell, while sales of these new devices rose. The ways we connect with the Internet are changing, and the way we interact with online products, services, and content is clearly changing.
We are also having richer Web experiences than in the past. Web “content” includes text, audio, video, graphics, and animations. We expect interactivity on the Web. Many websites have become Web applications; providing the same interactive experience and information, often using the capabilities built into our mobile devices, like location information.
The Building Blocks of the Modern Web
While HTML5 is the new standard markup language for the Web, for providing rich Web experiences HTML5 alone is not sufficient. When many Web developers speak of HTML5, they are really speaking of HTML5, CSS3, and Javascript. Together, this trio of technologies provides markup, styling, and interactivity that we expect from today’s World Wide Web.
HTML5
HTML5 is the current incarnation of HTML, the markup language of the World Wide Web. The previous widely-used incarnation of HTML, version 4.01, had been finalized in 1999. That’s a long time ago, especially in Internet time.
The developers of HTML5 had several goals, including:
- Provide former plug-in functionality, like audio and video support, natively in the browser.
- Provide semantic markup.
- Retain backward compatibility and support existing best practices.
- Provide features needed for Web-based applications, like local data storage and extended capabilites for executing scripts.
CSS3
Very soon after the inception of the World Wide Web, the Web community saw the need to separate content from formatting. The World Wide Web Consortium (W3C) developed Cascading Style Sheets (CSS) to address this issue. CSS allows Web developers to define and adjust formatting separately from HTML markup.
CSS was first finalized in late 1996. The W3C finalized CSS2 in 1998. CSS2.1 became a W3C recommendation in June 2011. CSS 2.1 includes several features considered to be part of CSS3, including the ability to tailor the formatting of content to particular devices or screen sizes.
CSS3 is actually not a single, formal specification. After the W3C finalized the CSS 2.1 specification, the W3C split the CSS family of specifications into individual modules. These modules are commonly referred to as CSS3.
CSS3 capabilities include:
- Media queries—The ability to detect characteristics of the browser (most notably, browser window size) and adjust styling appropriately.
- Selectors—Richer capabilities for selecting individual HTML elements (for example, the first or last item in a list) and applying appropriate styling.
- Styling—Improved capabilities for styling corners, borders, shadows, and gradients; invaluable for creating the user interfaces for Web-based applications.
- Transitions and animations—Ability to create visual effects that often accompany interactivity, such as pressing a button, and to animate objects in the browser window. Also invaluable for Web-based applications.
Before CSS3, to make a round corner on a button or a text area, Web developers had to use an image of a round corner. To make a gradient, Web developers needed a series of colored images. Now they can do so with CSS3. The button styles commonly seen on smartphones—rounded corners, gradients, shadows—can all be declared with CSS3.
The W3C lists 70 (!) individual CSS specifications at www.w3.org/Style/CSS/specs. You could learn CSS by reading the W3C specifications, but I would not recommend it. Most are written for the audience of browser implementers, not Web developers.
Javascript
If HTML is for content, and CSS is for styling and formatting, then Javascript is the programming language of the World Wide Web. Javascript is understood by all major Web browsers and is formalized as a specification by an internationl organization, ECMA International. Javascript provides full programatic control of the contents of the browser window—including user interface elements, content at the element level, and other browser behaviors. The content of a Web page is represented by a data structure called the Document Object Model (DOM), and can be manipulated by Javascript, often to present customized content or interactive Web applications.
Designing for a Multi-Device World
How do Web developers accommodate the proliferation of new devices? While a desktop browser provides a rich canvas for large images, big headlines, and multi-column text, Web developers must also support small-screen devices. Several approaches have arisen.
Separate, Optimized Sites
Create multiple sites, each optimized for a range or category of screen sizes (e.g., desktop, tablet, smartphone). Often organizations make assumptions about mobile device users that aren’t true. And multiple sites increase the effort required for maintenance. Inevitably, the mobile and tablet sites tend to lag behind the desktop site.
Adaptive Design
This is a variation of separate, optimized sites. The Web server serves appropriate pages, depending on the client’s screen size. Sometimes this approach results in the maintenance issues that affect organizations that try to maintain multiple sites.
Responsive Design
This approach is increasing in popularity. The Web server serves one set of HTML, CSS, and Javascript. Using the CSS3 capability of media queries, the client browser applies the appropriate style sheet properties for the client’s device. Images may be dynamically resized or replaced to fit the browser screen.
This approach requires careful up-front design, to provide content and layout appropriate for a range of devices, but provides the benefit of ease of maintenance.
Support for HTML5
Support for HTML5 is improving with each update of the major browsers. The website http://html5test.com provides an HTML5 support matrix that includes five major desktop browsers, seven table and mobile browsers, plus browsers built into gaming consoles, televisions, and e-ink–based book readers.
But older browsers will be with us for some time. How can you design with HTML5 but provide a similar rich experience for users on older browers?
Fortunately, HTML5 was designed with backward compatibility in mind. For providing or emulating HTML5 features in older browsers, there are several popular polyfills—functions (typically Javascript) or CSS stylesheet declarations that provide fall-back behavior when a browser encounters an unsupported feature or unsupported HTML5 element. For example, even though <section> is a new HTML5 element, older browsers will respect CSS stylesheet declarations for unknown elements and render them as intended.
The design technique of graceful degradation has always been important in Web development. Designers should consider the breadth of browsers and hardware platforms, and attempt to provide a pleasing, but not identical, experience to all users. The W3C summarizes the practice of graceful degradation as follows: “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices” (www.w3.org/TR/mobile-bp/#OneWeb).
What Does This Mean for Technical Communicators?
HTML5 was developed to support evolving business and consumer requirements in an age of ever-evolving hardward and device capabilities. Professional opportunities abound, for development based on this new Web infrastructure:
- For designers, for creating pleasing experiences.
- For Web developers, for migrating existing applications to mobile devices, and for creating new applications based on the capabilities of mobile devices.
- For usability professionals, for developing intuitive interfaces and workflows.
- For technical communicators, for providing user assistance in formats that leverage the capabilities of mobile devices.
Sometimes we mistakenly think of mobile applications as “simple,” “intuitive,” or “not requiring documentation.” But with the proliferation of mobile devices, even complex desktop applications are moving to mobile Web-based delivery. Technical communicators must adapt to different ways of providing mobile documentation. Some possibilities:
- Overlays. Particularly effective for applications that use possibly unfamiliar icons and gestures to trigger actions.
- Tutorials. Passive video tutorials or active simulations.
- Embedded user assistance. Text embedded in the Web interface that provides guidance to the user.
- Conventional help. Stand-alone help systems, possibly context-sensitive, delivered on mobile devices using adaptive or responsive design techniques.
It’s almost unquestionable that the mobile Web has create more, not fewer, opportunities for Web designers and developers. The same is true for technical communicators. The modern Web is creating more, although perhaps different, opportunities for technical communicators.
Alan Houser (arh@groupwellesley.com) is an accomplished trainer, consultant, and conference presenter. Alan is a former member of the OASIS DITA Technical Committee and contributed to the DITA 1.2 specification. He is an STC Fellow and served as the STC liaison to the W3C, 2007–2009, and STC conference manager, 2010–2011. Alan served as Society President, 2012–2013, and is currently serving out his term on the STC Board of Directors as Immediate Past President.
