These Articles are written by industry experts to help us understand many subjects better.
 
The Three Principles Of HTML Code Optimization

By George Peirson

Just like spring cleaning a house, the html code of your web pages should get periodic cleaning as well.

Over time, as changes and updates are made to a web page, the code can become littered with unnecessary clutter, slowing down page load times and hurting the efficiency of your web page. Cluttered html can also seriously impact your search engine ranking.

This is especially true if you are using a WYSIWYG (What You See Is What You Get) web design package such as FrontPage or Dreamweaver. These programs will speed up your web site creation, but they are not that efficient at writing clean html code.

We will be focusing this discussion on the actual html coding, ignoring other programming languages that may be used in a page such as JavaScript. In the code examples I will be using ( and ) characters instead of correct html so that the code examples will display properly in this newsletter.

Up until recently when coding a page in HTML we would be using tags such as the (font) tag and (p) paragraph tags. Between these tags would be our page content, text, images and links. Each time a formatting change was made on the page new tags were needed with complete formatting for the new section. More recently we have gained the ability to use Cascading Style Sheets, allowing us to write the formatting once and then refer to that formatting several times within a web page.

In order to speed up page load times we need to have fewer characters on the page when viewed in an html editor. Since we really do not want to remove any of our visible content we need to look to the html code. By cleaning up this code we can remove characters, thereby creating a smaller web page that will load more quickly.

Over time HTML has changed and we now have many different ways to do the same thing. An example would be the code used to show a bold type face. In HTML we have two main choices, the (strong) tag and the (b) tag. As you can see the (strong) tag uses 5 more characters than the (b) tag, and if we consider the closing tags as well we see that using the (strong)(/strong) tag pair uses 10 more characters than the cleaner (b)(/b) tag pair.

This is our First Principle of clean HTML code: Use the simplest coding method available. HTML has the ability of nesting code within other code. For instance we could have a line with three words where the middle word was in bold. This could be accomplished by changing the formatting completely each time the visible formatting changes.

Consider this code:

(font face="times")This(/font)
(font face="times")(strong)BOLD(/strong)(/font)
(font face="times")Word(/font)

This takes up 90 characters.

