Tips For Designing A Web Page

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

  1. Anonymous wrote:

    All very useful tips. A warning to 505 students (or anyone doing a website for a course): pay attention to what the prof tells you he or she is looking for, even if another source indicates that it's not “best practice.” (Unless you care nothing about grades, in which case, do whatever you feel like).
    Case in point, I agree with Jason that it just looks like laziness to include a “best viewed with” statement, and yet that was one of the criteria for our 505 web assignment, and you could lose marks if you didn't include it. Students also got extra marks if they included bells and whistles like a hit counter, even though in the lecture the prof indicated that those were going out of style and made websites look amateurish. Go figure.
    Learn what you can from the assignment, but jump through the hoops that are put in front of you, is all I'm saying.

    Posted 10 Nov 2006 at 6:40 am
  2. Anonymous wrote:

    Believe it or not, I originally drafted this post in the summer when you guys were doing your 505 pages. At the time I noticed that many of you did have that “best viewed” line and had even commented on it in my original draft. But I took it out because I figured it was probably just a misguided prof's requirement.
    Yep, it's a tough decision – jump through their hoops and do what is requested to get good marks (even if it's not best practice or using outdated techniques or whatever) or do what you think is right and suffer any consequences.
    I think it's pretty obvious which side I'm on – examples like your “counters are on the way out but you can use them for extra marks even though they make your site look amateurish” bug me to no end. I'd say that counters haven't been in regular use since about 2001. And here we are in 2006 being taught “they're *going* out of style”? Yikes. No wonder 505 is a perennial problem for students.
    It doesn't say much about me since I stayed in it rather than getting an exemption (long story) but I think I could probably walk into 505 next term and do as good of job of teaching it as some of the people they have teaching it now.
    (Okay, I should address why I stayed in 505. Three reasons:
    1) I heard this program was so intense, especially if you took five courses, that I wanted to make sure I had one course that would be easier for me.
    2) I wanted to learn the library-specific topics in the second half. Unfortunately, this was pretty disappointing too.
    3) Since I'm 99% self-taught on computers, I thought I might pick up a few proper techniques and tricks and I did pick up one or two things I never knew before – how to do relative values in Excel formulas is as basic as it gets but was a revelation to me.)
    As for teaching, I was in the computer lab with a first-term student who had been told by their prof that the only way to fix something was to re-scan an image to make a thumbnail for their web page (and worse, this was the second time I'd helped somebody with this exact same problem. Ask Jolene sometime.)
    My solution is a bit convoluted but possible and still quicker than re-scanning:
    1) open file that had been scanned with the existing scanner software but which was proprietary and therefore didn't allow you to save as jpg, tif or anything useful.
    2) so to get around this, save as a PDF using “Print As” command
    3) open PDF and use “camera” tool (you can tell I'm self-taught because I have no idea what the real names of these things are) to capture the image
    4) open MS-Paint and paste the captured image
    5) resize the image and save as “image-thumb.jpg” or whatever
    Voila – you have your thumbnail of the original image. Problem solved.
    With technology, I think it's really easy to get into a trap of forgetting that your students don't know as much as you do and to gloss over some of the things that seem extremely basic to someone with more experience.
    There's talk of changes to 505 so if those come about, things will hopefully be better.

    Posted 10 Nov 2006 at 7:11 am
  3. Anonymous wrote:

    523: Web Design and Architecture is a great course and gets students thinking about the user design considerations you spoke of when creating a website. I give the course a patented “thumbs up” (your royalty cheques are in the mail, Ebert and Roeper).
    As for the thumbnail issue, I'm not quite sure why the scanner doesn't spit out an image. I thought it gave you a bitmap image file at the end.
    If you save the original scanned image in a memory drive, then you can simply modify that image each time you need to re-size or crop it. You shouldn't need to re-scan the image. For re-sizing, you should be able to just use Photoshop.
    To do this (I apologize if I leave out any steps, as my memory may be a little fuzzy):
    1. Click Start > All Programs > Adobe > Adobe Photoshop
    2. Click File > Open… (select your scanned image)
    3. Click Image > Resize
    4. Select your dimensions (to ensure your picture does not skew, the length and width fields should be linked – so if the length is decreased by 50%, the width will shrink by the same amount)
    5. Click OK in Resize Image dialog box
    6. Click File > Save Image for Web…
    7. Click OK in Save for Web dialog box
    8. Save your thumbnail
    Note: You should probably use a naming convention for all your thumbnails. For example, one file could be named “photo1_tmb.jpg” and another file could be named “photo2_tmb.jpg”; just so you can easily recognize which images are thumbnails when you have to move all your images to your web folder.
    Hope this helps.

    Posted 10 Nov 2006 at 4:40 pm
  4. Anonymous wrote:

    I've heard 523 is an excellent class and Mark Rayner is a very effective prof. I think the problem was that they were using the OCR software to scan. Not sure if the computer with the scanner connected defaults to this program or if they were instructed to do that by their prof but it was the same situation both times so it's one of those two. Thanks for the step-by-step – I like yours better than mine! The only thing that was a problem was I didn't see Photoshop in the list of programs available (this was in the lab by the GRC) and we only seemed to have Corel's graphics program, Corel Draw, available (which is much less robust.)
    Great suggestion for the naming convention – I think this is especially important if you have a site that other people will be working on and/or if you have content that be going over multiple years.
    summereadingprogram2006.htm
    summereadingprogram2007.htm
    summereadingprogram2008.htm
    …is the sort of thing I'm talking about. Along that lines, identifiable (but not too long) file names are better than “srp2006.htm” in my opinion. This can be a bit more typing for your users, possibly harder to remember (though possibly easier) and problematic if you're doing say, print promotional pieces like brochures or posters where longer URL's might not fit (although the solution for this is to put the main URL with a prominent link on the home page: http://www.mylibrary.com with a link to the summer reading program that's easily accessible in your navigation system.)
    Thanks for the comment – how's life out in the big bad real world?

    Posted 10 Nov 2006 at 6:31 pm

Post a Comment

Your email is never published nor shared. Required fields are marked *

%d bloggers like this: