What is Zen Coding?

Zen Coding is hard to explain, but if you have been working with HTML and CSS for awhile now you should be able to pick it up very quickly. It’s easy to learn and best shown by example, so lets start with an example.

Say I want a div with an id of frame and a class of indent, I would type:

div#frame.indent

In the Coda editor hitting F1 would turn the above into this:

<div id="frame" class="indent"></div>

That’s pretty cool, but not life changing, but how about something like this.

table>tr*3>td*4

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

Okay, I know what your saying, who needs complex tables anymore! Well, email newsletters and tabular data for one, but how about this.

ul#navigation>li.link*5

<ul id="navigation">
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
	<li class="link"></li>
</ul>

What if each link class needs to be unique?

ul#navigation>li.link-$*5

<ul id="navigation">
	<li class="link-1"></li>
	<li class="link-2"></li>
	<li class="link-3"></li>
	<li class="link-4"></li>
	<li class="link-5"></li>
</ul>

How about adding a strong tag in each bullet.

ul#navigation>li.link-$*5>strong

<ul id="navigation">
	<li class="link-1"><strong></strong></li>
	<li class="link-2"><strong></strong></li>
	<li class="link-3"><strong></strong></li>
	<li class="link-4"><strong></strong></li>
	<li class="link-5"><strong></strong></li>
</ul>

Want a bunch of caption blocks?
div.caption*5>h1+h2+p

<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>
<div class="caption">
	<h1></h1>
	<h2></h2>
	<p></p>
</div>

Attributes? Got that covered too.

a[href="link$.html" target="_blank"]*3

<a href="link1.html" target="_blank"></a>
<a href="link2.html" target="_blank"></a>
<a href="link3.html" target="_blank"></a>

Okay, it’s probably clear by now that I think Zen Coding is awesome and maybe I’m getting carried away now, but lets try one more. This one helped me post all the examples above to this post by using a filter. Adding a |e filter to the end of the above example will escape all unsafe XML characters with HTML entities. Perfect for posting code examples.

a[href="link$.html" target="_blank"]*3|e

<a href="link1.html" target="_blank"></a>
<a href="link2.html" target="_blank"></a>
<a href="link3.html" target="_blank"></a>

Many editors are supported

Don’t have coda? That’s not a problem, many editors are supported and chances are you are familiar with one of them. There’s even a PHP version called ZenPHP which will generate blocks of HTML in a similar fashion. If you have any really cool Zen Coding selectors post them in the comments.

• Official Project site
• More selector examples
• List of filters

Keeping code clean in the messy world of email newsletters

Obviously putting the font-family in the table or a surrounding div should do the trick, and it does for everything except Outlook 2007, for some reasons font-family declarations do not cascade. One easy but tedious way to fix this issue is to put inline styles all over the place. I don’t like this method, it makes it easy to forget sections of copy and it messy. I always especially avoid using inline styles on paragraph tags. You have have almost no control on the p tags anyway. Put everything you need in your td tags and leave your p tags clean.

So you might be thinking well then I’ll just add font-family declarations to all my td tags. Again this is slightly less messy, but still messy and our newsletters markup are awfully messy as it is. This is a place where you can use an embedded style. I know there are blanket rules like never user anything but inline styles, but this is not always the case, and blanket rules never benefit anyone. There are places for embedded styles, and they are even required in some cases for optimal cross client compatibility as I wrote about in “Outlook 2007, inline styles, and links“. The thing you must always remember when using embedded styles is that other email clients like Gmail are going to ignore them completely, so build in redundancies.

Style the table data

The fix is simple, you only need to declare your font-family twice. Use an inline style once in your table.

<table border="0" cellspacing="0" cellpadding="0" style="font-family:font-family:Verdana, Geneva, sans-serif;">

At the top of your page add this to your embedded style.

<style media="all" type="text/css">
td {
     font-family:font-family:Verdana, Geneva, sans-serif;
}
</style>

Now you have made Outlook 2007 happy and given every td in your email newsletter a font-family. When the embedded style is stripped in other clients like Gmail you are still keeping the client happy, because other clients won’t ignore the font-family in the table tag and it will actually cascade throughout the document.

The problem illustrated

As you can see the list on the left image does not properly aligned, while the one on the right is. The fix is quite simple.

ul, ol {
	overflow: hidden;
}

Use overflow:hidden on your ul and ol tags. This will stop your lists from flowing around images too, but that’s probably a good thing because a list flowing around an image isn’t every pleasing to the eyes.

Getting it to work in IE6

