Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question

migrated from stackoverflow.com Jul 22 '11 at 4:07

This question came from our site for professional and enthusiast programmers.

add comment

3 Answers 3

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.

share|improve this answer
    
Thanks for the suggestion, but unfortunately you are right about different set of skills. Some of our designers are graphic designers who don't know HTML and CSS enough for creating even simplest layout. –  Daniel J F Jul 22 '11 at 14:02
add comment

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.

share|improve this answer
    
Balsamiq is for fixed layouts, not fluid. –  paulmorriss Jul 22 '11 at 8:08
    
Sorry. You are right. However, I would certainly advocate it over something like Visio for a quick mockup of a website. –  Mr Moose Jul 27 '11 at 1:00
    
+1 now that you've rewritten it! –  paulmorriss Jul 27 '11 at 7:51
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.