Process diagrams help users figure out the workflow they are supposed to go through. Processes are in general extremely efficient way to complete tasks in certain order to accomplish the desired outcome. They are, of course, usually derived from information technology what comes to modern software applications. Software engineers tend to design systems in a controllable way thus ending end user products reflecting the intended workflow in the background. Processes can be typically seen in online shops when the customer is checking out. Right after having shopped the customer is directed to checkout process, which consists of several phases, like entering shipping address, choosing shipping method, providing payment information and finally reviewing and submitting the order.
Webshops usually show the process as a diagram. It helps customers to understand what phase they are currently completing and what phases are still left. These diagrams are easy to draw with a graphics application while there is another way to display such series. Cascading style sheets can be used to show great looking diagrams with minimal effort. I have composed some code to show a few samples. The code relies heavily on strict markup as well as CSS 3.0, which is - unfortunately - less supported in mainstream browsers. With a little quirk hacking and browser-depended coding I managed to create circles (or bubbles) I wanted to use in my sample process diagram.
Vertical process diagram
The first sample shows a vertical process flow. It has its phases stacked and each phase title is displayed inside a circle. Next to the phase is a short description.
- Checkout
- Check your shopping cart
- Payment
- Place your payment
- Delivery
- Wait for delivery
The circle is created using CSS border-radius property. This actually rounds the corners of a box, but specific values make the box look like a bubble. Not all browsers support the border-radius property. The required effect can be reached using -moz-border-radius and -webkit-border-radius properties in Mozilla-based browsers. Other CSS properties I have used in this example place the title in the middle of the circle.
The following markup constructs the process and its phases. In this example each phase is an element of a definition list.
<dl>
<dt class="active">Checkout</dt>
<dd>Check your shopping cart</dd>
<dt>Payment</dt>
<dd>Place your payment</dd>
<dt>Delivery</dt>
<dd>Wait for delivery</dd>
</dl>This style sheet actually does the trick and shows the definition list as a process diagram.
dt {
-moz-border-radius:10em;
-webkit-border-radius:10em;
border-radius:10em;
clear:left;
float:left;
height:5em;
line-height:5em;
margin:1em auto;
padding:.5em;
text-align:center;
vertical-align:middle;
width:5em;
}
dd {
float:left;
height:5em;
line-height:5em;
margin:1em auto;
padding:.5em;
vertical-align:middle;
}By varying the color of the circle in each phase you can indicate the process flow. The next set of styles does the coloring.
.active {
background-color:#6C0;
color:#FFF;
}
dt {
background-color:#CCC;
color:#999;
}Horizontal process diagram
Displaying the process diagram horizontally may require some more effort. I have used ordered list (ol) element of HTML to set up the sequence. Each phase equals one list element which I have forced to float to left ending up with a horizontal appearance. This example uses mainly the same code as above with only minimal changes.
-
- Checkout
- Check your shopping cart
-
- Payment
- Place your payment
-
- Delivery
- Wait for delivery
The horizontal diagram uses the following markup, which is still quite minimalistic.
<ol>
<li>
<dl>
<dt class="active">Checkout</dt>
<dd>Check your shopping cart</dd>
</dl>
</li>
<li>
<dl>
<dt>Payment</dt>
<dd>Place your payment</dd>
</dl>
</li>
<li>
<dl>
<dt>Delivery</dt>
<dd>Wait for delivery</dd>
</dl>
</li>
</ol>Style sheet needs a little modification. Styles are mostly the same as in vertical process diagram, but make the diagram appear horizontally.
ol {
list-style:none;
}
li {
float:left;
width:10em;
}
dt {
-moz-border-radius:10em;
-webkit-border-radius:10em;
border-radius:10em;
height:5em;
line-height:5em;
margin:1em auto;
padding:.5em;
text-align:center;
vertical-align:middle;
width:5em;
}
dd {
height:5em;
margin:auto;
text-align:center;
width:10em;
}Final words
Process diagrams give an overview of the task in hand. They are usually made with graphics software but strict HTML puritans like to achieve the same results using code only. You may ask why bother? There is nothing wrong with using graphics, but they don’t usually scale to various display terminal resolutions. Whenever the process changes the graphics must be updated. Transferring graphics over the net also consumes precious bandwith, so there are many reasons why use markup and styles to create simple graphics. Certainly there are a few drawbacks too. Styles lack the vividness of versatile graphics applications and they are inflexible to reach all the most complicated details. This article, however, shows another approach to attain a graphical specialty in web pages.