The Blog

In short span of 2–3 days, I encountered two different examples of people writing that all this CSS–for–layout thing is nonsense. Too hard. Inadequate. Buggy and inconsistent. Just plain hard.

Well, it is. Hard, I mean.

Everyone knows how to build some shelter: put some stools and cover with branches and it would mostly fit the bill. If however it should withstand the wind and rain, it requires quite a bit more skills. Everyone knows how to get heating: put some wood and start a fire. Only few knows what it takes to build proper, natural heating that’s just there.

The same is with web development. Anyone can build a web page that looks fine to them. But it might not be fine to me or some other people. It might be downright inaccessible to some. It might be pain in the ass to some other.

Every single time I encounter rants like those two linked above, it’s plainly obvious it’s made by people who just don’t get it. I mean, just look at those two rants/posts (whatever you call them) and you’ll see how not-getting-it is the core of their frustration.

Just one example:

On the screen the natural order of flow for the five major layout elements is: top, left, center, right, bottom. But the actual order in which they appear in the code has “right” and “center” reversed. Is this a mistake? To find out, let’s see what happens if we change them around so that the order in the code matches the presentation order:
…
Youch! That looks terrible! Apparently the order matters. The reason that the order matters is that this layout, like all multi-column CSS layouts, is achieved with floats, and the way that floats get rendered depends on the order in which they appear. So we have not managed to separate content from presentation.

Yes Ron, it does not look good because CSS rules were written to achieve the desired layout using the given HTML structure code — which could also be much improved, but that’s another topic.
To give you real-life example: do you have a bike? Do you expect to be able to drive if you sit on it faced to the rear of the bike? Hm, crap, I can’t turn the pedals properly. The bike is shit.

The other rant is even worse, the anger of not being able to code the desired layout in CSS is spilling from all corners. I can understand that frustration and have experienced it several times, when I tried to learn something and failed to do so.

I drank the Kool-Aid, and I woke up two weeks later with a broken design. I had a headache from banging my head against the CSS wall. But, it simply couldn’t be a problem with CSS itself. The problem had to be that I didn’t understand CSS well enough. The answer had to be that I was bad, lazy or I didn’t care about web standards or something. The internets had told me so.

Yes iamelgringo, you’re just not up to it. You should have admitted it to yourself and hired someone else who is, to finish the job. Or just use tables as you did and get on with your life. Posting this:

So, I don’t ever want to read how web designers who don’t use pure CSS in their layouts are lazy, stupid, don’t care about their craft, backwards or don’t bathe properly. Never again. People who post such things online are heretofore to be known as CSS Trolls and are to be banished from the internets for all time. Begone yea vile fiends!

just makes you jealous wanker.

And just to touch lightly on the argument about Google – the fact that Google is not using CSS-based design is responsible for the fact that they have two different search pages – one for desktops, another for mobile devices (when I think about it, they probably have more than two). Multiple code bases for the page that has one input field and two buttons on it. Sheeeesh…Google’s front page is prime example of crapy front-end work.

Will code HTML for food. And give you crap code for it.

Or however that joke went. There are many reasons why tables are not to be used for layout. Two important ones are:

1. tables are fixed structure which cement the layout for good
2. cemented structures are impossible or way too hard to adapt to displays with vastly different screen estate

For instance, take a look at my winery web site. If you look at it on desktop browser, you’ll see rich graphics, 3-column web site. But if you look at it on iPhone in portrait mode, you’ll see one-column website with some graphics removed. All it took to achieve this look is one meta element in the page head and half a screen of additional CSS rules. It would be just as simple to adapt it to other mobile browsers. Let me see you do that this quick and fast with tables.

Not to mention how impossible is to achieve noticeably different skins if you use layout tables. For the last several years I have maintained old and created new instances of company’s main web product, using the very same code base, with just a different set of CSS rules and images. 20 or so counting, each new instance was several days at worst for the complete reskin job.
Every time I need to apply some designs to pages created using ASP.NET, I cringe and resign my case or dig deep and redo almost entire contents of the .aspx files. It takes good deal of knowledge to do things properly.

Not everyone are capable of doing it, which is just fine. There’s plenty of other professions, not everyone should be web front-end developers. If you don’t know how to do it and/or are incapable of learning, just give up and find some other thing to do in life.

Don’t go around prophesying nonsense.