Web Design by Sheriar Designs: Impeccable Code | Beautiful Design

This morning I received an email from someone who reads my blog. He asked, “Can you send me some links to help me become a tableless design guru? My group uses nested tables everywhere and I want to be the catalyst for change but … I am not up to par yet.” I have had some form of this question posed to me numerous times and, I’ll admit, I’ve been rather derelict in responding. So if you are one of my readers who have in the past asked me for links, books, or other recommendations on how to master CSS then please forgive my non-response. I applaud you for wanting to move forward and for your thirst for knowledge. I really do apologize if my lack of response presented you in any way with a little speed bump on your road to Web Standards.

The reason that I haven’t responded in the past is that, quite frankly, I felt overwhelmed … because I really didn’t know where to start. Sure, there are some pretty good books out there, and sure, there is quite a long lists of blogs that I try to visit regularly – and I will tell you what these are in a moment – but the truth is, at least for me, I had to pretty much eat, sleep, and breath CSS for a while before I even began to feel like I sorta kinda knew what I was doing.

So, how exactly do you eat, breath, and sleep CSS? Well, I can only tell you what I did …

First, Read Relatively Absolute

Relatively Absolute is the article that made a light bulb go off in my head and I thought, “Oh! I finally get CSS positioning! Wow … it actually wasn’t that mysterious after all.” Really, it changed my coding life. All kinds of possibilities opened up for me after reading it.

Read Some Books

There are good books out there, and more and more are being written. I’ll admit, though, that the only two I’ve read personally are:

• Web Standards Solutions and
• The Zen of CSS Design

Both are excellent. Buy them immediately. ;o) Others that I would probably read (or would have read when I was just starting out) if I had the time are:

• CSS Mastery
• Bulletproof Web Design
• Eric Meyers on CSS and More Eric Meyers on CSS
• Designing with Web Standards
• HTML Utopia: Designing Without Tables Using CSS, 2nd Edition

Even Better … Read Some Blogs

I haven’t read too many books on CSS, but I do read a lot of blogs. When I was starting out I read them constantly. Reading CSS articles and blogs was what I did at night for fun. Here are a list of some of my favorites. I have always been loathe to post them because they are mostly the same ones that everyone posts and I feel annoyed sometimes by the “celebrity” that these blogs enjoy. It irritates me because I may post a really in-depth tutorial and get 3 comments, but one of these “A-listers” posts about the pastrami sandwich he ate for lunch and he gets 50 comments. Grrr. But, I digress … this is what I read:

• 456 Berea Street
• A List Apart
• Andy Budd::Blogography
• Authentic Boredom
• Dave Shea’s mezzoblue
• Jason Santa Maria
• SimpleBits
• Site Point
• Stopdesign
• Veerle’s Blog
• What Do I Know
• Wisdump
• Vitamin

That should be enough to get you started.

Now Just Do It … Commit To Leaving Tables For Layout Behind

I don’t know about you, but the only way that I really learn anything is by doing it. So just do it – make that commitment and stick with it. Easier said than done? Yes and no. Say you want to have a two-column layout with header and footer, a few floated images, maybe a pull-quote and such. Go and find a nice example of this structure done in CSS – the simpler the better. There are tons of resources for CSS layouts, and I don’t have the time to hunt them all down – but you can. Look under the hood at the XHTML and CSS and see how scary it looks (view the source to see the XHTML, and follow the link to the CSS file in the head to get your hands on the CSS). I know you can find one that’s not too frightening. Now, copy the structure (of course, don’t copy graphics or content or any of that stuff) and try to replicate a simple version on your computer. Once you have that working, you can start experimenting with embellishing.

Learn To Be A Champion Debugger

If there is one skill that will help you beyond all others it is this. Learning a few simple debugging tricks can save you loads of time, not to mention sanity. Here are some of my favorites:

• Validate: validate both your XHTML and CSS. Often problems lie with malformed code and can be relatively easily identified.
• Borders: “border:1px solid red” is my favorite. Put this around elements you are having a hard time with to see what is contained or not contained within it. Putting borders of various colors on all the elements that are interacting and not doing what you want can be immensely helpful.
• Background Colors: “background:red” is another favorite of mine. Backgrounds work much the same as borders, but sometimes one is better than the other … or a conjunction of the two.
• Narrow down the problem. Sometimes you are working forever tweaking your code, and you are tweaking the wrong code. Comment out 1/2 your style sheet. Is the problem still there? Then you know which 1/2 contains the problem. Comment out 1/2 of the remaining styles. Still got that problem? Continue doing this until you find exactly the code causing the problem. Now start tweaking.
• !Important: If an element isn’t taking a new style (color:green for example), add an !important declaration and retest. (Of course, use Firefox rather than IE for this, as IE doesn’t recognize the !important declaration). If your text is now green you know the problem is that you haven’t been specific enough. You may have said “#maincol p {color:green}” but somewhere else it says “#container #maincol p {color:blue}” … it is more specific. Either add that #container from the one that lacks it or take it away from the one that has it. Then remember to remove the !important … in most cases, it should only be used for testing specificity.
• Reset the global margin and padding for all elements to zero. (* {margin:0; padding:0}) … many times, it is the difference between default margin and padding values amongst browsers that causes maddening inconsistencies. If you reset all of these values to zero then you control them, instead of the browsers, when you set them.

Ask For Help

Ok, you’re trying, but you can’t get something to work (or, more likely, you just can’t get it to work in IE), something crazy is happening when you try to float things, page elements won’t obey your stylings, or a myriad other mind-numbing problems are occurring. Don’t spend a day maniacally fiddling with the CSS and banging your head on your desk or crying. Instead, do this for about 2 hours (it is important to try – you’ll learn a lot this way), but then go ahead and ask for help. When I first started, the Web Standards Group and, to a lesser degree, CSS-Discuss were my best friends. Those places can be like miracles for the struggling Standardista. You post your mind-numbing problem (make sure to be clear and post links if you have them) and inevitably some guru will come along and out of the kindness of her heart she’ll lay some amazing knowledge on you that makes you feel like a peon, but you’ll be so grateful. You’re going to have to do this a lot while learning. I did.

Accumulate Tricks

When you’re just starting out, you don’t have a lot of tricks up your sleeve. Don’t worry, in the frustrating months to come you will accumulate a lot of them. The first time you encounter a browser bug it can make you nuts, but after some head banging, some research, and some help you discover that your bug has a name, and that there’s a way to address it. File this information away – if you don’t have the best memory for these things then start a list. Next time you encounter this bug you say, “Aha! I know you! You’re the double float margin bug (or whatever) and I know just what to do about you!” Once a client called me in desperation, his team had been pulling their hair out because none of the links on their pages were working in IE. They couldn’t imagine what had caused this and had tried every form of debugging they knew how to do. They were at their wits’ end. I immediately asked, “Are you using a transparent png as a repeating background? If so, is it taller than 1 pixel?” My client was excited … yes, they were using a 20 pixel high repeating shadow background. I told him to cut it down to 1 pixel high – that would do the trick. And, of course, it did. He was thrilled and called me a “CSS Maven” (which thrilled me to no end). But all I had really done was remember the solution I had finally found to the same exact problem when I had had it a few months ago. Being an “expert” is really just accumulating experience and drawing upon that experience.

Getting Over The Hump

Converting from deeply ingrained old-school habits to Web Standards isn’t easy. I’ll be honest with you, there’s a steep learning curve. The good news, however, is that there are more resources available to you now then ever before. One day you’ll find out that you are over the hump. I woke up one morning and realized that I hadn’t been on the discussion boards asking for help for about two months. I realized that in most cases, when a problem came up, I knew what to do. That was a nice morning.

Finally – Give Back A Little

Remember all those awesome folks who helped you out along the way? Without whom you would have missed a deadline, disappointed a client, or perhaps hurt yourself in your frustration? You can be one of them now. Go ahead and troll the discussion boards that helped you so much once in a while and offer some relief to someone struggling with that bug that you know so intimately now. You’ll feel good about yourself, believe me.

If you really enjoy sharing then start a blog! One thing that has really, really helped me refine some of my processes is writing about them. When you write to teach others, you reflect in a way that you don’t, or often can’t because of time restraints, when you are coming up with these processes in the first place. I am almost always able to simplify and refine my code when I blog about it.

Best of luck to you all … see ya on the discussion boards. ;o)

This entry was posted on Wednesday, August 2nd, 2006 at 12:24 pm and is filed under CSS, Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.