Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Visual Design

April 22, 2003

It’s been lamented that most of the people using CSS for design are the people who shouldn’t be designing in the first place. I have a theory about why the real designers aren’t jumping in.

Building a site with tables, while tedious, is generally straightforward. You make sure your body margins are set to 0, you check that you have enough spacer GIFs, you chop accordingly, and you’re good to go. It’s refined to the point where there isn’t a lot of thinking involved anymore.

CSS is still quirky. You have to remember to add your padding to your width instead of subtracting it, although in some browsers it works the opposite way. (I have to admit, IE5’s way of doing it makes far more sense to me) You have to test your expandibility and make sure that a smaller (or larger) window size doesn’t cause elements to overlap or position themselves completely differently. You have to carefully test your horizontal alignment, and you have to use hacks to get any form of vertical alignment happening.

That’s just too much logic and problem solving for most left–brained types. When you consider most graphics applications, they are visual, and rightly so. You don’t create PostScript documents or PDFs from code, you use Quark or InDesign to preview your work, as you work.

WYSIWYG editors are much–maligned by HTML purists. Given that there are, to my knowledge, no comprehensive and really good CSS–design packages available, the situation doesn’t seem to be improving.

So code you must, and coding is something that designers do not do unless forced to. This is why cookie–cutter, GIF–free generic templates are the best CSS advocates have come up with so far.

No tools? No quality design. And I wonder what the likelihood is that a really well–designed, flexible CSS building tool coming out any time soon is. When you consider the logic that goes into breaking up your page structure from endless DIVs, Ps, Hxs and so forth into two–column, properly aligned structures, it’s hard to imagine software replacing the good old human ingenuity involved in doing it right.


Reader Comments

haze says:
April 22, 05h

i find it interesting that the web standards were developed by web developers and not designers. these standards have strict rules that tie the hands of the designers, preventing them from being as creative as they can get.. BUT it allows the developers to easily code a page.

what’s worse is that the new standards doesnt HELP! it solves a handful of the old problems, but in turn creates a handful of new problems. so now, developers still have a headache and designers are restricted in what they can do. is the process really evolving, or de-evolving?

the evolution of HTML should be to make things easier for developers AND designers, not to make things harder. developers who argue that this provides them with a “challenge” to their work, i say go get a hobby.

Dave says:
April 22, 07h

Had CSS been developed by designers, there would have been a way to vertically align since day one. I have to say, the newer drafts of CSS definitely one-up plain HTML by leaps and bounds. The problem being, of course, that anything beyond CSS-1 is close to useless until browser support gets better.

I’d argue the not helping bit though. I look back at the days where I’d have to change font size site wide by finding every instance of the FONT tag and replacing it, and I can’t help but cringe. There’s no way in hell that the global nature of a CSS file isn’t miles above hard-coded pixel values, font faces, and background colours.

roe says:
April 22, 08h

I totally agree with the CSS and centering thing. Dear heavens, how’d they put together this great system but not allow you to easily center a single object? I mean, what, do they think they’re *Quark,* or something?! ;D

CSS and browser support is something else. :P I put up a version of my site the other day that looks just fine in Netscape 7 and IE 6 for PC, as well as Netscape 7 for Mac. IE 5.x for Mac, though…another story completely. Damnit. Fortunately, it’s only happening on one of the design elements, so I “just” need to go figure out what’s different about IE on Mac for that element (as opposed to the other browsers) and recode appropriately. Eesh.

I do love CSS, though. Much better than fifty zillion table tags.

Keith says:
April 22, 11h

I feel the CSS frustration, I really do, make no mistake, I must admit that it’s a tough one to master. I’m not even close and I’m trying very hard. However, as I get more and more adept using CSS I realize the flexibility and forward thinking/planning-ness of it. If you’ve ever had to work with FrontPage, Image Ready, Go Live, heck, even Dreamweaver generated code on a large scale you know what I’m talking about.

CSS might be frustrating, but it’s nothing compared to 100+ pages chock full of improperly nested tables and font tags.

Code your pages with clean, stripped down (X)HTML and use CSS to style it and mark my words when it comes time for a redesign, with any old flavor of CSS that the future holds, and you’ll be glad you did it. And that is just the benefit to the designer. The list goes on and on.

I do admit it is tricky (downright incomprehensible at times) to learn, but I think it’s well worth it. It’s not going anywhere and any professional Web designer worth his salt should be trying to learn it.

As far as the issues with browser support for CSS and cross browser problems, come on, that isn’t new, in fact it’s better for lots of folks than it used to be as IE has gained market share – although I hate to say it. I think IE 6 for PC accounts for something like 95% of my traffic at work and 80% at home.

I’m on a Mac so you can see how this creates the same old cross browser/platform issue that has been around forever. Does anyone else remember when it was 50/50 and you HAD to make sure your design worked in IE and NS, Mac and PC? As much as I hate to admit it – you probably could get away with picking IE for PC and still have a successful site now adays. It might look a bit funky in Mozilla based browsers and on a Mac, but at least it would function.

I also have to say it’s things like CSS that separate a Web designer from a graphic designer. Gone are the days, and good riddance, that you could just cut some graphics, throw it together in Dreamweaver, or worse yet concoct some bloated Flash movie, and call yourself a Web designer. It’s a separate but related discipline and it’s things like CSS and understanding user interface, etc. that some one wanting to make the move, from print to web for instance, needs to learn.

Dave says:
April 23, 07h

Shaun - I find it patently ridiculous that I can’t add padding to a width: 100% element without getting a scrollbar in the “correct” way. This has tripped me up more than once.

It occurs to me that a casual observer might think I’m bashing CSS. Not true. My original post is more aimed at solving why CSS layouts have so far been so very bland and uninspiring. I believe in the technology, and use it as well as I can. To be honest, it’s been bothering me for a while that I built this site in tables and not CSS, but I still can’t figure out how I can add that little logotype to the bottom right without an ‘align=”bottom”’ placed in a TD.

I just think as far as support and general usage of CSS goes, we have a long way to go. Structurists/developers see CSS as the second coming of Christ, graphic designers use it for the odd block of typography but generally stay completely away from it. Both viewpoints are too extreme, so there has to be a good middle ground.

shaun says:
April 23, 12h

nothing philosophical, just was inspired enough to say that i’m glad i’m not the only one who thinks IE5’s way of handling the math of padding et al. makes more sense.

April 23, 12h

I think the big problem with a lot of these standards is that there are no graphics designers on the W3C (at least none amongst those writing the standards). As a consequence, we have these really absurd rules like the W3C box model where 100% width refers only to the content box, and does not include padding or margins. Not to mention the inability to add a footer to the bottom of an absolutely positioned box. Sigh.

I like CSS to a great extent, now that I can figure out most of the rules, and the savings in time, page size and the abilitiy to develop truly flexible and dynamic layouts is neat. But sometimes I get the feeling that the W3C releases many of the standards to spite designers, rather than help them (the poorly-named XHTML 2.0 standard comes to mind).

(note: remove the junk from the email address to email me)

JD says:
May 01, 05h

I quote Edward Tufte: “… why should we have to keep working around the theories and guesses of programmers about the character of information and analytical design? Formats affect and even corrupt thought …”

leo says:
May 01, 12h

I also feel that the IE5 box model is more intuitive; defining the width of an element should define the width of the entire elelement, not just parts. To me, the main turn-off is the float system. CSS is great at style (as stated, basic style changes site wide are easy) - but it is complicated to make complicated structure.

Any table based design can be done via css; the question is which is easier or more intuitive. For a forward compatible design, the data is ID’d/Class’d with no mark up so that all the visualizations would be done via CSS. This works, but I think there is a fundamental flaw: we are using CSS for page structure, not just style. The reality is that the order of elements is not linear and very complicated. The box model defines style well, but it feels like float/position are afterthoughts. The appearance of an element (style) and its placement (structure) are very different things. I think that we should define the page structure (loosely position elements), then define the style of the elements.

We shouldn’t have elements tell where they will go; we should be telling THEM where to go. Table designs told elements where they would go by nesting. CSS designs use the same strategy of nesting, but then have the elements tell where they will go, which is counter intuitive - especially as the style code is not there, just the class/id. With CSS, we are structuring inside-out instead of top-down, and that is a pain in the ass.

ppk says:
May 02, 01h

I completely agree with IE’s box model being far better than W3C’s. For those of you not following the latest CSS developments, I thought I’d add a little technical note.

For those who wish to switch all browsers to the IE box model (yes, that’s possible!), simply add

-moz-box-sizing: border-box;
box-sizing: border-box;

to the element. See my test page for some more information.

11
Henk Poell says:
June 24, 06h

Tables or css positioning… it depends on your priorities.

If you want to please the crowd of politically correct purists, you should definitely go for css.

If you want to please your customer by getting the project working in time for all required browsers (and more then 1 version is required, that is), go for a pragmatic mix of tables and css, and please forget ‘strict’. Also forget about using css for specifying width+padding, or aligning. Css is very nice for span/div/a classes, use them as feature-enhanced font tags. Also settings like border:0 for all images, or (display:inline for all forms etc) are great. For the rest: be pragmatic!

June 27, 11h

Now that browser development is slowing down, I wonder if we’ll ever get to where we want to be as designers. What I think everyone forgets, however, is that Web pages are about information. As much as I wish XHTML and CSS were perfect, I also realize that current technologies make a lot of great things possible. Informational Web sites can be made accessible, well-linked, and somewhat visually appealing if not the image of perfection as conceptualized by the designer’s vision.

When you need that creative outlet, I say go to Flash. It may not be as accessible, and it may not provide all the cool benefits to information that markup affords us, but you can still get your design on and out there where people can see it.

Tiffany says:
July 28, 11h

haze said: “it solves a handful of the old problems, but in turn creates a handful of new problems. so now, developers still have a headache and designers are restricted in what they can do.”

Cross-browser compatibility is actually *less* of an issue in CSS. Your site is guaranteed to *function* in older browsers (including Lynx) – although it won’t look the same. And that’s the point: using CSS requires designers to give up the notion that everyone will see the site as *you* intended. They won’t. Even with a table-based layout.

dave said: ” The problem being, of course, that anything beyond CSS-1 is close to useless until browser support gets better.”

Not really. IE 5 and 6, Opera 6 and 7, Netscape 6+, and Mozilla have pretty good support for the basics of CSS 2 (positioning). It’s some of the more advanced stuff (like complex backgrounds in IE5 for Mac) that causes problems. But again: the site will still function.

leo said: “This works, but I think there is a fundamental flaw: we are using CSS for page structure, not just style. The reality is that the order of elements is not linear and very complicated.”

That’s not a flaw. All documents have structure. Some items on a page have priority over others. There are paragraphs, lists, urls and images. They may not be linear, but there *is* an order inherent to the document. CSS and XHTML force you to think about the structure.

Henk said: If you want to please your customer by getting the project working in time for all required browsers (and more then 1 version is required, that is), go for a pragmatic mix of tables and css, and please forget ‘strict’. Also forget about using css for specifying width+padding, or aligning. Css is very nice for span/div/a classes, use them as feature-enhanced font tags. Also settings like border:0 for all images, or (display:inline for all forms etc) are great. For the rest: be pragmatic!

Most users of most web sites have browsers that support basic CSS2. Less than 5% of visitors to most web sites will not be able to see the site’s design. But *unlike* with a table-based layout, they will all be able to *use * the site. In many ways, CSS widens the number of people who can use any given site – certainly a good thing for clients. And once you get up to speed on CSS, it’s no less time-consuming than coding a table-based layout. In my experience, it’s faster.

Just my $.02.

14
Paul says:
October 08, 01h

I have sort of a “jack of all trades, master of none” view of this discussion, and more importantly a predominantly *user’s* point of view as well.

Having some experience in both print-based graphic design and software development I can follow the argument on both sides. Yes, CSS is complex from a more artistic point of view. It can be confusing and constricting. But from the developer’s point of view, the XHTML/CSS combo is clearly the future in terms of information processing.

The tipping point for me personally though, is that from a usability point of view CSS is completely awesome. You say CSS based design is bland? I say GREAT! I will choose simple and straightforward designs anyday over a complex, busy layout that distracts from the content itself.

MikeyC says:
October 16, 03h

Vinnie: “This is the most likely reason why the W3C made its box model work the way it does.”

Perhaps, but even the W3C has recognized that there is value in the IE box model by creating a CSS3 box-sizing property: ‘border-box’ which emulates the broken IE box model. There’s nothing wrong with eventually having a choice.

http://www.w3.org/TR/css3-box/#box-sizing

josh says:
October 16, 08h

*yawn*… the eternal struggle between developers and users (in this case, Designers) will always be apparent, regardless of the technology.

IMHO, the struggle is required in order to establish a future balance between the two sides. What is easily forgotten (on both sides) is that developers can not think like designers & vice versa. What may be simple to accomplish from a design standpoint, may be complex to accomplish from a development standpoint (and vice versa). Designers should recognize the accomplishment of “getting a computer - an inanimate number crunching box - to understand what a “webpage” should do, look like, etc.” since that is essentially what they are accomplishing by using this technology (CSS, HTML, or whatever). Developers should recognize that they are solely the lackeys of the users and obey simple commands (ex. better vertical alignment plz!).

October 16, 09h

I see a lot of comments about the IE5 box model somehow being the “superior” model. If so, then how can you explain away the image problem? Where would you add padding to an image? You would add it to the width of the image, because if you subtracted it your image would either be distorted or the padding would be inside the image’s dimensions. This is the most likely reason why the W3C made its box model work the way it does. Yes I can see how the IE5 box model would be easier, but the right solution isn’t always the easy one in life or Web development.

