Justin Carmony » Books

CSS – I’m 100% Converted

Justin Carmony — Thu, 08 Jan 2009 06:01:35 +0000

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.

PHP 6 Books – Did I Miss Something?

Justin Carmony — Tue, 23 Sep 2008 02:46:30 +0000

Update 01-21-12: since I was contacted by the Author of one of these books, and a few years have gone by and I’m more familiar with the publishing industry, I was unfair to place blame on the author for the decision to market these books as PHP6. Authors have almost no say in how their books are marketed. Thus, the blame for these types of tactics, rest solely on the publisher.

On a side note, it is now 3 1/2 years later, and we’re only on PHP 5.3 with 5.4 coming out. Still no PHP 6 on the horizon.

The other day I was walking down an isle at Barnes & Nobel and I a two books caught my attention. PHP 6? Did I miss something? I opened each book looking for something that said “PHP 6 is still in development” or “future technology.” No such luck. They each just looked like PHP 5 books with PHP 6 slapped on their cover. Looking at PHP’s wikipedia page, I verified that PHP 6 doesn’t even have a release date.

After looking at what version 6 will do for PHP, I guess these authors can get away with it. PHP 6 is really just cleaning up some of the legacy problem The only reason I can see for labeling a book now as “PHP 6″ is to sell copies to unknowledgeable consumers. People who think 6 is better than 5, which it is, but they don’t state PHP 6 hasn’t been released yet. I’m sure these “fast and easy” web development books are pretty basic and not very good. It just makes frustrated with some authors who sell books just to sell, instead of making really good books. I think this is very misleading.

Anyways, back to watching Heroes…..

Web Design & The Cookie Jar: When Dealing with Clients

Justin Carmony — Tue, 16 Sep 2008 20:34:57 +0000

I saw this YouTube video and I couldn’t help but post about it. Here is the video, and I’ll add my thoughts at the end:

I’ve seen this happen so many times it isn’t even funny. You have a company with dozens of individuals giving their input on how something should be designed. As in the video, the end result is usually the same: a product that doesn’t accomplish it’s goal. This is what I call the “Cookie Jar” effect, when you have too many “hands” in the cookie jar.

The Problem

Each person involved in the situation has their own goals, ideas, and motives. When designing a company website, each person could easily say “I want to make sure my department’s product is on the front page!” The front page is also a huge breeding ground for debate, seeing as how each person wants a piece. However, if you try to cram each goal in, you’re going to get a very confusion result.

One example I like to use is ESPN. Now I don’t think ESPN’s web team is bad, I actually think with all the content they must serve and cover, they do a good job. However, if a regular company’s website looks like this, I don’t care who you are, your website needs help.

Where are my eyes suppose to look? Where am I suppose to go? ESPN’s entire front page is designed around the idea that visitors come very often, and they learn once how to get to their content. Once you “drill down” into the website, its navigation and content doesn’t because as over-bearing.

The Solution

The video hit the problem on the head without, even though most people would miss the concept. The #1 solution to preventing an over complex and useless product is: testing. Notice at the end of the video the people had came back and said after testing they wanted a few more changes? Why were they not testing from the very beginning? The entire message of “STOP” was lost due to conflicting goals and unclear direction. If they had make their original sign, tested, then made some alterations, tested, and continued on that cycle this whole problem would have been avoided.

I can’t stress this enough: if you find yourself or your project caught in continuous cycles of debating about how to do things, start user testing.

A book that I highly recommend is “Don’t Make Me Think! A Common Sense Approach to Web Usability” by Steve Krug. It talks about these principles and gives great examples. Hopefully next time you get in this situation it won’t be as big of a headache.