Why do I care? It works in the email clients I tested!

That’s fine and dandy, but your audience may be using a client you haven’t tested, one like say Outlook for web. I dealt with an issue like this recently where Outlook was truncating the body copy after the first comma appeared. It was a mailto confirming attendance to an event, so losing the copy was not very helpful for for the end user or the organizer trying to get responses. Now granted a web form would have been a better option, but time restraints resulted in using a simple mailto.

Lets quickly go over some of the mailto syntax.

Subject

mailto:me@myaddress.com?subject=Hello

Body

mailto:me@myaddress.com?body=I will be attending the party, it should be a blast

Subject and Body

mailto:me@myaddress.com?Hello&body=I will be attending the party, it should be a blast.

There  are also CC and BCC values that you can drop into your mailto string.

These examples will work fine in most email clients, but not all. First if you want valid XHTML syntax your ampersands should be &. This should not affect your mailto functionality either way, but having valid markup is always a good thing. Second you should use hexadecimal values for your spaces and commas. Here’s an example of a safer mailto.

Subject and Body

mailto:me@myaddress.com?Hello&body=I%20will%20be%20attending%20the%20party%2c%20it%20should%20be%20a%20blast%2E

The only difference with this example is %20 for spaces and %2c for commas and 2E for a period. This example is much more bullet proof than the first example although you probably don’t need it for the period, but then again I thought the comma would be safe.

Another character you may need is a line break. %0A will give you a line break. Using two will give you a paragraph space.

mailto:me@myaddress.com?Hello&body=I%20will%20be%20attending%20the%20party%2c%20it%20should%20be%20a%20blast%2E%0A%0AI will be bringing a guest too%21%2E

If you are ever unsure of a character just drop it’s hex value in place of it. Most of the characters should work fine, but some like the comma will not. Others like spacing must be added if breaks are needed. You can easily find hexadecimal code lists all over the web, just remember to add the percent (%) symbol in front of the hex.

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.

Here are the two boxes zoomed to 300%.

What the $#%??

This is enough to drive any web designer mad and I don’t really know what possible use the non pixel perfect box would have, but maybe that’s because I’m a web designer and I like clean straight edges and lines. Luckily this setting is super easy to turn off. Select the Rectangle tool then at the top of Photoshop click on the little arrow which will open the Geometry options for the rectangle. If you selected the Rectangle tool, you should be seeing the dialogue below.

Select the Snap to Pixels option and now you will have clean pixel perfect rectangles. This option is also available for the Rounded Rectangle tool. No more blurry edges.

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.

Fixing these bugs usually requires a lot of head scratching and pounding of fists and Google searches until I figure out a work around or hack that will fix it. I may not run across said bug for several months or even a year or more and then inevitably I stumble across the same bug and of course not realizing it is one I have dealt in the past. The IE6 redirect bug is one of those nasty ones that has caused me much pain and suffering, and it’s very simple to fix, although sometimes remembering the fix can take precious time, so I thought this time I would write it down and share it with others.

An anchor link, sometimes called a jump link, is pretty straight forward HTML, so you would think IE would have no problems with it. You would be wrong though, very wrong.

<a href="http://www.sitename.com/yourPage.html#AnchorName">Link to anchor on page</a>

Within yourPage.html you have an anchor

<a name="AnchorName"></a>

This is where it all went wrong

Under most circumstances this will work just fine, even in old clunky IE6, but where it won’t work is when there is a redirect involved. My issue started with an anchor link from an email campaign. This link would be clicked from an email client and then sent on to the email deployment platform, where it would then be redirected to the actual page. From here a nasty 404 would pop up. This is what threw me, because usually redirecting an anchor link in IE6 will only result in the anchor not working, but the page still loads fine.

The fix

The fix is quite simple if you can remember it the next time this happens to you.

<a href="http://www.sitename.com/yourPage.html&#AnchorName">Link to anchor on page</a>

See the difference? No? Check out the little ampersand “&” at the end of the html file and before the pound “#”. This will fix your broken anchor links in IE6 and they will now jump to where they are supposed to go.

My issue was a little more dire since the anchor links were actually breaking the page and giving a 404 error. We probably could have just ignored the issue if the jumping was the only thing broken. I think the reason for this is IE6 must parse the URL incorrectly when being redirected and ignore pound sign “#”. My page was a PHP file and contained a query string:

yourPage.php&var1=foo&var2=bar#AnchoreName

The last var2 was interpreted as bar#AnchoreName instead of bar. An ampersand “&” fixed this issue also. IE6 and IE7 never cease to amaze me with how badly they interprets the HTML and CSS specs. This particular bug is only an issue in IE6. I hope this saves some people a bit of sanity.

First create your icon or grab your website logo. In my case I used the same logo as I used for my favicon which is the I in my name. You can make this any size you wish and it will be scaled up or down by the iPhone. I made mine a 57 x 57 pixel PNG which seems to be the size of icons when measure on screen. Anything smaller than this may appear blurry as the iPhone will upscale the image. Some people have used larger files and even jpgs without issue. Whatever size you choose, make sure the icon is square otherwise the iPhone will crop the image. Don’t worry about the icon glass effect or rounded corners, I will talk about this in a minute. The format that the iPhone does screenshots in is the PNG format and they will generally look better if done correctly, but they will be slightly larger in file size than a JPG.

Update: Reader Tice wrote below that that the size Apple is using is 129 x 129 pixels. This is far larger than needed for current iPhone screens but I would imagine future proofs the icon for higher resolution iPhones that may be available in the years to come. The icon may also be used in other ways that I am not aware of. Link to Apple icon: http://www.apple.com/apple-touch-icon.png.

Once you have your icon you can let an iPhone recognize it by one of two ways. Either save it as apple-touch-icon.png and add it in the root of your server, so in my case:

http://www.ianhoar.com/apple-touch-icon.png

Alternately, if you do not have access to the root or want multiple icons you can link to your icon in the head of your HTML.

<head>
     <title>My Site</title>
     <link rel="apple-touch-icon" href="/directory/myicon.png" />
</head>

What about the glass effect and rounded corners? Well you don’t have to worry about those, the iPhone adds those effects for you, and that’s why all icons have a nice uniform look. Just upload the files and everything should be in working order. Here is an example of what my icon looks like before it shows up in an iPhone.

Adding your icon goodness to the iPhones home screen

If you don’t have an iPhone but want to have an icon available for iPhone users and you have followed these steps, your icon should now be working and available for iPhone users, of course you will not know for sure until you test it out for yourself.

Fire up Safari and load up your site. Then touch the little plus icon to add a bookmark, the screen below will pop up. Touch add to home screen and confirm, now you should have a nice glass icon somewhere on your home screen.

Move your icons around

This may be obvious for some, if you would like to move your icon or any other icons on the home screen all you have to do is hold down on any icon. After a few seconds all the icons on the screen will start shaking and any you have added or installed will have little x marks beside them. These x marks are to remove or uninstall the link or app. To move an icon you can now just slide it around with your finger and even move if from screen to screen if you have multiple screens of icons. To set the icon just press the on button.

For more information on resolution and size tips Dan Dickinson’s blog has a few other tips if you run into any issues. Basically most of them come down to trying different resolutions, but I found the 57 x 57 worked out fine for me.

• Enjoy this post? Try the RSS feed.

This kind of image manipulation can be time consuming and require a good grasp of Photoshop. There is however one very fun tool to play with that can yield very funny and satisfying results almost instantly. This is of course the Photoshop liquify filter. I highly recommend doing these manipulations on photos of co-workers, pets, family or even client photos you may be working on, but be very careful one doesn’t get back to said client. Maybe you should scratch client photos from the list just in case.

Huge goofy eyes

The method I will describe will yield similar results to the ones you see on the front of greeting cards with goofy looking animals and humongous eyes. Here is a picture of my cat before and after a simple encounter with the liquify filter.

This is very simple to do, start by going to the top menu and selecting:

Filter / Liquify … Shortcut: Shift+Ctrl+X

Once you are in the liquify window look for the bloat tool. Shortcut: B

