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.

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.

My new design is larger in every aspect. Larger width, bigger fonts, fatter masthead, more prominent navigation and taller footer. I also wanted to simply the site. I found the old site was too busy and parts of it always felt like after thoughts. This time around I made a concentrated effort to layout almost everything in Photoshop before hand and then mark it up all on a static HTML page before applying WordPress tags. Headers, block quotes, preformatted text, comments, twitter posts, form fields, buttons and images were all visually tested in Photoshop first. In the past I have done all the graphic elements and worried about things like form and comment styling afterwords. There is something to be said for both approaches, and I don’t think one has more merit than the other, but I wanted to really feel this new design from the start. No after thoughts. That said, I did end up tweaking a few elements and even forgetting to Photoshop a few parts, and there will always be future additions that are after thoughs, but I think I started with a solid base. I’ve tried to keep my layout flexible enough to anticipate future fine tuning.

A new design and a new focus

With the new design comes a new focus. In the future I will be writing more in depth tutorials and content. I will be posting less banter and chatter, that’s what Twitter is for. That doesn’t mean I won’t still have the occasional gadget review or rant, but expect a lot more web related content. I also hope to post some YouTube tutorials if I ever get up the courage.

First someone is viewing a newsletter their attention span is probably extremely short. They probably want to get onto their next email, but something has triggered their interest in your newsletter. Why waste that interest on jumping them further down the email, this is your chance to grab their attention and hook them into your website. It may be your last change before they click onto their next email and your website is probably a much richer web experience anyway.

The second reason is anchor links are just another thing that often goes wrong in email newsletters. They act unpredictable, and at the time of this writing, don’t even work properly in Gmail. I also remember a time when an anchor link would show a blank screen in Yahoo! Mail, although this has since been fixed.

Despite these reasons, using an anchor links in an email is usually not my decision to make, so I have to try and find a way to make it work. A regular anchor link like the one below will not work in Gmail.

<a href="#section1">Section One</a>

However this will work.

<a href="#section1"><span>Section One</span></a>

Like many email newsletter hacks and tricks it’s a simple one, but can be frustrating and time consuming when trouble shooting it for the first time.

There is however a simple solution for this. In the layers pallet right click the smart object and instead of clicking Duplicate Layer, click “New Smart Object via Copy” and voila!

My own opinion is that it would have been smarter for Adobe to have a “New smart Object via Reference” and have the “Duplicate Layer” act as a unique layer, but maybe there’s a good reason for it being the way it is.

Awesome and frustrating

The iPhone has changed how I do many things. It’s changed:

• how, when and where I check email
• what I read and where I read
• how I play games
• what I expect from other small displays
• how I surf the web
• how I judge the quality of other gadgets
• how I view my stocks
• how I listen to music
• how I watch video
• how I get my weather
• how I access things like Facebook and Twitter
• what I do when I’m lost or need to find a coffee shop
• how I find what movies are playing today and at what theater

Is that your iPhone ringing?

The above list are just some of the many things the iPhone has changed for me, but it’s not all awesomeness! I love my iPhone I really do, but it’s also changed how I answer a Phone. Gone are the days of pressing a button and hearing a voice at the other end although you can press a multitude of buttons to silence a call. The iPhone has reinvented the way we use gadgets in every possible way, including how we answer a phone. Now you swipe a pretty little graphic to answer your phone. Got winter gloves on? Don’t worry, answer it later. Fumbling around with your phone while getting it out of your pocket? Don’t worry, that phone call probably wasn’t important anyway. Someone trying to buzz you to get into your building and your iPhone has let you know about it two minutes later with a missed call message? Don’t worry, someone else probably let them in.

Yes, the iPhone excels at everything except being a phone. The final blow comes when your iPhone is sitting on the desk in front of you; none of the challenges mentioned above are an issue now. Your phone is ringing, all you have to do is slide that beautiful slider to the right, slide once, slide twice, slide three times, maybe one more slide, please please answer the call! I know I am not alone in this, a simple Google search finds thousands of people with the same issue. The slider randomly locks up and does not answer phone calls sometimes.

The iPhone is sold in countries with winter (AKA Snowy and Cold)

Not only that, the whole slider concept is a stupid idea anyway. Yes it’s cool the first few times you try it, but then practicality comes into play. Try answering an iPhone in Toronto on a cold January day with gloves on, no traditional button means no answering your phone. I think my iPhone would be perfect if I could just press the big button at the bottom to answer the phone.

Still no regrets

That said, I still have no regrets, Apple has trained us all to say iPhone, not phone, so that speaks volumes about the customer loyalty, or possibly their marketing, but I think it’s a combination of both. The fact that my iPhone sometimes won’t answer calls and I still put up with it also speaks volumes. I could also just be a sucker for punishment, but in all fairness this only happens every month or so, but it’s still infuriating.

The iPhone has become a way of life for me. When I was recently stranded in Guadeloupe because of a volcano eruption, a local wi-fi connection, Skype and email made communicating with friends and family a lot more affordable. Every morning I also manage to check all my personal email while walking to work (when the weather is warm). When I’m lost I load up Google maps. The amount of hours I’ve put into iPhone games is probably best kept a secret. The quality and feel of the iPhone is also unmatched in my opinion. It has raised the bar for hand-held devices making many other devices feel cheap and flimsy in comparison.

I want to touch every screen

Like expecting every public faucet to magically turn on when I place my hands under it, I also expect many hand held devices to have touch screens and feel silly when I realize they do not.

The iPhone has made the decision to get an iPad easier

A great experience builds trust, and like most Apple products that trust translates into more sales. My decision to get an iPhone involved a lot of research and humming and hawing, my iMac purchase required less scrutiny, and I doubt I will need much arm twisting when the iPad finally arrives in Canada.

Just give me one button!

My only request would be for my iPhone to always answer calls, even when I have gloves on. That big round button at the bottom would be perfect! Are you listening Apple?