Recently, a post came through on the Yahoo! Dreamweaver list about ems versus percents for sizing in CSS. Basically, the question was whether or not there was actually a difference between them and whether or not it mattered which one you use. This comes up quite a bit, and I can completely understand how it can be confusing, so I thought I'd share my thoughts on the issue.

I want to start with an explanation of what, exactly, an "em" is. An em is a unit of measurement defined as the height of the given font; specifically, it is (at least in theory) the height of a capital "M" in the font. In practice, that means that one em = the font size, so if you have your font size set to 16 pixels, 1em = 16px. If your font is set to 12 points, then 1em = 12pt.

However, in 16px text, 100% is, obviously, 16 pixels. If your font is at 12 points, then 100% is 12pt. And that's the root of the question: if 1em = the size of the font, and 100% = the size of the font, then what's the difference?

The answer is that when dealing just with font sizes, there isn't a difference. If you have your body's font set to the browser default (16px for most browsers), then there is no difference at all between setting your h1 to 120% or to 1.2em. They are identical.

Box sizes, though, are a different creature altogether. Percentage widths on a box refer not to the size of the font, but to the browser window. So if I say that I want my "mainContent" div to have a width of 80%, I'm saying that I want it to span 80% of the browser window, however big that may be. But it's also legal to say that I want my "mainContent" div to be set in ems. So I might decide to set the div to, say, 48em. And here's where the power of ems comes in. Assuming that I'm using that browser-default 16px, then a box with a width of 48em would be 768 pixels wide. But ... and here's the trick behind using ems ... if you then resize your *text*, the box will also resize.

Why, one might ask, would you want to do that? Quite simply, for accessibility. It's not about YOU, the designer, resizing text. Rather, it's about tying your design to the browser's resize text functionality - an important accessibility tool.

You can actually see this in action. Using Firefox*, visit both cnn.com and yahoo.com. On CNN, resize your text (View -> Zoom -> Zoom Text Only, then View -> Zoom -> Zoom In or ctrl-+)**. Then do the same thing on Yahoo's homepage. What you'll see is that CNN's layout breaks pretty quickly, since their layout is pixel-based, but Yahoo's does not - their boxes expand with the text.

*You need to use Firefox for the above example because IE's text resizing feature only allows for resizing if the font size on the page is set in percents or ems, and CNN's is not, so the text will not resize.

** Until very recently, Firefox defaulted to only "zooming" text when using ctrl-+ and ctrl--. I'm not precisely sure when they switched to zooming the whole page (including graphics), which IE has been doing since version 7 was released, but I know that it was very recent - one of the dot releases since 3. I'm personally not a fan of zooming the whole page. If I'm on one of those blogs designed by a moron who is using 3 point text and I need to make the text bigger to read it, I don't want the whole page to expand to the point that I have to scroll left and right and to the point that the images pixellate, but the browser designers forgot to ask my opinion before they changed the feature.

So I hope that helps explain things a bit.

By the way, in DW CS3 and CS4, the starter pages contain a bunch of layouts called "elastic" that size their boxes using ems for exactly this reason, so you might try playing with them to see what happens. For example, change the font size in the CSS for one of the sidebars and watch what happens to its width. The book "Mastering CSS Using Dreamweaver CS3" (or the CS4 version) has a chapter on using these layouts. (Stephanie Sullivan, one of the co-authors of the book, actually created all of those starter pages, so she knows of what she speaks.)

The web was originally developed, at least in part, to provide a means by which documents can be linked together. Hyperlinking is one of the very first things you learn when you get started in web design. Yet, as with a lot of other things, a lot of people consistently get it wrong when working with links.

I'm going to cover two basic, but common hyperlinking mistakes here. The first is used to be much more common than it is today, but it still exists: not using logical text for the hyperlink. "Click here" was perhaps the first cliche of the web - a sure sign that a designer wasn't really thinking through their pages. I hesitate to go right out and call it lazy design, but ...

One of the blogs I follow every day is scottkelby.com. Scott, in case you're not familiar with him, is the President of the National Association of Photoshop Professionals. He's also the best-selling computer book author out there. More important, at least in my eyes, is that Scott is also the grand-poobah when it comes to Photoshop knowledge. If you use Photoshop at any level and want to get better, you owe it to yourself to so as I have done and add his blog to your daily read list. I have nothing but complete respect for Scott, but that said, there is one thing that I wish Scott would change: his approach to links. Take a look at the screen shot below, taken from Scott's blog today (March 6, 2009):

See what he's doing there? He's not using the words "click here", but he might as well be with that "Here's the link" at the end. What purpose does that serve?

There are several problems with the "click here" or "here's the link" approach. To begin with, it's a bit insulting to your reader, if you think about it. They know they're supposed to click; they know it's a link. So why tell them. It's kind of like giving someone directions to a store in the mall by saying, "OK, so you need to go out in the mall, turn right, and then go downstairs. Oh, and by the way. That big hole in our wall? That's the door. You need to go through it to get started."

