Thank you for visiting this page! Here I'd like to define some general guidelines for developing good, functional web pages. Of course these are simply guidelines, and you're welcome to try any designs you like, but there are some general things that frequently work well, or don't work well, in web design.

HTML being an open standard that anyone can try for themselves in a simple text editor, it is not surprising to see many amateur pages on the web, and it becomes clear after a while that there are a few common things that "go wrong." At the same time, after visiting many wonderful looking sites, it can sometimes seem hard to identify what it is about them that works so well, which is what I will try to do for you.

Colour and Background Schemes

This is probably the easiest of all topics to be able to get right, and get wrong. The most critical point that should be brought up is that black backgrounds are very difficult to make look good; white ones are much easier, especially when paired with black or charcoal gray text. Anything that isn't a very dark or very light colour is almost impossible. Most importantly. shades of gray should very rarely be matched up with colours. Red, blue, green, or to a lesser extent yellow text is simply not going to look appealing under most circumstances. White or a very light gray would be the easiest colours to work there. With a colour background, black or white are likely your best options again, but colour backgrounds are not recommended for sites that have a great deal of text on them. A relatively simple page, such as www.entel.ca, which tries to give users short, simple bits of information to avoid overwhelming them, is an example of a site where colour is used effectively, however you would be unlikely to see these sorts of colours on a news site or anything expecting a great deal of finer print text.

Also in regards to backgrounds, a picture background is almost never advised. Most picture backgrounds simply have too much variation in colour to make text easy to read. However, some pattern backgrounds can be effective if they do not have any extreme contrast in them, and patterns, pictures, or clipart with too much contrast in them can be edited to have a "watermark" effect in programs like Microsoft Office, Adobe Photoshop, or The GIMP.

Layout

Most standard web sites contain a header, navigation bar, and body. Some simpler sites use a horizontal bar along the top of the page for navigation, while sites with more options available typically use a thicker horizontal bar down one side. These are very flexible standards, and you are strongly encouraged to come up with something unique, however this basic design is a good place to start, especially for beginners.

Using an approach like this, many people attempt to use frames to break up their sections. In general, try to avoid the use of large frames in your pages. Tables, or ideally div tags with CSS styles, are usually a better approach. There are some sites that use them effectively, but most people find it difficult to create frames that do what they need without taking up too much of people's viewing area in their web browsers, leaving little room for other portions of the site, especially on lower resolutions or in non-maximized viewing areas. If you are confident that frames are appropriate for your site, attempt to make them relatively small, especially horizontally running frames. Frames are used most effectively to display navigation bars, however other uses may be appropriate as well.

Testing

The most important thing to remember when doing web design is to test your designs in muliple web browsers. There are many available, each which do things a little bit differently. Internet Explorer, used by approximately 90% of the web-browsing world, is sadly one of the worst for violating standards set up by organizations like the W3C. Web browsers to test your sites with to confirm compatibility include

  • Microsoft Internet Explorer - This is the latest and most widely used release of Microsoft Internet Explorer. Rather than downloading the latest version of Internet Explorer directly, it is strongly recommended that you keep your computer up to date as a whole by visiting http://windowsupdate.microsoft.com (Windows users only). However, if you do have access to a system with Internet Explorer 5, it might be worth while to examine your pages in it as well, since there are sadly many people unaware of the need to upgrade to the latest version, either for features, performance, or security reasons.
  • Mozilla Firefox - Mozilla Firefox, and alternatively the more powerful, but some would argue less streamlined and easy to use Mozilla Suite, both developed by Mozilla CorpProbably the second most popular web browser in use today, Mozilla Firefox, and alternatively Mozilla Suite, both developed by the Mozilla Foundation, which is essentially a spinoff of Netscape, should be your next browser to test. Both the Mozilla Suite and Firefox use the same rendering engine and should display your pages identically, while today Netscape is configured to use either Internet Explorer or Mozilla's rendering engine, making it unnecessary to test with it seperately.
  • Opera - Until recently, the Opera web browser was either supported by integrated banner ads or was a paid product, however they have recently released their full version without ads completely free. Opera's rendering engine is unique, although most of the time pages that render in Mozilla browsers will render in Opera almost identically.
  • Safari - If you are serious about making sure your web pages look good everywhere, be sure to check out your pages on Apple's Safari, a Mac-specific browser based on the open source project Konqueror. Also, the Mac edition of Internet Explorer 5.5, the latest version to date, is known to display pages somewhat differently than it's Windows equivalent, meaning this is yet another possible compatibility problem to examine.
  • Konqueror - Finally, for absolute cross-platform compatibility, you should also take the time to examine your pages under Konqueror, a Unix based web browser associated with the K Desktop Environment (KDE).
