Wireframing with CSS

Wireframe¹ prototyping is a useful method for illustrating the elements that comprise a website layout before the actual design is created. A website wireframe can provide a basis for discussion with clients and enable the web developer to confirm ideas about the placement of page elements, such as navigation, functionality, and content. It can be very useful as a starting point for your thinking process.

.. a jump start into your website development routine

There are a number of tools that can be used to create documents containing wireframe diagrams but HTML wireframes provide an advantage² to my way of thinking because they can be used as the starting point for your CSS layout, thus providing a bit of a jump start into your website development routine. Of course, the approach you choose will depend largely on your background and skills. If you are a Photoshop designer, this is probably not the method for you.

Start with a simple layout

Start by creating a simplified CSS layout. I usually pull one 'off the shelf' from my 'library' of basic layouts. Adjust the layout as necessary. Add appropriate elements with some preliminary positioning. Then, with any CSS layout, a simple wireframe can be created by placing a single colour border round specific page elements like <div> tags. Here, I have used a 1 pixel orange border:

  div {
       border: 1px solid #F60;
  }

There's no need to restrict yourself to one element. You may choose to use headings, paragraphs and other elements to provide greater depth to your HTML wireframe. Add other elements to the above style rule like this:

  div, p, h1, h2, ul {
       border: 1px solid #F60;
  }

I've only used the border property here but you may also decide to provide simple background colors to differentiate specific page areas.

Outlining page elements

This may all seem like a great idea but the border width may necessitate an adjustment in your <div> dimensions to compensate for the addition of the border. You may not want to do this if the layout has close tolerances between some elements. Wait! There's another CSS property that can come to our rescue. The CSS2 outline property does not affect the width of an element. It can be used like this:

  div {
       outline: 1px solid #F60;
  }

Unfortunately, the outline property is not supported by all browsers [Firefox 2 and Safari 3 are supportive but Internet Explorer is not] but it can still be a useful alternative to borders.

Good luck with your HTML wireframing!

¹ A wireframe is a block diagram that shows the main elements of a web page layout as boxes with brief descriptions. In some cases, the wirefame may be shaded/coloured to illustrate key content areas or functionality.
² An alternative view on HTML wireframes.

Technorati : css, wireframe