Developer

Does CSS provide higher ROI than straight HTML?

A recent Builder.com article on CSS sparked a discussion about whether it offers higher ROI than table-based HTML layout. The article's author, CNET developer Shawn Morton, revisits the issue by performing an ROI analysis for a more definitive comparison.


My previous article, "Use metrics to justify dropping browser support," sparked a pretty heated debate over CSS in the Builder.com Discussion Center. Much of the discussion centered on the return on investment (ROI) of using CSS versus good ol' table-driven HTML.

So I decided to perform an informal ROI analysis on updating two versions of the same site—one using CSS to control layout, colors, and fonts, the other using only HTML. I wanted to see whether there was a clear ROI winner or whether the choice between CSS or HTML tables for layout control is more a matter of personal preference.

The ground rules
Metrics

To determine which approach has a higher ROI, I needed to gather the following metrics:
  • Time to update—How long does it take to make the changes?
  • Labor cost—How much does it cost to make changes?

The site
  • The site contains 100 HTML pages.
  • The site pages are divided into four types: home page, category page, product page, and miscellaneous page.

Costs

I was interested in seeing the difference in time and labor costs between an in-house developer and an outside contractor, so I created separate rates for each:
  • $32/hour for an in-house developer (based on an annual salary of $65K/year)
  • $50/hour for a contract developer

The scope

I created a fictitious e-commerce site called sMoRTy's for this exercise. The site consists of one home page, nine category pages, 87 product pages, and three miscellaneous pages.

The pages
The home page spotlights the deal of the week and displays the nine product categories and the five best-selling products (Figure A).

Figure A
Demo site home page


Each category page contains a list of up to 15 products with a photo, price, and description of each. It also contains a list of the five best-selling products in that category (Figure B).

Figure B
Demo site category page


The product page contains a photo of the product, short and long descriptions of the product, and the five best-selling products in that category.

Figure C
Demo site product page


The miscellaneous pages contain a variety of content, including the About Us, Contact, and Help pages.

The changes
I made the following changes to each version of the site. I tried to select real-world changes that a developer might be asked to make on a regular basis. Below each change is the work involved in making it in HTML and CSS.

Move the Best Sellers section from the bottom of all pages to a new right column
The Best Sellers section is currently at the bottom of 97 pages on the site, including the home page, category pages, and product pages. To increase visibility and traffic, the Best Sellers section needs to be moved up on the page. Figure D shows how the change would look on the product page.

Figure D
Best sellers moved higher and to the right


HTML: This change required major rework to the table structure of 97 of the site's pages. I created two new columns, one for the Best Sellers section and one to provide the 10-pixel gutter between the product description and the Best Sellers section. In addition, I adjusted the widths of the other cells so that the two new columns could fit within the page's original width. Finally, I added a nested table to format the best-selling product photos and titles for display in a vertical column rather than a horizontal row.

CSS: This change required editing one CSS file. First, I changed the positioning of the other sections in the body of the page:

Before.productinfobox {
      width:750px;
       }
.productdescbox {
      width:750px;
       }

After.productinfobox {
      width:600px;
       }
.productdescbox {
      width:600px;
       }

Next, I changed the width and added a float attribute for the Best Sellers section:

Before.bestsellerbox {
      width:750px;
       }

After.bestsellbox {
      width:150px;
      float:right;
       }

No changes to the HTML itself were needed.

Advantage: CSS. The CSS change took about one minute. Conversely, the HTML changes took about five to seven minutes per page. Multiply that by 97 pages, and you can easily see the difference.

Reformat the category pages to make results easier to read
The original formatting of the category pages made the results hard to read. In addition to the aforementioned change to the Best Sellers section, the category pages need to be cleaned up to make the results more attractive. This includes changing the page header and the color of the price, changing the border attributes of each product description, and moving the photo from the left to the right. Figure E shows how the changes look in each category page.

Figure E
Reformatting the category pages


