Mirificam Press

9 Web Design No Nos for the Newbie

January 21st, 2008 in Web Design Culture

by: Matthew Griffin

I admit I've committed just about every crime against web design on this list. That's probably why it flowed so smoothly. They are all easily avoidable sins that, if transgressed, will cost a web designer now or in the next life. So if you want to avoid humiliating yourself in front of clients and burning unnecessary midnight oil, take heed. It will save you a lot of anguish to learn from my mistakes instead of your own.

1. Using free scripts without learning how they work
A simple JavaScript from dynamicdrive.com can really spice up a web site and boost your image. But when a client requests a simple change, your ignorance will shine brighter than ever if you don't know how it works. You don't need to be a PHP or JavaScript master but you should know your way around a chunk of code. At the very least, have a contractor on call to get you out of a pickle if necessary.

2. Using a WYSIWYG editor to change font size and color
If you're coming from word-processing or print design, it feels natural to highlight text and use your Dreamweaver controls to change fonts—don't do it. When you decide you don't like the color of your text anymore, you will have hundreds of changes to make. Learn CSS basics and hundreds of changes will turn into one simple change. And if you really want to make it easy on yourself, hand-code the HTML and only use the WYSIWYG editor to preview the design. If you're coding semantically and concisely, this method will be much faster than using the WYSIWYG editor for everything. For more on this read Intro to Web Design (Part 2): Building a Content Layer with HTML.

3. Changing the size of an image without resizing it in an image editor
I'm surprised how often I still see this. Web graphics are measured in pixels so make sure your HTML image height and width attributes match the actual pixel height and width of your image. My favorite tool for accomplishing this is still the "Save for Web" feature in PhotoShop an open source software like GIMP will work just as well.

4. Underestimating the time it will take to finish a project
It took me years to figure this one out. In your mind, the project may seem small but you are most likely glossing over parts of the process. When this happens, you won't charge enough and you won't finish on time. Give yourself a considerable time cushion—especially when you're first starting. As time goes by you will learn to estimate more accurately.

5. Failing to test a design in multiple browsers
I still forget this one every once in awhile. When you're in a rush to pump something out for a client, it's easy to pull it up in FireFox and give a quick thumbs up. But taking Murphy's law into account, your client will inevitably be using Internet Explorer 6 and, of course, your design will look like a jumbled mess to them. Take time to test in the major browsers. Also, learning and using standards will help tremendously with this. When you code a site the right way, you will have fewer cross-browser issues to deal with.

6. Forgetting to add a title to every page
This is one that really gets on my nerves, whether it's one of my sites or one that I happen upon while I'm browsing the web. When you forget to put a title in the head of a web page, most browsers default to read "Untitled Document" in bold letters across the top of the browser window. It's especially easy to forget the page title when you slap together a temporary "Coming Soon" page so keep that in mind.

7. Using Arial or Helvetica for everything
In the early days of the web, you pretty much had to use Times New Roman or Arial for your text. And since Times New Roman was the default font of MS Word, the web designers all used Arial to show how different and cool they were (and for some reason we all used 10pt size. I think my eyes are still recovering from surfing the web in 2001). Branch out. Use font stacks in your CSS to allow for visitors that may not have your first choice of typeface, and use the image replacement method for titles and headers.

8. Pasting text directly from MS Word
It makes no sense to me, but when you do this you either get a ton of junk HTML in your page or you get characters that browsers can't read. It's a mess and it always causes trouble. An easy fix is to copy the text from MS Word into Notepad and then from Notepad into your page. Once you have it in there, you can reformat it. Some HTML editors have "MS Word HTML Cleanup" features but I have yet to find one that works satisfactorily. It's usually best to just strip out all the HTML with Notepad.

9. Mistaking "hits" for "visits" in Webalizer
It always breaks my heart to tell a local website in a town of 100,000 that they are not, in fact, getting 4,000,000 people visiting their site every month. The problem is that the "hits" column in the ubiquitous stat tabulator called Webalizer actually increments every time a file is touched on the server. That means that an index.html page that has fifty images on it will register fifty-one hits every time someone goes to it; not exactly fair hit counting. You need to look at the "visits" column for an accurate count of the number of people visiting your site. Most Unix hosting plans come with Webalizer pre-installed so this is a common mistake.

If you haven't learned something from this list of no nos, I hope you were at least entertained. Web design is a crazy vocation with a million little quirks and taboos. I love it.

UPDATED 11/18/2009

Post Your Comment

Comments are closed.