This is very poorly written html and is what you occasionally will get when using a WYSIWYG editor. Since the (font) tags are repeating the same information we can simply nest the (strong) tags inside the (font) tags, and better yet use the (b) tag instead of the (strong) tag. This would give us this code (font face="times)This (b)BOLD(/b) Word(/font), taking up only 46 characters.

This is our Second Principle of clean HTML code: Use nested tags when possible. Be aware that WYSIWYG editors will frequently update formatting by adding layer after layer of nested code. So while you are cleaning up the code look for redundant nested code placed there by your WYSIWYG editing program.

A big problem with using HTML tags is that we need to repeat the tag coding whenever we change the formatting. The advent of CSS allows us a great advantage in clean coding by allowing us to layout the formatting once in a document, then simply refer to it over and over again.

If we had six paragraphs in a page that switch between two different types of formatting, such as headings in Blue, Bold, Ariel, size 4 and paragraph text in Black, Times, size 2, using tags we would need to list that complete formatting each time we make a change.

(font face="Ariel" color="blue" size="4")(b)Our
heading(/b)(/font)
(font face="Times color="black" size="2")Our paragraph(/font)
(font face="Ariel" color="blue" size="4")(b)Our next
heading(/b)(/font)
(font face="Times color="black" size="2")Our next
paragraph(/font)


We would then repeat this for each heading and paragraph, lots of html code. With CSS we could create CSS Styles for each formatting type, list the Styles once in the Header of the page, and then simply refer to the Style each time we make a change.

(head)
(style type="text/css")
(!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
}
.style2 {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
}
--)
(/style)
(/head)
(body)
(p class="style1")Heading(/p)
(p class="style2")Paragraph Text(/p)
(/body)

Notice that the Styles are created in the Head section of the page and then simply referenced in the Body section. As we add more formatting we would simply continue to refer to the previously created Styles. This is our Third Principle of Clean HTML Code: Use CSS styles when ever possible. CSS has several other benefits, such as being able to place the CSS styles in an external file, thereby reducing the page size even more, and the ability to quickly update formatting site-wide by simply updating the external CSS Style file. So with some simple cleaning of your HTML code you can easily reduce the file size and make a fast loading, lean and mean web page.

About the Author:
George Peirson is a successful Entrepreneur and Internet Trainer. He is the author of over 30 multimedia based tutorial training titles covering such topics as Photoshop, Flash and Dreamweaver. To see his training sets visit www.howtogurus.com Article copyright 2005 George Peirson

 

Optimizing a page for quick load times can be broken down into 3 broad categories: the basic coding of the page, scripts that are used on the page, and images. Of these three, images that are too large can have the most significant impact on load times and therefore have the greatest potential for improved page loading times if properly optimized.

A Brief Primer On Image Types

There are many image formats in common use on web sites, the three most popular being GIF, JPEG, and to a lesser extent Flash content. We will be limiting our discussion to GIF and JPEG images, with a specific focus on still images.

Each of these image formats has their strengths and weaknesses. GIF or Graphics Interchange Format was developed by CompuServe before the Internet boom as a way to share images on the CompuServe service. Due to limitations with screen resolutions and color depths at the time, GIF images were limited to showing up to 256 colors, more colors were imitated by Dithering, a process of fooling the eye into seeing one color by using 2 or more sets of color dots spaced too closely for the eye to distinguish separately.

Imagine a chessboard with black and white squares. When viewed closely we can distinctly see the individual squares, but if we back off far enough we will no longer be able to discern the individual squares and instead we will see one large grey square, the black and white squares merging together in our eyes to form one solid color. This is the concept behind dithering.

The JPEG file format on the other hand is a newer format that can handle millïons of colors easily. The initial drawback to JPEG images is that they do contain many more colors, and each color requires some coding for display, making the file size largër.

Speeding Up Image Load Times

The main idea behind making an image load faster is to make the file size smaller. This can be accomplished in two ways, you can either make the dimensions of the image smaller, or decrease the amount of coding that is required to display the image.

The easiest way to reduce an image's file size is to reduce the image's physical dimensions. In other words, the smaller the image, the smaller the file size. Imagine an image that is a square 80 pixels by 80 pixels. The number of pixels contained in the image is 80x80 or 6400 individual pixels. If we reduce the image size by one half to 40 pixels by 40 pixels we then have 40x40 or 1600 pixels. So reducing the image size in half reduces the file size to one fourth of the original.

This is our First Principle of Image File Size Reduction: Use the smallest image dimensions that will work with your layout. And likewise the fewer images on the page, the fewer image pixels, therefore the smaller the page size.

Since GIF and JPEG image formats use different methods of saving image information, they tend to be better at showing some types of images and worse at showing others.

GIF images, since they are limited to 256 colors per image, are better at displaying images with large solid blocks of color and images with very small physical dimensions. The GIF format will produce smaller file sizes than JPEG for these types of images.


JPEG images are better at showing gradients or subtle changes from one color to another. Therefore JPEGs reproduce photographs very well, or any other image with gradations. The JPEG format will produce smaller file sizes for these types of images than the GIF format will.

This is our Second Principle of Image File Size Reduction: Choose the correct image format for the image you are using. Most web pages will contain a combination of GIF and JPEG images.

Decreasing the coding is called image compression. Both GIF and JPEG images can be compressed but the process is different. In GIF images we try to limit the number of colors, in a JPEG image we use software algorithms to remove redundant information from the file.

Whenever we compress a file we will losë some image quality. We have to reach a balance between a small file size and acceptable image quality.

This is our Third Principle of Image File Size Reduction: Find the least acceptable level of image quality. Most images can handle some compression with very little quality loss, and all images can stand more image quality loss and still be acceptable. Your job is to decide how much quality loss you can accept. In other words, the lower the quality, the smaller the file size.

GIF images can usually be reduced from 256 colors to 128 colors or less, the fewer colors used the smaller the file size. JPEG images can almost always be reduced to a quality setting of 80% and frequently can be reduced down to as little as 15-30%. So when you use a higher compression level (smaller number) the file size will be reduced. Experiment with the image, try smaller and smaller settings until you find the smallest setting that still displays an acceptable quality.

The fastest loading page will have no images and the slowest loading page will be completely filled with full resolution images. If you work towards controlling your images using the principles outlined above you will have a very lean web page that will load quickly and be viewed favorably by the search engines.


About The Author
George Peirson is a successful Entrepreneur and Internet Trainer. He is the author of over 30 multimedia based video training titles covering such topics as Photoshop, Flash and Dreamweaver. To see his training sets visit HowToGurus.com.

 
The 10 Best
Resources for CSS
By Mark Daoust (c) 2005

If you have been paying attention, you certainly have noticed an increasing number of websites that are employing CSS and an increasing number of resources talking about how great CSS is. If you have not yet jumped on the CSS bandwagon, you may want to consider doing so immediately.
CSS has many different benefits for website owners. The most obvious is the pure, raw design capabilities CSS brings to websites. CSS can control everything from the size of your font to the very layout of your page. A site designed with proper HTML and CSS can avoid incorporating almost any design elements into the actual HTML. This means a website owner can change the entire look of their whole site without changing a single HTML page. For owners of sites with dynamic content or sites that have a lot of content (blogs, forums, stores, etc), this becomes a huge time saver.


CSS also allows a website owner to build their HTML in a nice, logical order. Often when using tables to layout a website, the HTML that powers the website is not laid out in a logical order (this is referred to as the 'code flow'). This can hurt website owners in two ways. The first, and more important way, is to recognize that not everyone who uses the Internet is viewing your website through a visual browser such as Internet Explorer or Firefox. There are a whole group of people who are viewing websites using web readers and other tools which rely on well-organized code. Secondly, a well-organized website can actually help your search engine rankings. When a spider discovers a page that is well organized and not filled with a lot of extra HTML code, it can determine more accurately and quickly what that page is really about. Let's face it, we all want to help the spiders, right?

It is in the spirit of CSS that this article is written. There are hundreds of websites offering CSS tutorials, CSS examples, competitions, and showcases. There may be some that we are not aware of which are not displayed hëre, and if so, we encourage you to let us know in the Site Reference Forums.

With that said, we must offer a word of warning before going to any of these websites. These sites can become very addicting if you enjoy web design in the slightest way. Some of these sites link to literally hundreds of other sites which will catch your interest.

Now that the warning has been issued, we present to you a list of our favorite CSS websites.

CSSZenGarden
If you have any doubts over how powerful CSS really is, then you need to visit CSS Zen Garden. CSS Zen Garden is a display of the power and beauty of CSS. The concept is simple: see how many ways designers can take the exact same HTML code and produce completely different looking pages. As you browse through the various designs, you will find that the only thing changing the way each page looks is the CSS file. The HTML is exactly the same.


CSS Zen Garden is a great showcase of creativity and technical expertise. It is also important to point out that CSS Zen Garden does not use any tables for their layout. Everything is done in pure, simple HTML and CSS.

The Web Developer's Network
Any of the sites that make our favorites list are certainly listed on this extensive resource page. Be warned, this page has so many resources listed it is easy to get lost for hours exploring them. Some of the resources are just fun to explore while others offer some very practical advice on practical matters.

The page is not limited to CSS resources, but also delves into areas of good website design and creativity, along with anything else you could possibly want for your design needs. Our only criticism of this site is that it might be too extensive to find a specific tutorial or help guide.

Official Cascading Style Sheets Level 2 Specification
This is the place where it all starts if you want to learn CSS. Hëre you will find the official documentation on how to use CSS and what CSS is used for. Many novice website owners are scared away from this site because it is written in very technical language and they fear that they will not be able to understand it. If you feel this way, be careful not to sell yourself short. The specifications are actually much easier if you know how to read them.

When going over this document, keep in mind a few things. First, CSS was built for more than just the Internet. CSS can be used in print media and broadcast media as well. So when you are reading some of the instructions in the official manual you may find some aspects that do not apply to what you are doing. Secondly, do not worry if you do not understand a certain chapter or bit of information. The trick to learning CSS is to get a basic understanding of it first, then practice, then go back and re-read what you have already read (things will make a bit more sense this time around), then practice, then go back and re-read again, and so on. Every time you practice what you learned and go back to re-read some of the specifications, it will make more and more sense to you.


As a point of reference, if you want to just go over the most important chapters in the manual, be sure to read these chapters: Chapters 8-12, 14-18, and 4-6.

CSS from the Ground Up
Ok, so you have tried the official manual and it is just too difficult to understand. That is fine. There is a lot of information included in the manual, and they certainly do not work at entertaining you with the manual. If you want a bare bones tutorial on CSS, the people from Web Page Design for Designers have put together a pretty good basic tutorial which should get you started on your first CSS pages.

Listamatic
One thing you will learn as you begin to work with CSS powered layouts is that lists are extremely powerful tools. Lists are a vital part of building a website with good code flow. Getting lists to appear correctly in different browsers, or to appear in new, original ways, however, can be quite challenging.

Listamatic offers several examples of lists that use simple CSS. The examples cover nearly everything that you could possibly hope to achieve from an HTML list. Of course, if you are working with a nested list, they have examples of those as well.

CSSVault
This site offers a little bit of everything. They offer a great gallery for you to stop by and gawk at, as well as a number of resources on everything from lists to building layouts that do not use tables. Definitely a good overall resource on CSS.

CSS Layout Techniques
No CSS guide would be complete if we did not address the issue of building a layout that does not use tables. This is certainly the most challenging aspect of CSS, learning how to build a nice layout. The people over at Glish.com have put together examples of several different types of layouts. They may not offer every layout you could possibly use, but looking over their guides will certainly help you learn different techniques to learning how to layout your page.

Ruthsarian Layouts
There really cannot be enough resources on how to work with layouts using CSS. Ruthsarian Layouts offers several very good examples of popular layouts.

PositionIsEverything
And yet again, we offer another site dedicated to learning layouts and the little quirks that each browser brings into your CSS design. This site may just have the most information on position with CSS than any other site.

StyleGala
This is another site that goes a bit beyond CSS and into some other aspects of design, but still offers so much to learn from that it is highly worth putting in your favorites file. Included in this site is an impressive gallery, some forums, a collection of bullets that you can use on your site (where has this been for the past several years?), and a great collection of resources.

Using These Resources to Learn

Whether you are a code junkie or are a person who relies on FrontPage to do all of your design, moving in the direction of CSS and properly formatted HTML is the future of the Internet. For many, beginning the process of learning CSS may seem like a useless and overly-difficult venture. However, if you are responsible for the look and feel of your website you should begin to explore this technology which is being used more and more.

The best way to learn CSS is to start using it. Experiment with different parts of CSS. Try and accomplish different tricks that you have nevër done before. If you have nevër created a page without tables, try and do so today. If you have nevër worked with a list to format it in a completely different manner, experiment with that. Browse through some of the sites in the many different gallerïes offered to us and get inspired. Use these sites and these resources to imagine what your website could look like.

Your website is your salës pitch to your visitors. When they arrive at your website, it should be your goal to present to them the best looking page you can possibly provide. A well designed page will provide your users with the comfort that you are invested in your business, and you will be invested in them as a customer and visitor.

The Internet is a rapidly changing environment, with new technology and new tools being made available to enhance your site every day, and thus enhance your visitor's experience. It is your responsibility to make sure that your website sells, and that requires using the modern and powerful technologies that are available to us.


About The Author
Mark Daoust is the owner of Site Reference and TowerSearch. You are frëe to use this article on your website as long as you make all the links active and include this resource box.

Web Pro News - SEO info added Daily http://www.webpronews.com/archive.html
PC Magazine Industry News and Articles http://www.pcmag.com click on News
The Three Principles of HTML Optimization http://www.devwebpro.com/

HOME | UTILITIES| LINKS | V-HOSTS | COMPUTER PROBLEMS | TUTORIALS | ARTICLES | BOOKS | WEB DESIGN SERVICES