Two Nine Media :: The Personal Studio of Joe Gautreau - CSS

CFUnited: The Power Of CSS

Mon, 23 Jun 2008 17:40:00 -0400

I told those in my sessions that I would be posting my presentation from CFUnited 2008 so here is the online version as well as a zip file for download. By the way... this has turned out to be my longest blog post ever!

Click here to download the zip file of the presentation with the Harvard example included. So, let's get started!

Many developers don't know it, but table-based website layouts can slow down load times by over 30%! Why? Because they are burdened down with tables which isn't as efficient as CSS-based layouts.

Quick Disclaimer

Tables are not bad! Actually tables are very useful and beneficial, when used in their proper place. In fact, they can look good too, when styled with CSS.

What is their proper place? Tabular data display.

As a matter of fact... www.w3.org recommends the following. Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Let's Take A Look At The Benefits

Beauty - It's more than just skin deep.
Accessibility
Search Engine Optimization
Size - Put HTML on a diet.
Speed
Flexibility - My personal favorite.
Proof of Concept - The Harvard University Example

Benefit 1: Beauty

My personal motto is this... "If the solution is not beautiful, then it's wrong!" CSS is the right solution. Beauty isn't always on the surface. With CSS the beauty is not only without but within. Knowing that you didn't take the cheesy, easy way out is beauty in itself. Someone may never know but you get the satisfaction within knowing you did it right!

"A lazy developer, is a bad developer." If you don't want to take the time to properly learn CSS it amounts to nothing more than laziness. Sure, table-based layouts are easy, but they are not right. Integrity is what you do when no one is watching. Do the right thing, not the easy thing!

CSS also has many outwardly beautiful characteristics. Such as building roll-over menus, and fly-out menus, without using bulky pieces of JavaScript and numerous images.

Benefit 2: Accessibility

CSS separates document structure from presentation. Sort of MVC in a design kind of way.

People with disabilities use alternative browsers such as screen readers, mobile phones, speech output browsers, braille browsers and text browsers. Using alternate browsing methods on table-based web sites can prove to be a painful experience.

Table-based layouts often are "broken" in some browsers.

CSS-based layouts allow the display of main content first while the graphics load afterwards.

Graphic intense sites or those that employ elements that prove inaccessible to disabled users can put CSS to good work by placing all these elements at the bottom of the source code. This way, normal browsers will render the layout properly for normal users, letting them enjoy the visuals while alternate browsers will easily render the simplified, informational content to disabled users.

CSS can be used to load different styles based on the screen type, when using tables this is nearly impossible to do cleanly.

There is a more consistent cross-browser experience when using CSS.

Benefit 3: Search Engine Optimization

Search engines spiders are lethargic, they don't parse through tons of HTML code to get the indexed code, in doing so this reduces the spiders results.

Cleaner, more light-weight code produces better SEO rankings.

Search engines such as Google, Yahoo and MSN love light-weighted web pages where content is more visible than code.

The better text to code ratio on your web pages, the better your SEO chances are. More content less HTML. With tables extra, bulky HTML is created that decreases SEO chances.

Benefit 4: Size - Less Is More

Put HTML on a diet. CSS-based layouts are generally smaller than their table-based counterparts. The bulky HTML code filled with markup is not necessary when using CSS.

When CSS is used properly, websites can often use fewer images and little if any JavaScript.

CSS-based layouts can decrease HTML file size by over 40% in comparison to table-based layouts.

Benefit 5: Speed

CSS-based layouts download faster than table-based layouts. Browsers read through tables TWICE before dumping it's contents. The first iteration is to read the table structure, the second to read the content.

When using CSS the browser stores a copy of the CSS file upon it's first load, tables must be parsed and loaded with each page load.

CSS-based layouts have an average of 50% faster load times than that of table-based layouts.

Benefit 6: Flexibility

