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.
