Of curves and email and HTML
I know that currently, putting curvy boxes around things is terribly trendy. Everyone wants their communications to look like the Wii control panel. Leaflets, websites, emails, everything must have that curvy buttony look about it.
The fact remains that HTML and CSS *has no system for generating curves*. It just doesn't. You can specify borders, margins and padding, you can colour things and layer them cunningly, but you simply cannot say in HTML : here is the left border, here is the top border, now give the intersection a curve with a radius of X.
It would be nice if HTML could do this. But it can't. No. Nor XHTML (which is really just HTML with a gofaster stripe, as used by 99% of the people creating it).
What does that mean? It means that every curve has to be manually created as an image and painstakingly shovelled into exactly the right point to intersect with the borders. Or that the curvy box has to be created entirely as an image.
You don't really want to make everything in your website an image, because that is being mean to people who are a little shortsighted, and want to bump the font size up a little. In Internet Explorer, which most of them will be using, they can't easily change size of images, and anyway, when you resize images of text, it goes pixelly and hard to read.
What's more, making everything an image is also a really good way of making your website completely invisible to search engines, thus producing a site that nobody will see, however good their eyesight, because they can't find the damn thing.
You don't want to make everything in your HTML email newletter an image either, because most webmail systems turn off images in email as default, and you do want all those Googlemail users to be able to read your message without finding the special button, don't you?
So, you start coming up with cunning ways to make the corners of your boxes into images, and the sides of them generated in css, because that way, you can still have your nice curvy buttony layout, but still have a box that expands if you want to put more stuff in it. And that mostly works on the web, because well over 95% of web users are using one of 2 web browsers, IE or Firefox. Even though you need to make it work in IE6 as well as IE7, that's not really too hard, even if you go the extra mile and test it in Safari as well.
So, you can make something that looks like a box with no top in HTML and css, then float a curvy picture over the top of the box so it looks like a giant pillow. Hurray.
However, when it comes to email, things are different. For one thing, there is no dominance of the market by one or two providers. People use a multiplicity of email clients, all of them behaving slightly differently.
Some of them use IE to display your HTML and css code, but Outlook 2007 uses Word (which is very odd, because Word is not very good at rendering HTML and doesn't understand css properly, but we must work with what we are given...). Many people use webmail systems such as Hotmail, yahoo or gmail, which run your HTML and css through filters to check they aren't trying too do scary things to the punters, and will randomly translate all your formatting into their own special way of doing things.
Some of them will be using spam filtering systems such as Mailcontroller, which strip out ALL css formatting. If you want the people behind a Mailcontroller system to see an email that looks anything like the email you designed, then you are going to have to format it using the tools of 1997 - no css at all.
What I'm trying to get at here is that whacking up a wii-like layout in photoshop and then expecting the 'technical people' to make it work in every client and browser combination is like a refined form of torture. It's like designing a car with no concept of streamlining or safety.
Oh, and if you then expect this miracle to be performed in about 3 hours from delivery to send of email? You are very definitely OFF the christmas card list.
The fact remains that HTML and CSS *has no system for generating curves*. It just doesn't. You can specify borders, margins and padding, you can colour things and layer them cunningly, but you simply cannot say in HTML : here is the left border, here is the top border, now give the intersection a curve with a radius of X.
It would be nice if HTML could do this. But it can't. No. Nor XHTML (which is really just HTML with a gofaster stripe, as used by 99% of the people creating it).
What does that mean? It means that every curve has to be manually created as an image and painstakingly shovelled into exactly the right point to intersect with the borders. Or that the curvy box has to be created entirely as an image.
You don't really want to make everything in your website an image, because that is being mean to people who are a little shortsighted, and want to bump the font size up a little. In Internet Explorer, which most of them will be using, they can't easily change size of images, and anyway, when you resize images of text, it goes pixelly and hard to read.
What's more, making everything an image is also a really good way of making your website completely invisible to search engines, thus producing a site that nobody will see, however good their eyesight, because they can't find the damn thing.
You don't want to make everything in your HTML email newletter an image either, because most webmail systems turn off images in email as default, and you do want all those Googlemail users to be able to read your message without finding the special button, don't you?
So, you start coming up with cunning ways to make the corners of your boxes into images, and the sides of them generated in css, because that way, you can still have your nice curvy buttony layout, but still have a box that expands if you want to put more stuff in it. And that mostly works on the web, because well over 95% of web users are using one of 2 web browsers, IE or Firefox. Even though you need to make it work in IE6 as well as IE7, that's not really too hard, even if you go the extra mile and test it in Safari as well.
So, you can make something that looks like a box with no top in HTML and css, then float a curvy picture over the top of the box so it looks like a giant pillow. Hurray.
However, when it comes to email, things are different. For one thing, there is no dominance of the market by one or two providers. People use a multiplicity of email clients, all of them behaving slightly differently.
Some of them use IE to display your HTML and css code, but Outlook 2007 uses Word (which is very odd, because Word is not very good at rendering HTML and doesn't understand css properly, but we must work with what we are given...). Many people use webmail systems such as Hotmail, yahoo or gmail, which run your HTML and css through filters to check they aren't trying too do scary things to the punters, and will randomly translate all your formatting into their own special way of doing things.
Some of them will be using spam filtering systems such as Mailcontroller, which strip out ALL css formatting. If you want the people behind a Mailcontroller system to see an email that looks anything like the email you designed, then you are going to have to format it using the tools of 1997 - no css at all.
What I'm trying to get at here is that whacking up a wii-like layout in photoshop and then expecting the 'technical people' to make it work in every client and browser combination is like a refined form of torture. It's like designing a car with no concept of streamlining or safety.
Oh, and if you then expect this miracle to be performed in about 3 hours from delivery to send of email? You are very definitely OFF the christmas card list.