Web Design Tips http://www.colin.mackenzie.org/webdesign/ [2/11/2003 11:42:18 AM]
Web Design Tips - Avoid Cliches To start off, keep in mind that web development, like any other 'craft', is a subjective process, and that any one opinion may differ from the next. The idea is not to establish what is right or wrong, but to try to lay down some ground rules and to give you a place to start. Everything has its place, but try to use tools when they enhance what you're trying to get across, instead of just downloading things and throwing them in because they look neat. Try to avoid things that have been done a million times before, and are getting a little tired. These might include: page counters javascript text scrolling excessive animated.gif's under construction signs page fade-ins, etc. If you really need a page counter, make it hidden...if your site gets a lot of traffic, a counter comes off as being arrogant, and if your site doesn't, do you really want the whole world knowing? Javascript scrolling and page fading have been done so many times, that they serve nothing other than showing a lack of originality. As far as under construction signs go, isn't that the whole idea of web...that it is constantly changing and under construction? If you see an image you like, try to make your own...if you see an interesting layout, try to use it as a reference. This way you'll have a fresh, original site instead of a page full of backgrounds, animations and javascript functions from an overused library...and your site will stand out from the rest. http://www.colin.mackenzie.org/webdesign/avoid.html (1 of 2) [2/11/2003 11:42:25 AM]
Web Design Tips - Avoid Cliches http://www.colin.mackenzie.org/webdesign/avoid.html (2 of 2) [2/11/2003 11:42:25 AM]
Web Design Tips - HTML Standards Make sure you follow all the HTML standards. Sometimes it seems like the extra work is an exercise in redundancy, but remember that not everyone has the same browser as you do, and different browsers might interpret things differently...the more exactly you spell out the content, the better the browser will be able to display it. Some common HTML omissions are: <HTML> and <HEAD> tags HEIGHT and WIDTH attributes for <IMG> tags ALT attributes with alternate text for <IMG> tags ending tags for <HEAD>, <BODY>, <P>, and <CENTER> tags proper codes for extended characters There are also some technical reasons why you should try to be fully HTML-compliant, as some browsers are more efficient when the proper HTML code is used. As an example, newer releases of Netscape and Microsoft browsers will insert placeholders for images if you have specified the HEIGHT and WIDTH tags (as the HTML standard specifies). This allows the browser to display the rest of the page even if the images have not fully loaded. Many people also browse without loading images (because of the faster download times)...this will allow you to reach those people as well. If you do decide to use browser-specific HTML attributes, make sure that your documents are fully backwards-compatible. If your web site is commercial, better HTML compliance guarantees that your site can be viewed by a larger audience of potential customers. Not all customers have graphical browsers, and in the near future, some may have browsers that haven't even hit the market yet. This makes it important to follow standards, because as a web developer, it is almost impossible to test your site on every browser...and the one person who visits your site with an outdated browser may just be your best client. http://www.colin.mackenzie.org/webdesign/html.html (1 of 2) [2/11/2003 11:42:26 AM]
Web Design Tips - HTML Standards http://www.colin.mackenzie.org/webdesign/html.html (2 of 2) [2/11/2003 11:42:26 AM]
Web Design Tips - Novelties Every week there's a new hot thing on the web, making it almost impossible to catch up...but if you want to reach a wider audience, try to wait until something is generally accepted by users and developers. Somebody needs to push the envelope with testing new products, but this has to be balanced by the willingness of your visitors to download components just to view your site (or their inability to do so, preventing them from seeing what you have to offer). Some examples of this are: java applets activex controls shockwave objects tools that require plug-ins specialized document formats This doesn't mean you have to avoid these things, as there is a time and place for everything (as well as a value for being on the forefront)...but be aware that not everyone will be able to enjoy the extended benefits of these features, so use them wisely, and ensure that there is an alternative for people who don't want the 'extras'. Keep in mind that there are always different ways of achieving an end result. http://www.colin.mackenzie.org/webdesign/novelty.html [2/11/2003 11:42:27 AM]
Web Design Tips - Get To The Point Try to get to the point on the first page, or at least give people an idea of what your site is about. If people have to go hunting, they may move on. There is nothing more aggravating than a site that forces you to navigate for ten minutes before even figuring out what they do, let alone offering you the information you're looking for. Remember, if somebody is visiting your site, they are probably looking for something...try to make it easy for them to find it. Ask yourself what things people might be looking for in general, and try to make those things accessible easily from the main page. If possible, try to also offer a way of searching your site, or at least contacting somebody if they don't find what they're looking for. Make sure that visitors don't have to wade through endless links to get somewhere, and conversely, make sure they don't have to scroll down thirty screens worth to find what they want. Keep in mind that a frustrated visitor probably won't be a visitor for long. http://www.colin.mackenzie.org/webdesign/point.html [2/11/2003 11:42:27 AM]
Web Design Tips - Overdoing It One common mistake new developers make is to overdo it when putting together a web site. It's very easy to go overboard with new 'toys', so try to use extras in moderation. Some common things that get overused are: excessive graphics frames background images bevels and other graphic tricks Too much of something just comes off as being tacky...but used sparingly it can add just the right seasoning. When spicing up your site, try to add things only when they complement what's already there, and not to overdo it when you find something you like. Too many graphics will bog down a page, too many frames will make it difficult to navigate, too many graphic tricks will just end up looking silly. But any of these things will add nicely to the site when they're called for...put the design and layout first, and then dip into your bag of tricks when you need something. http://www.colin.mackenzie.org/webdesign/overdo.html [2/11/2003 11:42:29 AM]
Web Design Tips - Keep It Fresh Make an effort to keep your web site fresh, especially if you want to get repeat visitors. If a site remains stagnant, people will stop visiting it again and again, but if there is always something new, people will often drop by just to see what's changed. You might want to think about doing a complete site redesign every few months, as it not only keeps it fresh, but it also gives you the opportunity to take advantage of newer technology as it comes out. This also helps to improve your site as time goes on, as you'll invariably learn better techniques through each iteration. One other way of keeping things fresh is use dynamic content to your advantage. This can be in many forms, such as: javascript or CGI scripting to create content using cookies to track previous visits, and customize content randomizing elements of the site, such as main graphics, logos, etc. If the site looks different every time somebody visits, they'll be more inclined to come back again. If the content is customized to them individually, then you can 'target market' your information, and improve your odds of succesfully reaching that person. http://www.colin.mackenzie.org/webdesign/fresh.html [2/11/2003 11:42:30 AM]
Web Design Tips - Layout/Design Layout and design are a very subjective topic, but the important thing is to make sure that there is a layout...as opposed to just putting information up, make an effort to display it aesthetically. The web makes it possible to control how your information is presented, there's no reason not to do it. If two companies are selling the same product, and one puts a photocopied flyer under your windshield, while the other hands you a full-colour kit while wearing a business suit...which one are you likely to remember? Some general guidelines you can follow are: split your information into logical sections make sure your starting page is attractive and well laid out try to have a consistent theme throughout the entire site try to use colours, styles and fonts that complement each other Again, the stylish side of a web site is very subjective, and everybody will have their own idea of what looks good. Just make sure that you don't minimize the importance of layout and design...first impressions are hard to erase. http://www.colin.mackenzie.org/webdesign/layout.html [2/11/2003 11:42:31 AM]
Web Design Tips - Browser Neutral It's important to keep in mind that when you develop a web site, you have to cater to the widest possible audience...not everybody has the same browser you do, with the same graphics settings, or the same operating system. It might look great on your screen, but it might look lousy on somebody elses. Try to test your pages to see how they look with: a different size screen a text-only browser (or images turned off) a different colour resolution a different browser with a minimal feature set Some issues that can come up are the use of extended features such as image maps, frames, javascript, java applets, or operating system-specific controls...make sure you provide alternate coding for these. Test your site with a small browser window, then try testing it maximized...sometimes tiled backgrounds or positioning of images can change in a way you didn't anticipate. But most importantly, don't insist that people view your site under ideal conditions...imposing requirements on your viewers guarantees that somebody somewhere will be turned away, and they'll probably be annoyed (and annoyance has a way of spreading through the grapevine). The web makes it very easy to find a competitor, and if your competitor has a browser neutral site, they'll probably get the business. http://www.colin.mackenzie.org/webdesign/neutral.html (1 of 2) [2/11/2003 11:42:32 AM]
Web Design Tips - Browser Neutral http://www.colin.mackenzie.org/webdesign/neutral.html (2 of 2) [2/11/2003 11:42:32 AM]
Web Design Tips - Graphics Quality Graphics quality can be a key factor in improving the appearance of your web site. One of the reasons that it's so important is that it is fairly subtle...one site just looks better than the other, and a lot of people won't recognize why. Try to find a decent graphics package, such as Adobe Photoshop, Corel Photo-Paint or Microsoft Image Composer (there are also various freeware, shareware, and demo packages around). One important requirement is that the software allows something called "anti-aliasing" of graphics. This removes the jaggies from diagonal lines, and makes images look smoother and more professional. Once you have a good graphics package, you can create customized graphics to use with your site, which helps to keep your site design more coherent. Instead of searching the web for an icon, use a clip-art library to create your own. Instead of having a text heading at the top of a page, create the heading as a graphic using special fonts, colours, or effects such as shading. If you have a special background colour or image, you can create graphics using that background colour, so that when they get anti-aliased, they are blended naturally into the right colour. This is a common professional technique, which, when combined with transparent.gif's, helps to eliminate fuzzy borders around graphics, and makes graphics look like a seamless part of the design. http://www.colin.mackenzie.org/webdesign/quality.html [2/11/2003 11:42:32 AM]
Web Design Tips - Total Page Size One of the most frustrating things to a person browsing the web is waiting for a site to load...make sure that your site is relatively quick to load, no matter what you put on it. There are obviously a number of factors that can affect how quickly a web site loads, but try to make sure that excessive file sizes isn't one of them. As a rule of thumb, a main page shouldn't be a whole lot more than 50K or so. This, under normal conditions, will load the page in a few seconds, but still allow some fairly good use of graphics. If you have significantly more text than that, consider separating it onto separate pages. Also, remember that most browsers keep images stored in a cache, so if you use the same images on different pages in your site, the browser will likely use the file from the cache, and it won't need to download it again. One way of keeping the file sizes down, but retaining the freedom to use graphics to create a good design, is to be aware of the different kinds of graphic formats, and knowing how to use that to your advantage. Graphics of a photographic nature can be stored in a JPEG format with a higher compression ratio, as the quality loss due to compression will be less noticeable. The JPEG format uses what's known as 'lossy' compression, meaning that there is a tradeoff between file size and quality...some of the detail is lost when the file is stored, and you can decide how much based on how big of a file you want to end up with (although you often can't tell the difference). If you want to make part of the image transparent, or you want to ensure that it displays exactly the same all the time, then use GIF images...although there are a few tricks to making the files smaller, while maintaining the image quality. Try to use graphics software that allows control over the image palette (the colours that are used to make up the image). Most packages will allow you to save a file with an 'adaptive' palette, which picks the most common colours from the image to put in the palette, instead of using a http://www.colin.mackenzie.org/webdesign/pagesize.html (1 of 2) [2/11/2003 11:42:33 AM]
Web Design Tips - Total Page Size standard palette. The higher quality software packages will allow even better optimization, such as rearranging the palette automatically so that the more common colours have early palette entries, or allowing you to adapt the palette for a smaller number of colours, so you can see how the image will look with 256 colours, or 128 colours, etc. This allows you to make similar tradeoffs between image quality and file size with GIF images. http://www.colin.mackenzie.org/webdesign/pagesize.html (2 of 2) [2/11/2003 11:42:33 AM]
Web Design Tips - Awards http://www.colin.mackenzie.org/webdesign/awards.html (1 of 2) [2/11/2003 11:42:35 AM]
Web Design Tips - Awards http://www.colin.mackenzie.org/webdesign/awards.html (2 of 2) [2/11/2003 11:42:35 AM]