Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Why We Should Start Using CSS3 And HTML5 Today

For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.

Just like the elusive character from Beckett’s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.

Sometimes it feels that we are hiding behind the lack of cross-browser compatibility to avoid learning new techniques that would actually dramatically improve our workflow. And that’s just wrong. Without an adjustment, we will continue to undersell the Web we have, and the landscape will remain unexcitingly stale and bound by this underestimation and mindset.

Adjustment in Progress Link

Sorry if any bubbles are bursting here, but we have to wake up to the fact that full cross-browser support of new technologies is just not going to happen. Some users will still use older browsers and some users will still have browsers with deactivated JavaScript or images; some users will be having weird view port sizes and some will not have certain plugins installed.

But that’s OK, really.

The Web is a damn flexible medium, and rightly so. We should embrace its flexibility rather than trying to set boundaries for the available technologies in our mindset and in our designs. The earlier we start designing with the new technologies, the quicker their wide adoption will progress and the quicker we will get by the incompatibility caused by legacy browsers. More and more users are using more advanced browsers every single day, and by using new technologies, we actually encourage them to switch (if they can). Some users will not be able to upgrade, which is why our designs should have a basic fallback for older browsers, but it can’t be the reason to design only the fallback version and call it a night.

Select[ivizr]2 is one of the many tools that make it possible to use CSS3 today.

There are so3 many4 remarkable5 things6 that we, designers and developers, can do today: be it responsive designs with CSS3 media queries, rich Web typography (with full support today!) or HTML5 video and audio. And there are so many useful7 tools8 and9 resources10 that we can use right away to incorporate new technologies in our designs while still supporting older browsers. There is just no reason not to use them.

We are the ones who can push the cross-browser support of these new technologies, encouraging and demanding the new features in future browsers. We have this power, and passing on it just because we don’t feel like there is no full support of them yet, should not be an option. We need to realize that we are the ones putting the wheels in motion and it’s up to us to decide what will be supported in the future browsers and what will not.

More exciting things will be coming in the future11. We should design for the future and we should design for today — making sure that our progressive designs work well in modern browsers and work fine in older browsers. The crucial mistake would be clinging to the past, trying to work with the old nasty hacks and workarounds that will become obsolete very soon.

We can continue to cling to this notion and wait for older browsers to become outdated, thereby selling ourselves and our potential short, or we can adjust our way of thinking about this and come at the Web from a whole new perspective. One where we understand the truth of the situation we are faced with. That our designs are not going to look the same in every browser and our code will not render the same in every browser. And that’s the bottom line.

Yaili’s beautiful piece My CSS Wishlist on 24ways13. Articles like these are the ones that push the boundaries of web design and encourage more innovation in the industry.

Andy Clarke spoke about this at the DIBI Conference earlier this year (you can check his presentation Hardboiled Web Design on Vimeo14). He really struck a nerve with his presentation, yet still we find so many stalling in this dream of complete Web standardization. So we wanted to address this issue here and keep this important idea being discussed and circulated. Because this waiting is not only hurting those of us working with the Web, but all of those who use the Web as well. Mainly through this plethora of untapped potential which could improve the overall experience across the spectrum for businesses, users and those with the skills to bring this sophisticated, rich, powerful new Web into existence.

For Our Clients Link

Now this will mean different things for different players in the game. For example, for our clients this means a much more developed and uniquely crafted design that is not bound by the boxes we have allowed our thinking to be contained in. However, this does come with a bit of a compromise that is expected on the parts of our clients as well. At least it does for this to work in the balanced and idealized way these things should play out. But this should be expected. Most change does not come without its compromises.

In this case, our clients have to accept the same truism that we do and concede that their projects will not look the same across various browsers. This is getting easier to convince them of in these times of the expanding mobile market, but they may still not be ready to concede this inch on the desktop side of the coin. Prices might be adjusted in some cases too, and that may be another area that the clients are not willing to accept. But with new doors being opened and more innovation, comes more time and dedicated efforts. These are a few of the implications for our clients, though the expanded innovation is where we should help them focus.

In short:

  • Conceding to the idea that the project will not be able to look the same across various browsers,
  • This means more developed and unfettered imaginative designs for our clients,
  • This could lead to increased costs for clients as well, but with higher levels of innovation and
  • Client’s visions for what they want will be less hindered by these limitations.

For the Users Link

The users are the ones who have the least amount invested in most of what is going on behind the scenes. They only see the end result, and they often do not think too much about the process that is involved which brings it to the screens before them. Again, with the mobile market, they have already come across the concept of varying interfaces throughout their varied devices. They only care about the functionality and most probably the style that appeals to them — but this is where their interest tends to end. Unless of course, they too are within the industry, and they may give it a second thought or more. So all this talk of cross-browser compatibility really doesn’t concern them, they really leave all that up to us to worry about.

Users only ever tend to notice anything if and when something does not work the way they expect it to from one place to the next. In most cases, they are willing to show something to a relative, friend or colleague, and suddenly from one device to the next, something is different that disrupts their ability to do so. That is when they actually take notice. But if we have done our jobs correctly, these transitions will remain smooth — even with the pushing of the envelopes that we are doing. So there is not much more that is going to change for the users other than a better experience. Average user is not going to check if a given site has the same rounded corners and drop-shadow in two different browsers installed on the user’s machine.

In short:

  • Potentially less disruptions of experience from one device to another and
  • An overall improved user experience.

For Designers/Developers Link

We, the designers and developers of the Web, too have to make the same concession our clients do and surrender the effort to craft the same exact presentation and experience across the vast spectrum of platforms and devices. This is not an easy idea to give up for a lot of those playing in these fields, but as has been already mentioned, we are allowing so much potential to be wasted. We could be taking the Web to new heights, but we allow ourselves to get hung up on who gets left behind in the process — and as a result we all end up getting left behind. Rather than viewing them as separate audiences and approaching them individually, so to speak, we allow the limitations of one group to limit us all.

