When designing a new website the communication inside the team and with the client usually utilizes Photoshop compositions. Sometimes there is a step before visual layouts: The wireframes. Both tools, Photoshop and any wireframe software, do have their constraints. The most important aspects of this are that neither of them mimic or create a realistic and usable website.

Since more and more clients and designers notice that the web is a very flexible medium where pages behave and look different on various devices, “responsive webdesign” is gaining momentum. Designing responsively requires the user to have a feeling for the browser, the float of content. So the best way to design is to work less in Photoshop and more in the browser.

Work with production-ready code

Although many wireframing tools like Axure and even Photoshop do produce HTML, the output is not how you need it to be if you want to test a whole design or a design detail. It is not what the output was made for. Besides that these tools do not have a focus on good code. It is more of an accident that they produce code. So using a frontend framework is a much better solution if you want to reduce your own working time. It takes away the pain of counteracting common browser bugs when creating a layout. And it can help you with ready-to-use solutions for layout and design problems.

The German project “YAML” [1] (yet another multicolumn layout) gives you guidance and help. You can construct column-layouts as well as grid-layouts. You can easily construct new grids and utilize a form-framework for headache-free form construction.

YAML gives you additional features to the core framework, such as predefined buttons, navigations and an accessible tab-script (based on jQuery). With additional styles YAML provides you with a starting point that is separated from the core layout. Unlike the famous Twitter Bootstrap, YAML concentrates on layout and additionally gives you design.

THIS IS A PREVIEW. DOWNLOAD ISSUE 8 TO READ THE FULL ARTICLE.