Web Rules For Web Devs by Brook Hatch

In my electronic world there are only enjoyable web pages and the ones I have to suffer through for some bit of text or financial information that I can only get otherwise by interfacing with a human on a phone or in person (shocking!). Having been online for the entire life of the World Wide Web, and even back into the dark ages of BBS and client server mainframe dialup systems, I feel qualified, nay, even duty bound to help others to make the Web a more aesthetically pleasing and functional place. Please read, understand, and implement the guidelines below for a better web world for all.
Use a logical file system
	HTML files live in the root, graphics live in /images, documents live in /docs, etc. Organize content into subfolders so that each grouping of files is well organized and refers to a local subdirectory /images for local-only content and back to the root /images file for common graphics elements.
Use standard HTML filename extensions
	.html is the rule, not .htm.
Use gifs and jpgs for images
	Never use bmps, tiff, or other bizarre graphics formats. A possible exception to this is .png files. Be aware that not all browsers support this file format.
	GIFs
		GIFs work best for illustration and line art, where there is a low number of colors.
	JPGs
		JPGs work best for photo quality art where the numbers of colors run to millions.
	Size those suckers down
		Web browsers will not display more than 72 dots per inch images.
Use cascading style sheets
	The .css file should live in the root of the web and all HTML files should refer back to it. Alternately use a css tag in the header of each page.
Do not use frames
	Nothing says “I hate you” to a web user better than using frames.
Update the site map regularly
	Every page of the website should be indexed in the site map. This will ensure you don’t have orphaned pages.
Test what you changed before you move on to other things
	Ask a user or another developer to test your links. Also, design and preview offline prior to uploading changed files. Macromedia Dreamweaver has a very nice facility for this.
Use local hrefs, not file://… or http://www…
	If the site moves, and it probably will sooner or later, you or your successor will praise your name if all the links continue to work after moving all the files. That also means that all content is stored locally if at all possible. Once a user follows a link off your system, you are no longer in control of what they see.
Do not use spaces or non-alphabet characters in file names.
	There are few things more confusing than 9_h.html. Use short descriptive titles that follow the MS DOS 8.3 naming convention (eight alphanumeric characters followed by a period, then a three letter extension that indicates the file type. For example: .doc, .txt, .jpg). For image and thumbnail combinations, append “th” to the thumbnail filename. Avoid giving full sized graphics a filename beginning with “th”.
Do not capitalize aNyThInG
	Break this rule if you are following a higher commandment set like ASP coding conventions. Windows is not case sensitive, but other operating systems are.
Consider modem users as well as T1 users
	Keep your images small. Design with text and tables wherever possible. Have pity; it will pay off in more hits and less performance complaints.
Design in 800x600 mode
	800 pixels by 600 pixels is by far the most common monitor setting. Bigger pages are going to make slider bars appear and content fall off the screen
Define tables with percentages rather than pixels
	Break this rule if you need to place elements with precision, but be aware of the 800x600 rule above.
Use standard fonts
	If you want to wow ‘em with a custom font, make the text into an image.
Colors
	If you want a user to stay on your site by choice, don’t try to burn their eyeballs out of their skulls. Use complementary colors in soothing combinations. High contrast makes for better readability, but you can get high contrast without using pure black and white (it’s classic, but black text on white background causes eyestrain). See Lynda.com for color schemes.
Eschew fancy animation, GIF89a, flash, and other circus freaks
	If you think your page needs things like that to attract users, try un-cluttering the design by taking stuff away. Less is more as they say in the world of graphic design.
Limit menu options
	User interface studies have shown that people get confused when presented with more than five buttons or links on a given screen.
Limit the impossibly deep thousand clicks phenomena
	If your overall structure is logical, you won’t need to send the user ten clicks in to get a web page. Think about it in terms of organizing your refrigerator. You put things you use least often in the hardest to reach places.
Design (and test!) for more than one web browser
	Some hugely successful software companies would like you to think that there is only one web browser in use, but it simply isn’t true. The most common operating system platforms include Macintosh, Linux, and Windows. The most common web browsers are Internet Explorer, Netscape, and Mozilla.
Popups
	It is with a heavy heart that I address this terrible misuse of HTML. All I can say is don’t use popups. Every time I get a popup, what follows is a mad frenzy of me hitting Alt-F4 until I’ve completely exited the browser. If you’ve ever hit a site with nested popups, you know all about how fast your browser and your OS can be crashed by this simple, yet fundamentally evil application of HTML. Popups can cause memory leaks in Windows. Enough memory leaks and your computer doesn’t have enough resources to do anything but bluescreen or cycle power.

Following these conventions will not automatically bring you website of the week awards. You will, however, spend less time fixing things and more time developing award-winning content.