Rob Huddleston's Blog - Rants

The two biggest mistakes made by designers with hyperlinks

Fri, 06 Mar 2009 18:00:00 -0600

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.

JVC TOD Format Update

Tue, 03 Feb 2009 12:43:00 -0600

My friend Olen reminded me that I didn't post the follow-up to the video camera problem, so here goes.

The retailer from which I bought it is R.C. Willey. I know they are based out of Salt Lake City, but I don't know how "national" they are. They are mostly a furniture store, but oddly they have a pretty good electronics department. When I took the camera back, I immediately asked for a manager. The nice woman at the front (they have a "greeter", sort of like at Walmart, but without the ridiculous blue vest). Anyway, she said that I just needed to go back to Customer Service and they could help me. All the way back, I was rehearsing in my head all of the arguments I needed to make to avoid the 15% fee. In the end, I wasted a lot of mental energy rehearsing it. As soon as I mentioned to the woman in customer service that I didn't feel that I should be required to pay the fee, she simply said, "OK. We'll waive it." That was it. So plus one point to them for that.

As a store - as a company - I think that Willey is really good. However, like any sales organization, they can occasionally hire really bad salesmen, which is unfortunately what I encountered almost immediately after leaving the customer service counter. I went back over the cameras and found another salesman. I explained the issue, and he had the gall to actually argue with me about whether or not JVC used a proprietary format. I tried to explain that I had spent several hours Saturday night dealing with it and Googling it, but he wouldn't believe it, because after all the little tag on the camera says that it records in MPEG2. That's right: he wasn't insisting that I was wrong because he knew better, but rather because of what the stupid tag on the camera said. Knowing by this point that I was dealing with a salesman who wasn't burdened by an overabundance of education, I simply pressed on, asking if it was alright if I tested a few cameras on my laptop. He said yes, but then commented that I was going to have a problem returning the camera I already bought. I explained that no, I didn't - I had explained the situation to customer service and they waived the fee. His response, and I only wish I was kidding: "Well, I guess if you sold that to them ..." Yup. He basically accused me of lying. A**hole. Needless to say, I promptly left after that remark.

I did head over to Fry's to see what they had, and actually found a helpful salesman there. (Finding a helpful salesman at Fry's is a rare occurrence indeed.) In the end, I decided to get ... nothing. I'm going to spend some time researching this further. I have some emails out to some video people I know whom I hope will be able to help recommend a good camera that will actually do what I need it to do.

Why do companies fight standardization; or, why you shouldn't buy a camcorder from JVC

Sun, 01 Feb 2009 03:41:00 -0600

My wife and I have been talking recently about buying a new camcorder. Our daughter has a school play coming up next week, so we decided it needed to be sooner rather than later. My wife finally decided that she just didn't care too much about the details of the camera, so I went out this afternoon to get one.

My first stop was Circuit City, since they're going out of business and I thought I might find a deal. They had a few HD cameras left, but in the end I decided to go to a different retailer. I chose this other store in part because I was nervous about spending that kind of money at a store that I know for a fact will be gone in a month, but also because I found what I thought was a helpful salesman at the other store.

