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



Posted By: Erica DeWolf on 01/21/08

These are some great guidelines for new users to follow, as well as a great reminder for veterans in the web design area. Thanks!

Posted By: on 01/21/08

Thanks Erica. I'm glad you enjoyed it.

Posted By: Tibi Puiu on 01/21/08

Great article Matt, I'm a amateur web designer, trying to develop my first wordpress theme and these tips sure come in handy :d. Thanks, -Tibi

Posted By: newbie on 01/21/08

Hey Matthew, thanks for the article, but are you sure about "an index.html page that has fifty images on it will register fifty-one hits every time someone goes to it"?

Posted By: on 01/21/08

Thanks, Tibi. I hope it's helpful. Newbie, unfortunately the answer is yes. In Webalizer, hits count every HTTP request that is made. There's a good brief overview of the Webalizer stats on Wikipedia if you want some more info. http://en.wikipedia.org/wiki/Webalizer

Posted By: Jermayn on 01/22/08

Good tip about moving the MS Word text to Notepad first! I do not how many times I have been frustrated going through all the unknown characters...

Posted By: on 01/22/08

Yeah, that one drove me crazy for a long time. Glad to help.

Posted By: Chad on 01/22/08

Thanks Matt. Yea, alot of these strike a chord with me and past learnings.

Posted By: Monique Briand on 01/22/08

Hi Matthew, I Stumbled Upon this article of yours and it helped to reassure me on many things I am taking the right actions. In a couple of instances I even learned a thing or two. Well donw. Keep up the great work. Monique Briand

Posted By: Matthew Jurmann on 01/22/08

Matthew - Nice, short, to-the-point article on web design. I found you on DZone (and gave you a thumbs up). I wrote a similar article today, except more in depth, about professional web design. Check it out on DZone at: Article Here

Posted By: on 01/22/08

Monique and Matthew, thanks for the comments.

Posted By: Trevor Reynolds on 01/26/08

What a great series of reminders...most I've already worked my way through via trial and error...some are in the I'm figuring it out quick phase! thanks again!

Posted By: Marlyse Comte on 02/26/08

wonderful posting! I can recognize each and every sin and can only reinforce the points you make. some other points would include: - down-sample images to the point of mutilation in the attempt to help the customer with a faster site. - accepting a word document which includes images as THE source file and backbone for the site. - not to comment your own coding, especially the hacks you use. oh, and that list could go on :-)

Posted By: Luke Borloz on 04/07/08

I can't believe how many times I see each of these (especially 1, 2, and 3), even on sites that you would think should know better. Good post.

Posted By: Darryl Porter on 04/07/08

Its great to read a blog with writing that is consistently good and content that is actually relevant and not BS.

Posted By: on 04/07/08

Thanks, guys. I appreciate your comments.

Posted By: Rob O. on 04/25/08

Hi Matthew! I just discovered your blog via MyWestTexas. Always an unexpected pleasure to find another Basin blogger! I'd add to your point #9 that, while a big surge in hits as you develop SEO strategies and refine your page code is a nice ego boost, raw traffic really isn't very meaningful if little or none of it converts into regular readers or subscribers. Lots of new bloggers & webmasters get sucked into link-building setups (often at a premium price) that promise to drive in loads of clicks. But a hit on your site followed by a bounce seconds later accomplishes little. And maybe point #10 should be that failing to give your visitors a means with which to contact you is a big no-no. And ideally, this would be a part of - or in compliment to - a solid "About" page. Be it a simple MAILTO link or a web-based contact form, you should provide some way for readers to communicate with you directly.

Posted By: Jeanne on 05/27/08

Thank you for such an informative list - I look forward to any other postings you may have. I did learn a few things. ESPECIALLY the Webalizer, what a bummer!

Posted By: Miraclestudios - web design on 06/10/08

I have no no's for web 2.0 Take a glimpse of our award winning website : http://www.miraclestudios.in

Posted By: Julie on 06/12/08

Thanks for the informative post! I'm most interested in learning more at #7. What other fonts are cross browser compatible? Helvetica?

Posted By: Julie on 06/12/08

Thanks for the informative post! I'm most interested in learning more at #7. What other fonts are cross browser compatible? Helvetica?

Posted By: on 06/12/08

Julie, you might want to check out codestyle.org. They have a complete list of the most commonly installed fonts.

Posted By: Leslie Sansone Williams on 07/24/08

Matthew, Thanks so much for the list of no-nos. This was a great reminder and check-up for my own websites.

Posted By: Raymond on 09/06/08

Thanks for this guidelines. I will definitely bookmark this!

Posted By: Cris Yap on 09/06/08

nice post! glad you have post guidelines about web newbies. well i want to add up a post about copying or duplicating a design. http://www.bestwebbuzz.com/?p=49

Posted By: rborn on 09/06/08

more crimes ( i made/make ) : - forget (or being lazy ) to code in the standard way, just because that portion of the site is not public visible - inline css - in code javascript

Posted By: Mel Ndiweni on 09/07/08

Nice guidelines Matt!

Posted By: Suffian on 09/09/08

Nice observations, Matt. It's good practice to keep reminding ourselves that we've got the basics right. Web design makes me crazy, too. But it's hella fun most days.

Posted By: yerel secimler on 02/03/09

nice post

Posted By: monica a. on 03/08/09

I love your website. I am an aspiring web designer.. Good advice.

Posted By: Matthew Grffin on 03/09/09

Thanks, Monica.

Posted By: futbol oyunları on 09/26/09

It's good practice to keep reminding ourselves that we've got the basics right.

Posted By: Simplify Solutions on 11/12/09

Yes... Indeed an excellent resource for designing... I will surely add this information on web designing and development to our web site - www.simplify.co.in

Post Your Comment

Comments are closed.