HOME · Welcome. This is my earlier site (~1997 to 2010); my new website is now here but some stuff remains on the scorpioncity site. - David Joffe
Web Design Tips
I'm no expert on web design, and my site certainly isn't the prettiest on the web, but from a practical perspective,
I have picked up a number of tips in the few years or so that I've been building web pages. Some of
these might be construed as being my own personal opinion on web page design :-)
Images/Optimization Tips:
Try save an image as .GIF, .JPG and .PNG and compare results; also fiddle with the .JPG compression settings until you get a reasonable
mix between file size and image quality. A gif file can sometimes be reduced to about 20 percent of it's size without visible quality loss by saving
it as a .JPG. For 8-bit images with no transparency or animation, .PNG format is almost always smaller than a .GIF. JPEG is best for photographic-type images.
If you have an image that uses fairly few colours, try convert it to a 16 colo(u)r gif; if it still looks virtually as good and the
file is smaller, use the smaller one instead (i.e, create a 16-colour or 64-colour image instead of the default 256 colours).
Try optimize 256-color .gif palettes using something like Jasc Paint Shop Pro. Try to use a minimal number of colors without losing
significant image quality.
If you scan black and white images like comic strips, scan them as "Line Art" and then save them as 2 color gifs for the
best appearance and the smallest size.
Always include height and width information for your img tags. They help browsers format your page before the image is loaded.
Also, some browsers stop showing a page at an image's position until they know the height and width of the image, which gives the impression
that the site is loading slower.
Don't make a huge image with nothing but boring monochrome text in. If you just want text, use .html code.
Make sure your image width/height tags are at least the actual image size - if you want to display an image small, first subsample
the image and load the smaller image. Don't load a large image and then display it smaller with the width/height tags - the entire
image must still then be downloaded, but will never be seen in full by the reader, so this is nothing but a waste of bandwidth. Additionally,
many browsers subsample the image poorly when they display it (e.g. using "nearest neighbour" resampling), which might result in ugly artefacts.
Subsampling the image yourself ensures the best looking results.
HTML:
Avoid having more comments than other text in your .html code. People often worry a lot about optimizing their images and totally forget
to optimize their .html code as well, assuming that that is negligible. I had 340K html, and 860K images at time of writing this. Some html editing
programs might also generate excessive amounts of redundant white-space - in one case I know of, a +/- 30 MB web page had over 1 MB of redundant spaces!
Hyperlinks:
Avoid making two links nearby each other to the same page, but with different href text. It's disorganized and a little confusing; it may
appear to the reader to be two different links.
Don't link too much! Don't make your page an exponentially expanding plethora of pages each with dozens of links. Links very
often serve as an "interruption" to people while they're trying to read something.
Don't make a page that is only links to other places on the web. Surfers can waste a lot of time being bounced around
from one links-page to another links-page to yet another links-page, never getting to the info they want.
Hyperlink colours: Try to leave the hyperlink colours on their defaults (i.e. blue, purple for already-visited) if you can. People
have generally come to identify specific meanings with those colours, and changing the default colours makes it harder to determine which
links have been visited. For the same reason, you might want to avoid blue text, particularly blue underlined text - many sites seem to
have blue, underlined text which is not hyperlinked - this is just plain confusing to Joe Websurfer.
Design Tips:
Design your page on paper first: Figure out what your pages are going to look like, and how they will link up. This helps make a
page more organized and well-designed.
Try keep a consistent look to all your pages, and make navigation easy, so that people always know they're at your page. For example,
the menu I have at the top, which is on all my second-level pages.
Try not to make to subdivide your site into a million small .html modules twenty levels deep with small tidbits of
info on each. Rather try keep your entire page no more than, say, 3 or 4 levels deep, and include a reasonably large amount of info on each page.
Don't be obsessed with trying to make your page "original" or "cool" or "different". It is very hard
to be any of these things considering the sheer number of web pages in existence. I think too many people give up because they feel they
cannot be "different" or original enough. If that sort of creativity isn't really your thing, rather design a page that
is *useful*, and well-designed. If you have a new interesting idea, go for it - but I think people care more about content than about
something that is trying to be "catchy", original or "cute".
If you want people to want to visit your page and want to re-visit your page, include CONTENT on your page!
Avoid the following type of page, which I'm sure almost all surfers have come across at least once: "Welcome to my
KeWl home page. Here you'll find all sorts of COOL stuff on my COOL page, with lots of COOL links and COOL info about KeWl me
and my KEWL friends! Here's a COOL photo of my COOL dog on my COOL page!" In most cases this type of page really has nothing
useful anywhere on it, and these pages are a waste of time, disk space and bandwidth.
Use a spellchecker!
If you don't really *need* to use frames, then don't. Many people do not like them, some browsers can't handle
them properly, it's too easy to have buggy frame code, and they can cause problems when bookmarking etc. Frames can be very useful in some cases, but if you have decided to use them, make sure they work properly.
If you don't really *need* or *want* to use Java, then don't. Many people get annoyed by it and some browsers can't handle
Java and Javascript properly and might crash.
This one is especially important if you're a business: design your page for low-end browser configurations (640x480x256, or 800x600 is
acceptable these days). You want to reach as large a market as possible, so try remember there *are* people out there running in low resolutions.
This is also another reason to avoid frames and Java. There are exceptions, for example sites dedicated to intensive graphics.
Try to avoid making your front page just a welcome message (or useless "intro") and a link to actually enter the page.
I find this irritating and generally unnecessary - when I visit a web page, I want to get to the content, not first read a page
that tells me I can get to the content by "clicking to enter".
This one is especially important if you're a business: use ALT tags for your images. A few people out there have text-only browsers,
and many people also turn off image loading to speed up downloading. Additionally, the ALT tag information may be useful to visually impaired people using
text to speech readers.
Avoid underlining anything that isn't a hyperlink (e.g. headings). It can be confusing to readers, as people have generally
grown to expect that a piece of underlined text is a hyperlink.
In general, don't use a less standard technology to do something that can easily be achieved by using a more standard technology, for example
using form buttons or JavaScript to create what is essentially plain hyperlinks - if you want a hyperlink, just use HTML, thats what its there for.
You are always limitting your audience if you use the less standard technology - standard HTML is supported by basically every single browser,
while almost all other technologies have more limitted audiences. Same applies with Flash; don't use Flash to create something that can be done
without Flash.
"Intro screens" - one of the most braindead uses I've seen of a Flash "intro screen" is at a local ISP who provides
(satellite Internet services).
The main page for information on the product consists ONLY of a Flash screen (not even a "skip this" HTML link). The Flash screen has no content whatsoever,
just a minor animation, and a Flash hyperlink through to the actual information on the product. The actual content though does not use
Flash at all; the audience has been very stupidly limitted, because people whose browsers don't support Flash cannot get to the product
information at all - yet you don't need Flash for ANYTHING on the site itself! Which leads me to my next point ..
Just because you've used Flash, doesn't mean your site isn't still ugly. I've come across web designers who seem to believe that the mere use of Flash automatically moves their website into
a higher realm with regard to aesthetic appeal. Sorry, but a bad web designer can just as easily create ugly websites using Flash (e.g. http://www.dialabed.co.za/).
Conversely, a good web designer can create good looking websites using 'regular' HTML.
Don't use Flash when HTML will do (e.g. for hyperlinks).
Don't use Flash when Javascript will do (e.g. for drop-down menus).
In general: Only use "Flash" if you have a practical use for it that cannot be fulfilled by any other "lower-common-denominator" technology. Flash can be pretty powerful and can
do some fancy things; however, 99% of the sites I've seen using Flash use it only to create some useless "cool" effect that serves no purpose.
Avoid moving content. People expect certain things to be found at a certain address, and links to specific pages often end up in
peoples' bookmarks and as links from other sites. When you move something around, you break a lot of links to that site. If you do need to move
something, then create a redirect from the old URL to the new URL. This is done in the .htaccess file, if your web server supports it. When you
design your site, try to think ahead and predict what might need to change; if you think about your layout carefully you can minimize broken links.
Customized error pages: If your server allows you to configure custom pages for specific errors (e.g. "404 not found"), then use this -
if your readers arrived at your site from a broken link, a good custom error script might help them find what they were looking for.
URL in HTML page: Consider adding a link to a specific pages URL on that page, such as the one found at the bottom of all my pages.
This can be helpful to people trying to find your site again if they saved a local copy of the page.
Link-rot and 404s:
For anything but very small sites, it can be difficult and/or time-consuming to always make sure that your links
don't become out of date. For large sites, it can be a huge task even to make sure all the links within your site work. Or,
you may have inherited a large site from its previous webmaster.
Fortunately, software can help you automatically check your site, e.g. deadlinkchecker.com.
Standards compliance:
Check your HTML. Use an HTML validator (such as http://validator.w3.org/) to check that your pages are valid HTML. This will help you to pick up errors and prevent readers from possibly getting error messages when viewing your page. Generally though, it should not be necessary to check your HTML if you are using a WYSIWIG editor, as these usually generate valid HTML.
A word of warning to anyone who uses any Microsoft software to
create html (eg MS Word, Frontpage etc): MS-generated html uses a
non-standard Microsoft-specific character set called
ISO-8859-1-Windows-3.1-Latin-1. However, MS-html files at the same
time claim that they use ISO-8859-1 (Latin1, which is a standard). The
difference is generally not noticeable when you view web-pages on a
Microsoft platform. However, there are millions of people browsing the
Web on non-Microsoft platforms. To those people your web page will
look like it is filled with many garbage characters. To work around
this deliberate Microsoft "extend-and-embrace" ploy, and to
prevent yourself (as web page creator) from looking like a moron, you
must first convert your web pages from Microsoft-html to standard
html. One such script that allows you to do this is the Web
Demoronizer.
Dates:
Somewhere near the top (or bottom) of each page, put the date that it was last updated, and remember to update your main
page's "Last Updated" date when you update one of the sub-pages.
When mentioning dates in a document, remember to include the year! Otherwise it becomes quite ambigous when the document has been around
a few years (e.g. "he came over from England in March" or "1782 hits since February" don't necessarily mean much to the reader).
Other Tips:
Update your site. *Especially* if you're a business. There are still pages out there that haven't changed since 1994, and the information
on them is outdated. For personal pages as well, try update your page and add something new at least once a month. This might bring people back to your page.
If you link to a file for people to download, let people know how big the file is before they start downloading!!
To make thumbnails of large black and white images like comic strips, first convert them to grayscale and then reduce them.
Don't link directly to images on other servers, e.g. <img src="http://otherserver.com/image.gif">. This is "stealing" bandwidth
from the other server, and there are actually cases where servers have had to shut down because people linked to their images and the server became bogged
down. If you want to use someone else's images, first make sure you have their permission, then *make a copy* of the image onto your own
server. Incidentally I've sometimes found that I could actually reduce the size of their images by fiddling with .jpg compression settings,
with insignificant loss of quality.
To avoid people linking directly to *your* images, try changing (for example) the names of the image files now and again, say every
month or three. That way you get your own back, since you ruin the design of their pages :-) You could also change the image content, e.g. to
something disgusting, to teach the person a lesson. Of course, you can also prevent other people linking your images using the .htaccess file.
I'm personally getting just a little bit sick and tired of hearing web page after web page playing
that #$#%$# "Mission Impossible" midi. The runner up is the "X-Files" midi. I'm not against
music on web pages, but only if it enhances the web page, and "mission impossible" is so overused that it does nothing for
a web page. Let's have a little variety please! Perhaps even something original! (Hmm .. luckily you don't hear this one so often
any more :)
I've decided to do away with my links page. The Web already has far too many links pages;
besides, Yahoo already has a very nice links page.
USA:
Avoid using the phrase "the world" when you really mean "the USA". Also, if you really mean "the world", then don't
use "USA" or "America". On the front
page they used to have picture of a globe with the words "Where in the world" (have your lottery numbers won). If you clicked on the globe, you were taken to a page showing 'where in the USA' your numbers had won.
Also, if you are a business that markets a product internationally, remember that different parts of the world have seasons at different times of the year. Thus, don't say that your new product will come
out "this summer" or "this fall", because it means nothing - rather use terms like "fourth quarter 2001". Apart from that, many countries do not use the term "fall" anyway. Also, if you are talking about a new product
or invention that will help many people all over the world, rather say "this will help millions of people worldwide" than "this will help millions of Americans". Naturally, if your site's intended audience is only within
the USA, then you don't have to bother with this; but if you create an international site, try to remember what "international" means.
Please submit your tips to me in the feedback section. Indicate if you want to receive credit for it.