Perhaps a divide and conquer mentality should be employed. Image Credit16

So this could mean a bit more thought for the desired follow through, and we are not suggesting that we strive to appease one group here and damn the rest. Instead, we should just take a unified approach, designing for those who can see and experience the latest, and another for those who cannot. It wouldn’t mean more work if we design with those users in mind and produce meaningful and clean code up front and then just adjust it for older browsers. Having to remember that not everyone is afforded the privilege of choosing which browser they are using. And if necessary, this approach can be charged for. So it could lead to more revenue along with exciting new opportunities — by bringing some of the fun back into the work that being boxed in with limitations has robbed us of.

In short:

  • Conceding to the idea that the project will not be able to look the same across various browsers,
  • A more open playing field for designers and developers all around; less restricted by this holding pattern,
  • More exciting and innovative landscape to attract new clientele,
  • Division of project audience into separate presentational approaches and
  • Probably less work involved because we don’t need the many hacks and workarounds we’ve used before.

So What Are We Waiting For? Link

So if this new approach, or adjusted way of thinking can yield positive results across the browsers for everyone involved, then why are we still holding back? What is it that we are waiting for? Why not cast off these limitations thrown upon our fields and break out of these boxes? The next part of the discussion tries to suss out some of the contributing factors that could be responsible for keeping us restrained.

Fear Factor Link

The fail awaits, and so some of us opt to stay back. Image by Ben Didier18

One contributing factor that has to be considered, is perhaps that we are being held back out of fear. This might be a fear of trying something new, now that we have gotten so comfortable waiting for that magic day of compatibility to come. This fear could also stem from not wanting to stand up to some particular clients and try to make them understand this truism of the Web and the concessions that need to be made — with regards to consistent presentation across the browsers. We get intimated, so to speak, into playing along with these unrealistic expectations, rather than trusting that we can make them see the truth of the situation. Whatever the cause is that drives this factor, we need to face our fears and move on.

It’s our responsibility of professionals to deliver high-quality work to our clients and advocate on and protect user’s interests. It’s our responsibility to confront clients when we have to, and we will have to do it at some point anyway, because 100% cross-browser compatibility is just not going to happen.

Comfortable Factor Link

A possible contributing factor that we should also look into is that some people in the community are just too comfortable with how we design today and are not willing to learn new technology. There are those of us who already tire of the extra work involved in the testing and coding to make everything work as it is, so we have little to no interest at all in an approach that seemingly calls for more thought and time. But really, if we start using new technologies today, we will have to master a learning curve first, but the advantages are certainly worth our efforts. We should see it as the challenge that will save us time and deliver better and cleaner code.

To some extent, today we are in the situation in which we were in the beginning of 2000s; at those times when the emergence and growing support of CSS in browsers made many developers question their approach to designing web sites with tables. If the majority of designers passed on CSS back then and if the whole design community didn’t push the Web standards forward, we probably still would be designing with tables.

Doubt Factor Link

Doubt is another thing we must consider when it comes to our being in hold mode, and this could be a major contributor to this issue. We begin to doubt ourselves and our ability to pull off this innovative, boundary pushing-kind-of-work, or to master these new techniques and specs, so we sink into the comfort of playing the waiting game and playing it safe with our designs and code. We just accept the limitations and quietly work around them, railing on against the various vendors and the W3C. We should take the new technologies as the challenge to conquer; we’ve learned HTML and CSS 2.1 and we can learn HTML5 and CSS3, too.

Faith Factor Link

Faith can be a good thing, but in this case, it can hold you back. Image by fotologic20

Undoubtedly, some of us are holding off on moving forward into these new areas because we are faithfully clinging to the belief that the cross-browser support push will eventually happen. There are those saying that we will be better off as a community if we allowed the Web to evolve, and that this evolution should not be forced.

But this is not forcing evolution, it is just evolution. Just like with Darwin’s theory, the Web evolves in stages, it does not happen for the entire population at once. It is a gradual change over time. And that is what we should be allowing to happen with the Web, gradually using and implementing features for Web community here and there. This way forward progress is happening, and nobody should be held back from these evolutionary steps until we all can take them.

“It’s Too Early” Factor Link

Another possible contributor is the ever mocking “It’s too early” factor. Some members of the online community faithfully fear that if they go ahead and accept this new way forward and begin designing or developing in accordance, then as soon as they begin completing projects, the support might be dropped and they would need to update the projects they already completed in the past. It’s common to think that it’s just too early to work with new standards until they are fully implemented in many browsers; because it’s just not safe to assume that they will be implemented at all.

However, one needs to understand the difference between two groups of new features: the widely accepted ones (CSS3’s media queries, border-radius or drop-shadows or HTML5 canvas are not going to disappear) and the experimental ones (e.g. some OpenType features are currently supported only in Firefox 4 Beta). The widely accepted features are safe to use and they will not disappear for certain; the experimental features can always be extracted in a separate stylesheet and be easily updated and maintained when necessary. It might be a good idea not to use experimental, unsupported features in large corporate designs unless they are not affecting the critical design elements of the design.

Validation Factor Link

We cannot forget to mention that there are also many of us who are refusing to dabble in these new waters simply due to the fact that implementing some of these techniques or styles would cause a plethora of vendor-specific pefixes to appear in the stylesheet, thus impeding the validation we as professionals strive for.

Many of us would never put forth any project that does not fully validate with the W3C, and until these new specs are fully standardized and valid, we are unwilling to include them in their work. And because using CSS3 usually means using vendor-specific prefixes, we shouldn’t be using CSS3. Right?

Jeffrey Way’s article But It Doesn’t Validate22

Well, not quite. As Jeffrey Way perfectly explains in his article But it Doesn’t Validate2423, validation is not irrelevant, but the final score of the CSS validator might be. As Jeffrey says,

“This score serves no higher purpose than to provide you with feedback. It neither contributes to accessibility, nor points out best-practices. In fact, the validator can be misleading, as it signals errors that aren’t errors, by any stretch of the imagination.

