CSS; Weight loss for your code by Sasch Mayer
One of the main drawbacks of traditional HTML web design is the tendency to
produce almost insupportably large file sizes with anything but the simplest of
page designs since formatting requires a substantial amount of code per
component unless a rather plain 'default look' is to be retained.
Although there are a number of contributing factors, the burden of
responsibility can largely be placed on the shoulders of font and other style
tags which have to be added to every text element if an aesthetically pleasing
result is to be achieved.
With web sites becoming more complex in their structure and appearance, this led
to ever increasing document sizes as the years went on until the sheer amount
of code required for presentation far outweighed the text contained within the
page leading to slow loading times, a serious headache for search engine
spiders and the coining of the phrase 'code to content ratio
'.
Help became available to designers in the shape of CSS (Cascading Style Sheets).
Originally conceived in 1994 to provide an effective means for designers to
control the appearance of their web pages, CSS became a W3C recommendation in
1998 and has been gradually gaining popularity within the web design community
since about 2003.
By removing bulky text formatting code from HTML documents and placing it in a
central data file which controls the appearance of the entire web site, CSS not
only provides a means of achieving a more uniform overall appearance, it also
serves to substantially reduce the size of each individual HTML document.
For example; to display text in a certain font, colour and in bold would require
the following HTML code:
Note that < > brackets have been replaced with [ ] brackets
to display the code correctly:
[font color="#0000FF" face="Arial, Helvetica, sans-serif"][strong]Example
Text[/strong][/font]
Lots of code for very little content, as you can see.
With CSS controlled design however, the text can be displayed in the same
manner with the use of a span tag controlled by the Style Sheet:
[span class="C1"]Example Text[/span]
Same end result, half the code.
If you repeat this process fifty or sixty times within a single page your code
will be much more lightweight and easily indexed by search engines (if it is
also W3C compliant).
Those of you not yet making use of Cascading Style Sheets to reduce the flab in
your HTML would be well advised to read up on the technique.
Further information about CSS can be found at the
W3Schools CSS Tutorial
.
About the Author
With many years of experience in the industry, Sasch Mayer is an accomplished
SEO copywriter. He is currently working in Cyprus under contract to IceGiant
Web Design. Visit the IceGiant site for quality web and graphic
design, information and more, non-syndicated articles.
|