The ability to use one HTML document, and generate an unlimited amount of different layouts. A good demonstration of how this is done can be found at www.cssZenGarden.com

Create JavaScript like navigations with pure CSS.

Redesigns become much easier saving time and labor. All changes can be done in one file, instead of going to multiple files to make repetitive changes.

With a table-based layout you are locked into a layout, whereas with CSS you are not!

The ability to manage the order in which items are downloaded (ie: content prior to images).

A Quick Example... One codebase, multiple look-n-feel's.

Proof of Concept - The Harvard University Example

So what better way is there to show this concept of using CSS rather than tables to layout your website than by using a real-life example. Que the music... Enter Harvard University (Circa Mar. 2008). The have a nice looking website as you can see below, but scroll down and we'll see if we can't make website run a bit better.

So, what we are going to do, is take this website, and take it through the "CSS Machine" and see how it improves.

Step 1: Create a local working copy of the Harvard University website from www.harvard.edu, by saving the HTML, cleaning it up and removing contents, manually downloading a local copy of all images used on the site, change all links to reference pound signs, and voila, we have a local running copy of Harvard University's website tables and all. Click here to view the original Harvard University website with tables.

Step 2: Get the specs on the original website.

15 Tables
25KB Page Size (Not large, but we can condense it even more)
372 Lines of Code
73 Objects/Files
Javascript Rollovers
Images used as links (Bad for SEO)

Step 3: Develop a CSS template that fits the Harvard University look-n-feel.

Step 4: Section by section begin to plug in content, redo the navigation with pure CSS (no Javascript), etc... All the while validating the CSS and XHTML every step of the way.

We now have a complete redesign of the Harvard University website. The look-n-feel didn't change, but what we did change was the nuts-n-bolts of the website. We modified how it was built, and presented from within. Click here to view the all new table-LESS Harvard University website built using pure CSS for layout.

Side-By-Side Comparision

So now let us put the two layouts side-by-side to see if this "theory" of doing away with tables for layout can be substantiated.

Speed Differences:

All speed tests were run 5 times for each version of the website and the average was taken. The tests from WebSiteOptimization.com were not used in the overall average calculations due to the fact that their calculations were based off of a size-based formula, not an actual test.

Final Comparison:

So, What Did We Accomplish?

We trimmed some fat to the tune of 48%
We increased our load times by over 50%
We made it prettier on inside
We made it much more flexible for future alterations
We made it more accessible
We made it more SEO friendly

Wrap

I really hope you enjoyed this blog post. I have become a very strong proponent of using CSS when developing websites because of the many benefits above. I was asked by a couple of folks if I had taken these findings to Harvard University to see if perhaps they may be interested in change. The answer is no! Maybe they'll come across this blog post and make the change for themselves. Thanks for reading!

CFUnited: Off To Washington D.C.

Mon, 16 Jun 2008 16:59:00 -0400

Well, tomorrow morning bright an early I leave for Washington D.C. for a ColdFusion conference at which I'll be speaking on "The Power of CSS". I am excited and nervous all at the same time. Wondering if my presentation will be valuable, sufficient and timely, but excited about things I may learn and all that goes with experience of taking a trip. I'll be blogging daily about the conference and the trip, posting pictures and musings about the things I experience on a daily basis while I am there. Today, my wife LeeAnn has been running about trying to get some last minute things together before I leave. I'm going to miss LeeAnn and the kids while I'm gone, but it will work out for good. The kids have already been asking if I was going to bring them back t-shirts like I did last time. I picked up a new lens for my camera while I am there, which I will blog about shortly, it's an Nikon 18-200mm VR Nikkor lens which gives me great range when I am out exploring D.C. so I am looking forward to getting some great shots with it. Well, here goes nothin'. Stay tuned for more...

I'm Speechless!

Fri, 30 Nov 2007 03:09:00 -0400

The title says it all, so I'll write about it instead. I found out yesterday from Liz at Teratech that I was picked by the Teratech team to be one of the speakers at CFUnited 2008 in Washington D.C.

