A complete guide to simple wireframing using HTML5 and CSS3

Creating a wireframe isn’t as easy as it seems to be. The world of web design and development is filled with wireframing and prototyping tools which aren’t capable of producing a simple layout quickly. Thanks to popular web technologies including HTML5 and CSS3, it has become possible to create a wireframe with elaborate details regarding the layout, font, positioning etc. It is through this post that I intend to share with you a stepwise guide on creating easy-to-interpret wireframes using HTML5 and CSS3. So, let’s hop onto these steps without any further adieu.

Step 1- Creating the HTML5 markup structure

HTML5 is rich in innovative structural elements which make it convenient for you to create a wireframe using ids and classes. Here’s a quick overview on these elements which render a simpler and cleaner document structure:

  • section- this element represents a generic section of document or application, for example a chapter

  • header- this element represents a section’s header. Do remember a header can contain a lot more than the section’s main heading. For example, you can use opt for including a sub-heading, bylines etc.

  • aside- this element represents the content which is tangentially related to the content around the same.

  • nav- this element represents a certain section of navigation links and is best suited for table of contents and website navigation

  • footer- this element represents the section’s footer and includes details(for eh: links to related documents, author’s name, copyright data etc.) about the particular section under focus

Now, for instance for my dummy website, I’m inclined on include a centered page along with a header and footer, a separate area for main content and last but definitely not the least a sidebar on the left. For this, I’ve used different HTML elements for marking up the structure as shown below:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Example</title>

</head>

<body>

<div>

<header></header>>

<article>

<aside></aside>

<section></section>

</article>

<footer></footer>

</div>

</body>

</html>

Next, we need to set the above mentioned HTML elements to display: block; in order to ensure that our browser recognizes them. Also, we need to set certain style attributes for the above elements and divs to make them workable. The code snippet for the same is shown below:

article, header, nav, aside, section, footer {

display: block;
min-height:150px

}

Step 2- Visualizing the layout

Before proceeding ahead with positioning of the HTML5 elements, we’ll need to visualize the layout. The same can be done using any one of the below explained options:

Option No.1- The ‘Outlines’ setting

Outline setting is compatible with all major browsers and doesn’t affect the width of any of the HTML5 elements. The code snippet for the same is shown below:

article, header, nav, aside, section, footer {

outline: 1px solid #000; }

Successful execution of the above code will result into the following:

Option No.2- Using HSLa

For better representation of hierarchy of HTML5 elements, you can opt for HSLs(or RGBa). The best thing about using this option is that the opacity feature will make all the overlapping HTML5 elements appear dark colored.

Code snippet that needs to be executed here is shown below:

article, header, nav, aside, section, footer {

background: hsla(300, 30%, 30%, .4); }

Do remember, the above method doesn’t work in case you’re looking for having basic background colors in your mock-up.

Step 3- Positioning the HTML5 elements

Well, there are ample number of measuring tools in browser or operating system, CSS frameworks, background grid images etc. that can be utilized for positioning different HTML5 elements. In this tutorial, I’ll using a specific code snippet for rendering a fixed width to the page along with a sidebar on the left and content towards the right side and even between the header and footer. The code snippet that I’m referring to is shown below:

body > div {
width: 800px;
margin: 0 auto; }

div article {
overflow: hidden;

margin: 20px 0;

padding: 5px; }

aside {

width: 150px;

float: left; }

section {

float: right;

width: 590px; }

Successful execution of the above code snippet will result into the following:

Step 4- Adding sample content

Once you’re done with creating the layout, it’s time to add sample content. Well, there are multiple methods of doing the same. You can opt for throwing chunks of Lorem Ipsum onto the page. HTML Ipsum is a brilliant website which wraps all your Lorem Ipsum text into a common markup-allowing you to get everything together on a single web page. Then, there is PlaceHold.it website which offers outstanding image placeholder service wherein you receive placeholder images of any desired size. All you need to do is simply call each image via a specific URL request, for example: http://placehold.it/350x150, where 350 is the image width and 150 is the image height. Moreover, if you’re planning to include a map in your layout, then I recommend pulling in a basic map in the form of an image using Google Static Maps.

Step 5- Use a specific function for mimicking the desired functionality

Instead of writing lengthy code, opt for using a few functions for mimicking the intended behavior. For instance, if you want a specific elements to be displayed each time a link is clicked, then go ahead with building a wireframe of the window. Next, hide this window by default and finally using jQuery for showcasing it on a mouse click.

Step 6- Use the PolyPage plugin for simulating states within a web application

While creating wireframes for a web app, you might be in a need for displaying multiple states of a single page. For this, you can use the PolyPage jQuery plugin which will allow you to use classes in the HTML5 markup for representing elements that would be available for multiple states(for eg: when the app user has signed in and when he/she has signed out). Hence, merely clicking on a link will toggle each state, thereby allowing you to demo the two different states to the client.

That’s it for now!

Wrapping Up

Though original designs look great on paper or in pdf file format, creating HTML pages from the very beginning is something that will save you and your client, an incredible amount of time, money and efforts.

Author Biography:

Samuel Dawson has really a nice experience in developing various applications in web development. He is currently working in Designs2HTML Ltd- a nice & valuable PSD to WordPress Conversion service company with exuberant approach. Samuel loves to do in-depth research on various things including web design and development.

About samueldawson