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.

It is becoming more and more important to at least have a basic understanding of all the information that goes into making a fantastic website. Knowing limitations and pushing those limits makes web design and development fun, interesting, and challenging. If you work in this field you probably already know that web work is all about constantly learning new technologies, tools, tips and tricks.

Smashing Magazine

If you don’t know about this one then you have been missing out. While there is some fluff from time to time, you learn a lot from this site. There are a lot of top website and tools lists which can get tedious, but Smashing Magazine really does have the pulse of the web and this is the spot to be if you want to keep up to date on web trends. Some of their most popular posts are actually their trend posts. Critics will say that Smashing causes everyone to create the same type of designs, but I think it’s good to know what is working out there and what is not.

Noupe

Noupe is part of the Smashing network. It has a huge amount inspirational lists and resources. When you need a break from work or if you are feeling creatively drained it can be a great quick stop for a creative inspirational recharge.

Grafpedia

Grafpedia is the holy grail of Photoshop web design tutorials. The site sells their templates, but the real guts of the site is the full on tutorials. You can create all of their PSD templates by following their extremely detailed tutorials. Most of us won’t want to do that of course, but browsing the designs until you see something that makes you say “how did they do that” and then getting a detailed play by play tutorial on just that question is pretty cool. A fantastic resource for Photoshop web design techniques. Also a great place to start if you are completely new to creating Photoshop mockups.

ProBlogger

If you are a blogger, you should be reading this guys stuff. I started reading ProBlogger about two years ago. Some of the subject matter may be obvious for the more advanced bloggers, but you’ll probably gain new insights regardless of your skill level. Once you digest a lot of Darren’s site it does start to feel a bit regurgitated, but a quick visit every now and then always reveals something new for me. He also does a lot of his own tests and research on analytics and SEO. Problogger is also very professional and way less spamy than a lot of the get rich quick blogging tip sites out there.

Ajaxian

Ajaxian is for the more technically minded web designers and developers out there. As the name suggests they follow a lot of Ajax techniques, but the site has much more to offer than news about Ajax. If you want to know where the future of Web Apps are headed, this is a good starting point. Even if you are not a programmer, there’s a lot of cool bleeding edge stuff to see on this site.

Adobe BrowserLab

The best way to really test your websites is with the actual browser, usually via a virtual machine. Not everyone has time to install a load of browsers under virtual machines and if you don’t need to test the functionality then Adobe BrowserLab is the answer to your testing needs. The layout is slick and easy to use. You can select all the browser you want to test with and save them. The site then quickly renders image screenshots of all the browsers you selected. The next time you need to test out good old IE6 or some other hard to find browser version, give it a try.

Focus: Cross-browser testing
browserlab.adobe.com

Web Designer Wall

“A wall of design ideas, web trends, and tutorials.” This is another personal blog with a broad range of web design content. Tutorials, news, funky design techniques and everything in between. There’s a lot of content here and this guy posts often.

Pro Blog Design

This site has been around for a few years, but it only recently hit my radar. The focus is on web design with an emphasis on blogs. It’s got some fantastic tutorials and a lot of discussion.

WebKitBits

I recently discovered this gem of a site and it’s quickly becoming a favourite. WebKitBits is all about really cool projects done using the power of the Webkit rendering engine. Webkit is the browser engine built into Safari, Chrome, iPhone, Palm Pre, and Android, and it’s pretty awesome. This engine blows away Internet Explorer and even gives Gecko a run for it’s money. The stuff here is bleeding edge and some of it possibly years away before we see it in mainstream websites, but it will reignite you passion for everything web and you will be ready for the next wave of awesome.

Learning jQuery

jQuery should need no introduction by now and should be in every web designers arsenal. I would be lost without it or at least spending many more hours on my scripting. It’s the JavaScript framework library that went from “jWhat?” to “oh yeah, that’s easy we can do it with jQuery”. If you’re looking for people who know jQuery like the back of their hand, then this is the site for you as the authors share tips, techniques and tutorials and have written fantastic books on jQuery too.

BrushKing

While not exactly a web design focused site this is still a must see for web designers. It’s a Photoshop brush site with loads of free brushes. There’s always that one brush that you can plop into a web page and just add that little bit of extra wow. The quality of most of the brushes is stunning.

Web Design Ledger

Web Design Ledger or WDL for short is a web design knowledge and resources site. It’s another one of those fully loaded blogs that you can absorb information and inspiration from for hours. If you need a break from Smashing Magazine, check out Web Design Ledger.

COLOURlovers

Colour is so important, and COLOURlovers have got it covered. It’s basically a social media colour palette sharing site. Users share their colours, palettes, patterns and trends with the COLOURlovers community. The site is a great first step in the early design phase. They also oddly spell Colour correctly and incorrectly throughout the site.

Nettuts +

This is another one of those massive resource sites out there that offers free content and premium content. Nettuts + is only part of their huge tutorial network. If you need information on a topic or just want to get exposed to new techniques and ideas than this is the place to go.

A List Apart

This list would not be complete without A List Apart. I my opinion this site is the de facto authority on best web practices and techniques. Many of the well known techniques used today originated on A List Apart. Although they don’t post near as much as some of the other sites listed here, the content is almost always top notch. The topics cover code, content, culture, design, process and user science. A lot of well known industry leaders and thinkers have written for A List Apart.

Did I miss something?

If you think there is some awesome super duper resource that is missing from this list including your own site, please don’t hesitate to post it below in the comments.

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.

Display block and line height

