Response design/web development is difficult to get right out of the box. There are many tools that claim to make this process easier but at the end of the day nothing beats live wireframes. Before a single line of code is written, concepts can be fleshed out and discussed as if a real website was present.
Live wireframing turns a waterfall model around into something much more flexible. Before the design begins, a site is built on simple Foundation or Bootstrap blocks. All the stakeholders can preview the logic and click through live wireframes to better understand the flow. Workflow diagrams, sitemaps and static wireframes are great visualization tools, but, as car brochures are not indicative of how a vehicle will drive, these tools do not help the client fully perceive the end result. In the long run they also make more financial sense. By reducing number of mistakes, iterations and feature patches, the process with more guided steps throughout is cheaper.
What makes this easy?
Writing HTML is not a ton of fun. It's a process without immediate merits and tags have to be placed correctly. In order to speed this up I thought there has to be a better way. And yes there is, Jade.
Jade is a simple templating language that generates HTML.
Example:
div: a(href="http://google.com") Google turns into
<div><a href="http://google.com">Google</a></div>
Jade block hierarchy is similar to Python and so none of the tags have to be closed. For a better list of Jade feature check out their language reference.
Now that layouts can be coded much faster, what about CSS and look and feel. Well that's where Foundation comes in. It could be any front end framework, I just tend to prefer Foundation. It's lean, responsive and has all the features that most websites need.
How to do it?
I've uploaded a simple project to my Github repository but starting with jade is very easy. The installation has to be done via npm and at the end you will get a command line tool "jade". I won't cover these steps because their documentation is most up to date and everyone should learn how to Google. :) In the root of the living wireframe create two folders: jade and public. cd into jade folder and run: jade --watch ./*.jade --out ../public/ and that's it. All jade templates will now get translated to html. In order to integrate foundation I prefer a public CDN, http://www.jsdelivr.com/#!foundation. Remember, this is is supposed to be lightweight.
So hopefully that gets everyone into more prototyping and remember, two hours of planning is two weeks of less coding (or something along those lines).
