7 ways to master the art of tableless web design
So you wanna master tableless web design, eh?
The best way to move forward and nurture your skills is to set goals, preferably daily. If you practice patience and take consistent steps in the direction you want to go, you will get there.
To help you along your path, here are seven simple ways to move in the direction of mastery in tableless web design.
1) Keep a record of layout problems and solutions
I talked about this in the video that accompanied The Ultimate Hand-Coding Toolbox, but I think it’s important enough to share again. I used to keep a Word document on my desktop and whenever I ran into a problem with a layout, I typed up a description of it. Later, when I found the solution, I wrote it underneath the problem and added the date. It wasn’t long before I had a tool that was more valuable than any I could’ve imagined.
- It’s a collection point for answers
After you work with CSS enough, you begin to realize that a lot of tableless web design is problem solving. In a month or two, a document like this can be one of the most important tools in your arsenal.
- It’s a record of your journey
When I look back at some of the problems I struggled with, it’s almost comical. Certain issues with CSS layouts would’ve throw me for a loop back then, but the solutions come as second nature now. When you see your development in concrete terms, it motivates you to push on and keep learning.
2) Build the framework for a different layout every day for 30 days
I like to write short stories in my spare time, so a friend bought me a book called What If?. It’s a collection of questions and partial statements designed to kick-start the writing process. A comparable idea in tableless web design is the free-thought layout. No need to slice and dice a Photoshop file. Just open a blank document, throw in some div’s with background colors and borders, then try to create a simple layout. The more you play with wire-frames, the easier it gets to build the real thing.
3) Use an unfamiliar CSS property or XHTML element in every layout
Better yet, try to work through a list of properties and elements alphabetically. It’s similar to how you add words to your vocabulary. You could read those “word a day” widgets for years, but until you interject new terms into your conversation and writing, it’s just an academic exercise. The same goes for XHTML and CSS.
4) Read a new book on tableless web design each month
…and then apply the material. Untold numbers of people buy books and never read them. (I do it myself, a lot.) But to get a return on your investment, you need to read from cover to cover then take that extra step and use what you’ve learned.
Here are a few books I’ve had on my shelf that are well-worth your time:
- Bulletproof Web Design
Dan Cederholm is one of the top dogs in the tableless web design world, so you’d be wise to tune-in when he teaches. Bulletproof Web Design is a classic. - Hand-Crafted CSS
Another from Dan. He uses a case-study approach here that brings the material to life, and the techniques are timely. - Designing With Web Standards
Jeffrey Zeldman is another major player with a lot to share, particularly when it comes to standards compliance and clean code. - Don’t Make Me Think
Kind of dated, yet still worth a read so you never forget that the visitor always comes first.
5) Work with unfamiliar tools
Complacency is the enemy of study. Step outside of your comfort zone on occasion and see what other tools, tips, and tricks are out there. If you build tableless websites from scratch, try a What-You-See-Is-What-You-Get (WYSIWYG) editor and vice-versa. You could stumble onto a setup much better than what you already have. (That’s how I found most of the tools I use.) At the very least, you’ll learn to adapt and problem-solve more quickly.
6) Help those in need
There are countless groups and organizations that could use your help to craft a fresh online presence. Non-profits, little league teams, or maybe your niece’s Girl Scout troop. Because they don’t have much money, their websites are typically the web-based-generator type. It’s the perfect opportunity to show them what you’re made of, even if you’re just getting started with tableless web design. Plus, donating your time can be a good excuse to stretch out and try new techniques.
Just be careful. You need to set clear ground-rules from the start so a kind-hearted gesture doesn’t turn into a full-time occupation.
7) Share what you know
Tai chi and qi gong are my passions, but it wasn’t until I taught other people that I realized how much I knew and how much more there is to learn. Sharing what you know makes it tangible and forces you to see your ideas from other angles. In the end, both you and the people you teach are better off for the experience.
How about you? How did you learn the ins and outs of tableless web design? At what point did you realize that you had it mastered? Or do you? Let us know in the comments.
About Jason Garrison
Jason is a freelance web designer and developer who has a healthy obsession with web standards. When he’s not knee-deep in code, you can find him in a meditative state communing with the universe.
8 Comments
Great article. I love the way this comment section is laid out.
#1 is a really good idea…I’ll have to give that a shot. Also seems like it’d serve a secondary purpose towards #7 as a way to keep track of useful things to pass along to others (via blogs or something like that).
Nice post.. Really liked your “Did you enjoy this post?” section!
Good read. Lot’s of ideas to take on. It’s funny though, I’ve always been intrigued with tai chi and qi gong. Haha, that caught my attention more than the rest of the post. =P
Thank you for the ideas. Nice Post. Especially the tai chi thing. :)=
really nice touch, and I’m not talking only about this article. nice perspective and strait to the point , this are my kind of articles: quality , quantity and a professional perspective.
keep them coming!
Have a nice day,
Sergiu Naslau
ps: don’t put a time limit to the comment sections.
I wish I would have been more organized and dilligent in keeping organized notes about what tricks and techniques I had to use over the years to make Internet Explorer play nice with my CSS layouts. I have largely relied on memory, which of course is not the most efficient way to go!
Good article, may be we must focus on CSS hacks to make all the layout more compatible with all the browsers… the width and height property which are rendered diff’ly in IE and Mozilla is a major problem….