HTML: This change required major rework of the tables in each of the nine category pages. I had to change the background colors for all of the cells that create the border around each product listing so that there is only a light gray border at the bottom of each listing. I also had to change the color of the price of each product. In addition, I need to switch the cell containing each photo and the cell containing each product description so that the product photo is on the left.

Since the category pages display every product on the site, each change had to be made 87 times.

CSS: This change only required editing three classes in the CSS file. To change the page header from dark blue with white text to light gray with a medium gray border and black text, I simply changed the .catheader class:

Before.catheader {
      background:#003366;
      font-family:Arial,Helvetica,sans-serif;
      font-size:.8em;
      font-weight:bold;
      color:#ffffff;
      padding:5px;
       }

After.catheader {
      background:#eeeeee;
      border:1px solid #cccccc;
      font-family:Arial,Helvetica,sans-serif;
      font-size:.8em;
      font-weight:bold;
      color:#000000;
      padding:5px;
       }

To make border and font color changes, I changed the .productlisting class:

Before.productlisting {
      border:1px solid #000000;
font-family:Arial,Helvetica,sans-serif;
      font-size:.8em;
      color:#000000;
      padding:5px;
       }

After.productlisting {
      border-bottom:1px solid #cccccc;
      font-family:Arial,Helvetica,sans-serif;
      font-size:.8em;
      color:#000000;
      padding:5px;
       }
.productlistingstrong{
      color:#990000;
       }

To move the photo from the left to the right, I changed the float attribute on the .productphoto class from right to left:

Before.productphoto {
      width:135px;
float:right;
       }

After.productphoto {
      width:135px;
      float:left;
       }

Advantage: CSS. The CSS change took about three minutes. Conversely, the HTML changes took about two minutes per product listing. Multiply that by 87 products and, again, it's no contest.

Add a Help button to the site's navigation bar
HTML: To add the Help button (Figure F) using HTML, I first had to create two new graphics, one for the on state of the button and one for the off state. In addition, I had to create the behavior that toggles the on and off version of the button when the user mouses over it.

Figure F
Adding a help button


After I created the graphics and completed the rollover behavior, I had to add the graphic to the navbar cell on every page. Since I was using an HTML editor, I did this with a Find and Replace for all pages except the Help page, which had to have the on state for the button displayed. On the Help page, I had to add the on graphic and remove the link to the Help page.

CSS: There was no need to create any new graphics or build any rollover behaviors. The CSS file already controls the link behaviors for the navbar section (Listing A). All I had to do was add a link to the Help page to each site page. As with the HTML version of this change, I did this with a Find and Replace for all pages except the Help page which would not need the link. I placed the text Help within <strong></strong> tags on the Help page, so the CSS file will create the on state for the Help button.

Advantage: CSS. This one was a little closer. Using Find and Replace, the CSS change took about three minutes. The HTML change took a similar amount of time for the code changes; however, if you throw in graphics creation for the new buttons, CSS had a slight advantage.

The results
Okay, now that the three changes have been made to each site, let's look at the time it took to make them (Table A).
Table A
Change
CSS (in minutes)
HTML (in minutes)
1. Moving Best Sellers section
1
485-679
2. Reformatting category page
3
174
3. Adding Help button
3
10
Total
7
669-863
Time to reformat site

Now, let's convert those minutes into hours and multiple them by our in-house and contractor rates (Tables B and C).
Table B

Time (in hours)

Hourly Rate

Total Cost

In-house

.116

$32

$3.71

Contractor

.116

$50

$5.80

Cost for CSS changes
Table C

Time (in hours)

Hourly Rate

Total Cost

In-house

11.15 – 14.38

$32

$356.80 – 460.16

Contractor

11.15 – 14.38

$50

$557.50 – 719.00

Cost for HTML changes

The verdict
Well, I think these numbers pretty much speak for themselves. CSS does provide a very high ROI when it comes to updating and maintaining a Web site, especially a site that does frequent updates. And, unlike the time and cost for the HTML updates, which fluctuate based on the number of pages in a site, the CSS time and cost aren't affected by the number of pages. A site with 10,000 pages can be updated as quickly as a site with 100 pages.

Editor's Picks