The first option is to use a display block on the images causing the problem. The reason you have this space below images in the first place is because images are inline elements. This means Firefox is reserving space below the image for descenders. A descender is the text in some lower case letters that extends below the baseline of the font. This occurs in letters like g and p. Changing your images to block removes this reserved space because a block level element is not treated the same way as an inline element.

This fix will not always be good enough as you may need images to line up horizontally. Changing images to block level elements will cause a break after each image. You could try floating them, but an easier way would be to set the line height. Give the container element a line-height of 0.1 em. Using this method will remove your spacing issues, but remember that you can only use images in this container. Using text will obviously have undesirable results.

Examples

Block method:

.containerDiv img {
     display:block;
}

Line height method:

.containerDiv img {
     line-height:0.1em;
}

In Internet Explorer (of course) you will lose the Facebook interface whenever a user clicks a link or submits a form. This drove me crazy, because an iframe was the only way for me to access the database on the server I was using. The solution was remarkably easy. It’s a header you can add to the top of your app.

"p3p", "CP=\"CAO PSA OUR\""

In PHP it looks like this.

header("p3p: CP=\"CAO PSA OUR\"");

More information can be found on the Facebook Developer forums.

• Breaking the Facebook canvas iframe in IE.
• iframe applications and P3P HTTP headers, “why make sure to implement P3P if using iframes?” cookies and session will not work in some browsers.
  

If you have been making email newsletters that work in the majority of email clients out there you already know this; if you want your work to display the way you intended in web based and stand alone email clients then you have to use inline styles and tables, and a lot of them. You would also be wise to ignore any modern CSS, because most of it won’t work. Inline styles work well for email clients that strip out all the embedded styles like Hotmail (also a Microsoft product). Hotmail has come a long way over the past 4 years, but unfortunately Outlook took several steps back when someone came up with the brilliant idea of using Word as the email render engine. Previous versions of Outlook are much easier to support. 

I’ve done everything right, why are my links turning purple when clicked!

So you have your inline styles set up everywhere including on your links, but when you send out your deployment the links turn purple when clicked in Outlook 2007. This is Outlook ignoring your inline styles and applying the default link colour for visited links. If you have an embedded style at the top of the page, it will respect those. I had stopped using embedded styles all together since inline styles were much more reliable. The fix for this is to add your link styles back in the embedded style at the top of the page inside the head of your markup.

<style media="all" type="text/css">
a:link, a:visited {
     color:#64698c;
     text-decoration:none;
}
.sideBar a:link, .sideBar a:visited {
     color:#893d00;
     text-decoration:underline;
}
</style>

In this example all link styles are set to a specific colour and the second style sets a different set of colours for links within a sidebar class. All you really need to fix your Outlook link woes is the a:visited declaration, but it can’t hurt to add the links in there too.

Inline styles are still king with email

Remember, dont’ get rid of your inline styles. One of the reasons I got rid of my embedded styles is because I could not tell when I was missing an inline style. This is a real pain for links, because using this fix will show your links as the right colour while working on the email. If you or others use editors to work on your HTML they will not add inline styles, so you must always remember to add them after. Again, the down side with this fix is now you cannot see which links you have missed. At the time of writing Gmail still strips out the embedded link styles and I’m sure a few other clients still do this too.

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.

The other great news is that if you have been posting to a lot of blogs with the same email address and they have Gravatar functionality set up, all your old posts will be updated with your personal Gravatar when you sign up for one. Also, if you have posted to a blog without Gravatars and they add the that functionality in the future, your old posts will then show up with your Gravatar.

How does it work?

Gravatars work by passing a few parameters through the URL to the Gravatar website. You tell the site what you are looking for, send an encrypted email address via MD5 hash along with size, default icon location and border colour. Some of these parameters are optional.

Example Gravatar URL

http://www.gravatar.com/avatar.php?gravatar_id=b205b058e095597f982a65a1134a89cc&rating=R&size=40&default=http%3A%2F%2Fwww.ianhoar.com%2Fwp-content%2Fthemes%2Fian_v2%2Fimages%2Fgravatar_default.gif

For people wanting to add Gravatars to their own blog it’s extremely easy with WordPress. There are several ways you can do this. WordPress 2.5 has Gravatar functionality built in by default. You can find out more about this on the WordPress Codex. There are also several plugins that will accomplish this including the official Gravatar WordPress plugin, which is the method I prefer over the built in WordPress functionality and will discuss below.

The reason I like the Gravatar plugin over the default WordPress support is that I find it more flexible. I can use my own image html and use my own CSS class and alt tag right in the HTML theme template. The WordPress Gravatar support generates the image HTML for you automatically and you can use the included class to style it.

Using the WordPress Gravatar Plugin

<img src="<?php gravatar("R", 40, "http://www.ianhoar.com/gravatar_default.gif"); ?>" class="gravatar" alt="<?php comment_author(); ?>" />

• The first parameter in the gravatar() function sets your rating. Gravatars have G, PG, R and X ratings. This setting allows you to set what kind of avatars you want to allow on your blog.
• The second parameter sets your size. In this case 40 x 40 pixels (the default is 80 x 80 pixels).
• The third sets the path for a default avatar if a user does not have a Gravatar.
• There is also a fourth parameter that allows you to set a 1px colour boarder. I prefer to use a custom class for this within the image markup itself.
• I’ve also set the users name as the alt tag for each Gravatar with the comment_author() function.

What if I don’t have WordPress?

You are probably in luck, the Gravatar website has detailed instructions on the Gravatar URL and other plugins for several blogging platforms. You can find a complete list in the Gravatar implementor’s guide.

Scroll down to see my first comment on this article and you will see my Gravatar in action. If you are a blog reader and you post a lot, why not get your own Gravatar today? Feel free to come back here and try it out in the comments section below.