Why should we use CSS for layouts?
Third Eye Studio (ArtbyUs) asks:
Just curious why are we using css to build a tableless design now... My thought is that it is a lighter and the sites that are built in it will get higher rankings because they dont have to read all the code that tables produce. Am I right? What are the real benefits to spending my time and slowing my production down to learn something new?
My Thoughts:
My first reaction to this question is to ask why you might be resistant to learning something new, especially something that is considered a standard, and will only get more and more popular as the Web grows. By not spending the time to learn it, you're only hurting yourself and your business in the long run, even though in the short run you're spending time you might not have a lot of. But it can be very hard to get enthusiastic about learning yet another technique, when the current methods you know work fine for you. Especially when it seems like more of a fad than something useful.
Some of the reasons I feel that learning CSS for layout is important are:
- It's the standard. While it might not be prevalent across 100% of the sites out there, the W3C recommends using XHTML and CSS to write and design our sites, and that goes for more than just the CSS we understand.
- CSS layouts load more quickly than table layouts. This is because CSS typically uses fewer characters than a table to do the same thing. And even when it doesn't, if you put your CSS in an external style sheet, the codes to style a complex layout are shared among all your pages on your site. The first page to load may take fractionally longer, but after that, every page will load more quickly than a table-based layout that has to reload the HTML for the table on every page.
- CSS layouts are more accessible. While most modern screen readers can read tables, they read them in a very linear fashion, and can easily get hung up on nested tables and other techniques used in table-based layouts. Plus, screen readers sometimes add descriptive text to a Web page, to indicate that they are reading a table. Imagine your page being read "Table cell: About.com Web Design / HTML. Table cell: ..."
- CSS is more flexible than tables. CSS is a language written to define the look and feel of HTML. Tables were written to build tables. With CSS you can control margins, padding, borders, float elements, put them in precise locations on the screen, you can even make text wrap around images and much more. While you can control some of those aspects with tables, your HTML will get very ugly very quickly with nested tables and complicated attributes. You may even end up using CSS on your tables to get the effects you want.
- CSS provides better SEO. Accessible pages are more friendly to search engines too, and since CSS makes pages more accessible, it makes them more search engine friendly. Because the extra code is stripped out and put in external style sheets, the search engines can spider your sites more quickly and are less likely to spider HTML table code as content.
The bottom line is that you can choose to design however you want. If CSS is too difficult for you, then you'll need to stick with tables. But this business changes all the time. If you're not willing to put in time to learning new technology and new techniques, you'll eventually be passed by someone who is.
More Resources
- Change is Good - It's Time to Give Up Your Table-Based Designs
- Web Page Layouts Shouldn't Use Tables
- How to Use CSS to Lay Out Your Web Pages
- CSS Positioning
- Understanding CSS Float
- Free Web Templates: XHTML+CSS Layout Templates
What do you think?
Why did you switch to CSS layouts? How long did it take you to learn them? What would you say to Third Eye Studio about using CSS for layout?
Help out Third Eye Studio (ArtbyUs) and others trying to decide whether to learn CSS layout. Post your comments to the forum.
Comments
Harsh.
CSS may be standard. In some niches, where I haven’t been working, that may mean something. In the mean time, tables work pretty reliably, while CSS takes us back 6 to 10 years and having to program for individual browser releases.
For instance, I can center a web page in a browser window with a table a *whole* lot more reliably with a table than with bare CSS - leaving aside browsers that are non-standard. Sprawl the page the width of the window? No problem. Set the width of the page? No problem, CSS or table works fine. Set the width of the page, and center it? Oops. CSS apparently has some hidden, subtle gimmick that I haven’t found, looking for a couple of years.
There is certainly room for combining approaches. I try every once in a while, learn new things, rely more on CSS all the time. But my clients still entertain visitors with browsers in the Netscape/IE 4.0 era.
And CSS has a tendency to fall apart on a slow connection. CSS may be more accessible, when it loads completely. On a dialup connection, though, some transactions may time out. On a table design, the missing part of the page can usually be recognized. On a CSS, you might lose column position (most common), and your page may jitter and jump, adjusting positions dozens of times as the page loads.
CSS degrades gracefully, as far as content is concerned. But tables degrade more gracefully for appearance - and I don’t want to have to convince visitors why my site looks like a dirty laundry pile, with the latest layer dropped on top.
CSS is not the magic bullet for any particular problem - unless you are working to a contract that requires W3C standard compliance.
Brad: well, I didn’t intend to be harsh.
My point is not that everyone must use CSS rather than tables, but that refusing to even learn how to use CSS will ultimately hurt you.
Once you know how to do it both ways, you’ll be better able to make a judgment call about which method will work better for your situation.
Brad: To center a div in css it is as easy as margin:0px auto;
I don’t know why anyone these days would want to mess with nesting of tables, it is horrible. If you design a complete layout in tables you are basically asking for the project to take twice the amount of time.
With divs it is ten times easier and you can control the look and feel of every page in your site. Say you have 100 pages and you want to change the width of the left column and you embed this in the table tag such as…
<table width=”500″…
With CSS you can change your stylesheet from
.middle{ width:500px;} –> .middle{ width:600px;}
CSS can take a little time to learn and get used to but it is extremely beneficial to any developer.
I’ve got no argument that learning to use CSS fully is essential, simply because it is the written standard and will ultimately be the more reliable approach. But there is no way I can buy the idea that “divs are 10x easier.” With all the flaky browser implementations and inheritance issues, CSS positioning takes a whole lot of patience and learning. Especially if you want to preserve fluidity and scaling in your layouts.
For a lot of us, it isn’t a question of whether we’re willing to learn — it’s the problem of finding enough clear time to study and practice and test while you’re still scrambling to get yesterday’s job finished up while today’s job is jumping up & down for attention!
I have to consider the “benefits” related to SEO to be a bit misleading, too. Search engines have been very successful at separating content from code for quite a long time now — as long as the page can load properly, tables simply are not an issue. The difference in load times, if any, is inconsequential to the spiders. If effective SEO is your primary goal, there are much better things to do with your time than convert to CSS layouts.
Jennifer’s right about CSS. The reality is that the rigid structure that tables provides is less flexible than building a design framework on CSS. Especially when designing pages that may require special handling for portable devices and printing.
The only gotcha with designing “standards based websites” is both IE 6 and 7 still have problems with CSS. IE 7 is an improvement over IE 6, but you will need to put the extra time to work out a handful of IE kinks.
I read the books, and tried switching to CSS layouts about 3 years ago - but retreated back to table layouts, disgusted that something as important as the new standard for web page layout was such a dogs breakfast.
But then I read some more - Charlie Wyke Smith’s book Stylin with CSS for example - and the IE hacks required started to make a bit more sense.
I’ve now done quite a few CSS-based sites (including www.stavanger.travel and it just keeps getting easier - though sometimes it takes a while to work out why the page has gone wild. I would not want to go back to tables now - some of my sites are still table-based, but they’re changing.
If you have the latest dreamweaver, and enough CSS knowledge to know how to change the default code that dreamweaver produces, then go for it now - all too soon you won’t get work if you are “only” a tables-layout developer.
Brad K, above, pretty much expressed my feelings as well. I use CSS for fonts and colors but when it comes to using it for positioning I find the browser incompatibilities to be too frustrating to deal with. I’ve stopped trying until I feel browsers with compatible CSS positioning are more predominant.
I love clean simple code and CSS fits right in to my style. Tables are messy and so redundant from page to page that they go against my grain. But for now they work best for me.
In some ways I see using CSS for positioning akin to running a gas station that only sells gasoline and doesn’t have a diesel pump. Good for most people but leaves a significant segment of the market unserved.
I understand Brad K.’s frustration. If you have to support v. 4 browsers, CSS probably seems like the biggest waste of time around. I’m grateful that my clients are not asking me to support technology from 1999 or earlier.
But the new standards are in place to take the Internet from the mid-80s repository for plain text of its beginnings to the media-rich environment of today, in which the web site you develop may be experienced via a computer screen, a screen reader for the visually impaired, a PDA, or even a telephone. CSS is what makes that possible.
The beauty of web design/development right now is that *you* get to pick what you like doing best in your business, and then arrange it so you get to spend as much time doing that as possible. No sane person would expect to be an expert at all things. But tools and resources exist to make CSS much easier to work with. You can even use subcontractors, if that’s an option for you. You get to choose how you spend your time and still be able to keep up — like coding tableless layouts when you don’t really have time or inclination to learn CSS inside out. That’s what the tools are for, if learning the languages themselves isn’t what makes you glad you do this for a living.
Learning new things is worth the learning curve, especially when it’s a thing that truly does make a difference to people. The increased accessibility and ease of future maintenance are the two main reasons to use CSS, to my mind. And that alone would make it worth learning.
This question is equivalent to asking:
I am really good at riding my push bike so why should I bother learning to drive a car?
The answer of course is that once you know how you can do all the short trips more quickly and go on longer trips than would be practical on a bike.
In the same way, once you learn CSS you can produce the pages you used to use tables for more quickly and so that they load more quickly as well as doing many other page layouts that would be impossible to do with tables.
Steve is right.
Maybe now you are producing nice little one-off sites, maybe using Dreamweaver templates or something similar. But if you ever have to work with a developer that is generating the content for the site you are designing, (s)he is not going to want to mess with colspans, etc. While maybe 3 years ago it was a theoretical standard, now it is the actual working industry standard.
I recently learned HTML and CSS from scratch, to make sure that the website I wanted to build would be accessible.
This was the bottom line. It was hard work but I was not prepared to make an inaccessible site. As a wheelchair user I know how frustrating it can be when people can’t be bothered to consider access needs - online I am not at a disadvantage but many people rely on screen readers and other accessibility features that will not work well (if at all) with tables.
Please don’t say your sites are not aimed at disabled people - we have the same range of interests and needs as anyone else.
Most all of the comments I have read on this subject make valid points. I am only now in the process of learning html, xhtlm and css but I am almost glad I waited until now so I can benifit from learning the basics of both at the same time.
It must be tuff on a lot of you that have been doing web design for years and then all of the sudden everybody says the standard for style is css. I know that would upset me, but I can tell even with as little experience as I have with html, xhtml and css that css is going to be the way to go in the future just as xhtml is or has taken over the standard for html.
I’m astonished that this conversation still happens.
Sure, there are “developers” out there that still build sites with tables. That problem will take care of itself, as business dries up and clients seek talented designers and developers that aren’t afraid of the 21st century.
I can relate to those who are struggling with CSS. I encourage you however to keep trying to embrace it and not fight it. I remember spending countless hours looking over source code from other sites and surfing the net visiting many tutorial sites etc. trying to figure out CSS. Feeling frustrated and hopelessly lost fighting CSS issues I finally purchased Andy Budd’s book CSS Mastery. I promise you if you get yourself a copy of a good book like CSS Mastery (Visit www.cssmastery.com) and start reading the book from the beginning and just read it page by page within a few short hours CSS will really start making sense.
The great thing about a book like this is that it explains how to write good semantic XHTML and how your styles cascade. There are also case studies that guide you through step by step to show exactly how to achieve things like fixed width centered layouts, columns etc.
There are other great books out there that will accomplish the same thing but this is the one that nailed it for me.
Believe me I know it’s difficult to find time I myself have a wife and a 5 year old son along with a full time job that is very demanding. I feel that if anyone who is serious about continuing a career in web design puts in a small amount of time (I sometimes only read for 15 minutes) a few nights a week you will be surprised at how quickly you will get it.
Got luck and try not to get discouraged. We have all had to struggle through it ourselves so just remember that soon you will be on the other side lending advice and encouragement to those that are coming along after you.
If I had it my way, I would use xhtml + css on all of my work. However, sometimes we require our sites to support old browsers; this forces us to use tables for page layout.
Xhtml + css certainly have many advantages. I endorse (external) css because of the benefits of code reuse.
There’s nothing *wrong* with using tables to achieve layout. Sometimes it’s the only way to go — as in the case of supporting old browsers. Hopefully, I won’t be bound by these requirements and can convert these sites to xhtml + css.
In the meantime, here’s some good advice. If you know that xhtml + css is on the horizon, but you are still coding with tables, be as consistant as possible in your coding. Your live will be much simplified during the conversioin process.
css will eventually become the only way to build a site. the advance of internet technology will leave the design to the designers and the code to the programmers. it’s inevitable.
learning css maybe difficult at first, but we can all tip our hats to microsoft for paying little attention to accepted standards. as a programmer, there is nothing worst than making sites work in IE6. but alas, that’s life as a web programmer.
any person complaining about learning css and not having enough time, i understand the frustration, but just be aware that you will always be eating the dust of the people who do. as a person with a strong grasp of css design and content-separate-from-layout practice, learning by example is the BEST way to learn. find a site built using css, view the source, view the css, and DOWNLOAD FIREBUG!
CSS is a great language, a godsend to many Web Designers. Unfortunately, too many PHP applications still depend on HTML tables for their templates.