18
Eric TF Bat says:
October 16, 10h

The real solution would be to add expressions to CSS. I’d love to be able to do something like:

.content-section {
width: 50%-2em+5px;
}

… to specify that the content section takes up 50% of the page, minus enough room for this, that and the other. The only time the box model bites me (and makes me wishes it really was an all-Microsoft world) is when I’m using percentages.

October 17, 06h

MikeyC: “Perhaps, but even the W3C has recognized that there is value in the IE box model by creating a CSS3 box-sizing property: ‘border-box’ which emulates the broken IE box model. There’s nothing wrong with eventually having a choice.”

I agree, there is nothing wrong with choice. I’m just explaining a good possibility why the W3C went the way that others would not have thought of. I think there is merit to both box models, but the W3C box model isn’t so difficult once you figure out how to work with it.

Anne says:
October 17, 08h

The W3C box model makes it impossible to work with percentages for width and em’s for border for example. I think the IE box model is better, though you have a good point about graphics.

21
Julik says:
October 19, 04h

When I started to do web design, I always wondered for ONE thing: Why The Hell HTML Is Not PDF?
After then have been Dreamweaver with GoLive, tables and font tags and all of this crap, and finally I come to this:
http://www.alistapart.com/stories/dao/
And then my concern became not that all of my stuff is pixel-correct, but that it is readable content - and this is far more important. So I just try to live with the CSS quirks, it is certainly better because I achieve my goals better. As long as I don’t hunt pixels ayway :)
Besides I am at the same time a designer and a developer.

22
dennis says:
October 30, 06h

Dave said: “My original post is more aimed at solving why CSS layouts have so far been so very bland and uninspiring.”

and Julik said:”I am at the same time a designer and a developer.”

For me, the combination of these two comments (obviously out of context) gets to the heart of Dave’s original post. In the real world, designers and developers are often one. However, the processes of design and development must remain separate in order to avoid being tied down creatively by our understanding of the technology. Design solution, revise solution where necessary to allow for limitations within development process.

We need to design the solution which is needed, not the solution which is easy to implement. We all know this makes the job harder, but frankly the product is worth it.

December 10, 02h

When CSS first came out, my initial thoughts were, “Wow…this could really change the whole premise of web design!” The idea of truly separating design and data was inspiring. Then reality set in…

After using CSS for almost 7 years now, I have still yet to design a complete CSS-based web site that sits online. In other words, I have *lots* of experiments and trials that I have designed over the years but nothing that I ever felt safe enough with to post online.

The lack of browser support, though daunting, has only made me try harder to get things to work properly. I review what others have done and try a few things that I know and try some new things as well. That is what this is about, right? Keep trying until the rest of the world catches up?

I have to agree with one person’s comments that the client dictates the amount of flexibility that we have as designers/developers (I am both as well!) when using CSS. It is simply too kludgy to fiddle with sometimes. But, oh how I long for pure CSS layouts that work… The feeling of glee that one gets from structuring content with CSS and watching it degrade nicely in NS4… The yearning for clean, valid code in our pages that do not rely on nested tables… I want CSS design and so does everyone else who does this for a living (at least the one’s who are paying attention in class!).

It’s hard to design a catch-all web site using just CSS, period. That doesn’t mean that I don’t try. Every site that I have developed over the last 5 years has gotten a CSS twin in some way that never saw the light of day for one reason or another and I look forward to the day when ALL of my web design work is done using CSS. Until then, use good discretion: What is the target audience? IE5+/NS6 for PC? Push the envelope… If it is a US Government site, be prepared to cater to NS4 AND make it look good to boot. Enough ranting… my opinion is here to be changed, so please feel free to post a reply. I need new opinions! ;-)

24
mike s. says:
January 06, 05h

When I discovered css, I literally got up and ran around my house both ecstatic and in shock.. FINALLY I could design the site in a graphical way.

I’ve always used MS FrontPage.. but with css, I delete the program-generated meta tags denoting FrontPage, and write all the css code myself, with no problem.

I believe the biggest shortfall with web design is the same with other media design you see out there.. NO IMAGINATION, or an attitude of “let’s just pump it out”.

Css is too good to ignore, and since the web was designed by a bunch of wire heads, the design side of the thing will emerge. It may be slow, but we shall overcome.

January 14, 09h

I just finished rolling out my XHTML/CSS version of vaneerden.com which I worked on in spare time over a year, to get worked out in enough browsers to feel good. Now Opera 7.5 test breaks it, old konqueror on Linux does funny things, …
I don’t miss my nested tables, but I do miss how things fit together with less testing.