Simple CSS based wireframe annotation
A while back I created a simple CSS based solution to annotate wireframes for one of my clients. This created a simple web based view of the wireframes. I created the wireframes in OmniGraffle. As a side note, I love OmniGraffle. It’s one of my most favorite applications. The Omni Group makes amazing software in general. If I didn’t have to use a Windows PC for work, I would be using their software all the time. It makes me sad that there isn’t a version for Windows. My favorite part of this solution is that is works on screen and in print. By creating a print version of the CSS it’s a simple process to print out a non interactive version of the wireframes if you need a hard copy.
The basic idea is to have a simple wireframe image loaded up with an image map to handle navigation. The image map part in this example was created using OmniGraffle, but you could use which ever tool you prefer.
1: <map name="GraffleExport">
2: <area shape=rect coords="20,366,169,450" href="News.html">
3: <area shape=rect coords="16,232,138,246" href="Products_List.html">
4: <area shape=rect coords="25,196,158,210" href="Suppliers_Page.html">
5: <area shape=rect coords="137,155,162,169" href="Products_Search_Results.html">
6: <area shape=rect coords="181,366,453,450" href="News.html">
7: <area shape=rect coords="466,106,752,180" href="About_CP_-_Careers.html">
8: <area shape=rect coords="466,331,750,450" href="Customers.html">
9: <area shape=rect coords="466,189,750,321" href="Suppliers_Overview.html">
10: <area shape=rect coords="0,0,13,14" href="Stucture.html">
11: <area shape=rect coords="686,77,740,91" href="About_- Careers.html">
12: <area shape=rect coords="175,77,222,91" href="News.html">
13: <area shape=rect coords="121,77,181,91" href="Products.html">
14: <area shape=rect coords="62,77,127,91" href="Services_Solutions.html">
15: <area shape=rect coords="217,77,266,91" href="About.html">
16: <area shape=rect coords="29,17,256,59" href="Landing_Page.html">
17: <area shape=rect coords="643,77,693,91" href="Contact.html">
18: <area shape=rect coords="25,77,65,91" href="Landing_Page.html">
19: <area shape=rect coords="512,17,739,59" href="Login_Register_block.html">
20: </map>
For the notation part the notes are contained in DIV tags at the bottom of the HTML document and then placed with CSS and use JavaScript for the moue over behavior below is an example of one note.
HTML of the note:
1: <div class="noteblock">
2: <div class="note" id="note001" onmouseover="return escape(document.getElementById('note001text').innerHTML)">1</div>
3: <div class="notetext" id="note001text">
4: 1. This is the login is / register box. The behavior is for it to dynamically swap out with login box if selected. <br/>
5: <img src="loginNote.png"/>
6: </div>
7: </div>
The CSS used handle to layout and display:
1: .note {
2: font-family: tahoma, Arial, Helvetica, sans-serif;
3: font-size: 9px;
4: font-weight: bold;
5: background-color: #FFFF99;
6: border: 1px solid #FFCC33;
7: color: #996600;
8: width: 16px;
9: height: 16px;
10: text-align: center;
11: visibility: visible;
12: }
13:
14: .notetext { visibility: hidden; }
15:
16: #note001 {
17: position: absolute;
18: left: 493px;
19: top: 20px;
20: }
21:
The for the to get the note to appear next to the cursor I use wz_tooltip.js. To handle the hide and reveal the notation layer I put together the following javascript:
1: function getAllRules()
2: {
3: if (document.styleSheets)
4: {
5: var theRules = new Array();
6: if (document.styleSheets[1].cssRules)
7: theRules = document.styleSheets[1].cssRules
8: else if (document.styleSheets[1].rules)
9: theRules = document.styleSheets[1].rules
10: else
11: return "Your browser doesn't support rules[] or cssRules[]";
12:
13: var returnstring = '';
14: for (var i=0;i<theRules.length;i++)
15: {
16: returnstring += i + ' = ' + theRules[i].selectorText + '<br>';
17: }
18: return returnstring;
19: }
20: else
21: return "Your browser doesn't support document.styleSheets";
22: }
23:
24:
25: function hideIt()
26: {
27:
28: if (!document.styleSheets) return;
29: var theRules = new Array();
30: if (document.styleSheets[0].cssRules)
31: theRules = document.styleSheets[0].cssRules
32: else if (document.styleSheets[0].rules)
33: theRules = document.styleSheets[0].rules
34: else return;
35: theRules[0].style.visibility = 'hidden';
36: }
37:
38: function showIt()
39: {
40: if (!document.styleSheets) return;
41: var theRules = new Array();
42: if (document.styleSheets[0].cssRules)
43: theRules = document.styleSheets[0].cssRules
44: else if (document.styleSheets[0].rules)
45: theRules = document.styleSheets[0].rules
46: else return;
47: theRules[0].style.visibility = 'visible';
48: }
49:
For the print CSS it’s loaded and defined with the CSS print media type
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Here’s the print.css:
1: .note {
2: font-family: tahoma, Arial, Helvetica, sans-serif;
3: font-size: 9px;
4: font-weight: bold;
5: background-color: #FFFF99;
6: border: 1px solid #FFCC33;
7: color: #996600;
8: width: 16px;
9: height: 16px;
10: text-align: center;
11: visibility: visible;
12: position: static;
13: }
14:
15: .notetext {
16: font-size: 9px;
17: visibility: visible;
18: }
19:
20: body {
21: margin: 0px 0px 0px 0px;
22: padding: 0px 0px 0px 0px;
23: }
24:
25: #top {
26: display: none;
27: }
28: #top a {color: #999999;}
29:
30: .noteblock {
31: margin: 26px;
32: padding-top: 12px;
33: border-top: 1px dotted #666;
34: }
Here’s how it looks:
You can view the example of the wireframe notation.
I found this form to very helpful with several of my clients. My favorite part is the ability to walk a client through the interaction and leave it behind since the notation is inline it helps answer most of the questions about interaction that are not represented by the wireframes.