The camera I bought was the JVC GZ-HD5. It's an HD camera with an internal hard drive for recording. I had thought I had done the necessary research before going to the store, but there was one key element I didn't look into, and that turns out to have been a huge mistake. (But in looking for solutions tonight, I know that this isn't something I would have been able to find in advance.) As all of my readers should know, I have a bit of a bias towards Adobe products. I'm getting into the whole realm of video editing in part because as an owner of the CS4 Master Collection, I have all of Adobe's video editing tools, including Premiere Pro and OnLocation. A big part of the reason why I want a camera at all is so that I can use and learn these tools.

And here's where the fun begins. It turns out that JVC is one of those damned fool idiotic companies that insist on making cameras that record in completely non-standard formats. In this case, their cameras record to a totally useless "TOD" format. And from a new round of research online, I've discovered that pretty much, only the POS software suite that comes with the camera can actually read or do anything with these files. Great. I spend $850 on a camera but can only use worthless tools to produce crappy DVDs that look as unprofessional as it's possible to look? Does that sound like a good plan to ANYONE outside of JVC's boardroom? Seriously? (Fun fact: the software tool that they provide to create DVDs has a menu item that says, and I kid you not: "Right to DVD". Yup. They can't even take the time to spell check their menus.)

In particular, no Adobe product recognizes the format. I found a tutorial online that shows how to use 3 other tools to re-encode the video so that it can be supported by Premiere at least, but that doesn't do me a damned bit of good - there's no way I'm spending several hours on each clip I need to import before I can even start editing it. And it doesn't let me use OnLocation.

You may have noted above that I didn't mention the name of the retailer. Here's why: I plan to take the camera back to the store on Monday (they aren't open Sundays) and get them to make things right. Why, you ask, do I think that they have any share of the blame here? Well, because when I was at the store, I specifically told that nice salesman that I was looking for a camera that I could use with Adobe OnLocation and Premiere. His response: "Well, if you were just a soccer mom off the street who didn't know anything about the software, I'd suggest a Sony. But since you need to use those tools, you need to go with the JVC." Yup. THEIR salesman suggested that I buy this exact camera specially because it was the best one to use with OnLocation and Premiere, when in fact it is the one brand of camera that will not work with those tools.. Like other electronics retailers, they have a 15% "restocking fee" on opened camcorders. So I'm not mentioning their name because, as I said, I hope that they will make it right. I'm going to take the camera in, ask to speak with a manager, and calmly explain the situation. I'm going to ask that he take this camera back, with no fee, and allow me to exchange it for the Sony model that will do what I need it to do.

So check back here on Monday. I will be revealing the retailer at that point. Hopefully, it'll be in the context of "this retailer is a good one, because they care about customer satisfaction and made it right"; and not "please do not shop at this store."

And either way, I would definitely recommend that if you're in the market for a camcorder, steer away from JVC. Even if you're not planning to use the Adobe products, rest assured that you will not want to use the software that comes with the camera, but that seems to be the only choice the company gives you.

iTunes, iTunes, how do I loathe thee ... let me count the ways...

Tue, 02 Sep 2008 14:30:00 -0600

I went ahead and took the plunge and downloaded the iVirus. It took entirely too long to download (how big does it really need to be??) and then even longer to install. During the install, it needed to ask me not once but twice if I wanted to continue installing even though Outlook was open. First off, what is iTunes doing that it needs some sort of hook into Outlook; and second, why did it need to ask the second time? WTF?

I finally got it installed, started it, search for Dr. Horrible, and clicked the Buy Album button, at which point I got:
"An unknown error occurred. Please try again. -9808"
Gee, thanks for the helpful error message. A quick Google search found that this is anything but an unknown error - it is in fact quite common, but I wouldn't expect Apple to take five damned seconds to research it (or, from what I read while finding the answer, respond to messages about it on their own forums). It turns out that I have to reduce the security of IE on my machine by telling it to not check for expired security certificates in order to get iTunes to work. So ... iTunes is obviously using the IE connection settings (lazy), and it is obviously trying to use some sort of invalid certificate (even lazier), and Apple is basically forcing people to compromise their own security in order to use Apple's POS software. Nice going, guys.

Well, anyway, I went ahead and changed the settings. I don't use IE anyway, and besides, I'm going to be uninstalling this as soon as I have the soundtrack downloaded. So I have to close and reopen iTunes, and re-search for the music. I click it, try a few different username/password combos to remember mine, and then get a license agreement. OK, whatever. I agree, and then I get this message:
"Thank you for accepting the new iTunes Store Terms of Service. Please try your purchase again."

WTF!!!!!!!

Seriously! Can this be any less user friendly? Can there have been any less intelligence put into this? Why in the hell do I have to start all over again???? It would be like going to Barnes & Noble, waiting in line, getting to the front, and then agreeing to join their frequent-buyer program, only to be told by the clerk that once you're done filling out the paperwork for the club, you have to return all of your items to the shelf, drive home, and then come back to the store and start all over, because surely you can't expect to actually complete a damned transaction in one process, can you? What kind of crazy world is this?

Seriously, I need one of those Mac fanatics out there to please explain to me why this company gets so much respect and loyalty. I simply don't get it.

I hate it when good people make me do bad things...

Tue, 02 Sep 2008 13:31:00 -0600

So you've most likely figured out by now that I'm kind of a big Joss Whedon fan. I'm a huge Firefly/Serenity fan (BTW - getting this will make my birthday a happy one) and I loved Dr. Horrible's Sing-along Blog.

I'm also all about supporting Joss and Co. with my pocketbook as well as my raving here on the blog. But will someone please get a message to him and get him to stop putting everything Dr. Horrible-related on iTunes? Please, please, please!

I've said it before, and I'll say it again - I think that iTunes is just about the single worst piece of garbage software available. Period. I was actually debating for a few days whether or not I would be able to hold out on seeing Dr. Horrible at all until it came out on DVD since I had to go out of town over the weekend when it was available for free, and I wasn't sure I was willing to infect my machine with iTunes to see it. Then, thankfully, Joss relented and made it available on Hulu. (And again, thanks to Olen to pointing that out to me.)

But now I'm back in the same dilemma. You see, they've released the soundtrack ... but once again, they are only selling it through iTunes. Aaaaaargh! So now do I hold out for a bit and hope that they hear all of us out here silently pleading for some alternate way to buy it? (Yeah, I know that it's pretty much impossible for them to hear anything that's silent. But you get the point.) Or do I go ahead and unleash the iPlague on my computer, only hoping that I'll be able to grab the MP3s and then disinfect my machine after I make the purchase? What to do, what to do...

Today's rant: Why are hotels anti-allergenic?

Mon, 11 Aug 2008 08:22:00 -0600

So I've done a lot of traveling this year, and there's a lot that hotels can do better, but here's the big one for me. I'm allergic to feathers, so the "nice" "upscale" hotels that use the fact that their pillows and comforters are down as an excuse to charge more per night aren't some of my favorites. I have no problem with people being comfortable, and while I've never gotten to sleep on a down pillow or under a down comforter, I'm sure they're nice. But why can't hotels provide a true, equivalent alternative?

I'm in Milwaukee right now (beautiful city, by the way), staying at the downtown location of one of the world's largest hotel chains. (I won't say exactly which one, but I'll give you a hint: the granddaughter of the founding family is in the news, a lot.) When I checked in, and asked at the front desk if they have feather pillows and comforters, and when the woman said yes, I explained that I was allergic and needed replacements. I went up to the room, and maybe fifteen minutes later someone from housekeeping stopped by.

On the beds already were four giant, fluffy pillows. The housekeeping person had one barely-there pillow for me. Also on the bed was a nice, thick comforter. My replacement? A single flannel blanket, with a two-inch diameter whole in it.

Really? I'm pretty sure I'm paying every bit as much for this hotel as those who can use the feather bedding, so then why do I have to be cold and uncomfortable? I'm going to go down and complain to the manager this morning, but this is, sadly, not the first time it's happened. I'll bet anything that the hotel simply doesn't have any comforters that are not made from feathers - in my experience to date, there has not been a single one that has. Some good hotels will at least provide alternate pillows that are as good as the down ones, but please! Why is it that these places don't get that this isn't a matter of personal preference for some guests, but whether or not we choose to return in the future certainly is?

Yahoo! Mail annoyance

Fri, 27 Jun 2008 14:29:00 -0600

While I don't use it for my primary email, I do rely on Yahoo mail a lot. I'm involved in several online forums on Dreamweaver and HTML through Yahoo, so I read all of those through their mail. I also use the Yahoo account whenever I sign up with a web site I'm not entirely sure I can trust.

So here's what pisses me off about them: it's becoming very apparent that they have some kind of sweetheart deal with DeepDiscount.com and MyPublisher.com whereby Yahoo allows emails to come in from them even if I have identified them as spam. I've never knowingly done any business with either of them, but I keep getting email from them. Every single time a message comes in from either of them, I click the "Spam" button to mark them as spam, but that doesn't stop the email. And no, this isn't a situation where it's coming through because they keep switching email addresses - the messages are always from promotions@deepdiscount.com and always from the same address as mypublisher.com. (I don't have one of their messages handy to check the address, but I just got another one from DeepDiscount.) I've gone in and verified that those addresses are in fact in my blocked senders folder, and sure enough they are. So the only logical explanation I can come up with is that Yahoo has some kind of special "allowed spammer" status for these folks.

That's just not right. I know that Yahoo is a free service, and I appreciate what they do, but come on. If you're going to claim to have a spam filter, and claim to allow me to block senders, then freaking let me do it, no matter who the sender is. Or at the very least, be up front about it: "If you use this service, you will receive messages from certain preferred vendors, and there is no way for you to block them." As is, I can't even find a place on Yahoo to complain to them about this.

Top Ten(ish) Mistakes Made by Beginning Web Designers

Wed, 04 Jun 2008 19:24:00 -0600

I spend a good deal of my time on several Yahoo forums related to Dreamweaver - both "newbies" and general users - and HTML. I see a lot of the same questions come up on the forums; in fact, one of my motivations for starting this blog was to have a central place where I can post common answers to common questions. But I also see a lot of the same mistakes coming up over and over on sites, so I wanted to take a moment here, climb up on a soap-box, and present a list of the Big Mistakes I see beginning designers make, and offer some ideas as to how to avoid them. Before I start, I want to say thanks for Steph for giving me some more ideas of mistakes to post here. As usual, you rock.

Not using heading tags

The default display of headings is way too big. No one can deny that. But guess what - the tiniest bit of CSS allows you to resize headings. You only need to write one line of CSS, in fact (or no lines if you use Dreamweaver's CSS panel.) And here's a news flash - CSS has been around for ten years. Yes, you read that right - ten years. For almost 60% of the life span of the web, we've had the ability to resize headings with CSS. So why in the heck aren't you using them?

There are so many advantages to using headings that I could almost do an entire post just on them, but let me just hit a few key ones. First, they make your site more readable. Did you know that the majority of people do not read web pages, but rather just scan them? (You actually did know that, because I bet you scanned this page to get an idea as to what the "top ten things" were before you started reading.) There's pretty much nothing you can do that will help readers scan your page and get the information they need quickly that is more important and easier to implement than the proper use of headings. Headings say, "Yo! Over here! I got some nice information, right here! Come on, you know this is what you want to read ... come on ... that's right ... over here ..." OK, so maybe headings aren't exactly like pushy drug dealers, but you get the point.

Second, headings improve your search rankings. Google and other modern search engines read through the content on your page and catalog it, but they need some way to figure out what your page is really about. One easy way for them to do that is to look for headings. The next time the good ole' Googlebot hits this site, it will know that robhuddleston.com should come up on a search for "mistakes" and "web designers" because that text is in a heading up there. The fact that it's in a heading 1 means that it's really important - more important, for example, then "not using heading tags", although that text, marked up as heading 2, is more important than this text that's just in a paragraph.

Third, headings just make your page look better. Instead of some disorganized mass of text, you present some nice, easy-to-read, well-thought-out content.

So use headings. But also, use headings correctly. The most important line on your page - the line that says "this page is about ..." should always be marked up with heading 1. The subtopics of heading 1 should be heading 2, while its subtopics will be heading 3, and so forth. You should never place a heading 3 directly under a heading 1 without a corresponding heading 2 between them, and of course you'd never place a heading 3 on the page by itself, right? Right?

Bad Spelling and Grammar

Whenever you think of a stereotype of a less intelligent person, what's the first thing that comes to mind? Probably, an inability to speak or write clearly. So then why do you have a page riddled with spelling errors? Worse, why is some of the text on your page almost incoherent because of bad grammar and incorrect punctuation? The web is primarily a form of written communication, and it should be treated as such. You wouldn't turn in a major proposal to your boss without carefully proofing it, would you? So do the same on every page. Reread the page - the whole page - and make sure you have spelled things correctly. Yes, you can use a built-in spell checker, but you shouldn't rely on it, because we all know that it's possible to misspell something to the point of it being properly spelled as a different word.

While you're at it, check your grammar. Grammar is as important, and in fact almost more important, than spelling. Our brains have an amazing ability to interpret the meaning of misspelled words and figure them out anyway, but bad grammar is a lot harder to figure out. If you're not good with grammar yourself, then find someone who is to proof your documents in the short term, and learn it in the long term. There is nothing that you will do in your life where a good understanding of grammar will be considered a bad thing.

Finally, please, oh please check your punctuation. Don't overuse commas. Do use periods. And please learn the correct usage of an apostrophe. "It's" is a contraction for "it is"; the possessive is "its". On the other hand, you rarely need to use an apostrophe when you are pluralizing a word, so the correct form is "web page editors", not "web page editor's". The latter one means that something belongs to a web page editor, not that there are more than one of them. "We received a lot of resumes", not "we received a lot of resume's". And by the way, it's "we sell CDs" and "we sell DVDs", not "we sell CD's" and "we sell DVD's". The apostrophe is only correct when you say "The DVD's content was subpar".

Let's pause for a moment for a quick joke. I love this one, but it only works in print.

A panda walks into a café. He orders a sandwich, eats it, then draws a gun and proceeds to fire it at the other patrons.

"Why?" asks the confused, surviving waiter amidst the carnage, as the panda makes towards the exit. The panda produces a badly punctuated wildlife manual and tosses it over his shoulder.

"Well, I'm a panda," he says, at the door. "Look it up."

The waiter turns to the relevant entry in the manual and, sure enough, finds an explanation. "Panda. Large black-and-white bear-like mammal, native to China. Eats, shoots and leaves."

The joke is actually where the title of the best book on punctuation you'll ever read comes from. It's Eats, Shoots and Leaves: The Zero Tolerance Approach to Punctuation by Lynne Truss. If you spend any part of your time writing - and I assume that you wouldn't be reading this if you didn't, since writing is a big part of our jobs as web designers, then you owe it to yourself to go buy that book and read it. The good news is that it isn't the extremely boring grammar book you may remember not reading in school. When I first heard about this book, I was listening to an interview with the author, and as soon as she referenced the chapter called "The sexy history of the hyphen", I knew it was something I needed to read. I can absolutely promise that reading this book will make you, overnight, a better writer, and as I already mentioned, that can only be considered a good thing.

Oh, and while I'm at it: "there" is a location - "it's over there"; "their" is the possessive plural - "their SUVs waste gas"; "they're" is a contraction for "they are" - "they're reading a blog about how to be better web designers".

Using Images in Place of Text

The web is primarily a visual medium, and as such images are important, but you should never use an image in place of a block of text in your content. Why? Because images load slower, they are less accessible, they make your site less search friendly, they make your site less usable on alternate displays such as cell phones, they are harder to edit ... I could go on and on, but let me ask a question instead. If you were preparing a report for work in Microsoft Word, would you go into Photoshop, type a big block of text, save the image, and then insert that image into Word in lieu of just entering the text? Of course not! That'd just be silly. But then why do you think that's the right way to go with your content on a web page?

Now, I know what you're thinking: "but Rob", you are saying (and you really shouldn't talk to your computer like that ... I can't hear you ...) "in Word, I can use Comic Sans for my font, whereas on the web I have to use Arial or Times New Roman! Eww!" Yes, that's true. You are in fact very limited in your font choices on the web. But guess what? There are two types of people in the world: those who care about fonts, and then the other 6.7 billion. I promise that no one has ever left a well-written, immensely usable, informative site because the content was in Arial or Times New Roman.

All of the above applies to your navigation bar, too. With plain text and CSS, you can create navigation bars that are every bit as attractive and functional as your image-based nav bars are now, but with the added bonuses mentioned above: they are easier to maintain, load faster, and are more searchable. Also, you can create rollover effects for your text-based navigation using nothing but CSS - no JavaScript required.

The one and only exception to this is a logo. If you have a company that's been around since the dark ages (and by dark ages, I mean pre-1990 when the web was invented), then it was most likely designed without the web in mind, so it may use some special font that isn't widely supported on the web. In that case, go ahead and display the logo as an image. Make sure you provide meaningful alternate text for it, but otherwise, it's okay. What I'm referring to here is having the main content on your page in an image, not specialty items like logos.

Placing Content-Important Images as CSS Background Images

I see a lot of confusion out there around when you should use CSS to place a background image and when you should insert the image via the HTML <img> tag. It's really quite simple, though: if the image matters for your content, then it should be inserted via HTML; if it's only there for visual presentation, then use CSS.

Before you do anything else, in fact even before you finish reading this, go get Chris Pederick's Web Developer toolbar for Firefox. (I'm just assuming that you already have Firefox and already use it as your primary browser. If not, then start by downloading and installing Firefox.) Once the toolbar is installed, load your page in the browser, and from the toolbar click Images -> Hide Background Images. This will turn off all of your background images, leaving you with just the important stuff - your content. When you hid images, did something important disappear, like your company's logo or the image that you are using to illustrate the main concept on the page? If so, then you messed up: those images should have been inserted via HTML. The opposite is true here, as well: if you hide the images and you still see that cool little flair that's setting off your headings, then you messed up there as well, since that should have been a CSS background image.

Just today, I saw a page that violated both this rule and the one about not using images for content. When I hid the background images on the page, what I got was a blank page. Guess who can't use that page? Anyone with disabilities such as visual impairment. Anyone who may be browsing the web with styles turned off. And how about the fact that no content = no Google page rank. That's not saying that you'll have a bad page rank - you won't be indexed on Google at all.

Resizing images with width and height attributes instead of a graphics program

Let's face it. Browsers are stupid. Really, really stupid. We all know it, so then why do we continue to want to pretend that they aren't? Most modern designers are aware of the fact that browsers continually choke on what seem like even simple stuff, and yet lots of folks still insist on resizing images through the width and height attributes of the HTML <img> tag. Why? When you do that, you are not affecting the image itself - it is still the size it was. All you're doing is asking this really dumb browser to go ahead and stretch it out when it displays, and then you wonder why the image looks like crap. Instead, use the right tool for the job (you're going to hear more on that in a bit). If you have an image that isn't the right size, use an image editor to resize it. It doesn't matter too much which editor you use, just so long as it's a program designed to edit graphics. Open the image in there, use its tools to resize the thing, and then insert it into your web page. You should still specify the width and height in the <img> tag, but you should only provide the correct values.

Using "click here" for Links

Thanks. I'm not sure I could have figured out that I was supposed to actually click on that hyperlink. I almost thought that this might be a special link that I could just think about really hard and magically activate.

Please don't insult my intelligence. Please do give me something useful for the description of the link.

Why say click here to view our products when view our products is more concise, more informative, and in general reads better. I can absolutely promise that there is not a single instance where you simply have to use "click here" for a link. Just spend a second thinking about it, and I guarantee that you can come up with a way to word it so that you don't need to say that. Don't believe me? Give me an example in the comments, and if I can't come up with a way to reword your link to get rid of "click here" and be descriptive, I'll send you a free, autographed copy of my new book. I'm making a realistic promise here (and one I will fulfill, by the way), but I could just as easily say that I'll turn over the title to my house because I am absolutely, 100% certain that no one can come up with a case where "click here" is really needed.

By the way, not using "click here" will also improve our search rankings.

Disabling Right-click

If you place content on the web, someone who wants to keep a copy for themselves is going to do it. There are about a million ways to defeat a no-right-click script, the easiest of which is of course to simply disable JavaScript (which can be done with a single click from that Web Developer toolbar I mentioned above.) But you need to keep in mind that "Save image" isn't the only thing on a right-click menu, and there are a ton of reasons as to why someone might be right-clicking that have nothing at all to do with stealing your content.

Here's something else to consider: have you ever been to a store where they basically treat you like a criminal? There are plenty of them out there, and we know which ones they are. I'm not talking about the Targets that have security cameras every ten feet on the ceiling. That's fairly unobtrusive. Rather, I'm talking about the stores that station an employee near the exit to check that the stuff in your bag matches the stuff on your receipt. How does it make you feel to know that you went to this store and spent your hard-earned money there, and all they can do to thank you is to assume that you must be there to steal stuff? Not so great? So then why do you want to treat your web users the same way? In my eyes the no-right-click script is more like a store that has a security guard actually follow you everywhere in the store, constantly making sure you aren't trying to steal anything and then actively getting in your way when you try to do perfectly legitimate things in the store.

So just don't do it. If you really think that your content is that special and you really think that everyone is going to try to steal it, then don't put it on the web.

Noise

When I'm on my computer, I do one of two things with my speakers: either turn them off entirely (as when I have my laptop running while I teach), or playing music. That's music of my choosing (currently, it's the soundtrack to Battlestar Galactica: Season 3. Don't laugh. Bear McCreary's scores to seasons 1-3 are some of the most incredible music I've heard. I can't get enough of them, and while I'm totally bummed that the series will be over after this year, I can't wait for the release of the season 4 soundtrack. If you like symphonic music at all, you owe it to yourself to pick these up.)

Anyway, where was I? Oh, yeah - listening to the music I want. Few things anger me more than some damned web site that feeling that their noise is more important than mine. Again, I'll use a real-world analogy: let's say you go into a store and you're on the phone or talking to the person you went to the store with or listening to your iPod, and as soon as you enter an employee rushes up and starts shouting in your ear. Do you really like going to those restaurants that blast their music so loudly that you can't hear anything else? Not too pleasant, is it? So why do you think it's okay for your site to do the same thing? Let me tell you: it isn't okay. If you have a video you want to play, fine - play it - but by default, turn off the sound. If I choose to want to listen to the sound, I'll turn it on, thank you very much. And there is never a situation where it's okay to have music playing in the background of a site by default. Again, if you want to have the music there, fine, but you'd better let me decide when and if I want to play it.

The penalty for violating this rule is simple: I will not be returning to your site. And I know for a fact that I'm not alone. It took a long time and a lot of very angry customers before sites figured out that pop-up ads only drove customers away. I hope that it will not take as long for sites to figure out that the same is true for noise.

Splash Screens

Repeat after me: the web is not print. Your web page does not need a title page. Just take me to the content I asked for, please. Honestly, splash screens weren't cool when they first started to appear ten years ago, and unlike wine, they haven't improved with age.

The web is not print. When I visit your page, I want to see your page, not some idiotic splash screen where your logo spins around like it's on crack. Just show me your content.

The web is not print.

Using <font> Tags, Setting Absolute Sizes on Text, and Not Letting Font Information Inherit

I'm combining three out of the four big mistakes about text (the fourth being not using images in place of text) here because they are all so closely related.

The first is using the <font> tag. Just don't do it. CSS has been around since 1996. The Clinton administration. That's when Java was introduced, IBM's Deep Blue defeated Garry Kasparov in chess, the Menendez brothers were convicted, and Whoopi Goldberg hosted the Oscars in which "Braveheart" (truly, one of the worst films to ever win) won Best Picture. Internet Explorer and Netscape were still in version 3.0 and Opera was in version 2.1. It would be seven more years before we saw Safari, and almost eight before Firefox hit the scene. Ancient history, so why are you still relying on a tag from back then? There is nothing - absolutely, positively nothing that can be done with the <font> tag that cannot be done better, faster, and easier with CSS. So don't use it. Period. In fact, let's go one step further: raise your right hand. No, seriously. Come on, raise it. Okay, now repeat after me: "I do solemnly swear (or affirm, if you'd prefer) that I will never again in my life time use a font tag. I further swear (or affirm) that I will stop thinking of the web as print, and that I will immediately go buy each of Rob's books." (Sorry, I couldn't resist that last one.)

Next up: using absolute sizes for text. CSS allows you to use inches, points, picas, centimeters, millimeters, pixels, ems, exes, and percents for text. The first five - the "real world" units of inches, points (a point is 1/72 of an inch), picas (1/6 of an inch), centimeters and millimeters just do not make any sense on a computer screen. (Remember, you just got done swearing that you wouldn't think of the web as print, and that includes not using print units like points.) Pixels are "real" on a computer, but unfortunately, browsers are supposed to have an important accessibility feature that allows users to resize text so that they can make it bigger and thus readable to those with bad eyesight. IE gets it wrong and only allows users to resize text if the designer set the text size using what IE deems as a "relative" unit - meaning ems, exes, and percents. So stick to those three at all times. (Remember, for all intents and purposes, 1 em = 100%, so you can use whichever makes more sense to you.)

The third point up there is not letting text inherit, but in a way this is really just an extension of the point I just made. If you set your heading 1 to, say, 18px, and your heading 2 to 14px, and your paragraphs to 10px, you'll have a nice, (sort of) predictable page. But what happens when the boss/client/whomever wants all of the text on the site to be just a little bigger. Well, then you've made a whole lot of extra work for yourself. Now, you have to go back to your style sheet and change every one of those. If instead, you set the font size on the <body> to 100% (which is of course the default, but it makes things a bit clearer if you go ahead and set it anyway), and then say that you want your h1 to be 115%, your h2 to be 105%, and your paragraphs to be 90%, then you've really leveraged the power of CSS and inheritance, because all of your sizes are now based on that body size. Want all of your text to be a bit larger? Simply change the rule for the body to 110%, and automagically the rest of the text - the headings and paragraphs and anything else you set - will get 10% bigger. That's all there is to it.

Along the same lines, why do you want to go through and create rules that say that each level of heading and all of your paragraphs and the lists and whatever else should be Arial, when one simple rule setting the font-family on the body element will do the trick with less code? Remember: less code equals less work.

Needless JavaScript for stupid effects

JavaScript is a great language, and when used appropriately, it can greatly enhance a site. I use it all the time to validate forms and include Ajax support, particularly now that Dreamweaver has Spry. But as with many technologies, with the good comes a whole lot of bad. No one needs little hearts to follow their mouse around the screen. Having my monitor shake because there's a pretend earthquake was funny ... once ... when I decided I wanted to see it. Today, all these effects do is scream "I'm an amateur designer!!!!"

Focusing on One Browser

I see this a lot: "When I created my page, it looked fine on my computer with IE, but then the client said it looked horrible on his machine which is running Firefox so ... help!"

While there may be some day in the future when we have world peace, no longer care about the price of gas because all of our cars have Flux capacitors and run on banana peels, left over beer and beer cans (just don't hit 88mph!), and all browsers display pages the same way, we have to live in the here and now and that means testing your pages in as many browsers as you can get your hands on. That means that if you use Windows, you will want to have installed on your computer IE (not that you have a choice there), the current build of Firefox and the latest version of Safari. If you want, you can also install Opera. If your IT department balks at these, point out that they are simply necessary to do your job. They don't tell Accounting that that can't have Excel, so they can't tell you that you can't have Firefox. And besides, the software you need is free.

Mac users will already have Safari, so go get Firefox. Then install Parallels or whatever other emulator you want to use and install Windows so that you can have IE as well.

(The big problem you'll run into is trying to test on more than one version IE at a time. The ideal solution would be for Microsoft to get over themselves and just let us install more than one version at once, but that's as likely as the world peace and Flux capacitor stuff, so until then you can either chance hacking your registry to install other versions or use the "official" method of a build of Virtual PC with the other version of IE. It's up to you.)

Then, as you build your pages, test on one of the standards-based browsers such as Firefox. When the page is working correctly, go ahead and preview in IE and then fix the problems you see. You will find that it's much easier to build your page to Firefox first, and then modify as needed for IE, rather than the other way around.

There are really two things to keep in mind here. The first is something you really should have learned in kindergarten, but way too many people tend to forget: not everybody thinks the same way you do, not everybody believes the same things you do, and not everybody uses the same browser as you do. Okay, you might not have learned the bit about the browser in kindergarten (although my daughter, whose last day of kindergarten in on Thursday, is scary-good on the computer already), but the reality is that you need to remember that as you build your pages. The second thing to keep in mind is that the web is not print. In the print world, you can design that page once in InDesign and then know that every time it is printed, it will look the same. But since the web is not print, the same isn't true on the web, and you need to account for that from the very beginning of the design process.

Designing Only for Your Screen Size and Resolution

Have I mentioned yet that the web is not print? I think I may have once or twice. You know that the gal in the corner office has a bit bigger monitor than you do and has a bit nicer graphics card that lets her set her resolution really, really high so that she can view even long pages (like this one) in a single screen (not that it is readable to most mortals because the resolution is so high that the text is tiny). So if you know that ... why are you still designing your page so that it looks great on your screen but awful on hers?

Here's a radical concept for you: design your pages so that they look good on every size screen at every resolution. That does not mean that you always need to use liquid or elastic designs for your pages. Fixed-width designs will work, too, so long as you take into consideration what will happen in all that empty space on those high resolutions.

And what about really small screens and low resolutions? What about the folks out there that surf your pages on cell phones? Or your aunt who still can't figure out how to make the little window-thing "big" on her computer, no matter how many times you show her? Does your page still look good - is it still readable - on smaller resolutions? If not, then you still have more work to do on your site.

Using the Wrong Tool for the Job

Let's say you decide you need to major house work done, so you go out and hire a contractor. How much confidence would you have in him if he went to pound nails into the wall and used a screwdriver for the job? Would you really consider him to be a "professional" if he didn't even know which tool was right for the particular job at hand? Of course not. And yet there are many out there who call themselves "professional" web designers who consistently use the wrong tools for the job.

This isn't going to be a visual editor vs. code editor debate. While I happen to be a fan of visual editors, I don't consider a pure-code editor to be the "wrong" tool for the job. What I'm referring to are those who use the "Save as HTML" "feature" in Word or Excel or, even worse, PowerPoint to create pages. Along the same lines are those who use those same "features" in Photoshop or Fireworks*. Word is an awesome tool - really, it is. Since I started writing the books, I use Word almost every day, and it really does rock. Excel is likewise awesome for spreadsheets and doing math; nothing rivals PowerPoint for preparing presentations. My expensive digital camera would be worthless if I didn't have Photoshop. Every one of those tools is great - when used for its intended purpose.

But not one of those tools is designed for creating web pages, and none of them should be used for that. There's nothing wrong with creating a comp layout of your site in Photoshop or Fireworks, but then please do not export the site as HTML and call it a day. All you get is a completely unusable, unmanageable, unsearchable, and unupdatable page. Instead, pick out the pieces of that comp that should remain as images and export them to the appropriate format. But build the page in a tool designed for the job. Use Dreamweaver or Expression Web if you like the visual editing environment; use your coding tool of choice if you prefer that approach, but either way, build your site in a program that was built for that purpose, not one that was built for creating print documents or for doing complex math or for manipulating images. You wouldn't (I hope) think of creating the company's annual report in Dreamweaver, so you shouldn't be thinking of creating the company's web site in Word.

* The one caveat to this may be Fireworks CS4. While I have not yet installed the beta, I did see a tutorial by Alan Musselman, the Application Architect for Fireworks, on exporting from CS4 where is certainly appears that the program now takes a standards-based approach and, for instance, keeps text as text when you export. So the line between Fireworks and Dreamweaver may be blurring a bit. I'll have more to say on this when I have to chance to install Fireworks this weekend and give Allan a hard time about that shirt. (Alan's tutorial is on Adobe TV. There seems to be some problem with the site right now so that it's not letting me get the exact link, but if you go to the site and just search for "Fireworks", you see it - it's called "Fireworks Tips and Tricks - Fireworks CS4 Beta Announced".

Summary

So there you have it. My ten ... uh, I mean fourteen things that beginning web designers get wrong. Feel free to comment on anything you think I'm wrong about, and any other points you think I might have missed.

The certification mess

Tue, 03 Jun 2008 16:57:00 -0600

Ray Camden today posted an "Open letter to Adobe on Certification" on his blog. It basically outlines how deeply flawed and problematic the certification process at Adobe has become. If you are considering taking a certification exam, I would strongly recommend that you read his blog and some of the comments (including a very long-winded one by yours truly).

Basically, I agree with Ray 100% on the overall value of certification. If you have to be certified for some reason, such as needing it to teach Adobe classes (the reason I have the certs that I do), then go for it. If you are looking for a new job, it may or may not help in getting you an interview, but it most likely won't hurt, so go for it. If you're happy in your current job, or if you're a freelance developer who is just looking to be able to put a logo on your business card, then don't do it - it's a waste of time and money, especially given how horribly written the tests are.

Also like Ray, I really love Adobe and their products. I've been fortunate enough to be able to become a part of a community of Adobe users and developers, and have actually gotten to know several people that work for them. A few I even consider to be friends. They are a great company, they make great software, and they are staffed by fantastic, smart, friendly, and extremely open people. But their certification department simply does not live up to the high standards that I and many others I think agree they should be, and it's high time for that to change. I honestly hope that the change does happen, and that being Adobe Certified can once again be something of which folks can be proud.

It's time for hotels to throw in the towel...

Tue, 06 May 2008 23:04:00 -0600

And abandon the idea of wireless service for their guests, until such a time as they can figure out how to properly allocate bandwidth.

I've been traveling a lot lately - a lot more than I want to, to be honest - and thus rely on hotel internet connections. These days, I dread the thought of needing to get work done on a hotel "free wireless" connection, because they all suck. In fact, in the few minutes that it's taken to type this up, I see that the connection here has been lost.

Come one, people! You don't expect hotel guests to be courteous enough of others to share other resources, so why do you expect this to work? Just invest the money in wiring up the joint. I would in fact quite happily pay for a wired connection in the room that was reliable over the hit-and-miss connection that invariably comes with wireless.

OK, enough ranting for today... On a side (and only slightly unrelated note), central Louisiana is really quite nice.

American Idol is not news

Thu, 17 Apr 2008 12:15:00 -0600

Something I have to get off my chest: who got kicked off of American Idol last night is not news. Yes, I know it's the most-watched show on TV, but that doesn't make it news. Everyone who actually cares about what's going on in the show will be watching it and will already know. But there's a reason that the rest of us don't watch: WE DON'T CARE. If I felt that I needed to know who got kicked off the show, I would have tuned in last night, or recorded it, or whatever. I don't need to turn to the front page of USA Today to find out. You don't see the latest happenings on any other TV show reported as if our lives or national security depended on it, so why this one?

You know want we need to ban?

Fri, 08 Feb 2008 15:56:00 -0600

Gum. At least until we, as a society, can all grow up and be mature enough to realize that we aren't alone in this world, and that gum that you're finished with but would rather stick on a chair because you're so damn lazy that you can't be troubled to walk ten feet to a trashcan is instead going to end up stuck to someone's brand new pants. So thanks a million to the SOB who fits this bill and was at the Pickle's hamburger restaurant on Columbus street in SF today. Now I get to spend the rest of my day - and that includes a 2 hour train ride home - with your damned wad of gum causing my pants to stick to the seat. I found a possible solution to cleaning it off online, and it had better work, because I'm not exaggerating when I say these pants are new - today is the first time I've worn them. Update: Just FYI - the warm vinegar and toothbrush tricked mentioned in the link above worked great.