It has been a hard, long road. But these last few days, I’ve finally have reached a realization of a great step in my life as a web design: I’m 100% converted to CSS layouts, and have forsaken tables. 5 years ago I would have believed that would be impossible, and that I would love and use tables for my layouts until the day I die. I remember hearing the lectures and heated discussions on using CSS instead, but I couldn’t bring myself to using CSS for layouts. Don’t get me wrong, using CSS was amazing for formatting and styling, such a color, size, bolding, etc. I love it every second and my conversion to CSS for those scenarios was very quick. However, the positioning of content, headers, footers, side menus and navigation was a nightmare for me at first. I just didn’t get it.
However, a few days ago I had to work with a layout that was created using tables. I looked at the source, face palmed my head, and dreaded the misery of working with it. There was no rhyme or reason to the syntax. It was total chaos. Then, when I had to create a similar page using the exact images, just adding different dynamic content, I was able to quickly re-make the page. The source was smaller and easier to read and work with. I had to incorporate content and styling from other parts of the website. I easily added the links to the needed CSS files, called the exact same rendering methods, and it worked perfectly. Super simple and easy.
We rolled the new content live, and we had a situation. Wonderful Internet Explorer 6 & 7 had issues rendering both pages, the table based and CSS based. I spent 2 hours trying to figure out the issues with the table based page. I couldn’t figure out where the extra space was coming from. I finally got it to the point where it didn’t look “bad” but it wasn’t 100% fixed. I then looked at the CSS page, and within 10 minutes I was able to solve the problem. I sat back in awe, and pondered the wonder that had just happened. I had converted, 100%, to using CSS layouts. I couldn’t imagine doing it any other way. There are appropriate times to use tables, but only then do I use them.
Why the Long, Hard Conversion?
Control – It is really, really simple why I had such a hard time switching over to using CSS for layouts. I had much more straight forward control over my layouts with tables. Yes, they were a pain to maintain. Yes, the source looked at total mess. Regardless, I could easily control every aspect of my layout. 100% height? No problem! Align text to the bottom of the cell? Piece of cake. Center stuff? I could do it blindfolded. While the source of tables might stink to edit, the concepts were very, very simple. After playing around with table layouts for a little while, you could learn all the tricks and understand the concepts. Even if you had a bug or problem, 99% of the time the solution was obvious and straight forward.
CSS on the other hand is a complete beast to wrap your head around. Especially if you had lived with tables, like I had, for years and years. With tables, there is little theory. You just make grid like layouts and go. CSS has a lot of principles you must understand before you can really use it. The box model, positioning, floating, etc. It can all be very complicated, and frustrating when it doesn’t work. Many times when my layout would break, I didn’t know if it was a browser issue, or maybe I had an error on my side. How do I fix it? I have to search over and over again on the internet, and there wasn’t a single place to find answers. Many times I would have to comb through results from forums, blogs, and articles to find my answer.
How I’ve Mastered CSS
I’m proud that I’ve finally been able to embrace and benefit from CSS. It has enabled my web development to be faster, cleaner, and more efficient. There have been several things that have helped immensely, and hopefully they can help you too.
Step 1: CSS Mastery by Andy Budd
This book is a must for every single website designer. It has the perfect balance of technical knowledge, real application, and great examples. It isn’t very long, and can be read in a few hours. It covers the basics & explains the principles, and is a great reference always. However, the best way I can describe what this book did for me is this: before, I felt guilt tripped into using CSS. Viewers with accessibility issues would have a difficult time. My HTML wasn’t “meaningful” but a jumble of tables and mess.
However, after reading this book, I preferred to use CSS. I saw all the advantages, I understood the principles, and I knew how to make CSS work for me. This book was better than any other tutorial, documentation, video, etc that I had ever used. I walked away feeling like I could actually use CSS.
Step 2: FireBug
If you are a web developer, and you do not have FireBug, you are in the stone-age. FireBug is a debugging tool that is a add-on for FireFox. It allows you to visualize and follow exactly how you’re CSS is being executed. See how much space a DIV tag was taking, and see it’s properties, and the different CSS statements that gave it it’s properties was a break through. I would say 90% of my CSS issues and bugs can be solved by using FireBug. Of course there will be IE bugs that I can’t use FireBug to solve, but it a million times better than not having it at all.
Also, have FireBug enabled all the time. There are many times where I’ll see a website with a cool technique and analyze how they do it using FireBug. Its a great way to learn new things.
Step 3: Cold Turkey w/ Small Project
The next step for me was going Cold Turkey on a small project. Why cold turkey? (Cold turkey is a saying that means to make a change instantly, and not slowly change over) It is painful, but forcing yourself to use 100% legit CSS makes you learning the techniques for using CSS well. Why a small project? Trust me, it will be very, very frustrating. Your small project’s design shouldn’t be overly complicated. Keep it simple. A great way to start is simply creating a personal portfolio website, 5-10 pages, and use 100% CSS. After getting the hang of it, gradually start working on large projects. Make a new blog theme, or incorporate CSS in all of your work. Eventually, you’ll find yourself using CSS more often than not.
Step 4: Make Designs CSS Friendly
With tables, I had total (while chaotic) control over my designs. You can also have that same control with CSS, but its takes different techniques, and often the more crazy, the more likely a browser will make it look bad. This was extremely frustrating for me as a web development. Make your life easy at first by making CSS friendly designs. If a design used to require 6 nested tables with many width and height definitions, setting the backgrounds to each one to make an effect look just right, it is probably over complicated, and unnecessary. Make your design easy to implement in CSS at first. You’ll find yourself making cleaner designs, and after you get the hang of it, you will start designing websites with CSS in mind. Instead of seeing grid frameworks with tables, you’ll see DIV tags.
Step 5: Keep Notes on Bugs & Solutions
Last, but not least, make sure you track the bugs you have, and your solutions to them. You’ll find recurring problems that you always will face. How to get 100% height, how to solve box model issues, etc. If you’re good at documenting problems & solutions, you’ll find that down the road you’ll rarely run into a problem you haven’t already faced. CSS has it’s weaknesses, but you’ll know how to overcome them. I personally need to do better at this step 5. I swear that once every 3-4 months I have an issue with unordered lists and IE6. You’d think I would write down the solution?
Step 6: Validate, Validate, Validate!
Many times a “bug” with CSS isn’t actually a bug, but you using it wrong. Typos can cause drastic affects, yet may not be apparent where the typo is. Services like W3C’s Validation tools make life easier. I know its frustrating when it spits back 27 errors, saying you’re doing it all wrong. However, if you get in the habit, validation will soon become a great tool and not a burden.
Step 7: Don’t Look Back
Once you start this journey, don’t look back at how you used to do it. Forget table layouts and it’s unreadable markup. You’re better than that! Trust me, I know how frustrating it can be when you don’t understand why your layout isn’t working like you want it to. I was in your shoes thinking “I will never, ever use and like CSS.” But I’m telling you, now I can’t stand the old methods. I cringe when I have to use a table for non-tabular uses. It is possible to love CSS! The more you revert to old table layouts the more you’ll struggle to convert to CSS.
Conclusion
I’m glad I’ve suffered through the torment of learning and mastering CSS. While I wish the learning curve for me hadn’t been so dramatic and difficult, it has paid off. Now that I have well formed XHTML documents with valid CSS, I can do all sort of things using JavaScript and jQuery, and do it quickly and efficiently. If you find yourself struggling, I highly suggest following my steps. I promise, it will pay off in the end. To be 100% honest, I still am totally shocked I’m a CSS fan now. If myself from five years ago could see me to day, that Justin Carmony in the past would be in utter disbelief.
Justin Carmony 