Web Design Tips

Here are some miscellaneous tips for building better Web sites.

(1) Validate your code. If improper syntax is used (i.e., if you make a mistake in writing out the code), your site may not work properly in one or more browsers. Using the W3C Validator makes checking the code easy. Just enter the site's address in the box (or choose a different tab in order to upload a file from your hard drive or just copy/paste text), and click "Check". If there are any errors in your HTML page file, they'll all be listed in detail, so that you can figure out where you went wrong in your code. If you've specified a form of XHTML (a stricter form of HTML) for the page, the validator will use correspondingly stricter criteria. IMPORTANT NOTE: Often the validator may list a great many errors as a result of one small mistake (such as forgetting a single closing tag). ALWAYS TRY TO FIX THE FIRST LISTED ERROR FIRST. Often just fixing the first one makes all the others go away too.

(2) Try different browsers. This may not be as necessary with editor-generated sites (e.g., sites made with Dreamweaver) as it is with hand-coded sites, but it likely deserves a mention all the same. Although Internet browsers nowadays tend to be mostly compliant with universal standards (unlike many ancient browsers which did things very differently from one another), not all browsers render pages identically. There may occasionally be noticeable differences between how, for instance, Internet Explorer and Firefox display certain pages. Therefore it is a good idea to test your pages in different browsers, in order to make sure there are no differences which actually matter in the case of your site. Common browsers currently used include Internet Explorer 7 and 8, Mozilla Firefox 3, Google Chrome, Opera, and Apple Safari.

(3) Test using different resolutions and window sizes. How much of your page is displayed on the screen at a time can be CRITICALLY important to how your page looks to your viewer. If you're not careful, your page may appear cluttered or have elements moved around into undesirable positions if it is viewed at a small screen resolution or in a smaller window. Also, a page may look slightly awkward when viewed with a particularly large or wide resolution. Screen resolution, which is the measure of how many pixels (basic visual units of color that make up the whole picture on the monitor) wide and high the screen is, usually is set at 1024 x 768 pixels or more on today's computers, although some people do still have smaller resolutions such as 800 x 600. Mobile devices, of course, also tend to have quite small resolutions. In view of all this, it is important for you to repeatedly test your pages in different window sizes or at different screen resolutions (you can often change your resolution through your computer's control panel). Make sure the page content looks OK in these different views, and if it does not, alter the page layout. Use of floating elements and CSS positioning may help a great deal in solving these types of problems.

(4) Think about download quantity/speed. Try not to put too many large files on a page. Some people who have slower Internet may become impatient if they try to view a page with an unneeded quantity of multimedia on it. This means you should try not to put too many images on a given page; that you should always try to avoid putting images with unnecessarily large filesizes on a page; and that you should avoid putting large, auto-loading file embeds (such as audio files*) in a page. Not only can they be time-consuming to download, but they may also consume valuable bandwidth.
*NOTE: It is not a good idea in general, for most purposes at least, to auto-play audio on a page. It may be jarring to viewers who do not expect it, it often takes up a lot of space and bandwidth, it may slow things down, and it usually does not contribute anything essential to the page's content.

(5) Avoid all these things:
(a) Clashing or mismatched color schemes. These can hurt the eyes and look like garbage.
(b) Overcrowding of material on a page. Make the separate elements easy to distinguish and understand through judicious use of "white space" (empty space on the page).
(c) Using too much "white space". Too many blank areas can make the page look unbalanced and poorly constructed.
(d) Poor page balance. Too many items on side of the page relative to the other, for example, will be distracting and look annoying.
(e) Poor alignment. Make text, images, and other elements line up when they look like they should. If elements close to each other fail to logically line up, an impression of sloppiness will be created. Using HTML tables as frameworks for page layout can be extremely helpful with regard to keeping elements aligned, although the use of CSS positioning is now preferred, due to changes in standards.
(f) Inconsistent sizing of similar elements. For example, having buttons on a sidebar be differently sized when they are meant to all look like each other can be very off-putting to the viewer. The same principle applies to text which accidentally varies slightly in font size when it is meant to stay the same size.

Once again, feel free to ask if you have any questions.