CSS in a Timeframe
When embarking on a journey, it’s typical to first map out where you’d like to go. This way, you can properly prepare for the obstacles you might face, and also for the duration of the journey itself.
Moving from tables to CSS can be a process, wrought with treacheries that you may have never known were there. Pitfalls, quick sand, tar pits and thorn bushes await you at every turn. Why is this process so difficult? Saturation and abundance, it’s that simple.
Separating design and content, usability and accessibility all seem interesting and beneficial to be sure. What about development timeframes? Can using CSS help you save time? Someday, but not today.
Recently, I began a journey to convert a table-based layout (within an application) into a CSS layout. On the surface, this endeavor seemed noble and just, yet I was lacking something vital, knowledge and experience. I’ve been designing websites for quite sometime, yet I hadn’t ever used table less CSS layouts prior to this project. I’d been using CSS simply for styling purposes, namely; hyperlink coloring and a few other odds and ends.
Preparation I began to gather resources to help me in my journey. Looking up information for CSS was a piece of cake, via Google. Also, the Blogging community is a great place to look when you want to see what the buzz is about, and lately CSS is all the buzz (kind of). I also acquired a book “HTML Utopia: Designing without Tables Using CSS”. A friend of mine loaned me the book, and upon investigation on Amazon - it had gotten some bad reviews. This was after I was already into Chapter 3, and had really liked what I’d read so far. Did this change what I thought of the book? No. On the contrary, most people were comparing the book to another book, which I had not read nor had in my possession - so to me the reviews were utterly pointless and irrelevant.
After gathering a plethora of links to articles, websites and forums on the topic - I found that the Internet was saturated with information about CSS. In a bad way. Typically, when a lot of reference material is available on a given subject, it allows the researcher the ability to gather a lot of information quickly. In this case, however, it only hinders the researcher since the “opinions” of many different “experts” vary so greatly. An example perhaps: Fixed Layout vs. Liquid Layout. A fixed width layout is a website that confines itself into a certain pixel range (say 640pixels wide). A liquid width layout is a website that does not confine itself horizontally, but rather expands to fit the width of the viewer’s browser. In my opinion, this is a matter purely based on preference, and should not be up for debate. This debate is not about syntax or hacking or even about good and bad form, just a matter of opinion.
When looking for information dealing with CSS - as a beginner coming from a tabled-world - your looking for articles that will give you information on exactly that, converting tables to CSS. There are articles, sites and books out there that cover this topic, but there is much more dealing with matters of opinion.
Understanding the syntax is not half the battle as with other languages. Take HTML for instance, knowing the syntax is far more than half the battle in its case. If you know HTHML, you can hand code a page in a matter of minutes (simple though it may be). When using CSS, countless amounts of testing, learning, adjusting, tweaking and configuring will need to occur before something looks right. Then, just when you thought you’d learned your lesson you open up IE and your page looks like someone put it in a blender.
What’s the problem!?!?! As I see it, it’s support. CSS is supported by most of the popular browsers; however some of the syntax within a given version of CSS is not. Also, combinations and procedures of CSS syntax may not be supported by a given browser, yet work fine in all others. This leads to the question, what browser do you support the most? Most would say “Easy - IE - it’s the most widely used browser on the planet, so naturally you’d want to support it more than the others.” Even though you may have your facts straight, the plain truth is - that IE does a horrible job rendering a page based heavily on table less CSS based layouts. Another point to remember to is that other browsers are gaining ground on IE fast and I don’t think they will ever look back.
Factoring in the idiosyncrasies of each users environment is not only annoying, but time consuming. Getting back to my project, I actually couldn’t finish it in the timeframe I wanted, and had to resort to using a combination of CSS based layout and tables. Only after the project has been completed am I able to go back and finish the conversion, fortunately on my own time table. Could I have met my deadline if I had read every website and every book ever written on the subject? Not hardly. “Experts” in the field have their fair share of mind-numbing problems, and battling IE for supremacy. Dave Shea [1,2,3]; Douglas Bowman [1,2,3] to name two. There are countless articles available on the subject, and doing a little digging it’s not that hard to find many of them.
Well, what’s next? Where do we go from here? And, How can we properly prepare for the journey of converting a table-based design to CSS in a fast timeframe? Don’t. Start off with a personal project or something small. Perhaps a page within a project even. Doing so will help you get acquainted with CSS before putting yourself “under the gun”. Personally, I have this website to play with, which from time to time I run many different themes on different URLs just to test things out. I also created a small list of items to play with Unorder Lists. Then, I created a small photo gallery which allowed me to play with images, and dynamically created content via a database and PHP. Slowly I am getting there, and hopefully one day I will be able to capitalize on all my experimentation.
If you’d like to start from scratch - I’ve put together a small list of sites that have helped me get into this slowly. Although some of the stuff is below my level, I found it useful to start from the bottom and work my way to the top. I hope you can find some of these links useful, and if you do, drop me a line to show me some of the work you’ve done.
- Guide to Cascading Stylesheets
- W3Schools: CSS - Good for quick reference.
- W3C CSS Validator - If your work is not valid, you have nothing to complain about.
- CSS Links - From all over the web. Good reference.
- CSS Support Grid - Awesome job here.
There are many many others, but these are a very good start if your a beginner. None of the above are too advanced. Remember, if you encounter a problem, many others have also, so always do a search at Google Groups and subscribe to CSS-Discuss to get help from the experts.
In the near future I will be releasing my 4th iteration of a design that I have been working on for sometime for this site. I hope that it will break away from the normal “blog” look, while keeping it’s functionality in tact. We’ll see.
Related sites
Recent features
Leah Andreone - Break Your Fall
Coheed and Cambria - The Velorium Camper II: Backend Of Forever
The Format - Give It Up
Song of the week
Sara Bareilles - Between the Lines
Sara Bareilles' "Between the Lines" is the Song of the Week for April 20 to 26.
Warning: main(images/faq.php) [function.main]: failed to open stream: No such file or directory in /home/.eastwood/cdevroe/theubergeeks.net/wp-content/themes/clockworkorange/sidebar.php on line 119
Warning: main(images/faq.php) [function.main]: failed to open stream: No such file or directory in /home/.eastwood/cdevroe/theubergeeks.net/wp-content/themes/clockworkorange/sidebar.php on line 119
Warning: main() [function.include]: Failed opening 'images/faq.php' for inclusion (include_path='.:/usr/local/lib/php') in /home/.eastwood/cdevroe/theubergeeks.net/wp-content/themes/clockworkorange/sidebar.php on line 119