Instead, wouldn't it make a lot more sense to just link the relevant phrase in your text to the page in question? Take the second paragraph from scottkelby.com above: instead of the useless "Here's the link" stuff, why not just link the words "check out the work of photographer Loretta Lux."

That approach is also a lot cleaner. It reads better. It's more accessible: a screen reader will often present all of the links on a page to the user separately. Often, a blind user on Scott's page would be presented with a list of links that all said "Here's the link", and have no way of knowing which one belongs to what text. Oh, and one more key element: search engines like Google do a lot of their indexing based on the text provided by links. Having a site as prominent as Kelby's link to yours would be a big boon for search engine rankings, but unfortunately for Ms. Lux, most of that boon is lost because Google is going to index the words "here's the link" with her page, not the much more important words like her name or the fact that she's a photographer.

So please, take a moment to think about your link text. I'm going to go so far as to say that there is never, ever a time when you need meaningless "click here" text. If you think you have an example where it's simply impossible to word the text differently to get rid of it, let me know in the comments. I'm willing to bet that I can come up with a rewording that will make more sense.

The second problem I want to mention here, and the one that actually inspired this post, is much newer, and unfortunately becoming much more prominent these days. Ironically, in many ways, it's an offshoot of fixing the problem above. If you are going to have words in the middle of a sentence serve as your link, please make sure that the text is obviously different! Here's the example that made me decide I needed to write this post:

There are two links in that paragraph. Can you find them? If you were to visit the actual page from which the screen shot was taken, you could of course hover over each word with your mouse, waiting for it to change into the hand and let you know there's a link. This is in fact exactly what I had to do when I visited the site: I could tell from the context that there should be a link in there somewhere, but I certainly couldn't see anything, so I had to start mousing over stuff. Seriously? In what design school, exactly, is it being taught that you should make your links into some sort of Easter egg hunt?

In the original design of HTML, links were to be blue and underlined. Blue was chosen most likely because it is the darkest color that is most obviously not black, while underlining links made sense because no real designer would use underlining for anything else. But both were there because it was understood that it's important that links stand out: that there be contrast between them and the surrounding text.

Link many designers, I'm not a huge fan of underlining links on things that are obviously navigation: look at the sidebar to the right of this article, and you'll see that the link's aren't underlined. That's because I believe that it's obvious from the context that those are links, and because in every case, the entirety of the text in question is a link.

The body of a document in a difference story, however. Assuming that you read and took to heart the whole first portion of this post, you know by now that your links should be embedded seamlessly within your text. However, they still need to stand out. So I will always underline the text of the links in the body of a page when I create it from scratch, as well as making them an obviously different color. Rob Sommers, however, pointed out (correctly) that this blog actually contradicts that, since as you can clearly see links in the body on this page are not, in fact, underlined. So the correct statement would be simpler: just make sure that the links are the page are nice and obvious. Underlining is probably best; making the text bold I think works well, too (although if you disagree - if you think that the links within the text are hard to find - please let me know in the comments.)

So there you have it. Rule #1 for linking: link meaningful text, instead of garbage like "click here" or "here's the link." And rule #2: Never make your users have to search for that link within the text.

So I have to admit that I may have been a tiny bit wrong about Photoshop CS4. OK, I was very wrong. I've been telling a lot of people recently that there are a ton of reasons to consider upgrading to CS4 ... if you use Dreamweaver, Flash, Fireworks, or Illustrator. But if you're a Photoshop user, well, I hadn't really seen much to be impressed with.

Well, I was wrong. It turns out that there are a ton of really great enhancements in Photoshop. The problem, I think, is that none of them are terribly flashy. But that doesn't make them any less impressive.

Something that's been fairly frustrating for me throughout the whole transition to CS4 is that most of the things that are new in all of the programs are things that require me to rethink my workflow. Dreamweaver's Live View, Live Code and Related Files features, for instance, have saved me more time than I can count, but it took some time to get it stuck in my head, because in order to use them, I had to change the way I do things. The new animation model in Flash and the Motion Editor have likewise forced me to rethink my entire approach to creating animation. And I'll admit that I still don't think of Fireworks first when I need to wireframe a web site, but I'm trying to get there.

Photoshop's new features fall into the same category. I haven't really discovered them because I've been trying to use Photoshop the way I always used it in the past. But now I need to take a new approach to a lot of things, and that's going to take some getting used to. But it will be worth it. Just as I can't count the hours I've saved thanks to my new workflows in Dreamweaver and Flash, I know now that forcing myself to relearn how I edit images in Photoshop will be worth the effort.

Okay, now I know you're sitting there, screaming at your screen, "JUST TELL ME THE FREAKING FEATURES ALREADY!" Well, you really shouldn't yell at your screen. I can't hear you, and it will hurt your monitor's feelings. Besides, I have no intention of telling you what the features are. I know, it's mean. It's partially because it's a little bit late, and I really want to go watch Grissom's final episode of CSI, but mostly it's because I don't have to. Instead, I'm going to let Scott Kelby do it. Enjoy!

P.S.: Here's the link to the second and third parts of the series. As of when I'm writing this, he hasn't posted the fourth part yet.

Edit: They have now posted part four.