Having done a lot of web site design over the years, I thought of doing a list like this in first semester right before our 505 web site assignment was due. I never got around to it. But now, having spent quite a bit of time in the last few weeks helping fellow students who are taking classes where they have to design web pages, I've been inspired to put this list together finally.
I'm not an expert in current web design technologies but did design quite a few web sites from 1997-2000. I think a lot of the fundamentals I learned then still apply today, especially for the 505 web site assignment which asks the students to build a basic, static web page.
Tips For Designing Web Pages
– name your home page “index.htm” or “index.html” so web browsers default to it instead of calling it “my site.html” or something similar which may lead to broken links or possibly even let people see your underlying directory structure (this is what happens at UWO)
– on that note, don't put spaces in any of the web page filenames on your site. If it's long or multiple words, call it “aboutme.htm” or “about-me.htm” or “about_me.htm” (I prefer to not use any dashes or underscores personally but if you do want to use one of these techniques to make your file names easier to read, dashes are better because they can still be seen in Word documents that automatically underline web site addresses.)
– same thing for the names of images (“myfriends.jpg” not “my friends.jpg”)
– it's not essential but it's also a good idea to consistently use lower case for all filenames
– always use WIDTH, HEIGHT and BORDER=”0″ tags for your images
– don't use clip art images, especially for “e-mail me” or “under construction” notices
– even many people have high speed connections these days and it's not as much of an issue as say five or ten years ago, try to keep image file sizes small. Do this by scanning at 72dpi and resizing so that the actual dimensions of the page match the size you want it to be on your web page (ie. 200×200 pixels rather than putting a 1000×1000 pixel graphic in a 200×200 defined space.)
– don't use multiple fonts or fancy fonts on pages – stick with Times, Arial or Verdana.
– with that said, you can use different fonts for headings but it's best to create these as jpg image files so that the end user is guaranteed to see them as you intended (they might not have the “Trek69” font on their computer for instance)
– make sure important information goes “above the fold” (ie. without having to scroll down) on each page
– never make someone scroll left to right.
– don't put something about “This site best viewed at (resolution) or with (browser)” Your job as a web designer is to make a site that any browser on any platform can view consistently.
– have a good, well-thought out navigation system to the major sections of your site and always make sure you have a “Home” link on every page
– put dates on all pages and make sure you include the year too as “March 16” will mean nothing in two years.
– ideally your full contact information should be on every page but at a minimum, you should have an easy-to-find e-mail link for people to contact you.
– don't use background images
– as with books, black text on a white background is the best for readability
(I reserve the right to have broken any or all of these rules on both my previous web sites as well as my current ones!)
And just for a laugh, here's a column I wrote
probably six years ago or so for my old job on the very same subject.
At the time, part of my job was to prepare monthly profiles of our member publishers as well as authors, book reviews and an “advice column” on some topic related to publishing.
Funny to see how so many of the things I tried to do in web site design
back then are things I try to do now. Some of the tips are crap though – I don't think anybody uses meta tags anymore and that thing about browser safe colours is pretty outdated. But I like that even then, I believed that a) content counted and b) hits didn't.
(And yes, I know I broke my own rule about putting a date on every page which is why I'm not exactly sure when I wrote the column.)
Comments 4