How To Make a Winning Site Tips

Reading these tips might help you set up a website that is ready to win the BTDesign Awards.

Overall features

• Originality - Try and be as personal as you can, experiment, change, use every new weapon to build your very special site. A website should always reflect its creator's mind and some even say you can tell who is the webmaster by visiting his site.
  You can refer and take inspiration from other good sites, including those you find listed on winners' lists but your special unique touch will always make the difference. Taking inspiration doesn't mean of course to copy or plagiarize, remember all websites are protected by copyright and copyright infringement can be legally prosecuted.
• Overall impression - Heavy backgrounds, clashing colors, animated gifs everywhere, Comet cursors and Comic Sans Serif font don't make a good first impression of your site. When you have finished designing your page think about how many of these elements are really necessary. You'll find 99% are not. Just get rid of them, use a background color instead of an image, use smaller images, smaller text. Loading time will decrease dramatically and your page will look more professional.
• Harmony - Keep a good balance of text and graphics. Filling a page with dozens high-resolution and large size graphics which load very slowly will make us get bored and fly away. As well, a page full of text with no visual appeal can make a visitor loose his interest in continuing the visit.
• Accuracy - No broken links or "dead" graphics - images which don't show - should appear on your site. Check your pages frequently, better on your friends' computers and other operative systems and browsers. You might find there are broken images you didn't know about. If some graphics don't show up maybe there's something wrong with their extensions or names (e.g. *.JPG files instead of *.jpg can be problematic in Netscape). Don't use blank spaces or capital letters in naming graphic files: "my_photo.jpg" is better than "my PHOTO.jpg". A wonderful free tool for checking internal and external links is Xenu by Tilman Hausherr.
• Organize your site - When uploading your site's material be neat and don't put everything under the main directory. Images can be put into different subdirectories like this: "images/myimage.jpg". If you have different kind of images you can organize them like this: "myphotos/myimage.jpg", "vacations/myimages.jpg", etc. This is very useful in case you have to add or remove images because it would be quite hard to find an image among hundreds other files in a 100MB main directory!
• User-friendliness - Remember not all your visitors are expert surfers nor professional webdesigners. Many visitors are novices of the Internet or children or old people who have little familiarity with computers. The worst thing that can happen when visiting a new site is to think "Where the hell should I click?". Don't make your visitors scratching their heads wondering where do they must click to proceed to the next page.
  If some interaction is required do offer clear explanations, like "please click here, open the menu here, click here to close image, etc". Websites must not become puzzles for Mensa-only members. When you organize your site navigation remember how did you feel the first time you surfed the Internet.
• Frequent updating and no "Under Construction" signs - Your site is never finished I know, but if you are not ready to add a new section just be patient and wait until you can upload everything. Otherwise try and keep your website alive by updating it frequently.
• Interactivity - Everyone visiting your site must be able to contact you at least via email. There are also many other free tools that might help you keeping in touch with your visitors and Bravenet is a great free resource for them.
• Accessibility - You should not require a registration or a password or a fee for entering your site. A members only section is acceptable if the majority of your content is accessible without restrictions.

Design

• Keep pages short - The first page looks better if it scrolls a maximum 2 screens vertically at 800 x 600 resolution, so don't put your entire site on a single page! Scrolling a page infinitely is boring and loading time can increase dramatically. You can keep longer pages for text-intensive pages but remember the word "short".
• Layout - Don't be obsessed with centering everything. Use tables in order to maximize the available space on the screen. If you want to optimize your site for a certain screen resolution 800x600 is better, most people use it nowadays. Avoid horizontal scrolling of pages.
• Text - Text paragraphs should be justified for an optimal result. Fonts like Arial and Verdana look better on screen also if used at small size, while Times would be hardly readable at "size=1". Remember not all your visitors have eagle's eyes. Too small fonts do oblige to approach the screen and shrink one's eyes. Never use a blue font on a black background or blue on red for obvious reasons. If the background color is dark you must use a lighter color for text though sometimes pure white does contrast too much with a dark background, so try and use another shade of white which looks more comfortable to the eyes.
• Tables - When using tables and setting their width and height attributes give preference to percentage values instead of fixed ones. Percentages permit to fit tables to every screen resolution. For example, if you set a table at "width=100% align=center" no matter which resolution your visitor uses the table will always be well and properly positioned on screen. If you use "width="800" instead, people using lower or higher resolutions might need to scroll horizontally to see the entire page or watch your page filling just half of the screen.
• Colors - Click here to try two very useful Javascripts you can use to check how the different colors on your page are matching (open in a new window).

Graphics

• The best way you can personalize your site is by making your own graphics. Though none of us was born a graphic designer learning how to make graphics is not difficult at all. There are many tutorials available and you can try and experiment just by opening your favorite image editor program, create a new image and let your artistic creativity express freely.
• Don't be afraid to add pages each presenting a single image and use thumbnails linked to larger images. You can also present larger images opening in a new smaller window.
• Optimize all graphics for a fast loading time but keep them looking good. It is very unpleasant to see poor quality and pixelized images of very nice subjects! There are many utilities that will shrink your jpg or gif files to the minimum without loosing quality.
• Don't use too large images which need scrolling for a total view - exception made for images you offer as wallpaper. If you absolutely need to use large images for layout purposes or splash screens try and slice them using an image editor or a dedicated program. Each slice will be inserted in a table and will load as a faster and smaller file.