Troubleshooting

Sometimes nothing can be more frustrating than trying to figure out why your web page has not loaded as you expected it to. To determine what has gone wrong, first check for common errors. These include forgetting to close quotes inside tags, mis-spelling tags, and sometimes forgetting tags entirely. If you fail to see the problem, take a look at W3C's HTML Validator and CSS Validator, which do a good job of making sure your code is standards complian and well-formed.

If this fails you, and your code is not invalid, simply not doing what you expected, you might try adding a background colour to the different elements involved in the layout corruption, to see if one element is pushing another element out of place by stretching too far in one direction. Also, if you are using Mozilla Firefox or Mozilla Suite, which at least for testing purposes, if not day-to-day use, you should, consider installing the Web Developer Toolbar extension. Mozilla and Firefox are extremely extensible, with many people developing enhancements for various activities (find more addons here). This particular item allows easy access to things such as validation tools mentioned above, as well as options to outline tables or div tags which may have issues, or temporary enable and disable stylesheets.

Development

In the past few years, browsers have come a long way. Today, it is possible to use many of the more advanced features that previously were not widely supported, allowing for pages that are easier to code and maintain. Most peple would agree that the most important now-standard feature set to be implemented is CSS, short for Cascading Stylesheets. You can learn more about CSS through tutorials like this and this, and it is strongly recommended that you do so. Not only does CSS allow you far more control over the look and feel of your web paes, it allows you to control them with far less code, and allows you to update them far easier, since if you use CSS to control the look of your website, you coudl quite literally have a thousand HTML files full of content, all linked to one master CSS file that allowed you to change the look of every page as simply as changing "background-color: red;" to "background-color: white;"

This goes hand in hand with one of our other most strongly recommended practices for web development. Thanks to CSS, you are presented with almost unlimited control of the look of your web pages. This allows you to have very simple, maintainable code. View the code for this website and you will see that it is essentially very simple, with far less clutter than you would expect to find in many older websites. This not only results in more maintainable code for you, it greatly aids search engines such as Google in understanding your web site. When a search engine indexes your site, all it sees is code. It does not render the page in a browser and look at it visually, as a person might, and so it is not always clear to it where your headers are, your navigation par, etc. By using h1 tags for your headers, and h2 tags for your subheaders, and simply styling them with CSS if you don't like the default looks applied to them by browsers, search engines are much more likely to bring people to your site more often, and for the appropriate reasons. By putting your navigation bar in an unordered list (ul), it is much clearer that it is a list of links, and not a part of the body of your page, which just happens to contain many links. Finally, while for a long time the traditional way of producing pages was to use tables, which create a grid effect like you would find in a spreadsheet application, to create the layout of your pages, as you feel more comfortable with CSS you will find it easier to simply enclose sections in a single DIV tag, where you will be able to style it with paddings, borders, margins, and background colours far easier than strictly HTML tables.

When people see how many beautiful websites enTel hosts, we know they will be impressed imagine the possibilities for themselves, so we hope as much as you do that your sites turn out looking wonderful. Good luck!