You didn’t think you were finished did you? When I did the redesign for ianhoar.com I really wasn’t sure if I would support Internet Explorer 6 at all, but in the end I decided that if I still have to support it on my professional projects then my blog should probably support this truly awful browser too.

The IE6 fix is a zoom:1 declaration. Unfortunately the zoom declaration is not valid CSS. You can get around this by creating a second CSS file called ie.css and use conditional comments when linking the file.

ul, ol {
	zoom:1;
}

And the CSS conditional

<!--[if IE 6]>
	<link rel="stylesheet" href="ie.css" mce_href="ie.css" type="text/css" media="all" />
<![endif]-->

Your lists should look a lot nicer now when situated next to floated images or other floated elements.

One image used twice

The trick I use is simple, place the background image twice and offset the one on top by one pixel. For a grey button, the background would look like the one below with four 1px notches out of each corner. The size of the background is just to accommodate different sized buttons, so if you needed a wider button then you would need a wider background. Also, the gradient at the bottom will depend on the font size you use and the style you are looking for.

In order to get these buttons to work in all browsers including our beloved IE6 and 7 they must all be floated left or right. If you do not need to support these browsers then you could use a display: inline-block which would make them even more flexible. Below is the CSS used to create a grey button.

.clear {
	clear:both;
}
.left {
	float:left;
}
.right {
	float:right;
}
.btn a {
	white-space: nowrap;
	text-align: center;
	display: block;
	color:#fff;
	padding:1px 20px 5px 20px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-shadow: #3a0000 1px 1px 1px;
	text-decoration: none;
	font-weight:bold;
	position: relative;
	bottom:-1px;
	right:-1px;
	z-index: 1;
}
.grey {
	background:url(images/btn_grey_bkg.png) no-repeat top left;
	margin:5px;
}
.grey a {
	background:url(images/btn_grey_bkg.png) no-repeat bottom right;
}

And here is the HTML for the actual button.

<div class="btn grey left clear">
	<a href="#">Grey</a>
</div>

How it works

As you can see the HTML snippet is very small and has several CSS classes. I like to break up my classes because I find it allows for much more flexibility. This way you can add which way you want the button to float, whether or not you want the floats to be cleared when beside other elements and what colour you would like to use. If we wanted to add red buttons we would simply create a red background and add the red CSS class.

.red {
	background:url(images/btn_red_bkg.png) no-repeat top left;
	margin:5px;
}
.red a {
	background:url(images/btn_red_bkg.png) no-repeat bottom right;
}

Followed by:

<div  class="btn red left clear">
	<a href="#">Red Button</a>
</div>

Which would give us buttons like these:

The btn class does the bulk of the work, so lets walk through it.

• First we apply all these styles to the actual link within the div, thus .btn a.
• The text align is only needed if you plan to add breaks to your buttons. One line of text will be padded and automatically be centered.
• We apply a nowarp so the text does not wrap unless you force it too. You can add an HTML breaks (<br />) in your button.
• The display: block allows you to apply padding to the top and bottom of the anchor tag which by default is inline. It also makes the entire button clickable and not just the text.
• The padding values can be tweaked to whatever you think looks good. This is where the text will situated within the button.
• font-family, font-size, text-shadow, text-decoration and font-weight are all optional and could be defined elsewhere in the CSS file. text-shadow looks great but does not work in any versions of Internet Explorer at the time of writing. Graceful degradation / progressive enhancement applies nicely.
• position: relative, allows us to offset the background image defined later in the colour class by bottom: -1px and right: -1px. This will make the background image within the colour anchor link offset so you still get the top and left sides of the bottom image.
• z-index:1 forces the the anchor tag to the top which is necessary for IE6.

Taking it further

These buttons are fairly flexible and easy to change. You could easily apply hover states and change the backgrounds. There is very little markup involved and that’s always a good thing in my books. I’m trying to move away from bulky markup with many divs. It will be nice when we can freely use multiple backgrounds on a single div and rounded corners with CSS3.

Demo

Check out the working demo and feel free to post questions.

VirtualBox to the rescue

VirtualBox is a fantastic virtualization tool for Mac OS X, Windows, Linux and Solaris. I actually like it more than Parallels, and unlike Parallels, it’s free.  Setting up a virtual machine is pretty easy, but it’s a bit time consuming. Once you have a VM set up there doesn’t appear to be any quick way to duplicate the already working image. This tutorial will guide you through the steps needed to duplicate a VirtualBox image on Mac OS X.

