Simplfy Site Changes With CSS
Web sites are constructed using a simple computer code called HTML which stands for hyper-text mark-up language. HTML forms the backbone of the world wide web, providing the underlying infrastructure of the millions of web sites that occupy the digital landscape. HTML is simple to learn and implement, which is one reason it’s the W3 standard. However, HTML has a couple of significant drawbacks.
First, it’s cumbersome. It requires a great deal of hand coding which is very expensive compared to automated coding.
Second, HTML lacks flexibility. Elements of design, images, charts and other common web site features have to be positioned using HTML code – on every page, even if the layout stays the same.
Finally, HTML isn’t very efficient. So, if you have a site on which content changes often, as in the “sale of the day,” you or some HTML coder has to go into the HTML code to make those changes in content every day.
To address these and other HTML limitations, Cascading Style Sheets (CSS) were devised to supplement the still-standard HTML code.
CSS is intended to increase flexibility of design, make sites more user-friendly by making them much faster and customizable and, finally, CSS eliminates repetitive and pricey hand-coding, making it much less expensive to get a professional-looking site up and running. Okay, not anybody can do it, but if you have some facility with site design and construction you can employ CSS to simplify the structure of the site.
Content and Design
Every page of a web site is comprised of two elements: content and design. Content is usually presented as text but content also includes pictures and other images that are a part of “telling your story.”
The other aspect of any web page is design – how the content is actually laid out on any given page. Design includes such basics as where to position product text near a product picture (under, over, to the side, surrounding) to the motif selected for everything from background color to buttons to navigation bar.
If you think of these as two distinct elements of a web page you’ll more clearly understand the value of CSS. Using CSS, design elements are kept in a separate file, apart from content. The benefits are immediate and significant.
Design It Once
Using stand-alone HTML requires that every page be constructed (coded) with both content and elements of design being hand placed by the code writer. No problem if your site is a few pages, but what if you’ve got hundreds or thousands of pages. Having to hand code each one of those pages would be costly in the extreme because it would take so long.
Using CSS, the designer codes all design elements one time. This is the background color, these are the colors of this header, this is the size of this button – all elements of design are placed in a single, CSS file.
Then, the coder can simply reference that CSS file to apply that design to whatever pages use it. Think of Amazon.com’s product pages – all basically the same layout. The content changes, of course, but the product pix are always in the same position, product description, reviews, etc. are always in the same place. Prior to the development of CSS, each of those pages required some hand coding in addition to a lot of cutting and pasting from blocks of HTML code.
Today, a designer can make any number of CSS and reference each site page to the appropriate style sheet. Design it once, then change the content as needed.
The Many, Mighty Benefits of CSS
First, let’s start with search engines. Spiders crawl pages of repetitious HTML code. It takes longer to spider a site and it’s more difficult for the spider to identify new content. With CSS, content and design are separate. So, a spider crawls the CSS file once then focuses on the site’s real purpose – the text that delivers the site’s message.
This elevates content to a new level since spiders are always looking for fresh content in assessing a site’s quality. Text is given more weight when design is relegated to a CSS file.
Second, download time is reduced anywhere from 20% to 80%. Why? Because instead of having to download dozens of pages of HTML design code, you now download a single CSS file with all design elements in one place. The text may be the same but downloads are much, much shorter, providing visitors with a better on-site experience.
CSS are more friendly to a variety of media – everything from cell phones and Blackberries to screen readers for the visually impaired who no longer have to sit through written descriptions of page graphics via an HTML tag.
CSS enables the visitor to design the site to his or her needs and/or preferences. Don’t like that type font? Click here for any easier one to read. In other words, by accessing different CSS, visitors can create screen settings that they like or need due to vision problems or just personal preferences.
Next, CSS cuts down on the costs of site design. Using CSS, programmers design it once and apply where desired. And remember, the designer can create as many CSS as required so there are no design limitations. In the same vein, updating a site is much less costly – very important to sites that sell a lot of different products with constantly changing inventory.
Finally, a site owner can easily create printer-friendly versions of all pages by creating a text only CSS. Very useful in sites that provide a great deal of hard content or print out invoices.
What Should I Do?
If you haven’t started the design of your site, go with CSS programming all the way. There are lots of on-line tutorials and many web hosts provide CSS software for easy style sheet creation.
If your site is already up and running, consider taking the time and/or incurring the expense of converting to CSS. Any one of the benefits listed above should be enough to motivate you but if not, how’s this: your competitors have already converted to CSS or soon will be. You’ll be the last black & white TV on the cyber block.
Faster downloads, user-customized pages, lower design and maintenance costs, easier reading by spiders, much less hand coding and flashier, more professional-looking sites. Those are the benefits of using cascading style sheets.
So, what are you waiting for? Go CSS and make your site more attractive, more visitor-friendly and much, much cooler much, much faster.