I am honored, nervous, and humbled to be chosen to speak at this awesome event. I feel that there are many people out there who are far better than me, but I look forward with a nervous excitement to this opportunity!

I will be speaking on The Power of CSS, including tabled layouts vs. css layouts and why CSS is a far better solution for web development. I have blogged in the past about the speed differences of the two which you can see here. If you are going to CFUnited, I look forward to seeing you there! If not, you can register here, don't forget today is the last day for the special early bird rate!

See you in D.C. :)

The Tortoise & the Hare: Tables vs CSS for Layout

Thu, 19 Apr 2007 16:55:00 -0400

First of all let me begin by saying, I am in love with CSS! For those of you who don't know, CSS is used to control the style and format of a web page. From one CSS file you can control the font attributes, layout attributes, table standards, etc... for an entire site, all in one spot! But I digress... The reason for this post is to show the speed of CSS-based-layouts over table-based-layouts. Why should one go with CSS design when developing a website/web application? See below...

Pitfalls of Tables
  -  Less Accessible
  -  Harder to maintain visual consistiency
  -  Increased file sizes which eats bandwidth
  -  Much slower than CSS

Benefits of CSS
  -  Accessability
  -  Flexibility
  -  Functionality
  -  Lower Hosting Costs
  -  Efficient, Less Expensive Redesigns
  -  Better Search Engine Optimization (SEO) results
  -  Speed

Sample web layout used for this experiment.

Speed Test
But, for the moment let's focus on the overwhelming speed difference between the two. I created a sample web layout in Photoshop, and gave the file to a co-worker of mine (Doug Boude) who laid the design out with tables. I also took the file and laid it out with CSS, it took us both about 15-20 mins to lay it out in our given formats. All of our images were the same size for this test and his HTML file was actually smaller than mine! I then uploaded the files to my server, which can be viewed here (CSS Layout and Table Layout) and ran them through a Web Page Analyzer at websiteoptimization.com, the results were amazing! Results
The CSS-based layout was 33% FASTER than the table-based layout on a T1 connection, and 59% FASTER on a 56K connection. The CSS-based layout had no "cautions" or "warnings". The table-based layout had a "Total Size Caution" and a "Image Size Warning" even though we used the same image sizes and same amount of images. The total size of the CSS-based page load was 14007 bytes while the table-based page load was 37593 bytes, a 62% DIFFERENCE! Final Thoughts
Now, don't get me wrong, I like tables, I think they are very useful, but only in their proper place. They were designed for data display and I still use them for that myself if I have tabular data for instance that I need to display. But, for layout and design of a website / web application, there is no question that CSS is the way to go for many different reasons. So, my final question to you is this... If someone came to you and said "I can make your website run 33% faster", what would you say??? *Speed results will vary depending on site content/layout. Not all results will be 33% faster, some will be less and some will be more.

Coming Soon - Site Redesign

Mon, 13 Nov 2006 19:52:00 -0400

TwoNineMedia will be launching it's new and improved website sometime within the next few weeks. The new site will feature a complete CSS layout with BlogCFC redesigned to fit the new look and feel. 12/6/06 - Update: It's coming give me another week or two!

CSS: Building Navigations From Unordered Lists

Fri, 25 Aug 2006 14:48:00 -0400

So, you have an unordered list that you want to look pretty, huh? Well, I ran into this problem here at work a little while back, and it was requested I share the solution with all. Problem: We were (and still are) building a web app, where the navigation would be dynamic based on the user and their permissions, and each nav item could have children under it, sub-items. So we needed to come up with a CSS solution to the problem with a tad bit of JavaScript to make IE happy. Now, we used a recursive function to query the database for all of the nav items for a user with their children, and possibly their children's children and so on, and when we looped through this result set with ColdFusion, here was a look alike of the nav html that was generated.




  Home
  About
    
      History
      Team
		
		  First Team
		  Second Team
			
			  Joe
			  Doug
			  Bill
			
		  
		  Third Team
		
	  
      Offices
    
  
  Services
    
      First Service
      Second Service
      Third Service
      Fourth Service
    
  
  Contact Us
    
      First Location
      Second Location
      Third Location
      Fourth Location

Which looks like this displayed: Solution: So what I did was go out on the net and try to find something to fix this problem, and found this solution. First of all, you will notice that the unordered list has an ID as well as the list item and anchor tag having a class where there are children. With that accomplished, now we just need two more things. Number one some CSS to make it look pretty and secondly a behavior file for IE. CSS:


body{
	behavior: url(csshover.htc); /* For IE */
}

#nav ul, #nav ul ul {
	margin: 0px;
	padding: 0px;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #FD5095;
	background: #FC1571;
	font-size: 12px;
	}

#nav ul li {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	position: relative;
	list-style: none;
	padding: 0px;
	}

#nav ul li a {
	display: block;
	text-indent: 5px;
	text-decoration: none;
  	color:#ffffff;
	padding: 5px 0px 5px 0px;
	border: 0px;
	border-top: 1px solid #FD5095;
	zborder-left: 18px solid #FD5095;
	width: 150px;
	}

#nav ul li a:hover {
	zborder-left: 18px solid #FD5095;
	background-color: #FD73AA;
	}
	
#nav ul ul {
	position: absolute;
	display: none;
	left: 150px;
	top: 0px;
	background:#FC1571;
	}

#nav ul li ul li a {
	padding: 5px 0px 5px 0px;
	}

/* Sub Menu Styles */

#nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li li li:hover ul {
	display: none; /* Hide sub-menus initially */
	}

#nav ul li:hover ul, #nav ul li li:hover ul, #nav ul li li li:hover ul { 
	display: block;
	}

#nav ul li a.sectionparent{
	background: transparent url(navArrow.gif) right center no-repeat;
	}

#nav ul li a.sectionparent:hover{
	background: #FD73AA url(navArrow.gif) right center no-repeat;
	}

#nav ul li a:hover{
	color: #ffffff;
	}

/* Fix IE. Hide from IE Mac */

* html #nav ul li {
	float: left;
	height: 1%;
	}
	
* html #nav ul li a {
	height: 1%;
	}

/* End Fix */

Behavior File: Click here to download the htc behavior file. Final Result: Click Here To See A Live Demo! This has been very useful for me, I hope it helps you as well!

Where Have All The Tables Gone?

Tue, 22 Aug 2006 18:51:00 -0400

I have been in the web world for around 5 years now, and when I first learned how to build a web page, my layouts were based on HTML tables. Now thanks to Cascading Style Sheets (which are nothing new) I have practically abandoned tables and now design with strictly CSS. I used to fear CSS. I would look at a style sheet and think that tables were so much better. Until a few years ago, I figured out that you could create some nifty little rollovers with just an HTML anchor tag and a bit of CSS. Before I used to create rollover images in Photoshop and slice them up creating nifty rollovers which took forever to load. CSS is all about freedom, optimization, beauty and ease of future manageability. With CSS you can change the look of a site quickly from one look and feel to another with the swapping out of a style sheet. No more going through pages of code and HTML to try to swap out all of the image names and possibly reposition things, CSS allows you to do all this cleaner, quicker, and all from one file. Case In Point At work we are developing a completely web-based totally configurable web enrollment system for the health care industry. Part of my task thus far have been to create the look and feel for the application. This app will be used by multiple clients, and each client will most likely want their own look and feel to the app, not a logo change, but an entire look and feel. Here is my crack at a little illustration showing the power of css. One HTML document or set of code, you don't touch it at all, you just apply different style sheets and layout your page totally different based on the CSS not the HTML. Pretty neat huh? You can see this in real action at the CSS Zen Garden.