The mailto syntax is pretty simple, but sometimes you might run into problems with some mail clients (AKA Outlook Web Access). Most of them are very forgiving and you can drop a comma for example right into the body of the mailto and have no problems, but it’s better not to do that. It’s much safer if you use hexadecimal numeric values for your special characters. For example a comma is %2c and a space is %20.
Here’s a CSS tip that I wish more people would follow. When setting up a font on your site, say Verdana, there is no reason to declare it on every H tag, P tag and class you are using. Throw it up in the body and be done with it. The same goes for font sizes, colours and anything else that will be uniform across the site. Once you have done this you can override it for specific tags and classes when you need too.
body {
font-family:Verdana, Arial, sans-serif;
font-size:12px;
margin:0;
line-height:130%;
color:#333333;
}
This will make your life easier and everyone else who has to work with your files will thank you. I think we should always be looking for ways to make our CSS smaller, cleaner and easier to read.
I was playing around with Photoshop CS4 and came across an odd setting. I’m not even sure what the default setting usually is, but for me it was my first time dealing with non-pixel perfect blurry rectangles in Photosohp and it really threw me for a loop. Below you can see two 60 pixel boxes created with the rectangle tool. Both boxes look the same, but upon further inspection you will see that the right box has blurry edges and the left box is pixel perfect and sharp.
Why are my are my anchor links not working in IE6?As a web designer I constantly run into browser bugs and 90% of these bugs belong to either IE6 or IE7. Remarkably these two browsers don’t even consistently break the same way. What is messed up in IE6 may be completely messed up in a different way in IE7. The standards compliant WebKit and Gecko engines used by popular browsers like FireFox, Safari and Chrome rarely see many of these annoying bugs, but the masses use IE, so we as designers and developers must make them work.
If you own an iPhone you may have noticed that you can bookmark websites and add them to your home screen. These are called Webclip Icons and they are either a snapshot of the website or an actual website icon similar to a favicon that shows up in a desktop browsers address field. If you want to add an iPhone icon to your site it’s very easy to do.
Sometimes it’s fun to goof around with Photoshop and have fun. Photoshop is well known for it’s image manipulation tools. You can do all sorts of interesting things from colour correction to merging different photos together. Some examples can be found on my old deviantArt account.
More and more I find myself using WordPress as a CMS. This requires a little more customization than you would need for the average out of the box blog experience but WordPress can make a wonderful little CMS. Custom fields are just one way to gain finer control over your pages and posts both for blog or CMS functionality.
When Internet Explorer 7 came out it was a huge disappointment to many web designers. It’s still littered with bugs and quirks, but a lot of things that were not recognized in IE6 are fixed in 7. This adds even more problems to the mix, because now we have to code for two bad browsers and IE6 still represents a huge chunk of users. With email design you also have to remember that many email programs render like IE6 or even use the IE6 engine.
A co-worker asked me this a few weeks ago. It’s not something you often need in Photoshop, and the way it is done has changed over time. These directions apply to Photoshop CS 3, but they may work in other versions as well.
Anyone creating email newsletters on a daily basis will tell you how hard it is to get them to render properly in all email clients, but getting them to work in Outlook 2007 can be maddening as any quick Google search will show.
Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.
As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.
Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.
And here is how it’s supposed to look after the fix. No white border / padding.
And the fix?
table td {
border-collapse: collapse;
}
I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.
Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outlook 2007 Test</title>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
<tr>
<td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
<td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
plain text.</td>
</tr>
</table>
</body>
</html>
You may also want to check out my other entries on this topic.
Welcome to the blog of Ian Hoar. I talk about current web trends, technology, toys, games, gadgets, design, usability and everything in between. It’s all about geeking out and an occasional rant. More about me
