LUKE PUPLETT

Is the web built on the heroic patience of thousands of creative geniuses, or by a bunch of morons? This is what I'm left wondering after a second go at HTML and CSS.

As a programmer working in programming languages, I'm used to being a dictator of determinism.

That is to say that, what I instruct the computer to do, happens exactly as I dictate. I run the whole show. This affords me as much power as it does responsibility. If I get those instructions wrong, my programme will not compile. If my code runs, it is computationally perfect even if there are logical bugs. My world is mathematically beautiful.

Due to a problem with my web designer deciding to ignore me, I thought I could knock up a very simple two-column, header, content, footer type web-page in no time. I was wrong and the memories of why I hired a web dude in the first place, came flooding back.

For years now I've been reading the UK’s most popular web designer/developer rag .NET Magazine (nothing to do with that .NET, the irony being that the editor almost completely eschews .NET), and not once has the magazine cared to tell me that HTML is utter garbage.

Born out of SGML and XML, HTML differs in that its tags don't need to be closed. From its inception, HTML immediately repudiated it's first opportunity to work properly.

Although, to be honest, I'm not entirely sure whether it's not CSS that's to blame, since I don't know where HTML ends and CSS begins.

If CSS does the layout then CSS is to blame. I would take back my previous comment about HTML but like a couple of naughty children, they're both at fault even if the other one did it.

In retrospect, I see now that there were some clunking great CSS warning clues:

• After 15 years of mainstream web content creation, no one has made a decent WYSIWYG designer.
• CSS is often referred to as being "hand crafted" (in the way that chiselling wood is semi-random).
• "Hacks" are the everyday vernacular of a web designer.

The simplest tasks are nigh on impossible. Like centering. Particularly centering some content in relation to some other thing to the side of it.

Moving something without nudging something else somewhere else you didn't want it or bringing some other thing along for the ride.

Grids. You used to be able to use Tables which worked really nicely but Health & Safety came along and told everyone that they must use a combination of DIVs and strong painkillers.

And fonts are out.

Please stare in amazement at this very simple attempt to put a logo in the corner of a page with a band of grey going along to top.

Looks alright doesn't it? I mean, the logo doesn’t have it’s alpha background but that’ll be alright in the real browser.

Here’s how to make this amazing page. You'd think to just put a logo image in the corner and make it a link. You can’t just make something a link, of course, so instead the HTML and CSS instructions say: stick a hyperlink in the corner and then set its background picture so it looks like a logo but have no link text and then fuck around a bit to make the link the same size as the background image and then add some margin. Also use someone else's 960 Grid System thing to shortcut the almost impossible process of aligning stuff.

As you go about "crafting" the page, the designer will show you what you want to see because it doesn't like it when you're mad, but really all your hard work looks like this:

Quite how Internet Explorer 8.0 - the same people that wrote the designer and Microsoft's best attempt to make a working web browser - manages to screw this one up so spectacularly is a mystery. Overlapping images? WTF?!

Okay, Firefox is the web developer's favourite PC browser, let's see what it looks like properly rendered.

Yeah, erm. Almost. Firefox very nearly nailed this complex grey box and logo. Good attempt, gold star for effort. I have no idea how adding margin to my logo-cum-hyperlink managed to add a margin to the DIV that is the hyperlink's parent's parent but it's the equivalent to me doing a vasectomy on my granddad before my dad was born.

Of course stuff in the mark-up is never born. Not unless you're using a different language: XAML. I am used to XAML. I like XAML. Extensible Application Markup Language was written by the people that gave us the world's worst browser, however, XAML works perfectly.

In XAML, each tag is actually an instance of an object in memory. Each thing is created (born) when the XAML is processed, and things inside things, really do become the children of their parents. The system is tied to the underlying programming language which is compiled and so must be perfect.

I can create XAML elements in code, and I can create code elements in XAML. It’s a mark-up language for creating object graphs.

The XAML designer is perfect, stuff can be moved on the page without it writing the movements to the wrong place, and it shows reality.

By comparison, designing in HTML and CSS is like writing upside down with your wrong hand while blindfolded with only 4 lying bastards to assist you.

HTML 5 and CSS 3 aren't going to help much. They offer only a few extra commands to allow such extravagances as round corners and Flashless video.

To truly take the web into the future, the whole system needs to be bulldozed. As HTML 5 and CSS 3 have taken years and years to get this far (nowhere) then a new great system will never be the product of the committee. It would have to be a disruptive innovation from a team of just a few.

N.B. If there are unusual breaks throughout this document, it's because Windows Live Writer and Blogger can't decide how to format the HTML. Or maybe its the CSS.

Labels: html, programming, web, xaml