HTML Help And Tips Brought To You By Werks Media

Welcome to the Werks Media Design HTML help and tips page. This page is designed to help the do-it-yourself web site designer, and give advice to help keep your web site project on the right track. We won't bother to cover every html tag out there, as they are listed at many places on the internet for free. We will instead focus on good sound web design guidelines to help you build more engaging and useful web sites.

Tip #1 : Learn The Language
If you are interested in doing your own web design and maintenance, learn to code HTML and CSS. It will make life much easier in the long run, and allow you to understand what your are doing. The current crop of WYSIWYG editors (design mode editors) make it more confusing than it needs to be. You can write cleaner code yourself that loads quicker, has less errors, and is easier to work on. When you code your web documents yourself, you know how to lay things out just the way you want them, and you can easily fix any problems that arise. Its not always that easy with design mode editors.

Tip #2 : Road Map Anyone ?
I know that this has been covered everywhere and everyone has already heard it, but its amazing how many people are still building sites with horrible navigation. A web site MUST be easy to get around, your navigation should be simple and even more importantly consistent throughout the site. There isn't anything worse than going to a web site and figuring out their navigation, just to be faced with a completely different navigation plan on the next page. People don't like to search for links, and may just leave your site instead. Make it simple and straightforward, and don't make the visitors have to learn it twice.

Tip #3 : Keep It Clean
Keep your html documents well laid out with spaces between lines of code that belong to different sections. We see this one all the time, code that has been written by some WYSIWYG editor that is just a huge mess. Try to lay out your document in an orderly fashion, keeping tag sections neat and clean. Don't be afraid to use empty lines on your copy to get some separation into your lines of code, you can always condense a copy for online use if you like. This way, it is much easier to find your way around when you edit your html document in the future.

Tip #4 : Use Current Specifications
Make sure you learn current and future specifications, don't bother learning to do things the wrong way by using old and outdated tags that will not be supported in future browsers. Some HTML tags have been deprecated, which means they are no longer useful and future browsers will no longer support them. Many of these are formatting tags like the font tag, and you should consider using style sheets (CSS) instead of the old deprecated tags. You should also be looking forward and keeping future specifications in mind, like XHTML compatibility.

Tip #5 : Details, Details, Details
Be careful to use proper nesting when writing your code. Current browsers are pretty relaxed about it, but xhtml is the future and it will require code to be written properly with the proper nesting. Proper nesting would look like this : tag1, tag2, content, tag2(end), tag1(end). Notice that the tags finish in the reverse order that they started. This example would not be correct : tag1, tag2, content, tag1(end), tag2(end). Make sure to use proper nesting as future applications will require it. Another big one is using the proper quote marks around values. While missing quote marks may be accepted by todays browsers, xhtml will not allow it so its best to start coding correctly now.

Tip #6 : Ultimate Control - Using CSS
Cascading Style Sheets (CSS) offer amazing control over your web documents and make it possible to change the look and feel of your whole entire website by editing a single small file. CSS is an easy language to learn and offers control of many things that were never offered with html. A Cascading Style Sheet is a separate file from your html document that controls the look and feel of your site, including all of your formatting information like font sizes, colors, margins, and much more. This removes the formatting info from your html document keeping a clean and easy-to-work-on html file. CSS commands can also be included in the html page, but this diminishes some of the best attributes of using CSS in the first place.

Tip #7 : We're In A Hurry
Web surfers are very impatient people. Most web surfers will not hang around long on your site if you don't give them something interesting that grabs their attention. Just imagine how long they stay around if your page is still loading and they can't see or read anything. If you are designing your site to be accessible by dial-up users then your total page size or document weight should be no bigger than about 30kb. This includes all of the page's 'dependencies', which would include the page's images, css files, and any other files that need to load with it. If you are more concerned with broadband users or need a site that heavily relies on images you could stretch page sizes as far as 50kb or 60kb, but any larger than that and a significant number of people will leave your website before it even loads. To find the total size of your page, add together the size of the html file, all images and flash files, and the css file. The total of all files needed for your page would be the total document weight. To reduce your document weight, try getting rid of un-necessary images, adding more compression to the images that are needed, and write cleaner html code.

More information will be coming soon, please check back.

© copyright 2004 Werks Media web design in Asheville, NC