<< Back Home
CSS Essays : "Moving From Tables to Style Sheets - The Hard Cold Facts"
or "It Ain't Easy, Folks!"
Ok, so you have built some web pages, and have done some web design online. And now, you are hearing all this bru-haha about CSS (Cascading Style Sheets) and how to move from using Tables and HTML to CSS and XHTML without tables. Wow! ....you say. Sounds great! And you have been using styles all these years in some form anyway, so cant be hard to do the whole thing in style sheets? Right!?!.....WRONG!
No, Im not hear to discourage you or anyone. I LOVE this "new technology", or at least, the new "standard" way of doing web design. In the end, its actually saving me time and our company money designing this way for our clients. (By the way, if you are like me, and you end up being the initial "pioneer of styles" at your little design shop in trying to convince people of the benefits of using styles, get ready for the initial excitment but then an implementation nightmare!). Its a great way of working and a awesome way to manage web projects and layouts, rather than having to hand-code hundreds of pages and templates using the old way of doing things....layoing out complex table structures. We all have to admit, great thing about tables is it was so intuitive! I mean, anyone can see a grid of cells in a rectangle and formulate very quickly a structure of where each piece of content should go. Making it work using tables was a little messy, and did have its cross-browser issues at times. But all in all, it was inutitive, and that meant logic and easy understanding of where things went in a page and how to place them there. Not so with style sheet solutions, my friend!
Again, its not my intention to be negative and drive away the pigeons, but many of the problems we are seeing with style sheets, the logic behind it, and moving away from tables, has to do with the fact that CSS is just not inuitive and is not logical in any sense of the word! Sorry, it just isnt. I mean, I should be able to create a page with a header at the top, a content area, with columns possibly, and a nice footer that floats on the bottom. I also should be able to set a basic font size and color and family for the whole page really fast, then set margin for the page, and some basic rollover links and a simple menu. Right? Nope....sorry, you wont be able to get very close to a viable solution that works cross-browser, until you spend quite a bit of blood, sweat and tears. ughhh!
Some of you CSS gurus are probably rolling your eyes, and saying, that you did it and so can anyone. But hey, I ask you all....how many weeks, months, or even years did it take for you to build up your list of little fixes and hacks for your web page solutions using CSS? How many trial pages and tests did you run before you got a working page layout? Maybe, if you are building one of those cool little one-dimensional open-source PHP weblog single column page thingies, and you have found something that works. But Im talking about the business world where most of live and work, where clients and corporations require more complex Microsft-based business portals, or ecommerce product sites listings, or those enterprise level website applications where we know lots of developers and designers will need to interface and reach web front so,lutions quickly and efficiently. Im talking about web shops that are just now learning the ropes of CSS. And Im talking about dollars, folks. Not all of us have the luxury of waking up with a warm cup of coffee and spending the morning emailing blogs about new CSS accessibuility discoveries or debating the benefits of one hack over another. Thos of us in the trenches are having to face the corporate management teams that demand efficiency, competitive advantage, usability, code manageability, contingency, and application viability. Many of the people Im talking about are those web designers who deal with the terribly left-brained (and web challenged) hard core .NET C#, Java, and VB developers who blindly hack out application code built on the HTML "mud" that Visual Studio and Java GUI's create, and have to deal with the complexity of erasing and rewriting thousands of website application pages build around the complexity of non-standardized HTML and web controls and server objects "hacked" together by blind C programmers who think they know web development. Its a real mess folks, and moving to CSS on the surface sounds like a no-brainer, but it just isnt that at all...
So, lets cut to the chase....if you want to move your web shop to the new standard, using CSS, here is what I have experienced. Its only one voice, so like everything else you read online, take it with a grain of salt. But I have done LOTS of experimentation and LOTS of design and client work using the standard, and it has required more from me than any IT learning I have yet experienced (to get a good solution, that is). So here goes....
How to Start Building CSS Websites
- Don't worry about buying books at the book store....all the current work and solutions are being created online. If you want to get a good solid background on CSS, then yea, try a generic book, or better, read what the W3C.org has set forth for CSS on its site (www.w3c.org) or do a search on Google.com for "CSS" and start reading the basics of what most people are doing. Tons to read! Most of all, though, start reading for yourself whats "supposed" to be implemented by the browsers. Over time, most of those "standards" and "recommendations" made by these supporting organizations will in the end, over time, be implemented by most of the major players, but only after quite a bit of pain, and millions of complaints from online users to the poor programmers who still are apparently learning to build better browser applications. So, learn CSS in a general sense, and dont listen to any experts at first. Just learn what most people are doing online in real websites today using CSS, and they will link you to most of the major watershed resources that most of us use online. Just learn the basics and that will, like HTML and tables has for in the past, take you far in this next "evolution" of the web, especially as we move more and more towards XML and XSLT web solutions.
- Browser Hell : Thats right, the main headache for designing CSS is the poor support and the variety of crazy interpretations all the browsers make in rendering your CSS styles web pages. No browser is exempt, unfortunately, though browsers like Mozilla do a pretty good job over the others. How do you address this problem? Well, no matter what anyone tells you, you cannot! So what to do......well.....thats the bad news. You will, like the rest of us, start out with some initial style sheet layouts and designs, and learn the hard way (school of hard knocks) what each browser does and how each interprets different properties and rules in CSS. And thats going to take some months, to get the "right knowledge" and like me, to build the right wrkable templates that work for you. Like anything with code and coding, its ALWAYS possible to get to a point where you have "tenplates", or drag and drop code modules that you cab reuse and work and build upon. CSS, I found took me 6+months working hard at it every weekend to get to a working solutions. After months of testing online and help from various parties online, I was able to weed out the bugs, and apply the fixes and hacks that magically, allow my solutions to work in 99.9% of browsers, offer up decent accessibility, and validate as correct code with the w3c. No easy task my friend. Just when you think something works great in say, internet Explorer 6, it breaks in Internet Explorer 5.5 for PC. Just when you have that working there, IE 5 for Mac has issues, etc., etc. No fret....when you do reach the point you have worked through the problems, just like practicing a new instrument for 6 months straight, you will be able to play yout first tune, and play it well, my friend. And there is a very special feeling you will get when that day comes. You will be able to say you not only have a working CSS solution, but it looks great, loads fast, the client is happy, and you should be able to open up that site in any number of browsers and get a the layout or content you expect. Not always the case with tables! So, again, plan to work through the problems with the browsers...thats the next big step.
- Hacks, hacks and more hacks : (No Im not talking about "hacking" into computers or networks, but adding code to a web page and a style sheet so it displays correctly in a browser!) Yep, as you design with CSS, you will discover the power of the "hack", or CSS tricks that fix various display problems in certain targeted browsers, basically. You can do a search for CSS hacks, and you will find plenty to keep you busy with lots of reading. Plan on huge headaches and a large learning curve....but as above, this too seems to be a necessary part of this CSS learning process. Again, you will walk away with a better solution learning how and why hacks are used in CSS, and as well, will be able to call yourself a "guru" in CSS because of that learning. Hacks and using them will do that to you, whethere you choose to use them of not. I actually was forced to build some of my own....some never before seen and used by the CSS community around the world! Its kinda exciting when you discover a cascading style hack or solution that thousands of others have been looking for themselves. A problem I had with ehight in Safari for Macintoch got my mind towards finding a fix, and so I discovered a hack for Safari that makes my designs sing in Safari now! But as above, dont bypass this step, but embrace it....again, with lots of free time in order to read and learn how to apply CSS hacks that correct probelms in the various browsers used online. Only then will your CSS work in all the browsers, as many are so desparately trying to achieve. No easy task, guys!
- Time Wont Give me Time : Well folks, thats what I said last year when i dove into building a simple style sheet, and learning what styles were and how to use them in web pages. It took time, but that time has paid off, because I now have a prettyu decent undertsanding of something I had no clue of before. Many many people take the approach with style sheets thats its just a matter of adding a pixel font size to a page and your done. Well, thats not correct....its allot of complex things and starts out very simply, so you think. But the more time you put into reading and learning from otheres, exspecially online, the more you will come to appreciate why its so important to put in some major hours learning and experimenting with CSS in your own web pages. Its that time and testing that is the difference! Anyone can cut and past code into a page that someone else built, but very few of us can start from scratch, build our own code, and learn from it. Sure, cut and past code online to learn, but when you build your CSS, type it yourself and get copies of all the browsers and test it yourself, and come up with YOUR solutions. Only then will you have a great working CSS template you can build upon for all your future web projects, but when problems come up in client projects, which they ecrtainly will do, you wont be sitting there like a deer caught in the headlights, dumb and blind as to the problem or a solution. Thats so much the case with so many designs I chat with online in many of the various lists Im a member of. There are a whole lot of people that just havent put in the thorough and cautious exploration of the technology, enough to find a solution. Many will write a CSS guru and get a solution, but never know why it works, so will re-experience it again and again until they have taken the time to learn it and do it them,selves. You may skirt the time required to learn CS now, and get your project out the door, but I PROMISE YOU, you will put in that extra time later at some point when the same browser or implementation issue raises its ugly head in a new project....one where you never elarned the reason why something happened in the first place. I found that out the hard way, after I finished my first CSS project, which took quite a bit of time to get a good working model. Site looks great, anmd I learned allot from the hours I put into building it. But.....because I still had so many holes in my mind as to which CSS properties were affecting others in which browsers and why, I was unable to "cut-and-paste" any of that code for the enxt project opr the enxt, as I still never took the long hours needed to understand everything well, and then build a very careful set of templates that are reusable and expandable for other projects. It also meant that until I took the hours to continue my training, I wasnt much help to my design crew. But now thats Im over that hump, and having spent hundreds of hours the past six months learning all the subtle nuances of CSS in all the browsers, when a designer or developer comes to me with a question, I often have the answer, no matter how complex in ends up being. Thats not bragging....thats just the facts as to what it takes to know this technology. Why is it that way? Because, as above, the browsers are so bad at supporting CSS, and the W3c has still left open so many questions. Thats why! Its up to you to know all the answers, and even read between the line, unfortunately. You WILL design GREAT CSS PAGES once you reach that level.....trust me
- Finally, the Solution: When you have passed through to the "other sode", or from tables to understanding teh full "mess" that is using CSS in modern browsers today, you will begin to see the power of "tenplating" When I say tempalting, I mean, taking teh time to design some large global CSS style sheet architectures, page layouts, and code that you can reuse in all your projects. Hey, a font size is a font size, and a floating div column is a floating div column. Building variants of that core style code is easy once yuou have a template or module thatw orks in all the browsers. Taht was my big disvovery in this process. While my comrads online and at work "hacked" together solutions that halfway worked, some of the time, I took the time to build great solutions that work in a huge variety of browsers and agents, and the results was some exciting templates that are now supporting a number of clients...and that number is proving great sucess! Is that easy? No, as you read above. But Im justa big fan of what works ALL the time....not "hacking" together patches of code that work some of the time. Taht startegy seems to work VERY well with CSS solutions. As an example, Ive se[parated out separate style sheets for version 6 or greater browsers, and all older browsers get simplere styles that work for them. Those sheets can be pasted into any web project and allow that project to show clean semantic text in that tiny percentage of browser users who choose to use such cryptic browsers. I also have built layout sheets that make a page "flexible" and "frozen", and those two contain columns and header and footers that can be customized for virtually ANY layout need online. Is it easy....HELL NO!!!! Its allot of work, qwith much failure at first, because of the browsers. Sure, you can build something that kinda works or works good enough. But if your pages are about being viewed by EVERYONE online, then you will ahve to do the exaustive testing required....period! But the "final solution" and best reward for such work is building something you may never have to invent again. Sure, new browsers will arrive, but your code base and knowledge bnase will be able to handle it and know what to add andf what to remove, if you are working from styled templates, rather than a hacked together solution you and a bunch of develoeprs patched togetrher to meet a deadline. My recommendation, if you want a truly "final" solution you can build upon and reuse in all your projects, no patch together solutions, build the final solution and a template that will work all the time, and consitently across projects and for years to come. Yes, its possible!
- The Learing Never Ends : The Story of the Turtle and the Hare! Thats right....you thouht you could rest on your laurels. Well, mayeb a little. Yes, thats the whole point in putting in long hours and work on anything. Enjoy the fruits of your labels when you have built your CSS templates and are implementing them and building upon them in all your web projects. But just remember, that CSS is evolving and it will be getting much bigger and more involved as XML evolves. Prepare to see lots of power with your CSS knowledge as the W3C begins to push newer and better implementations. Unlike HTMl and tables, this stuff is here to stay folks, and its going to get involved, more complex, but more exciting. As the browsers finally come together on good CSS implementations (ie. Internet Explorer 7?). expect newer properties and tricks for CSS to come forward. Because you have taken my advice and put in the hours to learn CSS well and build solid and thoroughly tested CSS templates for your web projects you will be at a HUGE advantage over other developers and designer. Im already seeing that with my code. Projects go smoothy, more quickly, and we dont get any calls back from clients. No debugging occurs with our web projects, and as we add the newer stuff, and take the time to learn it "correctly" (not rushed or "hacked together), we are buildy a CSS Temple of StyleLight, that is truly beautiful. In other words, because I have implemented a good template, then an attitude to continually learn newer and better stuff, thats thoroughly tested before implemented into our projects I manage, we have begun to build very elegant solutions with CSS that with every project build our knowledge and the quality of the product with the client. When you rush a project to market and skip the testing part and the quality, and the learning, and the knowledge ends, you are doomed with web design, especially with Cascading Style Sheet solutions! I have elected to take things slower, and so should you! The power of the tale of the turtle and the hare, where they are racing, and the turtle wins the race (Eosop's Fables), shows that those who steadily aplly good practices in the race to win, will ultimately win. And learning and continually building on your CSS knowledge is definately the way t go. Again, dont let managers or developers convince you you are done with CSS and move on to the next skill. CSs i a subtlely complex skill that you need to contantly tweak to get good at. Thats been my experinece and so it should be yours. If you think you canbuild something cool, and you know style sheets, wow, will you be disappointed. Your viewers of your sites will tell you that when something looks funny or breaks.....dont worry, the process of users using your websites will teach you that. Dont stop learning!
Thats just the beginning folks, of a very good CSS journey, you should take. You wont regret the extra work and extra learning later, but will appreciate these words of wisdom and sage advice from an old warrior battling for you and battling for good CSS design. Dont let those crazy managers and web develoeprs make a mess of your work or your goals. Put in thetime to do it right, explore every nuance avaialable with CSS, and continue learning, and you will go far, my friend! And in the process of it all, save yourself (and your company) lots of money later when you demonstarte the new powers you posess with good web page design and struture!
- Mitchell Stokely, USA
