A Case for Coding Your Wireframes

Working as a designer day after day can be laborious. Luckily, the field has expanded, and so the process has become simpler. Many free tools and resources are out there.

Wireframes bring elegance to design mock-ups. They are the basic structure of a website, with colors and enhancements removed.

They are used to view design concepts with just the bare essentials, and they can provide a useful perspective on any project.

Most wireframes are created in software suites such as Adobe Photoshop and Fireworks, but some websites enable you to create wireframe images right in the browser.

In this post, we’ll go over coding a basic wireframe image in HTML and CSS and see how it can benefit the creative process.

Why Bother?

Why spend time sketching a website’s structure? In some cases, it might be unnecessary, but it can help when you’re stuck in a rut or struggling to see the big picture.

It can benefit both designers and clients. In paid work, you’re responsible for pleasing the client. Showing the basic structure of their soon-to-be-designed website can give clients relief and a sense of control over the whole process.

But if the design is very basic or has a simple structure, then creating a wireframe might not be worth it; mocking up the entire thing in Photoshop, with buttons and color, might be just as quick.

Deciding what steps to take does require time and critical thinking. After all, a wireframe is merely a tool. It is underrated by many web designers but surprisingly useful once understood.

Prototyping Wireframes in Code

For years, Adobe design software has been the premier suite for wireframe creation, but the web has undergone substantial change and is still evolving.

The rise of coding standards and increase in HTML5 documentation are big steps towards a common web. Now, coding a basic wireframe in HTML and CSS is no more work than tackling the job in Fireworks.

With wireframes, you can attack a project head-on from multiple angles. You can even test for compatibility with CSS2 and CSS3 techniques and browsers. Things don’t need to be complex at the beginning; a wireframe simply serves as a solid foundation to begin coding.

Sharing content also becomes easier with a wireframe. You can host all the files you need on any web server, and you can set up a demo directory and forward live updates to clients and overseers of your project. Making changes, such as quick tweaks to margins and widths in the document’s CSS, is simple, too.

Standardize Code for the Long Haul

Wireframes save time in the development process. If the CSS styles for your basic elements are already written, then the rest is just filler (important filler, mind you).

Start out properly, with the correct HTML document type and directory structure. Document types aren’t too different from one another. You can read about them on the W3C Specs page. They don’t matter much in the old World Wide Web model, but HTML5 is thorough and allows your website to grow.

You have to test compatibility on as many operating systems and browsers as possible anyway, and the wireframe prototyping stage is the perfect time to do this, because you’re already focused on arranging the layout.

This is also a good time to work on a mobile-friendly template. As the structure changes, you should be able to incorporate ideas and manipulate the document’s code. Development becomes easier because there is less code to clutter up your mobile and custom styles.

Beginning the Structure of the Document Wireframe

The best way to start is with a blank slate, because it affords you the most creativity. The obvious elements to include in the code (as in any other web document) are html, head and body.

This is the skeleton. You’ll need a few more elements for the wireframe to look good. The div (or division) is notable. This is the element used to box certain areas of the page, such as the logo or search box.

Divs are the building blocks of HTML5 wireframe prototypes. Anything and everything can be enveloped in a div, and styling is a breeze when you apply classes and IDs to elements. Much of your main code will be split up by divs because they are the basic block elements.

With the new HTML5 specs, an element called nav has been introduced. This can be combined with an unordered list and some CSS properties to create and define your website’s main navigation area. Below is a simple example of how you could structure your nav:

<div id="header">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

Working With header and footer Elements

You’ll notice in the example above that I used a div with an ID of header to separate my heading navigation. This is perfectly acceptable and nothing is wrong with the above code. HTML5 gives us other options, though.

The header element in the new HTML5 specs allows you to further define your structure, which is useful mostly for web page crawlers and screen readers, which separate a “heading” portion of the content. It shouldn’t make any difference to your users, and it keeps your code shipshape and show that you really understand what you’re talking about.

Another interesting element that’s been added is footer. Same idea: use this element in place of a div to separate your footer content. Generally, footers are out of the way and contain basic information about the website or company.

You could add links to the footer and use a nav element to define some of them, but that would be ill-advised. The nav element specifies the main navigation area, so adding it to the footer or anywhere else would be redundant.