Content

• Your site must offer something interesting for most people, not just those who know you. I particularly appreciate sites that show a clear interest in sharing information, research results and cultural topics in a easy to understand and friendly way. A personal webpage offering the owner's own poetry, drawings, thoughts and family and pet photos can be a winner if this material is objectively good - be critical to yourself - and presented in quite an original way.
• Adding images is surely helpful to keep the visitor on your page. If you have a site presenting an ethological research on ducks, adding some duck images will attract also those visitors which are not really interested in the "imprinting" but do love those cuties and maybe collect duck images.
• Copyright - When using material which is not your creation give credit to the author and always respect copyright. You have the right also to ask respect for your own work which is displayed on your site. Add a copyright note on an easy to find place, preferably on your main page. If you use linkware or free material add a banner or a text link to the author's site. You can also use ALT tags to add information about a graphic's copyright.
• Suitable content - Almost all award programs disqualify sites that deal with pornography, racism, hatred, warez (pirated software, movies, mp3's) and other content which is internationally considered illegal so if your site belongs to the dark side of the Internet you'd better not apply for web awards.
  On the other hand, if you maintain a site dealing with subjects like eroticism, politics and religions remember opinions do vary much on these arguments. The best way to present them is keeping in mind commons sense and legality. Freedom of speech and criticism are always accepted as long as you are extremely respectful of the cultural differences and the various and personal views of your perspective visitors.
  A site presenting a total degradating view of sex is quite different from another site offering artistic nude paintings or photos. A serious political debate is different from mere propaganda, like historical research is different from negationism and distortion of reality or religious criticism is different from hatred, falseness and insult.

Navigation

• Ease of navigation and good organization - Don't make me and other visitors get lost in your site. Use a navigator or a menu and also text links on your pages. Put links to all the different sections of your site on your main page and make sure we can always return to the home page from everywhere in your site for choosing another section to visit. If you have an award program do not hide it around but place an easily identifiable link on your home page.
• External links - It is recommendable to use a "target=_blank" option, that is open a new page for external links. This will offer your visitors another page to visit thus not leaving your site. On the other hand, all internal links should preferably open in the same page.
• Dead links - A 404 Error occurs when one of your site's pages if not found on server. This is quite annoying and is caused by a link pointing to a inexistent page. Check if all your links are working properly. Sometimes the 404 is caused by a page which is incorrectly named, like "page.htm" instead of "page.html" for example, or a page you removed. If the link points to an external resource the 404 might occur because the site doesn't exist anymore. Check your external links too.

Technical features

• Don't make your visitors' browsers and computers crash. It is not a thrill to have to CTRL+ALT+CANC twice to get out from your site or see those GPF blue windows on our screen! If you hand-code your pages check them with a validator.
• Browers compatibility - Keep browser compatibility in mind but with a grain of salt! If I can't see your page in Netscape because you use CSS and DHTML it is Netscape's problem, but if you use codes that are visible only in Explorer's latest version you know you'll prevent most visitors from appreciating your site. Try and choose cross-browser scripts whenever you can and set up alternate versions for non-IE users. You can find some great free cross-browser DHTML scripts at Dynamic Drive.
• Music - Let us turn the music off by making controls visible. If you use copyrighted midis or mp3's you must give credit to the author or use public domain material instead.
• Java applets and Javascripts - Do a very clever and moderate use of Java effects. They are nice and can add some SFX on your site but check them on different browsers to see if they are compatible and if they work! You can find some great Java resources at Javafile.com.
• Plugins - Don't ask me to install a plug-in if I don't wish to. Some plugins are suspected to act like spyware on our computers, that is they might collect information on us and send it to third parties for spam purposes.
• Flash - I must admit an "All-Flash" site with no content behind doesn't impress me at all. Flash intros must absolutely have a "skip" option and Flash in general should be used with a purpose. If you want to use it on your site maybe it is better to have a plain HTML version and an alternate Flash one. Keep files size to the minimum and check loading time with a slow connection. Waiting a minute or more for your opening page to load without the possibility of skipping a 4-seconds intro can turn surfing to a nightmare!
• Pop-up windows - I will never disqualify you if you use a free server that forces them but I don't like pop up windows asking what is my name or asking for a password. Pop-up windows are not to be confused with new windows you can open with a javascript link. They do make sense if they are pertaining to the site layout and can be useful to present brief information but must be easily killed with a "close" button and if they contain links these must always open in a new window, using the "target=_blank" option.
  Be extremely careful when using scripts that open a new full-size window. You must provide a button for closing or else we'll be trapped in it if we don't know about the ALT+F4 possibility.
• Frames must not become a trap. Add a "Click here to break out of someone else's frames" code and use "frameborder=no" whenever you don't need to scroll, it makes your pages look a lot better.
• I know using Frontpage is necessary if you maintain a 100-plus-pages site but try and learn HTML, it is easy and once you've learned how to write your pages on a notepad you'll discover you can control them completely and won't need to get rid of all that unnecessary code that most WYSIWYG editors add to your pages.

Top of Page

BTDesign Awards