Wire-framing For The Responsive Web With Initializr And Bootstrap CSS

Share this:

…or why you should teach everyone in your online-focused business at least the fundamentals of HTML

The web is rife with wire-framing tools, widgets and utilities to help you sketch out the user flows and layout of a client’s website. But there’s one thing they all have in common; limitations.

Be it price, functionality, or how the completed wireframe must be distributed to the client; every tool out there has some caveat or another that will ultimately get in your way.

If your wire-frames don’t have to be delivered in a specific way for your clients to be able to see all the fancy animations and example drop-down menus you’ve embedded in them, then you’re likely dealing with a tool that produces wire-frames that are bland, flat and uninspiring. While this will get your point across, it certainly won’t turn any heads, and it most certainly won’t show how your ideas translate to different devices, screen sizes and more.

Wireframes don’t have to be dull, uninspiring and rigid. The solution is right under our noses, and it’s the very thing websites are built out of: HTML and CSS.

This seems obvious in retrospect. After all; every website is, at its core, a wire-frame.

Every website is built from a variety of positioned boxes which, when given a sufficient amount of aesthetic flair, can be disguised and made to look beautiful. But there’s absolutely no getting away from the fact that every website is, at its heart, a collection of rectangles positioned cleverly on a canvas.

Sound familiar? It should do, because this is exactly what a wire-frame is.

Wire-framing in HTML is not exactly a new concept, nor is it a particularly groundbreaking one. But it’s a powerful and effective way to present your website ideas to clients. After all, what’s better suited to demonstrate a website than a website. There are already wire-framing tools out there that let you play with the components of various HTML frameworks, Jetstrap for example, but they share many of the same limitations as other wire framing solutions. Why shouldn’t we learn a little HTML and CSS and get down to the bare metal.

The beauty of HTML and CSS is that they are almost infinitely malleable, allowing you to break free of the restrictions of any given wire-framing application and polish your presentation to your hearts content. How far you take wire-frame implemented entirely in HTML and CSS depends only on how much time you’re willing to spend, or expert resource you’re willing to commit, to produce a punchy presentation.

But there’s a problem with HTML and CSS; the learning curve.

Unlike a drag and drop wire-framing application, HTML and CSS requires the operator to overcome a slight technical hump and actually learn about the very fundamentals of how websites are put together. Now it’s not entirely feasible for everyone in your web-focussed business to learn HTML, but you should at least try to give anyone involved in the process of collating and wire-framing ideas a crash course in the basics.

The other problem is time. Creating a beautiful HTML and CSS layout isn’t easy, or quick, but there are tools to mitigate this. Bootstrap CSS and Initializr are some prime examples.

Bootstrap CSS is a comprehensive library of CSS styles and a framework for website building which will allow you to quickly piece together a layout based upon a “grid system.” By default a Bootstrap grid spans 12 columns in a 940 pixel wide layout, and your wireframe can have boxes that span one or more of these columns, in addition to one or more rows.

Thanks to the grid system, Bootstrap has some fairly rigid conventions for layouts. With this in mind I decided that the initial stage of wire framing, committing your ideas to paper, could use some optimisation too. I have created Bootstrap Wire-framing Paper; paper with grid lines spanning 12 columns, each representing 60px of width on a standard size layout, and 11 gutters of 20px in between.

Bootstrap gives us column widths from 60px to 940px ( these may differ depending on how it’s adjusted to the width of your browser window ). Bootstrap’s responsive CSS ensures that these columns will adjust in size proportionally for larger and smaller screens.

Initializr is simply an HTML5 boilerplate index.html, with jQuery and Bootstrap bundled and included to save you the hassle of sourcing them and putting together your own template. As its name suggests, it initialises any web project and gives you the basic framework to get started.

Placeholder images can demonstrate the interplay between images and overlaid text.

On top of Bootstrap and Initializer I use a couple of tools for providing placeholder images and text. Most web developers will have heard of Lipsum.com, which is great for generating snippets of “Lorum Ipsum” text for filling boxes. What you may not know is that similar services exist for images.

The two image place holding services I found most useful were the clean and simple placehold.it which gives you a rectangle with the image size written on top, and the much more impactful lorempixel.com which will actually give you a themed, inoffensive photo where you need to demonstrate how copy might sit on top of a busy image, or simply add a touch of polish to your wire-frame.

If you can get away with it, there’s also the stupendously cute placekitten.com, I think the name says it all.

Both PlaceKitten and LorumPixel work well if you specify slightly different image dimensions ( a pixel or two ) to nudge them into serving you distinct images. Where I wanted a 940*300 slideshow, for example, I would use images of sizes 940*300, 940*301 and so on.

Finally nothing would be complete without a dash of Flat.

UI flatness and simplicity is a design-trend that’s getting more and more popular, lead by the likes of Microsoft with their Windows Phone and Windows 8 interfaces, and slowly being adopted by practically everyone else. Flat, clean and simple user-interfaces are great for getting out of the way of content, and they also lend themselves well to wire-framing. I tend to include Design Modo’s Flat UI: http://designmodo.github.io/Flat-UI/, which overrides some elements of Bootstrap, and make liberal use of its colour pallette to draw the eye to more key aspects of a wire-frame.

If your job involves extensive wire-framing, and you’re not doing it in HTML and CSS, then I challenge you to pick up Initialzr and Bootstrap and use them to shake up the way you present your ideas to clients. If you don’t already know HTML and CSS then learn some, your business is the web and there’s no excuse for not having a grasp on the basics.

You can even find some copy and paste Bootstrap widgets to get you started: bootsnipp.com

If Flat UI isn’t your thing, you can add a dash of colour and style to Bootstrap by using services like bootswatch.com or, if you want to splurge a little cash, wrapbootstrap.com

Remember. It’s still a wire-frame, so don’t get carried away and make sure to keep it simple. Over the past few weeks we’ve found a need to tone down Bootstrap wire-frames, with concerns that they look too good and will distract from the more structural message they’re trying to get across.