12 Lessons for Those Afraid of CSS and Standards

by Ben Henick

58 Reader Comments

Back to the Article
  1. Yay!

    Copy & paste the code below to embed this comment.
  2. “Having to fight float and padding bugs and such on a daily basis I wish I could do table layouts once again.”

    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 know it’s not “semantic” but I proposed a very good solution one time. Only problem was, my solution was proposed on the CSS discussion list and I got vilified because people thought my remarks didn’t relate to CSS.

    Copy & paste the code below to embed this comment.
  3. “And (theoretically) you can use CSS to embed fonts in a page so that even users who don’t have that font installed will see it. Yes, I know that doesn’t work perfectly, but it’s better than anything HTML tables can achieve!”

    What does selecting fonts have to do with HTML tables?

    Copy & paste the code below to embed this comment.
  4. “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.

    Copy & paste the code below to embed this comment.
  5. on the use of tables over css divs when appropriate! It seems sometimes that as we strive to move forward with new techniques we forget that there is a time and a place for all of the tools in our toolbox, old and new.  A recent personal example of this was when we did some html emails that forced us to return to utilizing table layouts. It reinforced in us a pretty valuable lesson that we are not going to easily forget.

    Copy & paste the code below to embed this comment.
  6. In reading these comments and other feedback – boy have I gotten a lot of IM’s the past three days! – there are three ideas that keep on hitting me on the head.

    1. The lust for pixel-perfection is the consequence of expectations set by print-trained designers, and is the single greatest obstacle to broader deployment of CSS-reliant sites, in my opinion.
    2. Clients tend to care about upfront cost and timeline more than they care about TCO or the potential to turn their site into a bonafide infosystem.
    3. The bastard child sites that try to get the best of both tables and CSS wind up leveraging both strengths poorly.

    And Angela’s bit about the HTML e-mails was, for me, a bit of synchronicity.  I was bopping about “http://boagworld.com/podcast”:http://boagworld.com/podcast/  and in one of the shows I played back, there was a long discussion of HTML e-mail that amounted to “you can do it with CSS but why on earth would you want to?”  This is coming from a source that’s a reliable cheerleader for Web standards.

    Sometimes, no matter how badly you want it, it can’t be done.

    For all that, I come away with the feeling that the bottom line of standards-friendly design and production isn’t being sold nearly well enough.

    Copy & paste the code below to embed this comment.
  7. I liked your article a lot, but disagree with the comment you made #“36”:/comments/12lessonsCSSandstandards?page=4#36. In my job the design team and the dev team are separate. The designers go through a lot of effort to make the design pixel perfect. We go back and forth for weeks with the client perfecting a design. And in passing the design over to dev we go through the layouts and make photoshop layers specifying exactly what we want the pixel spacing to be.

    Pixel perfect is possible with CSS and worse comes to worse throw a table in there. Comment #“34”:/comments/12lessonsCSSandstandards?page=4#34 made the same mistake.

    Many agency put design quality over CSS perfection, and rightfully so. Most clients will appreciate the perfect layout and spacing more than they will appreciate the perfect CSS but imperfect spacing.

    Copy & paste the code below to embed this comment.
  8. Kris, you are ENTIRELY missing the point. Nobody here is saying to make your CSS perfect but not to worry about what the design looks like. What is being said is that print media and web media are two different things.
    To put all your emphasis on having different elements of a design spaced an exact number of pixels apart or to have fonts appear in an exact pixel size doesn’t help much in the web world because anyone viewing your website can change how your page is displayed in numerous ways. This is what needs to be drilled into the heads of print designers who are beginning to work in the world of web design (repeat over and over until it sinks in): YOU CANNOT PRECISELY CONTROL THE FINAL DISPLAY OF YOUR WEB DESIGN. If you have an aversive reaction to such a statement then you just need to keep repeating it.
    You can, however, learn to understand how browsers display pages so that the elements of your design will 99.99% of the time relate to each other in a logical and attractive way.

    Copy & paste the code below to embed this comment.
  9. Jeez hacks for different browsers versions. Do you people work for outfits with bottomless pockets and where the boss is your spouse’s Dad? Or perhaps if you work for yourself you are on some sort of anorexic kick? Or you don’t have a life outside of making sites pixel perfect.

    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.

    You clearly have never had to unglue someone elses hack for a client with a change that had to be published online 5 minutes ago and have to explain why the “simple” change isn’t working on their browser and the page just won’t display properly.

    I agree it would be really nice to work in the way suggested but Rule #1 is get it out on time and on budget.

    I am afraid you are preaching to the converted as the comments here attest.

    Copy & paste the code below to embed this comment.
  10. I’m well aware of specifying obscure fonts and moving to more general fonts withing a CSS declaration, but since when has CSS provided a mechanism to embed fonts?

    It’s more complicated than we might like, but by using CSS you can embed a font – have a look at “www.spoono.com/html/tutorials/tutorial.php?id=19”:http://www.spoono.com/html/tutorials/tutorial.php?id=19 for the details.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. “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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. Thank you for this support.
    It’s clear, concise and helpful.

    Copy & paste the code below to embed this comment.
  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. 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.