Once you have the tool selected you will want the Brush Size slider to be about twice the diameter of the the eye Shortcut: ]. You can experiment with the size as different photos yield different results. I find that you get the best results by positioning the bloat brush directly in the center of the eye or on the eyes highlight. If you think you over did it you can click Reconstruct or the Restore All buttons located on the right. Reconstruct will take you back in steps slowly reducing the effects you have added. Restore All will undo all the editing you have done. You can also use the Reconstruction Tool (Shortcut: R) to restore any part of the photo manually. This is good if you have goofed on one eye, you can then restore just that eye with the Reconstruction Tool and try again.

There are a load of other tools you can play with in the liquify tools and I suggest playing around with all of them. For the opposite affect of the bloat tool, try the Pucker tool. You can also stretch and warp parts of your image. There are also the Freeze Mask and Thaw Mask tools; these are useful for keeping parts of the image from being effected by your manipulations.

Look at those teeth!

I couldn’t find a good photo of me smiling up close, so a quick search on Morguefile.com and I found this pretty girl smiling, who I then proceeded to transformed into a not so pretty girl smiling. This was done with a quick bloat on the teeth followed by a Sharpen and Blur and then using the Burn tool (found in the standard tools bar) on the teeth to give them that unbrushed look.

So next time you get bored or have time to burn and need a little laugh, fire up photoshop and play around with it.

One of the sites I work on that uses WordPress as a CMS needed a share this article with a friend link. I needed this link to appear on some of the pages, but not all of them. I used Lester Chan’s WP-Email; this is a very powerful plugin that allows you to set up an HTML email which can be personalized with the users information and then sent to their friends.

The plugin allows you to embed the email link either in the template or the actual post. Unfortunately I needed something more flexible than that. I needed the share this email with a friend link to appear at the top and bottom of select pages and in a specific place. This is where custom fields come in.

Custom fields can be set up in any post or page through the WordPress admin. You will find the option below the editor. I set up a custom field called share with a value of true. Then in the template I used the following PHP code within the WordPress loop to call the email_link() function.

if (get_post_meta($post->ID, 'share', true)) {
	if(function_exists('wp_email')) { email_link(); }
}

This code checks if share is set to true for this specific post or page ID. If true it then checks if wp_email function exists and if so runs the plugin function email_link. This is a great way to toggle plugins or any chunk of code for select pages in WordPress. Now all I have to do when I want a share this page with a friend link to show up is set the share value to true in the custom field for share.

More on Custom Fields in the WordPress Codex.

Always standards compliant

I always like to write standards compliant code whenever I can, with email it’s not even an option. With web, unless you are working with someone else’s mess it should always be standards compliant, but what happens when something won’t work in IE6 but does in IE7. It could be a double margin float bug, or the 3 pixel gap bug. Ideally you should try not to work yourself into a situation where these bugs crop up, but usually by the time they have it’s too late.

CSS that IE6 doesn’t understand

Okay, this tip means using redundancy, and I really like to avoid that, but sometimes you just have to make it work in the name of saving time and your sanity. The great thing is, although some may consider it a hack this will still be standards compliant.

Usually what happens is one attribute is throwing off IE6, while IE7, Firefox, Safari and Opera look fine. You are out of time, what do you do? Well, he’s a quick fix, use child selectors. I have used this method on my blog.

.panelLeft {
     padding:10px 0 10px 0;
}
#panels > .panelLeft {
     padding:10px 10px 10px 0;
}

So first we set the panelLeft class padding for everything. IE6 does not understand child selectors and ignores them, so for finer tuning we use a class selector that says the child class panelLeft of panels gets the same padding as the first declaration plus a right padding of 10 pixels. This right padding in my case was throwing off the entire layout in IE6. It’s only one example, I have used child selectors on several occasions. Sometimes absolute positioning will be totally off in IE6, this is another way you can use two positioning values.

Anytime you have CSS that is only breaking in IE6, you can track down what is causing the bug and use this method to set IE6 specific values. I hope this saves some people a bit of time and sanity.

Select the Photoshop line tool from your toolbar.

Select Geometry options from the line tools toolbar.

Now you will see the Arrowheads dialogue. Here you can select a start or end arrowhead. You can also specify the width and length of the arrowhead.

The last option Concvaity changes the look of your arrowhead. The arrowheads below show different concavity settings.

That’s it, pretty easy.

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.

• Outlook 2007 – When is 200 pixels not 200 pixels? Spacer gifs
• Email html design and deployment quick tips