Navigation

A Case for Coding Your Wireframes

Web Development | Sep 30, 2010

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.

CSS Wireframe Code

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).

Coding with Web Standards

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 Coloring Crayons Styles

 

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.

Designing for the Social Web

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?

Share this post
Comments (no login required)
  • Therese Samuelsson

    My dream scenario would be to show my client a rough mockup with just the basics, then create an html wireframe so my client can sort of “feel” how the website will work. And then start with the graphics, colorscheme, buttons and whatever else and implement them in the already finished wireframe.

    Unfortunately, in my experience clients want the whole shaboom from the start. Basically a picture of how everything will look, then they’ll of course want to move something, re-colour another thing and so on. When the picture is ok, they want the website to be up and running the next day (often in a CMS).
    If the client doesn’t know what he/she wants, then perhaps a mockup or wireframe won’t help them at all, but rather make things more difficult. It may be hard to se the whole picture.

    On the other hand, I’ve had clients who themselves have made sort of a wireframe in iWeb or Dreamweaver, and those clients are very easy to work with since they know what they want and have an understanding of the time I have to spend on the project.

  • http://www.jamalnichols.com Jamalnichols.com

    Nicely written article, but I think I’ll stick to Axure for my Wireframes and Prototyping. Coding up CSS and HTML for Wireframes takes WAY too long, has less features, JS interactions will be harder to implement, and they will be more difficult to modify later on. It makes zero sense to do things this way, unless you can’t afford Axure.

    • http://monkeycycle.org Michael

      Not sure about the time thing. With a basic ‘kit’ of HTML and CSS files I can post a wireframe pretty quickly. There is no major coding at this stage, simply use the elements you have and build out your library of masters as projects require. Then reuse and refine. It’s not drag an drop but more copy-paste in a text editor (for me anyway).

      JS interactions do not generally belong on a wireframe, you’re talking a higher level of resolution that comes in at the prototyping stage.

      All that said, Axure looks sexy. Downloading a demo to give it a spin.

    • RJHBookLinux

      My vote goes with Axure also. I spend majority of my time every day in Axure developing the UI for large scale corporate webapp’s, and I’d be lost without it!

      Thanks for the post nevertheless!

  • http://laroouse.com esranull

    nice post thanks a lot

  • http://www.childmonster.com/ Childmonster

    I dont use it. but thanks for the posting

  • http://monkeycycle.org Michael

    Nice!

    I started providing HTML wireframes about a year ago after finding that some (primarily remote) clients found reviewing static blueprints an odd part of the website development process.

    Aside from having a base template (960 css) I added jquery tooltips for annotations and link the template types (section, page, post, etc.) logically to give clients a feel for navigating the site. Oh, and a funny additional mod I made along the way. I wireframe in blue with screens used in backgrounds of various page areas. The blue helps cement the notion of a blueprint in the client’s head and seems to help make them happy about paying for my ”sketches’.

    Overall, folks are quite pleased and the approach helps tremendously with feedback and tweaking iterations. As a final step I submit the approved wireframes in PDF format as part of the package for client records, etc.

    , michael

  • http://sixrevisions.com Jacob Gube

    @Therese Samuelsson: I was going to comment on something entirely different, but I read your comment so I decided to talk about that instead.

    I think you’ve hit the nail in the head, at least for people working with small/medium-sized businesses (which is probably most of us). You show Mr. Johnson, a business owner of a local coffee shop, a wireframe for his website, and he’ll say “This looks way too simple, why is it just black and white, why is it so square, where’s my logo?” Then you’ll spend the rest of the day explaining what this wireframe really is. And he won’t care. He just wants a decent-looking website for his coffee shop.

    Wireframes/prototypes are great for teams of developers/designers. And especially for web applications (or anything that involve UIs). You can swap ideas around quickly and you’re all on the same page (i.e. you are all familiar with the purpose and value of a wireframe/low-fed prototype). You can quickly iterate right there. This is also applicable to contractors and agencies working with large project budgets (decision-makers in those projects probably have their own in-house designers/developers to consult with in the process). In any other context — wireframing is either a waste of your time or a waste of your client’s time. No one will care.

    The folks that use and advocate wireframes are the loudest and most visible on the Web (and I admit, me included, at least in recent years — but I’ve worked the small- and medium-sized business segment in the beginning), but their experience certainly doesn’t reflect what most web developers and web designers go through.

    • http://wevegotideas.com jhoysi

      I think you’re right about the “audience” for wireframes. As much as I would like to think that including the clients in to the process would be helpful, in reality my experience has been on par with @Therese Samuelsson’s where it causes more time in explanation than speeding along where we are going.

      I really enjoyed the argument in this article for coding wireframes. I’ll admit, it’s something that I have not yet done but will be sure to include in my process for the next project I work on. I use wireframes (behind-the-scenes) every day in my process, but taking it to this next level I think will really help shape the project early on.

  • http://www.bryanthughes.com Bryant

    Great well-written article; however I’m going to have to disagree and I’ll give you my perspective from a developers point of view.

    As much as I agree that its awesome to have working prototypes to show the client before you start the development process, mocking up html/css prototypes takes way too long than say creating a wireframe and turning it into a prototype in Fireworks (using their proprietary tools).

    I’ve built html/css prototypes before to get a working model going, but when it comes to actually building the page with final design comps, its usually easier and quicker to just start from square one. I’m not saying its not possible, but for me its just easier to start over than to figure out how to integrate it.

  • http://rorschach-design.com rorschachdesign

    I love the wireframe, for me it just sort of helps visualize the abstraction that is web design.

    I’m just starting and prefer paper and pen wireframes followed by an illustrator version. I’m sure my opinion will change as I deal with more and more clients.

    Great article, and definitely one of the most underused tools.

  • http://www.aboutadirk.com Dirk

    I found that using Axure is a good option. Don’t want to make this post sound like a commercial, so I’ll let you Google the program instead of linking to it, but it helped me a lot in creating usable wireframes. It spits out ugly tables, but at least you can show that to anyone.

  • http://www.cofamedia.com Edwin

    Excellent article. We use a variety of wireframe tools from mockflow to iplotz. Wireframes work well, but only if the supporting IA and requirements have been signed off.

  • http://monkeycycle.org Michael

    Full agreement here that actual development should start from a clean slate — ideally with a good toolset that you know and don’t need to relearn with each project. It’s possible to work from the HTML/CSS wireframes — refining spacing, typography, and page treatments based on the final site design — but it may be a shoehorn at times.

    All of that said, it’s important to recognize that wireframes and higher def prototypes are deliverables for specific phases of client communication and project spec development. There’s nothing that says you need to hand the HTML wireframes to the actual developer (or yourself at that stage) for building out. I certainly wouldn’t expect my homebuilder to pour a concrete foundation directly on top of the blueprints.

  • http://www.justinmind.com Dan Moser

    A specialized tool for creating interactive wireframes you might be interested in checking is Justinmind Prototyper.
    It saves a lot of time, you don’t need to code a single line so it definitely accelerates your wireframing processes. You’ll be able to present to your clients fully interactive proposals in a really short time, a lot easier to sell your ideas.

    Check it on this video: http://bit.ly/bXJBmv

    Regards,
    Dan
    @Justinmind

  • http://www.protoshare.com Andrea at ProtoShare

    Jake, great article on making a case for functional wireframes. As you (and other commenters) noted, complex wireframes or sharing them with clients may not always be needed, but at least going through the process with internal team members is.

    For those who aren’t strong coders, but want to view or share their prototypes as they would appear on the Internet, another option is ProtoShare, which is built in HTML, CSS, and Javascript. It can then be shared with others for feedback, or exported to a separate URL to test with users.

    This allows designers and developers to quickly create interactive wireframes and test functionality without the need to code. Of course, you can use styles or create custom components, if desired.

    I agree with @Michael: the wireframes are to communicate (not only with the client, but with other team members) clearly and effectively to ensure a sound product. The specs created are then shared with developers to create the final build.

    Lots of great insights. Thanks for the share,

    Andrea
    @ProtoShare

  • lisangela

    I see this a lot. Web designers that don’t code or can’t do it quickly would rather reject a process that includes it than see the possible benefits. Wireframes are NOT for client approvals (unless your client is capable of understanding what they are). They are to make the process easier when you go to the final programming stage. For larger, database-driven sites, wireframing is the smartest way to go. Coded wireframes are even smarter. It allows you to design the experience of the site without being distracted by graphics.

    What a lot of independent designers end up doing is allowing their client to dictate the visual design then forcing the code to fit it after the fact. The client gets what they think they wanted and the designer gets paid. The site may look good, but the experience of using it is less than ideal. Like any profession, we have an obligation to guide them (gently) to a design that best suits their needs and be able to inform them of the reasons why. And the best designed site can change visuals easily with a new style sheet while allowing the structure (previously defined by the wireframe) to remain intact.

    That said, if you don’t want to code them, you don’t have to anymore. There are tools like Protoshare that will do it for you. And… no offense to users of Axure, but there are tools available at a fraction of the cost that make it look obsolete now.

  • http://mkblog.exadel.com Max

    Try out Tiggr: http://tiggr.exadel.com. Tiggr allows you to create real prototypes and wireframes. What you design in Tiggr, you will get in the real world. There is a Web Preview options, you can view the wireframes in any browser and share them with others.

  • http://www.webmodia.com David | WebModia

    As with most things in this profession, there are many ways to accomplish the task at hand and you do what works best for you, your client, and the project/audience.

    For me, prototyping in HTML/CSS is the way to go, and that includes wireframes if they are part of the process (and for most projects I do, wireframes are used). If you use some forethought, and know what you are doing, you can drastically increase your efficiency and decrease your overall production time by starting in code sooner.

    In fact, again for me, I find that designing in the browser is my MAIN canvas, and only use a graphics editor (fireworks, photoshop, etc) to create whatever graphics are needed, as needed. With today’s modern browsers with improved support for advanced standards and techniques – and the adoption of progressive enhancement and understanding that sites do not need to look the same in every browser – it just makes sense. For me. :)

  • http://its-aim.co.cc Idraki M.

    Much of the cases with clients, notably don’t know how web really works at the back, they said want to see the design, but actually they want the prototype to see the structure of the website and to play around in that static page, so they can choose what color they want, how many column and so on, rather than stated earlier what kind of design do they want, 2 column, 3, sidebar, whatever. It is hard to work with them, but it is harder if you work like under them. Not like freelancer, its like having a contract to work at their place, at their time, with their hardware, which i am stuck now, and man, its a hard life I am into now

  • Dave

    Has anyone ever tried using Expression Engine with the Navee plugin?