CSS: Cascading Style Sheets for Business Websites
CSS stands for Cascading Style Sheets, but what does it do for me in terms driving revenue and keeping customers on your site? I will hope to touch lightly on the fact that even though you may not ever write a line of CSS in your life, it is important that your web person is intimately familiar with its workings, and installs this technology on your website.
“Separating Style from Content.” Interesting concept, huh? There are two main “visitors” that you should be worried about when having your website designed. First, search engines (!). Search engines send out spiders that read the site’s content and caches it for indexing at a later time. In the real world, Spiders have a lot of eyes, but in the internet world, they have none! That’s why it is so important to have the “alt” tag identified for all images on your pages, and none of the images for your background on your site. Let me explain.
With CSS, we can separate the content (the text and wording that you want your potential customers to read) from the layout of the site. This gives three main benefits:
- If a search engine goes to your website, the content is formatted in a “most important first” setup
- If a browser can’t handle the advanced CSS you’ve set up, your content is not lost
- People who visit your site, and visit many pages on your site, see an increased browsing time improvement over sites which do not use CSS.
Search Engines Can’t See Layout
This is actually a little bit of a lie. There are some search engine spiders out there that do do some image analysis of your website, and index in different ways that involve imaging. The bottom line though, is that search engine spiders are mostly interested in your content. Now, an HTML document can have a structure and layout in a text-only setting that will look nothing like a CSS formatted site with the same content. CSS allows the movement of data and elements to wherever the designer would like to put them, regardless of where the data and elements are in the page.
This ties to your revenue because now, a webpage can be laid out in such a way that search engines read the most important parts of a page first, instead of the search engine rendering table-based layouts, sifting through menu links, and reading through 30 background images. Now, the images can be set up as background images to div’s, which are ID’d in an external style sheet.
Keeping your customers on your website is the #1 rule in owning a website. It’s worth the time invested to keep these customers with your company.
Browsers Can’t Handle Your Layout
Let’s face it. Nobody can make a website that will look the same on every browser ever made. It is impossible. In today’s world, there are mobile web users (iPhone, Treo, Blackberry), Firefox, Opera, Safari, IE6, IE7, IE8, and the upcoming IE9, and Netscape, to name a few. All of these browsers render a little bit differently and some dramatically different (IE6 and prior is a pain to work with!).
Even if a browser does not lay out your site how you want it to, it should comfort you to know that your content is getting to the user, and it is getting there in the order-dependent way that was intended. This means the text-only version goes to the user and he or she reads the content in the format you wanted them to read.
This directly ties to your revenue, because it will give the image that your company understands the consumer’s needs and knows what to do to get the job done. Keeping people on your site is an immediate concern, and delivering meaningful data to them is a high priority as well.
Improved Browsing Experience
A website designer could put every piece of CSS code in a web page and have it look the exact same. So, why is it worth it to move the CSS to an external style sheet? Improved browsing experience is transferred to the potential customers when external style sheets are used, because of the size of the document being transmitted. In our studies, we found that the removal of “font” tags, in-line “style” directives, and the table based layout removal, combined with the saved “img” tag removal, gave an average of 40% decrease in file size.
What’s better, is that this decrease in file size had an added benefit of a cached CSS file on the client’s computer. So, once the CSS file was downloaded, it no longer needed to be brought down with every new page. To explain it a bit better, the user would come to our site, download the CSS file, see an improved load time. The user would click on a new page, and that 40% transfer size would be transferred to the next page, and we would not have to retransmit the CSS file. If a customer sees 20 pages in a particular visit, that is a 800% improvement in the size of the data we are sending across the internet.
If you are paying for transfer, you know what a difference 800% can make.
There you have it. CSS, believe it or not, directly relates to how you do business on the internet and needs to be part of your website when you have one. AndPlus Design uses CSS, and is always looking for new ways to optimize CSS code, contact us if you are convinced you need our services!
