Chapter 11: HTML

(Open in Flickr)

Figure 11.1 (Open in Flickr)

Source code window of HTML prototype.

HTML prototypes can be a number of different things from slap-and-map to production level simulations.

The slap-and-map method uses HTML to slap together a few JPG images and uses image maps to create interactivity.

Throw-away HTML prototypes do rely on HTML as the underlying source code, but cannot, or should not, be reused for production. An example of this can be seen in the prototype output from Axure RP Pro or by using an editor like Dreamweaver in WYSIWYG mode.

And then there is the production level HTML prototype—the Holy Grail of prototyping methods. Well, that is, if you are comfortable hand-coding HTML. This is currently the least common, but my preferred HTML prototyping method.

The introduction of CSS frameworks including Blueprint, 960, and YUI! combined with popular JavaScript frameworks including jQuery, Prototype, and YUI! (yes, they have both a CSS and JavaScript framework) have made HTML prototyping even easier.

If you’re willing to roll up your sleeves and get your hands dirty, I think you’ll find HTML prototyping easier than you expect. You just have to get past that initial fear and intimidation factor. Consider reading this chapter as your first step.

Strengths

Some of the strengths that make HTML prototyping the Holy Grail include:

• Platform independent. You can code HTML on Mac, Windows, or Linux.
• Free. There are countless free HTML editors available.
• Portable. You can post HTML prototypes on a server and share them with anyone anywhere around the world. They don’t need to download anything to view it.
• It’s real. HTML prototypes are about as close to the real thing as you can get.
• Gauge feasibility. Working with real code gives you a better sense of what’s possible and how much effort it will take.
• Modular, component-based. HTML prototypes can include files that take a modular, component-based approach. As such, productivity and consistency are increased.
• Lots of free frameworks. The rise in availability of free frameworks like jQuery, Prototype, and Blueprint have made HTML prototyping more easily accessible than ever before.
• Collaborative. Since HTML prototypes aren’t based on a single file, multiple team members can work on the prototype at once. One word of caution: If more than one person is working on an HTML prototype, use some type of version control like GitHub or Subversion to prevent a heart attack when someone accidentally overwrites a file.
• Reusable code. Done correctly, the time and effort invested in the prototype can often be put to use in production. The production level code we create at Messagefirst often provides the engineering team with 80–85 percent of the presentation layer code that is needed for production and implementation.
• Unlimited potential. Anything is possible in software, as long as you want to take the time and effort.

Weaknesses

Ah, but nothing is perfect. These few things keep HTML from being the perfect prototyping method:

• Time and effort. When you first start out, coding HTML prototypes can be time consuming. You should expect some initial ramp-up time. After your skill levels improve, most likely you’ll be able to create HTML prototypes as fast, if not faster, than you could prototype with other tools.
• Annotations. Annotating your HTML prototypes can be challenging. Common approaches include attaching notes at the bottom of each page or including them in a <div> that can be toggled on and off. The W3C is also working on a tool to include annotations via RDF.

Prototyping with HTML

I haven’t done a wireframe since 2006, and I don’t ever intend to do another one—ever! I love prototyping with HTML, CSS, and JavaScript. And I think I love it for two reasons.

First, I love the challenge. It’s really easy to mock up a few screens in Fireworks and fake the interactivity. There’s something about trying to figure out how to code some of the impossible designs we come up with that gives me a natural rush.

I’ll admit, it’s frustrating dealing with cross-browser issues, especially when it comes to IE6, the bane of every developer’s existence. But...

When I see something I’ve been prototyping come to life, I imagine that scene from the original Frankenstein movie where Dr. Henry Frankenstein, played by Colin Clive, raises his hands in the air and shouts “It’s alive.” Yeah, it’s like that.

Second, the reactions I get from clients when showing them HTML prototypes far exceeds anything I’ve ever seen from other methods. I’ve literally had clients almost jump out of their chair in excitement upon seeing some AJAX-style effect on-screen.

AJAX-Style Interactions

Not long ago, we were working on designing an internal application for a client. The application was used to set up new projects in their system and notify people assigned to the project.

Being a fan of minimalist design, we decided to use AJAX-style effects, like progressive reveals and self-healing system messages, to keep the screen as clean as possible at all times.

