* OK, that's a lie—it will take you a bit longer than four minutes. But much less than you might think!
Prototyping in HTML has lots of benefits, and many would argue that it's even better than prototyping in a dedicated tool like Axure. For example, you are prototyping in the same material as the finished product, with all the same capabilities and constraints, instead of faking it.
But it's hard to know where to start, and easy to get put off by the perceived complexity. This post will show you that it's not that hard—you can get up and running in a matter of minutes.
Standing on the Shoulders of Giants
The first thing to be aware of is that you don't need to start from scratch. Other people have put a great deal of effort into creating frameworks that we can use to save ourselves lots of time and effort. The two best-known frameworks are Twitter's Bootstrap and Zurb's Foundation. They both do very similar things, so for our purposes, it doesn't really matter which one you choose. (If you're interested in finding out why you might choose one over the other, check out this post.)
I'm going to show you how to make your first HTML prototype using Foundation, because I know it better.
An HTML prototype consists of a bunch of files: HTML, CSS, Javascript, and images. So the first thing to do is to set up a place to put them. I find it quite convenient to put stuff like this in Dropbox, so go ahead and make a new folder there called "prototypes". In here, you're going to want one folder for each prototype, so make another folder called something like "my first prototype".
Now we need to grab a copy of Foundation. Go to the Foundation download page and click Download Foundation CSS (the big blue button under "Default CSS"). Unzip the downloaded file and copy its contents into your "my first prototype" folder. The file called index.html is the one that contains the actual content: what's going to be the actual "meat" of our prototype. If you double-click it now, it'll open up in your browser, and you'll see it's just a Foundation demo file.
We need to get rid of all the existing content so we can replace it with our own, so open up index.html in a text editor. (You can use Notepad (Windows) or TextEdit (OS X) for this, but you're better off with a proper text editor. I like TextMate 2 for OS X (it's free), but there are plenty of free and paid alternatives for both Mac and Windows, such as Coda, Espresso, Sublime Text, Textastic, Notepad++, etc.)
Now find this bit:
Delete everything starting from that first <div> tag all the way down to this bit:
Delete up to and including the closing </div> tag, but leave the <script> alone.
Now we can get to work! But what do we want to make? Foundation has a bunch of ready-made page layouts for things like a news feed and an online store. I could show you how to download one of these and change a couple of things, but I don't think that would really prepare you for making a prototype of your own. So …
Let's Do It Properly
Let's take an actual website and try to replicate it as an HTML prototype. Five A Day is a site that showcases five web design articles each day. Their "Today's Five" page is a good example of the kind of thing we are often called on to design. It's not too technically complex, but it does have a nice responsive design that changes the layout and shows and hides stuff as the screen size changes.
Here it is on the desktop:
And on an iPad Mini:
And finally, on an iPhone:
As you can see, as the screen size gets smaller, the columns get narrower and then switch to a stacked layout. And some of the elements on the page (like the ads) are hidden on a phone-sized screen. Foundation makes it easy to set up our page like this.
Top Navigation
First, let's add that top navigation. After the opening <body> tag, add this:
If you've never made anything with HTML before, this might look a bit daunting. So here's…
A Quick HTML Primer
(If you know a bit of HTML already, you can probably skip this bit.)
HTML consists of elements, which are written by wrapping content in tags ("marking it up"). A tag is the name of an element enclosed in angle brackets. So <p> is a paragraph tag. There are opening and closing tags. <p> is an opening tag, and </p> is the matching closing tag. So a complete paragraph element looks like this:
<p>This is a paragraph.</p>
Elements can be nested inside each other. So we can nest a link (the <a> element) inside our paragraph, like this:
<p>This is <a href="http://
en.wikipedia.org/wiki/
Paragraph">
a paragraph</a>.</p>
<p>This is <a href="http://en.wikipedia.org/wiki/Paragraph">
a paragraph</a>.</p>
The browser displays this like this (indented to differentiate it from the article text):
This is a paragraph.
Here the opening <a> tag looks different from the opening <p> tag—it has an href attribute. This specifies what the link links to (in this case, the Wikipedia page that explains what a paragraph is).
Looking at the chunk of HTML above, we can see that we've got a <div> with two more <div>s nested inside it. (A <div> is just a generic container element.) And each of these <div>s has several links (<a> elements) nested inside it.
The links all have href attributes (though they don't actually link anywhere—the hash character is just there to make sure that the HTML is valid).
And each <div> has a class attribute. We use classes to target elements in CSS so that we can position them and control how they look. In this case, the classes are ones that are defined in Foundation—they tell Foundation how to position them.
One more thing that you need to understand before we get back into it is that there are two different types of HTML element: block elements and inline elements. <div>s and <p>s are block elements, and by default, they get positioned one below the other, in the order in which they appear in the HTML. (You can change it so that they are positioned next to each other instead, which is what we are telling Foundation to do here.)
Inline elements (such as <a>) are inline elements—they are placed on the same line as whatever comes before and after them. So the adjacent <a> elements above all get placed on the same line.
OK, that'll do for the primer, for HTML at least.
This HTML uses Foundation's 12-column grid to split the links in the nav into two groups. The left group is seven columns wide and the right one gets five columns.
Now open the index.html file in your browser. (You can just double-click it.)
It doesn't look like much yet, does it?
Let's add some CSS to make it look a bit better. First, create a new file called 4min.css in the css directory. Now add a second <link> element right after the existing one within the <head> element in index.html so it looks like this:
This tells the browser to use the rules in 4min.css to style the page. Now add this to your 4min.css file:
Like with the HTML above, this probably looks like Greek to you if you haven't played around with CSS before. (If you have, you can skip this bit. And if you're Greek, sorry for the confusion.)
So, here's…
A Quick Two-minute Intro to CSS
CSS consists of rules. (The above CSS contains two rules.) A rule consists of two parts: a selector and one or more declarations.
The selector (the bit at the beginning, before the first curly brace) says which element(s) the rule applies to. This can be an element name (like div or a), an element ID (signified by a hash symbol, for example, #topnav, which is the element with the ID of topnav), a class (signified by a period, for example, .row, which is an element with a class of row), or a combination of these.
So you can have a selector like div.row, which is a <div> with a class of row. Or #topnav a (like in the CSS above), which means any <a> element within the element with the ID of topnav. There are other ways to combine selectors, but let's keep things simple for now.
The declarations (the bit inside the curly braces) tell the browser what styles to apply to the element(s) identified by the selector. There are too many to list here, but they basically tell the browser what the selected element(s) should look like and how it should be positioned.
The format for a declaration is the name of an attribute (for example, background-color), followed by a colon, then the value for the attribute (for example, white or #FFFFFF, which is white expressed in hexadecimal), and ending with a semicolon. So a declaration to set the background color for the selected element to white would look like this:
background-color: #FFFFFF;
The first of these two CSS rules tells the browser to give the element with an ID of topnav (our top navigation) a black background (#000000 is the hexadecimal code for black), top padding of 1.5 rems (that is, one and a half times the width of a capital "M" for the browser's default font size), and bottom padding of one rem.
The second rule makes the text of the links (the <a> element is a link) white, instead of the blue that Foundation gives them, and adds a bit of padding to separate them.
Refresh the page in your browser and you'll see it already looks a lot better:
Except for a couple of things… The black bar should really stretch the full width of the screen. And the links on the right should be right-aligned. These are easy things to fix though.
To make the links go all the way to the right, we just need to wrap them in a <span> element with a class of right, like this:
They're still not all the way over to the right, because we gave all the <a>s right-padding. We can fix this by adding another rule just for these links:
This gets rid of the right padding and adds left padding instead.
The other problem is that the width is being limited by the row class (which maintains a consistent width for all "row" container elements). So what we can do here is nest another <div> within the existing one and attach the row class to that instead of to the <div> with the ID of topnav:
This looks much better:
Header
Next we need to add that header. So after the topnav <div>, add another <div> with an ID of header:
Here, we're using the same structure as with the nav to make sure that the element we're going to apply the styling to (the <div> with the ID of header) is full-width. And within the <div> that actually contains the content, we're using three different heading levels (<h1>, <h2>, and <h3>) to give us different sized text.
There's something else here we haven't seen before: & and —. These are what are called character entities. They let us include characters in our content that can't be easily typed (e.g., an em-dash) or that have special meaning for HTML (like angle brackets, and, like here, the ampersand).
Now add this to the CSS file:
The first rule applies a dark grey background color (#222222) to the header (the <div> with the ID of header) and gives it some padding. This padding declaration is different from the ones we used for the nav—instead of separate declarations for top, bottom, left, and right, this form lets you do it all in one declaration. This one says "add top and bottom padding of 1 rem, and left and right padding of zero".
The second rule has commas in the selector. Each item in this comma-separated list is actually a selector in its own right. The rule applies to all three selectors, so its declarations are applied to three different elements: <h1>s in #header, <h2>s in #header, and <h3>s in #header.
All the declarations do is set the text color to white and make the text centered. Which looks like this:
Obviously, this doesn't include all the fancy webfonts that the actual site has, but that's not really the point here.
Main Page Content
Next, we need to add the actual content. Five A Day's page layout has a column on the right containing ads that takes up about a quarter of the available width. And the other three-quarters is taken up by the five article summaries.
So we need to add another "row" <div> that contains two column <div>s: the first (left) one is nine columns wide and the second (right) one is three columns wide. Actually, there's a bit of whitespace between these two columns, so we'll make the left one eight columns instead of nine.
We need to add an extra class, right, to the second column, because if we didn't Foundation would put it immediately after the left column, with the remaining one column of space to its right.
The two <div>s also get IDs so we can target them in our CSS if we want. (IDs are the right thing to use here, because we can be sure there is only going to be one main content section and one ad sidebar in our page.)
Now we need to add some content.
Let's start with the ads. There are five of them, each with a header, an image, and a bit of text. So inside the ad_sidebar <div> that we just added, let's add five identical <div>s, each with a class of ad_container and containing a level five heading (<h5>, about the right size), an image (a placeholder image served by the placehold.it placeholder image service), and a paragraph of text:
Now it looks like this:
And now the five article summaries. Each of these is just a heading, a bit of text, and a button. But these aren't two simple columns—if they were, the summaries wouldn't line up horizontally:
But they do line up. (Unfortunately, the heading overlaps the button. We'll try and make sure that doesn't happen in our version.) Foundation has two types of grid for arranging stuff like this. With the "regular" grid, you set up rows, and within each row, columns.
The other type of grid (the "block grid") is a bit more flexible—it lets you take any number of items and automatically arrange them into rows, where all you need to specify is how many items you want per row. It's good for when you're not sure how many items you are going to have.
Let's use the block grid here. All we need to do is put our content in list item elements (<li>s) within an unordered list (<ul>), and give the <ul> the appropriate Foundation class. So add content within the large-8 columns <div> so that it looks like this:
The individual items are pretty self-explanatory, except for the buttons, which are links (<a>s) with a class that tells Foundation to make them into buttons. The class that we've given to the opening <ul> needs a bit of explaining though. It tells Foundation to arrange the items in a block grid, with two items per row.
Try changing 2 to a different number and see what happens:
large-block-grid-2:
large-block-grid-3:
large-block-grid-4:
Pretty cool, huh?
Footer
Now let's add the final piece of content: the footer. On Five A Day, this contains a heading, a search box, a bunch of category links, and copyright info and social links at the bottom. We're going to add something similar, except for the links.
On Five A Day, these are in alphabetical order, but arranged in an across-then-down format, which is really hard to parse. We're going to do it properly: down-then-across. If we wanted to do this automatically, so that the content gets arranged into flowing columns containing equal amounts of content, no matter how many items we have, then we'd have to bring in the big guns and do it with Javascript.
But this is just a prototype—we can fake it and do it manually.
So this is what we add:
Whoa! That looks like a lot! But apart from the lists of links, there's not a lot going on here.
We've got the same row and column <div>s that we've already seen. Nothing new there. (But notice how the <div> containing the search button is seven columns wide. We could have made it narrower, but this way we're not required to think… We just make sure the number of columns adds up to twelve, that's it.)
The "Categories" heading has a seach box (an <input> element with a type of search) with a button right after it, on the same line.
The lists of links are just unordered lists (<ul>s) of <li> elements, each of which contains a link.
And after that we have a row containing a horizontal rule (<hr/>) and then the copyright stuff and social icons. Again we're using a span with a class of right, like in the top nav, to tell Foundation to push the icons to the right edge.
And here's the CSS to make it look right:
The first of these rules just sets the backround color of the footer, gives it a bit of padding at the top and bottom, and sets the color (for text, etc.) to white.
The second one sets the color of the "Categories" heading to white. (The first rule doesn't affect this heading because Foundation's CSS sets the color specifically for each heading style, including <h4>.)
The third rule gives the search box a bit of top margin to make it line up with the heading.
The fourth rule does the same for the button, and also removes the underline from the link (see the fifth rule).
The fifth rule makes the links white instead of blue, and adds an underline to them (to override Foundation's CSS, which removes it).
And the sixth rule sets the color of the <li>s to white (if we didn't do this, the text would be white and the bullets would be dark grey) and pushes the bullets inside the element's rectangle (by default it's outside).
Mobile Decluttering
Now all we need to do is make sure that the right stuff gets hidden on small screens. If we look at Five A Day, we can see that when the screen gets down to smartphone size, the ads disappear, as well as some of the links in the top nav.
Foundation's visibility classes let us hide and show stuff depending on the screen size. The hide-for-small class is the one we want to use here. We'll just add it to the column containing the second set of links in the top bar (see the first line)…
… and to the ad sidebar (again, the first line):
Now if you resize your browser window down to phone-like proportions, you'll see that the ads and links disappear:
The finished example is here, if you want to take a look.
Conclusion
I hope that this post has succeeded in showing you that creating an HTML prototype is really not all that difficult. If you use a framework like Foundation, a little knowledge of HTML and CSS will get you a long way.
"But this isn't a proper prototype," I hear you say, "It's just a static web page—it doesn't do anything."
Fair point.
Which is why you'll want to stay tuned for my next post, where I'll show you how to use Javascript to add some interactivity to your prototypes. (UPDATE: Here is the sequel—The Four Minute Prototype: Adding Interactivity.)
If you really want to learn all the ins and outs of this stuff, you should check out my Livetyping course.
And if you like stuff like this, you could do worse than signing up for my newsletter:
