CFUnited 2008 was a great experience for me personally, I presented as a speaker for the first time which was a great experience and challenge, as well as learned a great deal of things that I would like to put into practice in my own development environment.

I wanted to put a quick post out there to go over some of the highlights that I was able to take away learning wise for others to see as well as a constant reminder to myself. So, what did I personally learn?

• In his own words, Ray Camden will be using tables for layout until someone stops him... Should've come to my session Ray!
• I want to start using CFToolTip more for my end-users benefit.
• There is a cool Event Validator at RiaForge that Mark Drew referenced, I would like to check into that when I get the time.
• From Hal Helms session, leave functions open for extention, closed for changes. Keeping things simple
• Just because MVC is used, doesn't mean I'm doing OO. I can still be doing procedural code in an MVC format.
• Get book called Design Patterns by Gang of Four
• Find the things that are constantly changing in my applications and encapsulate them.
• Good OO is all about abstraction.
• Pass objects to be persisted.
• From Chris Scott's session, keep ColdSpring simple - getBeans/setBeans
• Increase the JVM default on the CF Server.
• Increase the minimum memory on the CF Server.
• Turn on trusted cache in production.
• Cache queries used often in applications.
• Read the CF8 performance brief.
• Use SQL Server performance monitoring tools to profile, trace, look at execution plans and their costs, run database reports to see which queries are putting loads on the server.
• If session is not available, reject the form submission, because it means they didn't come from your form.
• From Joe's advanced Model-Glue session... you can use the include tags to include entire applications into your Model-Glue app.
• Prefix event handlers.
• Controllers should be as thin as possible.
• Use views for common joins, filtering, etc... when dealing with larger queries.
• Index all fields searched on in my SQL tables for fast searching and less load on the database. A good example of this is looking for pizza in the phone book, but searching every page of the book from A-Z. With indexing you don't need to search from A-Z simply jump to 'Pizza'.
• SQL views can be about 75% faster than CF for complex queries.
• Stored procedures can be about 90% faster than CF.
• Use cfQueryParams for security as well as not making the SQL Server re-write execution plans everytime a query is run.
• Be careful about how you index your tables, you could do more damage than good if it's not done right.

That was my quick recap of what I learned. Overall the venue was great, I loved the fact that the conference was in downtown DC instead of Bethesda, the hotel was awesome and close to the conference. Another great job by the CFUnited team. I hope to return in 2009.

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

1. Beauty - It's more than just skin deep.
2. Accessibility
3. Search Engine Optimization
4. Size - Put HTML on a diet.
5. Speed
6. Flexibility - My personal favorite.
7. 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.

Back to Top

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.

Back to Top

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.

Back to Top

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.

Back to Top

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.

Back to Top

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.

Back to Top

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!

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...