Zen Coding – a new way to write HTML lightning fast
The other day I purchased a new editor called Coda. I might review this fantastic little piece of software at a later date, but one of the reasons I purchased it was to use some of the many plugins the community has created for it. One of these plugins has been produced for several editors and could change how you code. It’s called Zen Coding, and it will make you write large chunks of HTML a lighting speeds.
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.
Outlook 2007 losing font-family declaration
Email clients are one of the pinnacle frustrations for web designers. The limitations are far greater than those of web browsers and you can always count on Microsoft’s Outlook 2007 being at the forefront of compatibility problems and bug issues. If you create emails that have to support Outlook 2007′s wonky Word rendering you may have noticed on occasion that your specified font-family disappears. There’s a few ways to fix this, but some are better than others.
How to fix floated images and list overlap
The other day I was looking at my blog and saw that one of the posts had a left floated image followed by a bulleted list. The problem was that the list was not indenting properly the way it did when next to a paragraph without a floated element. After a bit of searching and hair pulling I found a discussion that solved my problem.
Creating simple pure CSS buttons
This week I played around with some pure CSS button techniques. This style of button is clean looking and easy to set up, it even has slightly rounded corners. This is not the sliding doors technique which allows you to have full rounded corners, but it a variation, a little simpler and requires only one image and one div tag in the markup. Check out the working demo and read on.
How to clone / duplicate a VirtualBox VM on Mac OS X
The sad truth is that it’s becoming more and more important to cross test your markup on multiple browsers including Internet Explorer. Yes I’ve heard the announcement about IE6 being dead, but chances are you probably need multiple browsers, and graceful degradation / progressive enhancement should still be the ultimate goal for any web designer.
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.
The mailto syntax; A comma may not work in Outlook Web Access
The mailto syntax is pretty simple, but sometimes you might run into problems with some mail clients (AKA Outlook Web Access). Most of them are very forgiving and you can drop a comma for example right into the body of the mailto and have no problems, but it’s better not to do that. It’s much safer if you use hexadecimal numeric values for your special characters. For example a comma is %2c and a space is %20.
CSS tip, declare your font family once
Here’s a CSS tip that I wish more people would follow. When setting up a font on your site, say Verdana, there is no reason to declare it on every H tag, P tag and class you are using. Throw it up in the body and be done with it. The same goes for font sizes, colours and anything else that will be uniform across the site. Once you have done this you can override it for specific tags and classes when you need too.
body {
font-family:Verdana, Arial, sans-serif;
font-size:12px;
margin:0;
line-height:130%;
color:#333333;
}
This will make your life easier and everyone else who has to work with your files will thank you. I think we should always be looking for ways to make our CSS smaller, cleaner and easier to read.
Adobe Photoshop CS4: Blurry edges with the Rectangle Tool
I was playing around with Photoshop CS4 and came across an odd setting. I’m not even sure what the default setting usually is, but for me it was my first time dealing with non-pixel perfect blurry rectangles in Photosohp and it really threw me for a loop. Below you can see two 60 pixel boxes created with the rectangle tool. Both boxes look the same, but upon further inspection you will see that the right box has blurry edges and the left box is pixel perfect and sharp.
Internet Explorer 6 and redirected anchor links
Why are my are my anchor links not working in IE6?
As a web designer I constantly run into browser bugs and 90% of these bugs belong to either IE6 or IE7. Remarkably these two browsers don’t even consistently break the same way. What is messed up in IE6 may be completely messed up in a different way in IE7. The standards compliant WebKit and Gecko engines used by popular browsers like FireFox, Safari and Chrome rarely see many of these annoying bugs, but the masses use IE, so we as designers and developers must make them work.
Create a custom iPhone icon for your website
If you own an iPhone you may have noticed that you can bookmark websites and add them to your home screen. These are called Webclip Icons and they are either a snapshot of the website or an actual website icon similar to a favicon that shows up in a desktop browsers address field. If you want to add an iPhone icon to your site it’s very easy to do.