Rather than show all the available options on the screen at once, we would show only the required fields. Once an agent selected a field that had dependent fields, the dependent fields would be progressively revealed on-screen.

After a few steps, the new project would be set up, and the agent would be redirected back to his dashboard screen with a success message at the top of the screen telling him the new project had been set up. After a few seconds, the success message would snap-close, fading away.

When we showed the prototype to the client, the head of the group was only half-engaged in the meeting. He was going back and forth between email on his Blackberry and paying attention to the presentation. That was—until the success message effect.

Just as we completed the project setup, he looked up to see the success message on-screen. Then he saw it slowly snap-close and fade away—automagically.

He slammed his blackberry down on the conference room table and shouted “Holy cow! That was the coolest thing I’ve ever seen. Can you make it do that again?” And so, I did.

I’ve never received a reaction like that from a client when showing them wireframes. Ever since I’ve started doing HTML prototypes, seeing clients freak out with excitement has become rather common.

Creating an HTML Prototype

In some cases, the source code you’ll find in this chapter is wrapped due to limited width of the printed page. Anytime you see this symbol “⏎” it represents a line wrap in the source code. The sample files available from the book’s Web site will not have the “⏎” symbol in the source code.

Before you start, you may want to download the example files from the book’s Web site at http://rosenfeldmedia.com/books/downloads/prototyping/chapter11.zip). The example files include two additional CSS files used for formatting text and the form elements, as well as an image for the form button, none of which are included in the instructions below.

If you prefer to start from scratch without the example files, the tutorial will still work—it just won’t look as pretty.

Step 1: Create a New File

Start with a blank HTML document and save it as index.html. I like to start each of my HTML prototypes with the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!-- Import CSS framework -->
<!-- Import JavaScript framework -->
</head>
<body>
</body>
</html>

You might notice a few comment tags. These are placeholders for our CSS and JavaScript frameworks we’ll import to make the prototype look nice and add some AJAX-style interactivity.

Step 2: Add Basic Structure

Now that we have the basic HTML document created, we need to create the basic structure that will hold our content. The most common elements include a header, navigation, main content area, sidebar, and footer. We’ll start by adding a div container for each of these main content holders.

<div class="wrapper">
  <div id="Header"></div>
  <div id="Nav"></div>
  <div id="Main">
    <div id="Sidebar"></div>
  </div>
  <div id="Footer"></div>
</div>

Tip Make It Easy to Distinguish Between Classes and IDs

When creating CSS styles, I prefer to use a naming convention of lowercase for Classes (for example, wrapper) and CamelCase for IDs (for example, SlideShow). This makes it easier to scan the source code quickly and distinguish between Class and ID elements.

You might have noticed that I’ve included a “wrapper” div around the structural elements. This is done to keep all the elements wrapped up in a handy container that is 950 pixels wide and centered in the screen through a little CSS we’ll add later.

Now that we have our basic structure in place, let’s add some content. We’ll start by adding a logo, some navigation, an article section, and heading elements to each of our main containers:

<div class="wrapper">
  <div id="Header">
    <div id="Logo">
      <h1>ACME</h1>
    </div>
  </div>
  <div id="Nav">
    <ul>
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div id="Main" class="clearfix">
    <div id="Article">
      <div class="container">
        <h2>Content</h2>
      </div>
    </div>
    <div id="Sidebar">
      <div class="container">
        <h2>Sidebar</h2>
      </div>
    </div>
  </div>
  <div id="Footer">
    <div class="container">
      <h2>Footer</h2>
    </div>
  </div>
</div>

At this point, if you open the page in your browser, you’ll see something like Figure 11.2.

Figure 11.2 (Open in Flickr)

Basic unstyled HTML prototype.

Step 3: Style the Basic Structural Elements

Now that we have our basic structure in place, we can add some style to the elements. A common issue with designing for the Internet is that each Web browser has its own default settings for rendering HTML elements. Our first order of business will be to fix that. We’re going to whip the browsers into shape with the use of a CSS reset.

