12 Lessons for Those Afraid of CSS and Standards

by Ben Henick

58 Reader Comments

Back to the Article
  1. What does selecting fonts have to do with HTML tables?

    OK, maybe I didn’t write very clearly. It was in response to the comment that CSS offers nothing beyond system fonts (which is utter rubbish) with the implication that a table-based page written purely in HTML is better. It isn’t, on so many levels.

    Copy & paste the code below to embed this comment.
  2. “Web pages are not about pixel perfect rendering.”?
    I’ve tried telling that to a couple prospective jobs and they thought it meant I was a bad web developer.

    It’s hard to do, but sometimes you have to try to educate your clients. If they have design skills, these are likely to be print-orientated, rather than screen-orientated – but often, they won’t know much about design at all.

    The fact is that it is not possible to get a pixel perfect layout that gives an identical rendering across all platforms – but that doesn’t matter. What is important is that each rendering gives an aesthetically pleasing website with the appropriate content and branding. How many customers are going to compare the website on different computers to see if it looks identical?

    Copy & paste the code below to embed this comment.
  3. In the real world not many people want to pay for your CSS indulgences especially when our competition in south Asia is churning out sites with nested tables within nested nested tables for peanuts. And you know what? They work — at least until somebody has to maintain them but that can be an issue with CSS and standards compliant sites too.

    It depends – you can have it cheap and quick and of limited use or you can have it efficient, effective and easy to keep going. In the long term, a table-based layout is going to be more expensive, because any redesign (or even rewording) is a mammoth undertaking, whereas with properly structured CSS it is a doddle.

    And that’s even before you look at the savings on bandwidth costs or the increased sales that can be generated by a page that everyone can access quickly.

    If businesses are only going to look at the costs this month, then yes, a CSS-based design may be slightly more – but if they have any concern at all about the sustainability of their website, CSS ought to be a no-brainer.

    Copy & paste the code below to embed this comment.
  4. I started web design seriously about a year ago. When I first started designing I used all XHTML and tables for the layout of my designs, which I also did recently for a client also. I find it hard to design a website using just CSS for layout due to the fear of having it look differently in current and older browsers. But I have to admit that I’m a big fan of CSS in alot of ways, so lately I been putting extra time into using CSS more. Does anybody else have this fear?

    Copy & paste the code below to embed this comment.
  5. I think the first steps in HTML are always done without CSS and with using tables. And as you learn more you learn that almost every layout is possible that way. And after some weeks, months or years of developing web pages someone comes along and says CSS layout is better. And, yes, he’s right! But starting with the old style and then switching is the tough part. So the beginner tutorials should start with CSS right away as the normal way to layout your pages.

    Copy & paste the code below to embed this comment.
  6. When I first started to learn about layout I learned CSS before I learned tables. But because my g’f used tables alot I decided to give it a try. I also did find out that clients wanted websites built fast and as cheap as possible. Alot weren’t interested in whether CSS is more powerful or easier to update, or about web standards. First thing they ask is, what’s the cost going to be. How can a designer make standards based sites with all the competiton out there?

    Copy & paste the code below to embed this comment.
  7. I also did find out that clients wanted websites built fast and as cheap as possible. A lot weren’t interested in whether CSS is more powerful or easier to update, or about web standards. First thing they ask is, what’s the cost going to be. How can a designer make standards based sites with all the competiton out there?

    I know I keep banging on about this but what you have to stress to your clients is the long term cost. If a client will want their website updated – either the content or the style – then it will take longer, and cost more, if it is written in table-based tag soup.

    For clients who know little or nothing about HTML, it may not be easy to convince them of this. But if the competition is only quoting an up-front price, and is being hazy about ongoing costs, it’s likely they are trying to hide something.

    You owe it to yourself, your clients and your industry to encourage people to commission sites that are well-designed and follow the standards. At the end of the day, sometimes you may need to sacrifice your principles rather than sacrifice a sale, but every time you do that, you make it more difficult for the next time.

    Copy & paste the code below to embed this comment.
  8. Hi,
    well, i do surf with stylesheets but without graphics! I do this while surfing at work. And this for a simple reason: It produces less traces in the corporate log files. Every single file loaded produces an entry in the corporate log. So surfing without graphics reduces the amount of log entries to about 20%, which is quite much. So from the corporates view this is me surfing 80% less :)

    Copy & paste the code below to embed this comment.
  9. I recently built a website for a client that wanted a website as cheap as possible. My original goal was to build a website using nothing but CSS and XHTML. I was going to create some beautiful but fast loading graphics, and use a form along with providing his e-mail to make it very easy for visitors to contact him on his site. Well, it didn’t work out that way at all. He wanted the website very fast and wanted to pay almost nothing. He also insisted that it be as simple as possible. What he ended up with was an extemely simple site that ended up costing him only $500. You can see this site on my website portfolio.

    Copy & paste the code below to embed this comment.
  10. Lesson 2 is something I might carry round with me to show clients at meetings. I’m happy to say that I generally know when to let lie.

    Great rest of article too. I can definitely associate with almost all your points.

    Only thing I would disagree with is Lesson 9. I feel stylesheet hacks are unnecessary. I think it is definitely a better solution to use conditional comments. I don’t think I’ve come across a case that can’t be solved with conditional comments. And I feel a lot better about the impending welcomed approach of IE7.

    :)

    Copy & paste the code below to embed this comment.
  11. I remember writing my first CSS page some years ago. It was a pain, especially since IE and Opera behaved quite different with the margins and stuff. But I fought through that and converted a whole site from old style table layout to a CSS one. After some more sites I finally found the new style not only better, but also faster to implement.

    Copy & paste the code below to embed this comment.
  12. I’m sick of having to consider IE bugs when developing a Web site. I had my hopes on IE7 but I was disappointed yesterday when I found that it stills doesn’t work. Isn’t it time that we stop worrying about it? I think most users would start to use better browsers if most pages didn’t look good on IE.

    Copy & paste the code below to embed this comment.
  13. Thank you for this support.
    It’s clear, concise and helpful.

    Copy & paste the code below to embed this comment.
  14. Thanks for the article Ben. I’ve been teaching web design for around 10 years. Your article rings bells for me as I’ve wrestled with CSS in the same way, over the same period as you illustrate. For me the struggle is in teaching it to students, with a varied range of skills. Tables where doable, simple at a basic level but could get complex for those that required and understood it.
    In class a mistake in a table was reasonably easy to spot (and fix). With CSS it’s a whole different kettle of fish!
    Students often run before they can walk. The create layouts with a multitude of divs, classes and id’s without fully understanding what each element does. Trying to spot the error is almost impossible. How far back in the cascade of styles does the root cause of the error lie? Or is it a browser compatibility error?
    As an Information and Communications department, we’ve always taught from a standards / usability / accessibility standpoint. Getting the combination with CSS definitely isn’t straight forward!

    Copy & paste the code below to embed this comment.
  15. There’s one other advantage to semantic, fully valid XHTML markup. When you have an XHTML website, you have all your content in XML. You can then use all the great XML tools available to extract data from your site extremely easily. This is especially easy if your content is correctly marked up semantically, as the same advantages to CSS are available to you using DOM. We are even able to easily push our content to one of our partner sites, transforming it to their non-semantic markup with XSLT!

     

    Copy & paste the code below to embed this comment.
  16. I work in a company where we manage sites for several in-house brands. The brands are always on us about pixel-prefection and “branding”. Unfortunately what they don’t grasp is that their branding should be more focused on their content than the imagery. Our sites are currently a hybrid of CSS designs and table-based. I’m beginning to have an influence on migrating to standards-based design. The hard part is convincing print-oriented designers that it works, and is the better solution.

    As for whoever said, “Thank you. I’m a crazy CSS fanatic but still recognize that in some ways tables really do handle things better. Anyone who doesn’t recognize that is sticking their head in the sand.“ I must be sticking my head in the sand, because I can make CSS layouts do far more than tables could ever achieve. It took me a while to make the plunge, but I’m never going back.

    I would disagree with using css hacks, only because as other posters have said, there are other ways of doing it (conditional comments, etc.). My opinion is that it may be good to be backwards compatible (or sideways compatible) but at some point you need to start providing markup that is future-proof. I’d rather read a plain-text website than a broken mess of td’s and rows that place content all over the page with no logical flow.

    Copy & paste the code below to embed this comment.
  17. I was needing to know where is the images for article #192?
    So, we can see how and where the images work with the code.

    Thank you very much and we like your web site. It helps us all in class.

    Copy & paste the code below to embed this comment.
  18. I read ALA lots & lots, but missed this one when it was published.  I just caught the interview you did with Paul Boag, and I too am thrilled with this.  Thanks!
    {it’s probably listed in the comments, but if you’re running late like me, here’s the interview: http://www.boagworld.com/archives/2006/11/podcast_57_afraid_of_standards.html

    Copy & paste the code below to embed this comment.