In this scenario, using the footer element and separating the navigation links as an unordered list is best. You could use a columned footer, with a number of columns of links. These could be separate div elements displayed next to each other, all wrapped in the main footer.

CSS Techniques for Styling Wireframes

If you understand HTML and have worked with the web for a while, then you probably know some basic CSS. Many of the new features of CSS3 are for adding fancy rounded corners and drop-shadows to text.

I don’t mean to suggest that CSS styling is not important, but the core layout and positioning is what ultimately makes your website’s structure. With CSS, you define width, margin and spacing. These are the basic properties of most web elements, and they’re the last step in creating a truly outstanding wireframe.

If you’re intrigued by CSS3’s new properties and selectors, then check out Webdesigner Depot’s collection of enhancements. It contains guides all over the web about the new features in CSS3.

Adding clearfix to Styles

If you are unfamiliar with the clearfix technique, do some research. It’s a popular class that you would add to a div container that holds two or more floating blocks.

If you’ve never heard of clearfix, it might seem confusing, but the concept is simple. Think of a container div that has two divs inside it, both floated left. By default, most browsers would render the two columns as directly touching each other, and the containing div would expand down the page to fit whichever column is longest.

By adding a clearfix class to your container, both columns will fit happily inside the container div, which expands down far enough to fit both elements. This solves many problems in wireframe prototyping, particularly with two-column layouts (i.e. the main content and the sidebar). This method will also work for three- and even four-column layouts, each column would just need to fit in a smaller space.

Displaying CSS: Keeping Styles External

What to do with CSS placement is another important decision. Professional web designers and developers simply suggest keeping an independent .css file, separate from your HTML code.

This way, the structure is in one document and the layout and design is in another. Both are equally important to wireframes, but they perform distinct tasks.

All of your HTML code is strictly structural. You can put links inside paragraphs inside container divs inside other containers, and so forth. Styling controls the size, spacing, margins and lettering of paragraphs and links, and the wireframe defines the width of containers and their placement on the page.

Page elements provide further examples. You would code the div containers for content and sidebars, but you would style and position them using CSS. For a designer, understanding how to separate content and style is key to mastering wireframes.

Implement Dynamic Page-Element Placeholders

Fancy jQuery effects and Ajax-ified web elements seem to be all the rage. Trends grow, and nearly all popular websites feature some dynamic content. It’s important to consider. If they complement the design, why not feature blocks in your wireframe?

Developing an entire back-end system for a dynamic log-in box might not be practical, but noting the JavaScript libraries you will need is a great start. You could also code styles that structure this box and set things in place for later, when you would add color and detail.

These themes can be applied across many interface elements. You could use search suggestions similar to Google’s or leave notes in your code to implement a dynamic news or Twitter-feed box, either of which would make your wireframe dynamic and provide an elegant way to represent a solid-state object in place of dynamic content. During the prototyping phase, this is all you need anyway.

Common Wireframe Development Mistakes

It’s difficult to go wrong when you’re just starting to code the basic structure of a website, but keep certain details in mind.

Remember that a wireframe’s purpose is to present a framework without much detail. It’s useful during the initial stages of planning the page elements; you can delve deep into your website and see the big picture.

Keep things simple and in order. Overlooking this is a common mistake and it will cripple your ability to meet deadlines. A wireframe doesn’t need to be anywhere near perfect; it’s supposed to be a rough outline of the website. Even a strictly HTML and CSS wireframe should consist only of page element outlines.

Avoid detours by focusing on your main goals. Remember why you started the process with a wireframe in the first place!

Wireframes can also solve many problems that beset the design process. Coding a prototype in HTML and CSS is the best way to get a head start on a web project, large or small. It’s a simple, efficient way to give shape to your ideas.

A ton of articles on the web relate to the wireframing process. I’ve covered the coding and development side of things, but to learn more about wireframing, keep reading. The design tips are out there; you just have to find them!

This post was written exclusively for Webdesigner Depot by Jake Rocheleau, a passionate web designer and social media enthusiast. Jake loves reading and writing about the latest digital Internet trends and networking in the design community. Check him out on Twitter @jakerocheleau for more about his work.

What are your experiences with the wireframe process? Do you work in code first or in some other type of software? What do you think are some benefits to prototyping in code first?

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.