This tutorial assumes you have VirtualBox installed and a working VM already. If you are setting up a VM to test in Internet Explorer, then I recommend setting up the first image with IE6 and then duplicating and upgrading to IE7 and then duplicating again and upgrading to IE8 and no doubt soon to be, IE9.

Lets get started

First open your Finder and navigate to:

YourUserName/Library/VirtualBox/HardDisks/

Here you should see at least one or more vdi files. Take note of the one you want to copy. This tutorial will assume we are cloning Windows_XPIE7.vdi to Windows_XPIE8.vdi, remember these names will be replaced with your own vdi file name. Now you need to open the OS X Terminal. If you don’t know where this is, it’s called Terminal in your Applications/Utilities directory. Now change directories to VirtualBox. I usually type cd and then drag the file path from my Finder into the Terminal window, alternatively you can type it out:

cd /Users/YourUserName/Library/VirtualBox/HardDisks

VirtualBox comes with a command-line utility called VBoxManage. In the terminal windows type:

VBoxManage clonehd Windows_XPIE7.vdi Windows_XPIE8.vdi

This will take a minute or so. Once it is done you will have a clone of your vdi file and you will see a UUID: with a long string of string of letters and numbers. Copy this string, I recommend pasting it into a text editor for the moment or leaving the Terminal window open.

Now navigate back to the Finder:

YourUserName/Library/VirtualBox/Machines/

Right click the Windows_XPIE7 directory and select Duplicate. Rename it to Windows_XPIE8. For consistency, inside this directory rename Windows_XPIE7.xml to Windows_XPIE8.xml. With a text editor open the renamed file.

In this file search for uuid. The first instance should be under Machine. Something like this:

<Machine uuid="{91ddb597-afe8-476a-b077-ef4575dca102}" name="Windows XPIE7" OSType="WindowsXP" lastStateChange="2010-05-04T02:15:21Z">

Paste the uuid that you saved from your clone here. (This does not need to be the exact same uuid, but it makes things easier.) Change the name to Windows XPIE8. This is the name that will show up in VirtualBox.

<Machine uuid="{81ddb597-afe8-476a-b077-ef4575dca102}" name="Windows XPIE8" OSType="WindowsXP" lastStateChange="2010-05-04T02:15:21Z">

Now scroll down and look for a second uuid in the AttachedDevice element node, you will likely find more than one, but the one you are interested in has a type of “HardDisk“.

<AttachedDevice type="HardDisk" port="0" device="0">
    <Image uuid="{5af3e1b9-e7c9-4a57-9251-a47d4adaca7c}"/>
</AttachedDevice>

Here you want to paste the uuid you saved earlier over the old one. Save and close the file.

In the Finder navigate to:

YourUserName/Library/VirtualBox/

Open VirtualBox.xml in your text editor. Under the element MachineRegistry you will see MachineEntry elements. Copy one of these and update the uuid with the one you saved earlier.

<MachineRegistry>
    <MachineEntry uuid="{31ddb597-afe8-476a-b077-ef4575dca102}" src="Machines/Windows XP/Windows XP.xml"/>
    <MachineEntry uuid="{91ddb597-afe8-476a-b077-ef4575dca102}" src="Machines/Windows XPIE7/Windows XPIE7.xml"/>
    <MachineEntry uuid="{0158e13d-ef69-44cf-bb11-01755763f1ff}" src="Machines/Windows XPIE8/Windows XPIE8.xml"/>
</MachineRegistry>

Now you need to change the HardDisks element. Add a new Hardisk element and change the uuid to the uuid you saved in your text editor.

<HardDisks>
    <HardDisk uuid="{be0d8b4a-ee99-410b-9d9e-a65d581479cf}" location="HardDisks/Windows XP.vdi" format="VDI" type="Normal"/>
    <HardDisk uuid="{5af3e1b9-e7c9-4a57-9251-a47d4adaca7c}" location="HardDisks/Windows XPIE7.vdi" format="VDI" type="Normal"/>
    <HardDisk uuid="{0158e13d-ef69-44cf-bb11-01755763f1ff}" location="HardDisks/Windows XPIE8.vdi" format="VDI" type="Normal"/>
</HardDisks>

It seems like a lot of steps, but it’s actually a lot faster than re-installing the OS. Now you should be able to fire up VirtualBox and see your new VM listed. Now all you have to do is update your browser.

This Tutorial was inspired by Josh Prowse’s YouTube tutorial. Mine is slightly updated for a new VirtualBox directory structure and I use the same uuid throughout.

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 &amp;. 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.