The broken web
So I spent the day looking at web design again. I don’t do much of it anymore, but Lethania does and so I tend to get pulled into it. I later ran into this ad, which I thought was kind of funny:
I would be much happier if everyone could start creating flash-free websites. Anyway, today’s ordeal made me think back to the fine old days when everything was a table. HTML wasn’t made to display layout. The nice things about HTML, hyperlinks, worked just fine in regular text documents with some simple formatting, like bold and italic, its creator figured.
The nice things turned out to be really nice though, sparking an incredible development where pages got increasingly sophisticated layouts. The original HTML text format included tables, a fact which was quickly used to hack together all kinds of pages. A table could be used as a grid to stuff things into certain places, and a table inside a table could be used to create more interesting layouts, not to mention a table inside a table inside a table.
Because tables were meant to be (you know…) tables, different browsers rendered them slightly differently. Fine, if all you want is a table of text. Not so fine, if what you wanted was a pixel-perfect design. The solution to this was to add a whole slew of properties to each table, row and cell.
So after hacking together a sophisticated web site layout using table, the result was predictably a complete mess. The tables holding the text in place was mixed in with the text itself, making sites a nightmare to update or maintain, to not even mention changing the design.
A solution was clearly needed, to separate the design from the contents of web pages. So, why not adopt a language that wasn’t meant as a design language either? Sure thing, Cascading Style Sheets (CSS), a language meant for styling rather than layout was adopted during a long and slow process full of bugs, browser incompatibilities and new hacks.
Today’s standard of “good” for the web means using HTML strict (which few do) and control the appearance using CSS. The result is slightly less convoluted than the tables approach, but takes about 20 times as much effort to understand or write correctly, involves just as much hacking and is so fraught with peril that most people simply avoid it, going back to tables or mixing in horribly ugly JavaScript. Or, as seems to be extremely popular with games companies, insist on making the entire website in Flash, even though there’s absolutely no need for it.
So the page we were looking at today needed 3 columns of the same height. Let’s do it the old way with tables, for nostalgia’s sake:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
Okay. Not too bad. So how to do this with CSS? Generally, you’ll need 3 DIVs next to each other, all with float: left. This makes them each have an individual length though. There are several ways to get around this, but none of them are good. The first involves stretching images across the DIVs as background images, which means you’re now bound to the color of those images instead of a color value. Also, you can’t have borders.
The second way we tried involved a very complicated set of maneuvers using three extra panes and shuffling content out the left side of the screen and then back in. The description for how to do this was about 10 pages long. And oh, it turned out to not work with borders either. Sigh.
So finally we found one way that seemed to work with borders. Only it didn’t, since you didn’t get any bottom border that way. The good part is that you could hack around that by using an image.
So for the old horrible table version, you substitute a mess of nestled DIVs and several pages of CSS, and it doesn’t even work fully without adding a picture where you essentially paint the entire bottom of the border along the page (yes, you actually paint a snapshot of your entire webpage, 1 pixel high). Way to go.
<style type="text/css">
#container { float: left; background: url(images/example-6.gif)
bottom center no-repeat; padding-bottom: 1px; }
#inner { float: left; overflow: hidden; }
#inner div { float: left; background: #ccc; border: 1px solid #000;
width: 200px; margin-right: 5px; margin-bottom: -1000px;
padding-bottom: 1000px; }
#inner .col2 { background: #eee; }
#inner .col3 { margin-right: 0; }
.clear { clear: both; padding-top: 10px; }
</style>
...
<div id="container">
<div id="inner">
<div>Column 1</div>
<div class="col2">Column 2</div>
<div class="col3">Column 3</div>
</div>
</div>
<p class="clear">
That seems like a great way to code! Not to mention that part of your design is now locked up in the image.
The best part about all of this is that it’s presented as “without CSS hacks”. Well, if having to use 6 nestled divs, large-number positive and negative margins and all kinds of bullshit like that isn’t an ugly hack, then I don’t know what is. The fact that the art of web design has advanced to the point where the normal thing you have to do is one big hack isn’t encuraging. And then they add the hacks on top of that…
I never liked tables, but at least they worked. In one of those memorable IRC quotes (in Swedish), someone said:
<sycon> imagine 1000 ants, tables are like the cage that keeps them in place, in the right place
<sycon> css is like a child with spasms trying to poke them all into place with chopsticks.
After spending countless hours trying to do seemingly simple things, I think I agree. Something’s still broken with the web, and no one seems to care to fix it. Well, other than inventing more workarounds.
But hey, at least you can draw Homer Simpson with it. So, ok, let the flak begin. Look, a Parrot.
Monday, March 1, 2010 23:14 10 Comments
Other Links to this Post
-
Twitted by webstartupgroup — Tuesday, March 2, 2010 @ 0:24
-
iPad Links: Monday, March 1, 2010 « Mike Cane's iPad Test — Tuesday, March 2, 2010 @ 0:56
RSS feed for comments on this post. TrackBack URI
Subscribe
By This is MADNESS, Tuesday, March 2, 2010 @ 0:29
THIS IS SEPARATING-CONTENT-FROM-PRESENTATIONLAND!
By Charlie Hubbard, Tuesday, March 2, 2010 @ 0:33
Yes it IS still broken. We have really pathetic tools today when we compare the precision desktop development tools provided in terms of layout nearly two decades ago before the web. I think the problem has been the humongous overhead of being backwardly compatible, and the stagnant w3c group. HTML 5 is not helpful IMO for what’s the real problem. How do we change what we have without affecting the internet/ I wrote a blog post about a potential solution that would keep us backwardly compatible, but allow us to move forward without having to start over.
http://wrongnotes.blogspot.com/2009/09/what-if-html-wasnt-top-dog.html
By Gabe da Silveira, Tuesday, March 2, 2010 @ 1:21
What a ridiculous strawman you’ve set up.
A comparable CSS layout to what you’ve specified in HTML is:
Column 1
Column 2
Column 3
.column { width: 33%; float: left }
CSS may seem pretty crude if you are a graphic designer who just wants to make something look pixel perfect. However such a person would recognize that even something as simple as getting the right color on a printed design requires deep knowledge of CMYK, paper stocks, and printing techniques.
HTML/CSS are certainly not convenient for pixel precision. However they do manage to be the first true multi-platform multi-media open content format that can be accessed by tens of thousands of different devices, can be used by both the deaf and the blind and all other populations.
That is no small achievement, and though many have proclaimed how much better they can do, no one has created an alternative that gained any traction whatsoever. So, if you want to do web design, maybe you should actually learn how it works, rather than writing banal rants demonstrating your own ignorance and utter disregard for the people who actually created the future you are now enjoying?
By Gabe da Silveira, Tuesday, March 2, 2010 @ 1:22
Trying again:
>div class=”column”<Column 1>/div<
>div class=”column”<Column 2>/div<
>div class=”column”<Column 3>/div<
By Gabe da Silveira, Tuesday, March 2, 2010 @ 1:23
Okay here we go, the proper HTML from above:
<div class=”column”>Column 1</div>
<div class=”column”>Column 2</div>
<div class=”column”>Column 3</div>
By Steven Wittens, Tuesday, March 2, 2010 @ 1:34
It’s ridiculous to complain about CSS in 2010 without looking at the history behind it. The CSS specification has in fact moved on, and so have all the browsers, except for one: Internet Explorer.
CSS2, which became a W3C recommendation in 1998, gives you perfect equivalents of all the old-school HTML table layout modes, without all the crufty markup. All the alternative browsers have supported this for years. Microsoft waited until IE8. That means nobody can use it without hacks until IE7 has died, which will be several more years.
Floats and clears were never meant to do multi-column page layout; they were, surprisingly, intended for floating elements.
http://www.w3.org/TR/2008/REC-CSS2-20080411/
Point the finger at the party to blame, not at the web developers who have made lemonade out of the lemons they were given.
By Jason, Tuesday, March 2, 2010 @ 2:35
Gabe da Silveira, I tried your CSS, and it doesn’t match the table version presented. Using the same HTML you presented, how do you make each of the three columns the same size?
By James, Wednesday, March 3, 2010 @ 1:58
But hey! CSS 3 will support layout via ASCII art!
http://www.w3.org/TR/css3-layout/#rowheight