There are a number of CSS reset files available on the Internet. Two of the most common are available from Eric Meyers (http://meyerweb.com/eric/tools/css/reset/) and Yahoo! (http://developer.yahoo.com/yui/reset/).

1. Create a new file with the following and save it as reset.css:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; ⏎
font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
body {line-height:1.618;}
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

Tip Using a Modular Framework Approach to Your HTML Prototypes

I create a single CSS file called “style.css” and use the @import method to include reset.css, typography.css, base.css file, and custom.css files. The reset.css file resets all browsers to the same defaults. The typography.css file sets up the type styles. The base.css file sets up the basic structure (for example, header, logo, navigation, main, sidebar, article, footer) for my prototyping framework. Finally, I use the custom.css file to customize the look-and-feel of the prototype. By taking this approach, I only have to deal with the 30–100 lines of CSS code in the custom.css file to customize the look-and-feel and troubleshoot for cross-browser issues.

We’ll skip over the typography.css file I typically use in my proto-typing framework, which is included in the downloadable files at http://rosenfeldmedia.com/books/downloads/prototyping/chapter11.zip.

Now that we have all the browsers behaving nicely, we’ll create the CSS to style the main elements on the screen.

1. Create a new file with the following code and save it as base.css:

body {margin:2px 0; background:#111;} /* Gives the body a little breathing room up top and on bottom. */
.wrapper {width:950px; margin:0 auto; background:#eee;} /* Groups everything and centers it on the screen. */

/* Establish basic layout elements.
------------------------------------------------ */
#Header, #Logo, #Search, #Nav, #Main, #Article, #Section, #Sidebar, #Footer {margin:0; padding:0;}

/* Header elements.
------------------------------------------------ */
#Header {height:48px;}
#Logo {width:230px; padding:5px 10px;}
#Nav {height:30px; width:950px; border-bottom:1px solid #ddd;}

/* Main navigation elements.
------------------------------------------------ */
#Nav ul {margin:10px 0 -9px 10px;}
#Nav li {height:24px; padding:5px 10px; list-style-type:none; display:inline; color:#4a69a5;}
#Nav li a:link, #Nav li a:visited {color:#0089dc; text-decoration:none;}
#Nav li a:hover {color:#222;}
#Nav li.current,#Nav li.current a:link {font-weight:bold; color:#222;}
#Nav li.current a:link {border-bottom:2px solid #222}

/* Main elements.
------------------------------------------------ */
#Main {width:950px; border-bottom:1px solid #ddd; border-top:1px solid #fff;}
#Article {float:left; margin:0 10px 0 0;width:670px; min-height:540px; background:#fff;}

/* Sidebar elements.
------------------------------------------------ */
#Sidebar {float:right; width:270px;}
#Sidebar .container {margin:0 10px 10px 0;}

/* Footer elements.
------------------------------------------------ */
#Footer {height:120px; width:950px; color:#eee; border-top:1px solid #fff; }

/* Tables
------------------------------------------------ */
th {background:#fff;}
tr td {border-bottom:1px solid #ddd;}
tr.even td {background:#e5ecf9;}
tr.new-comment td {background:#ffffdd;}

/* Miscellaneous elements.
------------------------------------------------ */
.container {padding:1.5em;margin-bottom:1.5em;} /* Use to create a padded box inside a column. */ 
hr{background:#ddd; color:#ddd; clear:both; float:none; width:100%; height:1px;margin: 1em 0 1.45em 0; border:none;} /* Use to create a horizontal ruler across a column. */

/* Clearing floats without extra markup based on How To Clear Floats without Structural Markup by PiE [http://www.positioniseverything.net/easyclearing.html] */
.clearfix:after, .container:after {content:" "; display:block; height:0; clear:both; visibility:hidden;}
.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}
.clearfix, .container {display:block;}

1. Create a new file with the following and save it as style.css:

@import "reset.css";
@import "base.css";

1. Place the following right after the <!-- Import CSS framework --> comment to link the CSS files:

<link rel="stylesheet" href="lib/css/style.css" type="text/css" media="screen, projection" />

Open the index.html page in your browser (see Figure 11.3).

Figure 11.3 (Open in Flickr)

HTML prototype structure with basic style.

Step 4: Add Some Content

Our basic structure is in place and all we need to do now is add some content. We’ll add some lorem ipsum text for a blog entry and then some comments. At the bottom of the comments, we’ll create a form to post another comment. Clicking the Post Message button will perform an AJAX-style auto-post on the screen.

1. Add a heading and a few lines of lorem ipsum text inside the Article section:

<div id="Article">
  <div class="container">
    <h2>Most Awesome Blog Post Ever</h2>
    <p>Lorem ipsum dolor sit [...].</p>
  </div>
</div>

1. After your blog post, add the Comments section. This will include a comment that we’ll initially hide using jQuery. The following code has to come after the last line of your blog post, but before the end of the “container” div tag.

<hr />
 <h3>Comments</h3>
  <table>
   <tr>
    <th width="25%"></th>
    <th width="75%"></th>
   </tr>
   <tr class="new-comment">
    <td><strong>Tom Sawyer</strong><br />
     <span class="quiet">1 minute ago</span></td>
    <td>Sit amet, consectetuer adipiscing[..].</td>
   </tr>
   <tr>
    <td><strong>Betty Boop</strong><br />
     <span class="quiet">4 minute ago</span></td>
    <td>Lorem ipsum dolor sit amet, con[...].</td>
   </tr>
   <tr>
    <td><strong>Barney Rubble</strong><br />
     <span class="quiet">16 minute ago</span></td>
    <td>Consectetuer adipiscing elit, [...].</td>
   </tr>
   <tr>
    <td><strong>Winnie Pooh</strong><br />
     <span class="quiet">45 minutes ago</span></td>
    <td>Sed diam nonummy nibh euismod [...].</td>
   </tr>
  </table>
 <h3>Say Something</h3>
  <form>
   <ul>
    <li>
     <label for="Name">Name</label>
     <input id="Name" class="third" />
    </li>
    <li>
     <label for="Email">Email</label>
     <input id="Email" class="third" />
    </li>
    <li>
     <label for="Comment">Comment</label>
     <textarea id="Comment"></textarea>
    </li>
    <li>
     <label></label>
     <a href="#" id="PostMessage"><img
     src="images/post-message.gif" /></a></li>
   </ul>
  </form>

1. Next, we link the jQuery library in the header just below the Import Javascript framework comment tag.

<!-- Import JavaScript framework -->
<script src="lib/js/jquery-1.2.6.min.js"></script>

1. Finally, all we need to do is add a little jQuery magic in the header of the HTML page just below the linked jQuery file:

<script>
// When the page is ready
  $(document).ready(function(){
   $(".new-comment").hide();

    $("a#PostMessage").click(function () {
   $(".new-comment").show();
  });

 });
</script>

That’s it. Open your updated prototype in a Web browser, as shown in Figure 11.4.

Figure 11.4 (Open in Flickr)

Final HTML prototype with blog post and comments.

Click the Post Message button, and you’ll see the new comment appear at the top of the comments list with a pale yellow highlight, as seen in Figure 11.5.

Figure 11.5 (Open in Flickr)

HTML prototype with new blog post highlighted.

I like to refer to this AJAX-style transition as a progressive reveal. It’s a great technique to use when you have a lot of conditional or interdependent content on a screen (where selecting an item on-screen changes the content for something else on-screen).

In 2008, I used this method in a prototype while redesigning an online application for a university. The existing application process consisted of 13 total screens and took participants no less than 20 minutes to complete. This is the story of how I used the progressive reveal technique to redesign the application process to two screens, which took participants an average of 2.5 minutes to complete.

Case Study: How Prototyping Led to an 85 Percent Reduction in Waste

by Todd Zaki Warfel

In 2008, my company, Messagefirst, was approached to redesign the Web site and online application process for a university. We specialize in increasing conversion rates and improving experiences for transaction-based systems.

While the university’s conversion rates were fair, they couldn’t help but think they were leaving money on the table and that their application process could be improved.

Whenever we redesign an existing system, we like to do a baseline usability test. A baseline usability study not only allows us to uncover significant problems, but it also provides a key measurement for ROI. The only way to truly measure the ROI success or failure of a design is to measure it against the previous design.

During our baseline test, we found that participants struggled with the existing 13-page application process. The thought of 13 pages was overwhelming and intimidating. Several participants expressed concerns that they might get partially through the process and lose all their information when the browser crashed—an extremely frustrating experience.

We also noticed a significant amount of scrolling and pogo-sticking through the long screens of seemingly endless form fields, many of which didn’t apply to their situation. The combination of a 13-page process, scrolling, pogo-sticking, and errors due to unrelated fields resulted in participants averaging around 25 minutes to complete the application process.

Our approach was to take all the current information and fields in the application process and use an AJAX-style progressive reveal method. Each screen would start by displaying only the minimum amount of information necessary to begin and then gradually reveal content and functionality based on a participant’s selection.

We hoped the new design would address the following issues:

• Reduce fear and intimidation. Rather than be greeted by a screen with 20–30 fields and an indicator they were about to begin a 13-step process, we presented five contact information fields and a visual indicator they were about to start a two-step process.
• Prevent errors. Remove any unrelated fields on-screen. Start only with what’s necessary, as shown in Figure 11.6. Don’t even give them the chance to make a mistake.

Figure 11.6 (Open in Flickr)

Select a degree option with progressive reveal.

• Create a cleaner, more readable interface. Once a selection is made, automatically convert it to readable text instead of populated form fields, and use the progressive reveal technique to show the next option, as shown in Figures 11.7 and 11.8.

Figure 11.7 (Open in Flickr)

Select a program option with progressive reveal.

Figure 11.8 (Open in Flickr)

Select a concentration option with progressive reveal.

• Provide error recovery. If they accidentally selected the wrong option, or changed their mind, give them the ability to edit an option in place. Clicking the readable text would swap it out to an editable field.
• Improve efficiency and satisfaction. We wanted to get potential students through the application process faster, with fewer errors, and feeling more satisfied with the process.

How did we do? We were able to keep the same information, but use AJAX-style transitions to reduce 13 pages to two screens—an 85 percent improvement.

On average, completion times were reduced from 25 minutes to less than 2.5 minutes each—a 1,000 percent improvement.

Error rates were also reduced from 2.5 on the original model to zero with the prototype. Participants remarked at how much cleaner the new interface was than the original. Several participants actually got excited when they saw the progressive reveal and commented that they really liked the way that new information was displayed only after a selection was made.

Finally, the overall satisfaction ratings improved from 60 percent to 95 percent with the prototype.

A prototype was the only way we could truly convey, test, and measure the impact of our design decisions and the progressive reveal technique.

Additional Resources

Here are some additional resources that might be useful for you.

Tools

Dreamweaver. A Web site and application development environment from Adobe. The split screen and live preview modes give you a rough idea of what your prototype will look like in a browser without ever leaving Dreamweaver. And for those purists, like myself, you don’t have to worry about Dreamweaver overwriting your hand-coded HTML. http://www.adobe.com/products/dreamweaver/

TextMate. TextMate brings Apple’s approach to operating systems into the world of text editors. By bridging UNIX underpinnings and GUI, TextMate cherry-picks the best of both worlds to the benefit of expert scripters and novice users alike. http://macromates.com/

Coda. A great little “one-window development tool” from the gang over at Panic Software. http://www.panic.com/coda/

Frameworks

960 Grid System. The 960 Grid System is an effort to streamline Web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. http://960.gs/

Blueprint. Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on, with an easy-to-use grid, sensible typography, useful plug-ins, and even a style sheet for printing. http://www.blueprintcss.org/

jQuery. This is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid Web development. jQuery is designed to change the way that you write JavaScript. http://jquery.com/

Prototype. This is a JavaScript framework that aims to ease development of dynamic Web applications. http://www.prototypejs.org/

Script.aculo.us. Used with Prototype, it provides easy-to-use, cross-browser user interface JavaScript libraries to make your Web sites and Web applications fly. http://script.aculo.us/

Protonotes. A little JavaScript library that enables you to add Post-it note-style annotations to your prototypes. http://www.protonotes.com/

Articles

“Just Build It: HTML Prototyping and Agile Development” by Garrett Dimon http://www.digital-web.com/articles/just_build_it_html_prototyping_and_agile_development/

“HTML Wireframes and Prototypes: All Gain and No Pain” by Julie Stanford http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain

Summary

Sometimes there’s just nothing better than the real thing. Take a little time to learn HTML, CSS, and basic JavaScript—it’s a whole new world of prototyping. Here are a few reasons you might want to consider using HTML next time you’re prototyping:

• It’s a lot easier than you think.
• A number of freely available CSS and JavaScript frameworks are available to get you started.
• It’s free.
• It’s the real deal, which means you’re more likely to be able to gauge feasibility and value.
• It’s one of the few truly collaborative tools and methods available.
• It opens the possibility to leverage the code for production, saving a significant amount of time to market.