Software or webapp for creating fluid mockups

Question

Designers in a company I work for use InDesign and Visio for creating web-designs. All our websites have fluid layouts, and sometimes there are things like widgets or complex blocks on a page, and you can't say for sure how it should behave when the browser is resized.

All I get is a 'picture'. Static, fixed picture. Is there a software or webapp for creating fluid designs?

Answer 1

I would suggest that you use HTML and CSS for mocking up. There's nothing like the real thing. Even if someone were to develop a tool I think it unlikely they would keep updating it to match the changes is the (now frequently) updated browsers.

Of course you don't want to spend too much time on developing alternatives that may get thrown away, so doing as little as you can get away with is necessary - so placeholder images, maybe just outline boxes for some components. You asked about a webapp - so jsfiddle.net might be an easy way of doing work without worry too much about fiddling with files, but it does mean editing the raw code and not using Dreamweaver.

The trouble is it needs a different set of skills for the designers which may or may not be an option.

Answer 2

You could try Balsamiq for quick mockups of a site rather than something like Visio. However, as Paulmorris mentions, this isn't for fluid mockups.

Also, as Paulmorris mentions, it is probably best to go with HTML/CSS, though this may be a bit more work. It could be worthwhile defining a set of "common" layouts in HTML/CSS and then keeping these in source control as your base starting points for mockups based on your common layouts. Designers can then access these, and use them as a base for creating new designs.

These source controlled common layouts could be used as both a base for mockups and production websites, and minor improvements or amendments to these layouts will benefit both designers and developers in future.

As an example of some great work on common formats for liquid layouts, check out; http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

There are demo pages below which may give you some ideas on how you could go about constructing some bare bones CSS/HTML for your common layouts.

Answer 3

Ask them to supply multiple mockups of the same design, each using different page widths. This has several advantages:

• It forces them to consider the effect of resizing the browser window on the design.
• It provides you with more reference points, so that you don't have to interpret the design.
• It ensures that the finished site looks the way they intended.
• It requires no additional skills on their part (only a bit more time and consideration to produce the additional mockups).

You'll still be getting static 'pictures' as mockups, but at least you'll get two or three instead of one. You'll start to find that your designers solve the sorts of problems inherent in fluid layouts themselves, instead of assuming that you'll do that part of their job for them.