[…] Validation isn’t a game, and, while it might be fun to test your skills to determine how high you can get your score, always keep in mind: it doesn’t matter. And never, ever, ever compromise the use of the latest doctype, CSS3 techniques and selectors for the sake of validation.”

— Jeffrey Way, But it Doesn’t Validate2423

Having our work validate 100% is not always the best for the project. If we make sure that our code is clean and accessible, and that it validates without the CSS3/HTML5-properties, then we should take our work to the next level, meanwhile sacrificing part of the validation test results. We should not let this factor keep us back. If we have a chance for true innovation, then we shouldn’t allow ourselves to be restrained by unnecessary boundaries.

All in All… Link

Whatever the factors that keep us from daring into these new CSS3 styles or new HTML5 coding techniques, just for a tangible example, need to be gotten over. Plain and simple. We need to move on and start using CSS3 and HTML5 today. The community will become a much more exciting and innovative playground, which in turn will improve experiences for as well as draw in more users to this dynamic new Web, which in turn will attract more clientele — effectively expanding the market. This is what could potentially be waiting on the other side of this fence that we are timidly facing — refusing to climb over it. Instead, waiting for a gate to be installed.

Until we get passed this limited way of looking at the situation, only then will we continue falling short of the full potential of ourselves and our field. Are there any areas that you would love to be venturing into, but you are not because of the lack of complete cross browser compatibility? Admittedly, I was a faith factor member of the community myself — how about you? And what CSS3 or HTML5 feature are you going to incorporate into your next design?

Will You Use HTML5 / CSS3 In Your Next Design? Link

Will you use HTML5 / CSS3 in your next design project?25Market Research26

(sp) (vf) (ik)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26

