Stop designing with CSS in mind!

That is, don't linit yourself

[photon]

From http*//www.stopdesign.com/log/2003/11/13/nolimits.html:

I began to feel the limitations of putting CSS in front of design. I don’t want to limit design by the technology used to reproduce it....

I’ve also started pushing myself. I will not allow a design to be shaped by what I know can easily be implemented with a few style rules.

<added>
That's what I love about this forum. I'm constantly seeing new ways of pushing CSS past its "linits" (just in case I ever want to build a house out of CSS bricks [webmasterworld.com]!). :)

[rogerd]

I think that CSS-constrained design is a trap too many designers fall into. How often have we visited a site and, after one glance, thought, "This is CSS..."?

Some of the more creative Zengarden designs clearly started with a design concept rather than a set of assumptions about what one could easily do with standard CSS.

[photon]

When the only tool you have is a hammer, all of your problems start to look like nails.

When I first got into CSS my initial visualization of new sites was in terms of the code involved. Seeing some of the amazing effects that people have gotten out of CSS has helped me stop "x-raying" the design to see the code, and just look at the look.

For example, wouldn't it be nice if you could have an irregular border for test to flow against? I always thought in terms of rectangular containers until I read about CSS sandbags at http*//www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm.

[Reflection]

Should you stop designing with html in mind as well?

By definition your design is limited by the technology available. That doesnt mean you shouldnt find innovative ways to push the technology, but you always have to keep the available technology in mind.

[DrDoc]

I think the trap many designers fall into is seeing everything as boxes. Sure, every element is a box, but that doesn't mean they are limited to squares or that you can't do creative stuff with them.

[rogerd]

I think early web designers DID design with HTML in the front of their mind, and most web pages had a boring sameness to them. Eventually, graphic artists got involved, and pushed the limits of HTML to produce stunning pages that might be equally at home in a glossy magazine. (Of course, this created some other issues, like complex table structures, bloated HTML, etc.)

[photon]

Reflection--

>>By definition your design is limited by the technology available

I'd rephrase that to say "By definition your implementation of the design is limited by the technology available". What you end up with will definitely be constrained by the HTML/CSS/PHP/JavaScript/ASP/Flash you use.

But the point of the article is that you should look at just design first, then try to figure out how to realize it. Some compromises may have to be made to the design depending on the contraints of the code.

But better to have aa inital design that pushes your creativity with the code, than one restricted by the perceived limitations of the code, or the coder--"I can do boxes; my new design will be boxy!".

[TGecho]

I've had the same change he described. In some ways it's a good way to learn CSS, just being able to endlessly tweak and watch your page shift and flow.

Now I've gone the other way. All but the simplest designs spend their infancy in Fireworks (Photoshop is no good ;)).

[aevea]

Great quote photon(hammer and nails). I agree with the article in theory, but in my reality I'm still more of a css hack than a designer.

Once you know how to produce a layout reliably in all browsers, spinning and manipulating CSS to achieve a desired result becomes second nature.

When I get there, I'll take up the challenge. That said, I feel more comfortable in css than in photoshop or fireworks. Earlier today I was editting a word doc and wished I could open the css.

Adam

[Hester]

Earlier today I was editting a word doc and wished I could open the css.

You can. Just open it in WordPad and see all the CSS in the head!