↑ Back to top Tweet itShare on Facebook


Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Try telling that to a client, who’s 245 strong team on the office floor still run IE6, who sees employing an IT consultant to upgrade the lot as an expense he could without.

    It would be great, but simply not possible. Yet. Please stop force feeding us with this stuff, we know it’s great.

    • 2

      You don’t have to tell it to the client! There is no reason you would!

      I work with several client who is a lot bigger than 245 and they all use IE6 yet their site is built in HTML5 and full of CSS3!

      • 3


      • 8

        it really comes down to if you have that massive client organization – all running IE6 – to create an entire web presence that is not only completely 100% IE6 compatabile but also putting in the time to add CSS3 and HTML5 features.

        That’s a lot of extra money there that’s needed….and if they aren’t willing to pay for that extra overhaul, doing something like that is completely useless.

        it always comes down to the client. its never black and white. I love CSS3 and HTML5 but would never put in extra time to do it just for the hell of it (or for progression’s sake) especially when my clients still run their stone age computers and browsers.

        • 9

          That’s backwards. It’s supporting IE6 that’s expensive, not using HTML5 and CSS3.
          How does using cost you more? OR ? Or ommiting type attribute for link and script?

        • 10

          Doesn’t matter how design looks, ie6 mostly requires fixes in that or other way, so it gets around 30% more of extra code and implementation time, while migrattion from html4/xhtml to html5 doesn’t.
          Looks like right time to tell your client to pay you extra not for html5 and css3 but for ie6?

      • 11

        Just because you can, doesn’t mean you should.

        As a designer/developer, I always have to take a step back to think – does the client really need this feature? If it’s something that I (personally) want to put in just because I can, I tend to leave it out unless it’s requested.

      • 12

        You realize how little sense it makes to build an HTML 5/CSS3 website for a client who uses a 10 year old web browser right? How many hacks hold it together? Why would HTML 5 even be a consideration for this audience?

      • 13

        I think a lot of people here have misinterpreted having “corporate experience” as building a website for a business that will be viewed externally. Try deploying an internal use web app on an international level with a large user base with diverse system requirements.

        There’s no WAY you’d build that in HTML 5/ CSS 3. 90% of our user base is IE 8 or less with IE 6 and 7 being the majority. The extra effort isn’t worth it and the hacks necessary to make html 5 work with those browsers creates a debugging nightmare. Additionally server side technologies like and many add-on components(both free and purchased) are not written for HTML 5 compliance, further complicating the development process.

      • 14

        I really want to see that webpage. Seriously – I REALLY want to see it.

        And yeah – this kind of articles are boring – we all tried out all new stuff – we use it where possible and we don’t where the client is bitchy – and the client is bitchy and has all the right to be since it’s his money.

      • 15

        Could you please tell me how css3 work on IE6 and IE&?

        • 16

          You don’t need to get it work on IE6, that is not necessary. You should be using CSS3 to enhance the user experience for users who use modern browsers.

          However, if you cant get your head around the mind-blowing idea that websites can (and should in most cases) look different between browsers you could use things like CSS PIE ( to emulate some CSS3 effects.

          If you wish to use CSS3 Pseudo Selectors such as :nth-child or :nth-of-type to make your code more semantic and meaningful and make your CSS do all the work you can use the awesome tool that is Selectivizr (

          Hope that helps!

    • 17

      You can still cut support for IE6 in the 95% of your projects where your client is NOT running IE6.

      • 18

        To be honest i don’t even care if my client uses ie6. Its his clients that i should have to worry about. And you can say o stop developing for ie6. If that result in a loss of 10% in profit. I don’t think your client spent his money wisely.

      • 19

        I cut IE6 support as much as i possibly can. I encourage it at every chance I get.

      • 20


        Once upon a time, I actually thought the same. Hell, screw IE6! Then I started dealing with online stores.

        Here’s an example of why you shouldn’t cut support for IE6.

        Just launched a small wholesale online store. Nothing too special. Gets about 300 unique visitors a day.

        It’s been operating for a little over three weeks.

        From those three weeks, looking at the stats. I can see a little over 5% are IE6 users.

        I can only drill so far down into the stats but saying that 5% could equal close to $900 a week in sales or over $45,000 a year.

        IE6 sucks but throwing good money out the window. Sucks even more. lol

        • 21

          I hear you. But I had to cast away the ie6 crowd for the benefit of encryption.

          I feel that the only way to make ie6 obsolete is to end the coddling and post on your site that you don’t support it.

          The same with Flash. I love flash and wish that more portable devices would support it…I hate the ipad & iphone for this very reason! We live in a world were minimum download speed packages are 7 mps. We can afford a little weight cant we?

    • 22

      Michael Kuczera

      December 10, 2010 6:56 am

      It´s our job to develop on the current technology. I´m not seeing any problems to develop websites in HTML5 and CSS3. Clients and Users using iE 6 are a question of consultation, not a barricade. Stop developing for browsers like iE6 because some system administrators are too lazy to modernize their intern system.

      • 23

        It is not our job to develop with current technology. In all reality, it is our job to make our clients money. If you drop support for IE6 when a client’s company relies on it (not because of a lazy admin but because the cost of upgrading a worldwide company is too expensive), then you are not doing your job.

        • 24

          It is a lot of work to get people up and running on a new browser, but aren’t there simpler solutions to mass deploying a new browser (your choice of the big names that aren’t IE)? I mean, if the company is world wide, they should have back-doors for admin access to systems to pop a newer browser on.

          IE6 is nearing 10 years old. Granted the latest service pack is from 2008, but that is FAR from the support needed to have a safe, reliable, up-to-date browser. Didn’t I hear too that Google is dropping support for IE6 in many of its apps?

          • 25

            Many companies still run Windows XP on their systems, and the base browser is IE6. All of the admin restrictions make it impossible to do quick updates, even as simple as upgrading or downloading browsers.
            Google and many other companies have dropped support for IE6 which is great, and a step in the right direction. Unfortunately they will need to drop support for IE7 and 8, older versions of Firefox, Chrome Safari and others before HTML5 and CSS3 can become a true web standard.

          • 26

            IE6 is older then 10 years and Microsoft itself has dropped support for it. It has both come to it’s end-of-life and MS sites are being updated which look completely wrong in IE6.

          • 27

            I didn’t actually believe that Microsoft has also dropped browser support for some of their websites, so I jumped onto a PC I keep around specifically for IE6 developing and what do you know; first Microsoft site I looked at.

            Industry Solutions – Microsoft Dynamics, is completely broken in IE6.

            I am thinking that the push to CSS3 and HTML5, is closer than expected.

        • 28

          or just don’t take them on as a client :)

          it always comes down to the client and their business. One of ours has a huge basis and a lot of traffic in Asia, a lot which still use IE6 statistically speaking…something not having to do with lazy admins but with their client outreach. It’s a pain but a neccessity at times…unfortunately.

        • 29

          Oh, please support IE6 if client wants it. Just charge for that so that it would be less expensive to upgrade, than to continue walking with dinosours. Unless your time and sanity is worth nothing.

    • 30

      I’m in full agreement with Shaun. Using the proper techniques, the client shouldn’t know any different.

      There may be an additional expenditure of effort, but, at least in my opinion, it is worth it to drive the industry forwards rather than leaving it to stagnate.

      • 31

        it will always cost more. if the client isn’t willing to pay it, then that really truly is their fault. it’s like restoring a super old car along with adding a brand new engine, interior, and the highest standard of safety features.

        it sure costs a hell of a lot extra, but if that’s what they want, they gotta pay it.

        • 32

          This comment irks me. It does not cost more at all to work in html5 and css3 whilst supporting IE6. Working with the tools like selectivzr and Modernizr make you work with a whole different approach of coding for the capabilities of the browser and not a browser version specifically. We have found that aside from a few of the usual ie6 fixes we spend less time if any ,worrying about ie6 or ie8 or whatever. We just dont need to talk about it and we are too busy enjoying talking about how csstransitions or translate or scale are blowing our mind in the browsers that support them and how neatly we have handled the ones that don’t. Clients, and only those that care to ask about this sort of thing, appreciate that ie6 is archaic and are excited to learn that the experience is much better in the browsers they may be running say at their home rather than office. This “hardboiled” (Andy Clarke) approach delivers your best work right now!

          • 33

            Got to agree with Lewis here, I don’t understand the whole “It costs more to develop in HTML5 or CSS3” since I started using HTML5 and CSS3 I seem to be developing sites faster, they are cleaner and way more semantic.

            The “Hardboiled” approach is the way to go.

          • 34

            i’ve simply found it takes longer adding extra html5 or css3 items to a site. i do a lot of little things along the way which i wont charge any extra of course, but if a client lists 10 crazy html5 thing they want on their site, the site would obviously take more time to build than if that was never on there before. same with adding flash attributes to a site or things like that. i say it costs more only because it may take more time. i’m not talking about css rounded corners or anything like that though :)

    • 35

      The simple fact that your can show bleeding edge technology in your portfolio will work to attract the right kind of customers, so if you know how to position yourself, you have a lot to win by early adopting HTML5+CSS3. Particularly if you do a good job in applying graceful degradation techniques.

      While I understand that large software houses may have trouble adapting to technology changes, freelancers and smaller teams like ours have little excuse. Not adapting NOW and sticking your head in the sand will just result in being outdated once these technologies go mainstream.

      Obviously, this isn’t stuff you want to throw at customers using IE6 as their primary browser. But then you’re probably worried with things other than design and creativity to start with.

      So here’s a suggestion: choose the right customers.

      If your customers find it relevant to project an image of innovation and being on the bleeding edge, you’ll find they are much more receptive to using new technology.

      Incidentally, yesterday we wrote a whole new piece on HTML5 and various projects where we’re applying it. I don’t mean to do shameless plugging (moderators: feel free to edit this paragraph out), but I think this might be an interesting read to some:

    • 36

      Surely the only real problem is when someone is using IE6 without JavaScript? In all other cases, the website can and should look acceptable for the capabilities of the browser used. There is no real argument from a client perspective as long as they know different browsers have different capabilities.

      What I do want to know however is – what are the implications for SEO if we start using HTML5 now? How does Google at el handle having multiple H1 tags on the same page for instance? I am yet to find a clear answer.

    • 45

      I work for a large financial services company, we’ve got tens of thousands of employees (and millions of customers who use our sites) and internally the browser that people are forced to use is IE6. That said, we’re currently rolling out a reworked CMS and we’re using a fair amount of HTML5/CSS3. It means taking care about what you choose and how you tell people about the differences that they can expect between the IE6 view and the better browsers, but it’s possible. Honestly.

    • 46

      I don’t see what the problem is here.
      Design websites that are functional in IE6 and legacy browsers and is enahnced in the current browsers. For example rounded corners, drop shadow etc etc for the contemporary browsers and square corners, no shadow etc for IE6 and similar. You can’t just drop all your support for IE6, people are still using it, that’s just not being a professional.

    • 47

      I completely agree with you Abbas. Stop spreading unusable advice on novice ears. It felt forced from the first paragraph, and so I skipped straight past all the filler. Oh, but wait, look how many words are in this post. Well then, it must’ve been a well thought out piece of literary genius! This isn’t like moving the web from tables to CSS. It’s gonna take awhile to transition whether you keep making illogical posts like this or not. If even Apple can’t get the internet off the html4 gravy train, I doubt your opinions will have any effect… sooo it may be time for your writers to turn off their iphones and get back into the industry they’re blogging about.

      Please take these opinions with a grain of salt, as I will yours.

    • 48

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      December 10, 2010 10:35 am

      Abbas, it’s not like we are trying to force you into using CSS3/HTML5 an any costs. Yes, sometimes it may be impossible to use it, but more often than not it’s possible and it would save designers a lot of time, spare headache, make the code better, cleaner and easier to maintain and enrich user experience. And it’s worth arguing for!

      In our experience many designers are reluctant to use the new technologies, such CSS media queries or others. We often hear the same reasons for not using CSS3, like “there is no full cross-browser support yet” and we strongly believe that it’s just not the right reason. Of course, if the project settings do not allow for CSS3, it’s fine, but if it does, we should embrace the technology and move the Web forward instead of looking back over and over again.

      And this is the reason for this article: we wanted to address this issue once and for all.

      • 49

        So… when’s Smashing Magazine switching to html5? :)

      • 50

        But Vitaly, it sometimes feels like we’re being forced into using HTML5/CSS3 and as if we’re to scared or lazy to learn it. Not just on posts here on Smashing but also on other blogs. I know that’s not what you meant but it feels a pit pushy sometimes.

        I’m trying these new techniques out now for a couple of months and they certainly are cool and more semantic! (Most of my skills I learned from posts here on Smashing so thanks for that!)

        The truth of the matter is if I would show a design in Photoshop to a client and code it, the client wants it to be exact in browsers as on the design I showed him. At least my clients do, and can you blame them?

        So if I would use CSS gradients, and 30% of the browsers just show a solid color my clients will raise questions. And if I can achieve the same gradient effect using a background image, making it look fine in all browsers, why should I use the CSS technique? Because it’s cooler? My clients just want their sites to work in all browsers, they don’t care about CSS3.

        Then there are all these CSS3 selectors that only work in recent versions of FF, Chrome, Safari etc so it’s not only a IE problem anymore.

        Same goes for html5 elements like header, footer, nav, aside etc. If the site does not work at all in ie6, 7 & 8 with javascript disabled, why should I even bother to integrate them if I could just use plain div’s. Does my client care about whether I’m using a div or section element? As long as they’re both equally SEO friendly I can imagine the clients want to have an element that is most browser consistent.

        And I would want the same if I was running an online business focused on a broad target audience.

        So I think it’s important to learn all these new techniques, play with them and get comfortable with them. But no, I don’t think we should start using CSS3 and HTML5 today. At least not the elements and selectors that decrease user experience in older browsers and don’t have decent fallbacks.

        • 51

          Vitaly Friedman

          December 11, 2010 5:10 am

          Fynn, thank you for your comment. I can see that it can be problematic once the client has seen the design in Photoshop, but you can also show the design in the browser. Personally, I think that some CSS3 classes and attributes are hardly useful — I don’t think that text-shadow or animations will be used in practice a lot; CSS3 should not be used to create fancy effects, yet it can be used to keep the code cleaner and easier to maintain. It can be used to effectively solve some problems that were quite difficult to solve before.

          Yes, some CSS3 features are too early to use, but others are not. And yes, I completely agree with you that “we should [not] start using CSS3 and HTML5 features today which decrease user experience in older browsers and don’t have decent fallbacks.” Some of CSS3/HTML5 new features do that, and some don’t. In the latter case, we are pretty safe to start using CSS3/HTML5 today.

          • 52

            Thanks for the reply Vitaly.

            Well.. have to say I’ve hardly seen any html5 elements that can be used right now that do have a decent fallback on non-js supporting browsers. However, I think these articles of Jeffrey Way might (also) be useful to check out which html5 they can use safely;



            About CSS3, I’m not sure yet.. I have to play with it a little more to know which styles I can use right now.

            You can agree or disagree with the article and both parties have interesting motivations. But it sure keeps the discussion sparkling and it probably will get people into playing with html5/css3, and that’s always a good thing :)

          • 53

            I think as a designer it’s smart to show your clients your mockups first in Photoshop, especially if you have several of them to show them. For some, it’s much easier (at least in my case) to create the artwork in PS and make a JPG to show. Also, I don’t want to waste my time on something they may not approve. In my opinion, you should never do work that you won’t get paid for so if that means getting a quicker result through PS, that’s definitely the road I’m going to take.

      • 54

        I’m a web designer, i’d love to be able to pitch to clients the wonders of CSS3/HTML5, but unfortunately you have to cater for everybody.

        A lot of clients don’t care about web standards, they just want their site to look good, to work correctly and make them more money than their last one.

        It can be a very awkward conversation with the client when he/she calls the office complaining the customers/visitors cannot view they’re website properly.

        Like I said: yes, it’s a great development in coding but until it can be fully implemented, across all browsers please don’t tell me it’s OK to use it.

        • 55

          I’m leaning towards Abbas given the experience I’ve had working at a large enterprise in the telco space (30+K employees, global locations, million plus customers, etc…). I worked on the management team for the PBX servers – basically the web frontend/backend for these boxes (think logging into your home router and config’ing it – same idea).

          Given the huge requirements and customer base we always had to take into account all variables and we were more or less forced to say that we cannot support everything. This was usually the more newer web stuff and some of the really old web technologies. Yet, we still supported old IE browsers 6,7+ because we simply had to. We could never be as agile as a solo developer or a small web company – even if we wanted to and knew that using newer tech. would allow us to develop faster, cleaner, and make codebases more maintainable. There is always the cost factor, man hours, and dealing with all the other issues and projects. (Also, we had to support remote users/technicians who still used modems – due to redundancy/failsafe reasons – and they would never care about fancy CSS3 nor have the bandwidth to support so much JS/CSS3 support).

          Thus, I feel it’s all too easy for those on the bleeding edge of web development to champion for moving forward. I’m really liking HTML5/CSS3 and am using it – but now I am working for myself – this couldn’t be the case w/ my former employer until after 3-4 years (maybe) from now.

          Also, there are like 10 new articles on average on Smashing, Nettuts, etc… that I have to tuck away and read later just to stay on top of what is going on w/ latest web development – this could never work in the real world or a place where I used to work.

          I wish people would address the fact that with HTML5 – which tries to make HTML more level and structured – there needs to be more compliance and working together with the browser vendors. E.g. Trying to support current CSS3 techniques requires a css3 option along w/ vendor-specific css3 options. That does not fly because you can’t ask developers working someplace to invest time to learn stuff where it might be different tomorrow and expect them to get their work done and on time.

          One more thing that I can acknowledge was badly done at my last business. I felt my job could have been done better and we could have supported newer technologies (at least internally) if there was more engagement between IT and developers. Our IT department was usually the weakest link since they forced Windows/Mac machines to keep copies of certain software (browsers included) that were too old. So IT can play a bad role and should be on the same page a little.

    • 56

      Why would anybody hire an IT consultant to upgrade IE6, if you can install Google Chrome on any Windows computer without administrator privileges?
      Every elementary skilled user can install Chrome simply by clicking a link on a web page.

      Of course, it still relies on “we want to do that change” approach

    • 57

      Why don’t you show them Google Chrome? Is much better than any browser, lighter and faster.

    • 58

      “If you think it’s expensive to hire a professional to do the job, wait until you hire an amateur.”

      Red Adair

    • 59

      Machteld Ouwens

      December 14, 2010 12:44 am

      I completely concur: as much as i would love to use html5/css3 i can’t afford to loose my clients that primarily use ie6 but demand sites that work 100%. So stop making us feel like we are the ones stuck in the past; it’s not the right time to start fiddling with this, or my company will go bankrupt!

    • 60

      Leonardo Lima

      January 28, 2011 8:01 pm

      Search for the meaning of progressive enhancement.
      I hope that helps!

    • 61

      Leonardo Lima

      January 28, 2011 8:10 pm

      Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

      source: wikipedia

  2. 62

    Mike Schneider

    December 10, 2010 6:45 am

    A nice Showcase of 10 HTML5 Example can be found here (in German):
    I like the Browser Ball and the Chain Reaction, it shows that HTML5 will be the future of Webdesign. I really look forward to more Examples in this field.
    Have a good Weekend, greetz Mike

    • 63

      Those seem to be old rehashed flash tricks, and not usable for anything except games

    • 64

      Wow!!! Link for HTML5 works great in IE!!! LOL!!!
      HTML5 does not work in IE 6, 7, 8

      • 65

        I don’t know if your aware but IE6, IE7 and IE8 (soon to be) out of date browsers! They will never support HTML5! I think everyone is aware of that!

      • 66

        ajay anand sharma

        January 12, 2011 2:29 am

        you can use HTML 5 with a small js. through this html 5 is also working in all IE.

  3. 67

    There are many technologies that don’t have cross browser support, but we find a way around it. That’s just the way it is. I think the more we embrace it, the better the support will be for the technology. We decide, not Microsoft Google or Apple.

  4. 68

    No, I don’t agree with this at all. This is one of those ‘design for design’s sake’ arguments. I don’t really want to push out a bunch of forked code and half-baked features.

    • 69

      The problem comes with the fact of people stuck on an ancient, hardly supported, buggy browser base that is IE. If we continue to code with IE in mind we are stuck. If we don’t force, but highly suggest that experiences will be better (or that you take that leap and force them to not be using IE < 9) in another browser, then possibilities start opening up when more users actually have a workable browser.

    • 70

      I can’t help but feel the same way as Jayson, at least at the moment.

      I currently work often in *get ready for it* Flash development, and while I think a fully stable HTML5 will be great, comparatively it just seems like the current implementation of HTML5 requires a lot of “hacks” for browser compatibility checking, workarounds, etc.

      To be honest, modern and moderate use of Flash feels most comfortable, because it either renders and functions perfectly as intended, or an alternate markup is displayed. I would love it if HTML5 had the same reliability.

    • 71

      Are there any screen readers that can deal with HTML5 and multiple H1s well? Section 508 compliance is a real concern for my work.

      Like Netflix, I love HTML5 and CSS3 when I know exactly what their target system is going to be (ex. PS3) but have to fall back to XHTML (Netflix uses 4.01) for everything else. I expect this from a draft standard that is under development.

      As far as IE6, the companies I have worked with that still use it don’t like it either but are forced to use it due to previous investments in other software (ex. SAP Portal) that require it. For them, it’s not just rolling out a new browser but upgrading other systems as well. Thankfully most of those systems are being upgraded now.

  5. 72

    Amber Weinberg

    December 10, 2010 7:00 am

    I’ve been using HTML5 for a month now. Although I only use the head info and not the new tags, because I don’t agree with hacking IE to make it work. As for CSS3, I’ve been using that for awhile now, and clients are pretty open about progressive enhancement.

  6. 73

    Swapnil Acharya

    December 10, 2010 7:04 am

    Funnily, I had been using couple of those CSS 3 features already and wasn’t aware of it. I am not a trained designer, so I’m always hunting over the Internet for newer and cooler stuffs. I had tried couple of those HTML 5 and CSS 3 stuffs in the past, only to realise much later that I had already adopted it.

    It is very recommended who are thinking of switching over now. I’m sure everyone will love it and adopt it pretty soon.

  7. 74

    :) i’m interested in css3 and html5 from some time, but tbh i used css3 but once and in a small project of my own.

    Anyway, its true that some ppl (clients) use ie6, and in numerous casesthey will not want to upgrade, but hey, you dont have to take such work :) once i said to a client that since ms doesnt support ie6 anymore the site will not be tested nor compatible in ie6 since i want to use some stuff which i know will not work easily in old browser. I believe that if you do this witch enough confidence most of the clients will accept it (from my experience), its your task to be an expert not your client.

    @the author, thanks for this article :)

    • 75

      I’m sorry but the argument that “you don’t have to take such work” is naive and really just ridiculous. Some of us actually need to make money in this business and don’t have the luxury of turning down a client just because they want their site to look exactly the same in IE6.

      I agree that it is possible to use a few HTML5 and CSS3 features right now, but I’m not about to turn work down just so that I can use “cutting edge” markup.

  8. 76

    I think someone said it already on CSS Tricks on their recent poll about this ( when you’re working with some governments, you have to comply with some standards and working with HTML 5 it’s not a part of them.

    Of course you could still use it, but it seems to me that’s not the best move to use the advanced features of HTML 5 and patch for older browsers if you can do the same just once but with older code.

    Obviously, this situation applies not only to government jobs.

    Having said that, I would still consider to use it on a new site and definitely use it on a web app

  9. 77

    HTML5 should be learned and when the W3C finalizes the HTML5 validator then it should be used in production. Same with CSS3. It’s not a matter of HTML5 being finished, just that we can validate to ensure our code is properly formatted for CBC.

  10. 80

    Christopher Anderton

    December 10, 2010 7:08 am

    On the other hand. Is HTML5 and CSS3 standards this date? ;-)

  11. 81

    I agree with this article 100%. With tools like Modernizr to help us with fallbacks there really is no excuse not to start using this new technology now.

  12. 82

    Problem is not HTML5, it’s CSS3 (especially CSS3 Transitions). I will use HTML5/CSS3 when Firefox4 will be launched

    • 83

      Then use CSS3 transitions in such a manner that browsers that don’t support it don’t lose functionality. It doesn’t mean you can’t use it at all, you just have to be a bit reserved with it for now.

      • 84

        That’s right. But isn’t it better to use a good js framework (jquery) that works everywhere instead of css3 transitions ?

        • 85

          Performance are better with CSS3 transitions because it’s native for the browser.
          For sure, you can’t do better performance with JavaScript modifying DOM attributes each 30 ms. And it sounds such an hack.

          Moreover, CSS transitions are really simple to use and powerful (it works on (almost) all css properties, you can configure advanced parameters like easing). You should try.
          And degradations are always great, without javascript, without css3 support, the behaviour is always the same (exemple: sliding an image on hover), just without animation.

          However, you still can do a JS degradation for a better animation support and best browser experience ;)

  13. 86

    Seeing the possibilities with CSS3 and HTML5 I’m sure designers/developers can convince clients to switch or at least code this way from here on out.

    My company works with Meredith Publishing who owns a lot of companies like Parents Magazine, Fitness, Better Homes and Gardens, etc. and working with some of their old-ass code I’m constantly finding myself overwriting all the garbage that was originally coded to be IE6 compatible, or was just poorly coded in general, and it works and looks like crap. I’m pretty consistent about inserting CSS3 and HTML5 where possible (unless it’s like an email blast or something), especially on their mobile sites, and they’re one of this company’s biggest clients. There’s a reason they keep coming back and I’m sure the partners have done a great job convincing them to think forward with their code. There’s so many benefits to it, why not? It’s kinda like VHS versus Blu Ray in my opinion (in the voice of GOB from Arrested Development) COME ON!

  14. 87

    I agree with the point of view expressed in this article.
    I think demand will cause evolution to happen and the sooner everybody joins the HTML5 train the sooner browser maker will make compatible browsers.
    I also agree with the fallback implementation for those who can’t use modern browsers (or javascript or the ajax problem for disabled people).

    The problem I see in adopting yet another new technology, is that our clients aren’t willing to pay for the extra time it takes us to implement various versions of the same site.

    For the sake of encompassing change, I believe that we should start to gradually implement some new HTML5+CSS3 techniques in our work. We like the new tools and possibilities!

    Another way things are tending to take is the adoption of sloid frameworks that take care of braking the barriers of compatibility (and/or accessibilty). I think this could be the best compromise between integrating new technologies while having a (semi-) automatic fallback.

    It would be good to have a serious reference on wich frameworks are solid, open and accessiblity aware.

  15. 88

    Great article, something we have debated regularly until our small freelance team recently made the decision to move on up to html5 for all our new work. However, we made some compromises like writing to the strict-ness of XHTML (closing tags and using many typical tags that are safely cross-browser compatible) Html5 is useful for the simpler doctype and building forms is a dream. Using the html5shiv allows us to still code and not worry about the older browsers too much, and we still use 960grid as its basically a one pager so its easy to adapt and keeps the layouts good in IE too.

    We were quite happy making this decision as HTML5 continues to be actively developed, so we feel we’ll be ready once browsers do start using the new tags such as and .

  16. 89

    Excellent article and I totally agree with the points you raise. Users don’t care about a drop-shadow appearing consistently across browsers so why do we get so hung up on these things? All a user cares about is that the site works as expected and that the design facilitates this. If the design can make use of – and the user’s browser render – HTML5/CSS3 techniques then great but if not, it shouldn’t matter.

    100% cross-browser compatibility just isn’t going to happen but we shouldn’t hide behind that and be afraid to use the new features in CSS3 and HTML5. If we as a community don’t embrace and use these new features and encourage our clients to then who will?

    • 90

      Rizqi Djamaluddin

      December 11, 2010 9:25 pm

      Agreed (and this is my take on the matter too). Not everything is fully supported, nor will they ever be. Progressive enhancement is everything; as long as things don’t explode upon a less-capable browser, there’s no need to worry.

      It should be noted that CSS3/HTML5 doesn’t always make the workflow easier — for me it’s often longer (not harder!). But it’s honestly worth it. It’s simply a matter of providing fallbacks. Some things don’t need fallbacks; text-shadow is neat but it’s not absolutely necessary. Other things do; simply supply an alternative. My HTML5/CSS3 website degrades quickly when viewed in IE6; so I just use a conditional comment to detect IE, and set CSS rules for it.

      And yes. If designers won’t start using them, the web will be stuck here forever. Actually, I think it’s a matter of finding that brilliant moment when some HTML5 or CSS3 feature blows everyone’s mind in a way nobody thought of before (like iframes, table layouts, or ajax) — when that happens, the buzz will grow and people will gradually become aware enough for all browser vendors to push for suitably proper support.

      IE 6 will always be the old man living in the house on the corner. He’s definitely going nowhere for a long time, and nobody’s going to be able to convince him to move on. We’ve just got to tend to IE 6 for now, and move on.

      For clients, I found this argument compelling: “using powerful CSS3 features makes your website appeal more to the tech-savvy audience; they’ll be using newer browsers and technology, and will relate to your website using the bleeding edge.” Clients often go for this audience on the web; most of the people using IE 6 won’t be daring enough to do an e-commerce transaction anyway (they’ll usually call their tech-savvy son or someone). They’re aware that appealing to the tech audience brings better business.

  17. 91

    Marc-André Boivin

    December 10, 2010 7:21 am

    I disagree with this article. We should design for users, with client’s needs in mind, not for ourselves, or for the design community. It could happen that for some project, it’s right to use CSS3 and HTML5 but you should never make that choice before knowing who’s gonna use the website in the end.

    I’m not against evolution, but it’s not because it’s new and trend that we should use it without question for every project. And it’s the same for every new technology. I’m not gonna develop an ipad app systematically juste because it’s new and cool. It was the same thing about Flash a fews years ago.

    • 92

      Vitaly Friedman

      December 10, 2010 10:41 am

      I agree with you, Marc-André. However, the point of the article is not to just always use CSS3/HTML5 because they are CSS3/HTML5 but to use them whenever applicable. Yes, we should design for users with client’s needs in mind, and our designers shouldn’t be artworks; they should rather be solving client’s problems and achieve their goals. The point is that we can use CSS3/HTML5 to do exactly that, it’s not about designing something with cool new tools.

  18. 93

    Jeffrey Swartz

    December 10, 2010 7:22 am

    I’d like to echo what Abbas said. I enjoy the view from ivory towers and all, but the reality is that the next “big thing” we’re all really pining after is for IE6 to officially die.

    The REAL influencers here aren’t web design/dev shops who do the work, but he companies that pay for the work. We can cry all we want about how much better life is with CSS3 and HTML5 but until companies start awarding work with that kind of scope, we are where we are. Trying telling a Fortune 500 company you aren’t supporting their old crappy browsers and see how much work you actually get.

    Why do they ask for cross-browser support? Statistics. Plenty of people out there using old browsers visiting their sites.

    IE 9 is the only Microsoft browser that has support for CSS3 and HTML5 and it’s still in beta. So it will be long time before we can all simply code without consideration for IE8 (and earlier) unless Microsoft makes some kind of herculean effort to upgrade their users to IE9. Past history does not bode well for this notion.

    The only effective push I can see happening is with the foward-thinking high-traffic sites out there. Sites like YouTube, Facebook, Amazon, Yahoo, Google etc. have enough pull with customers to actually cause them to upgrade if they systematically start dropping support for older browsers.

  19. 94

    Cross-browser support is definitely a reason for concern, whether you want it to be or not – and I’m not just talking about older ones.
    Different selectors for various browsers and multiple lines of code to implement one style (eg. rounded corners) makes the workload greatly increase. Using older methods to achieve the same thing may be dated, but in the eyes of your clients it is the same and costs them less.
    If I use an image to make two rounded corners, and you use 6 lines or more (-moz-top-left, -webkit-border-topright etc), the only people that see a difference are other developers that look at your code.
    Don’t get me wrong, I use and support HTML5 and CSS3 in most of my newer projects, but when my client specifically requests IE7 (and heaven forbid IE6) support, I absolutely do not.
    You constantly see people developing new demonstrations in Safari, but are they really practical? They are usually awesome and completely innovative, however if only 20% of people use a Webkit browser, what client is going to pay you for that product?
    And to the above comment, @Shaun Ben, using article and section tags may work in IE6 but the real powerful elements do not so it is tough to say those sites are living up to the real HTML5.

  20. 95

    I find it funny how many people think saying “just don’t support IE6” solves the problem. What about IE7 and 8? They don’t support any HTML5 or CSS3 either.

    I think the best approach is to be reserved in usage of HTML5/CSS3 – stuff like rounded corners and shadows that add accents that enhance the viewing in modern browsers, but don’t break the experience for older browsers is perfectly acceptable.

    Also using HTML5 video with a flash fallback is an easy sell to clients who want their sites to work on mobile devices.

    Adding heavy JS frameworks to IE tend to just make the sites sluggish and unresponsive. To me that’s worse than missing some shadows.


↑ Back to top