Login or Register

Login, Buttercup!


Are you looking to grow as a designer and developer? Tired of going to places that don't offer any valuable discussion and content? Well Drawar is here for you. You control the content and seeing as how you are the type of person that thrives on writing great stuff this site is only going to get better after you join.

 

When is the right time to begin using HTML5/CSS3

We have had several discussions lately on emerging technologies like Web Fonts, CSS3, HTML5, and browser compatibility. The debate on when the time is right to use these technologies can become heated, and is definitely a popular topic.

To this point, I have seen most people using CSS3/HTML5 for minor things, such as rounded corners, and the simple doctype; or to create websites that are centered towards the Community. Some have moved to using these new technologies in a majority of their work, either dropping support for older browsers, or charging extra for it.

Some believe that minor differences between browsers are fine, some think every pixel should be the same.

My question is, when will you all move to using primarily HTML5 and CSS3? Obviously the specs aren't complete, but they are getting closer week by week, and aside from some far fetched 2020 estimates, most believe that 2012 will be the year both become recommended specs.

I personally want to see a bit more browser support, but I believe that I'm coming into the design/dev world at a point where I believe putting my efforts into learning a bunch of browser hacks wouldn't be the best pursuit. I think spending the time to truly learn how to make the most out of HTML5/CSS3 alongside PHP is going to allow me to begin turning out some really neat apps in the coming months

bah /end 3 A.M. rambling.

 

Discussion (22)

I think it depends less on when W3 decide the specs are "complete" and more on browser support. If the support exists in a high majority of browsers, you can go use that property.

Some people say it's fine to use properties like border-radius because it degrades gracefully , what, over 50% of the browsers out there? That's a giant cop out in my opinion, rounded corners and drop shadows are more than just fluff, if 50% or more of the users are seen a bad design, you have done something terribly wrong.

 
 

I use them now.

As long as you're comfortable with the idea of progressive enhancement, and that your page may look different in different browsers (see Andy Clarke, who discusses this often), there's no reason not to start using them today. HTML5 and CSS3 have been designed to behave nicely in older browsers.

@Lewis About 40% of browsers support border-radius (which is to say, everything but IE). Be aware of that, and make sure your design looks fine without them as well. Your users don't have to be seeing bad design, they just have to be seeing a different design.

 
 

I've been starting to implement it where I can. As in my own personal work absolutely all the way but including the fall backs for the browsers who've yet to catch up. But my purpose for using it now is because it is to continue to improve myself and feeding the curiosity monster in me.

As in when it is the right time to begin using it is whenever you want. Who's to say when you should? There's no one pointing a gun at you to do it or not to.

Have at it is what I say!

 

I use css3 a lot. Just gotta love it! Give the people who use new and better browsers the best experience possible. The only way to get IE users to take the plunge and go for a better browser, is by using css3 a lot. Hopefully, once they encounter border-radius, text-shadow, transitions etc, they will start to "look further than their nose".

HTML is something different though... I don't see how at the moment... Suggestions?

 
 

@futuraprime,

I don't disagree with you entirely but let me draw up a quick hypothetical.

A client wants you to make a site with purpose of selling baby toys. Part of brief you extract is the site must appear friendly and safe. This association will be passed on to the baby toys and customers will hopefully buy. You decide, in order to achieve this goal, that the design should include rounded corners, based on your research in principles like Baby face bias, Anthropomorphic Form and Contour bias.

Let's imagine expectant mothers aren't the most tech savvy people, the amount of people that end up browsing that site in IE is 60%.

I would consider that bad design.

This might be an extreme example but I think the point is still there, we choose these aesthetics for a reason.

 

I use the safe HTML5 stuff all the time now, for all sites: doctype, character set, script and style (maybe there are other things too)

With the HTML5 structural elements it's just a matter of how comfortable you are depending on the HTML5 shiv that allows you to use the new elements. I'm comfortable with that for my own stuff, but I feel slightly negligent and indulgent using header instead of div id="header" for client sites, so I don't.

I'm getting in to CSS3 gradually. I don't believe in using CSS3 and also providing backups to replicate the effects for non-supporting browsers, so it's mostly some rounded corners and box-shadow.

 

I agree with the progressive enhancement approach. It really depends on the context and you're comfort for non-supported users having a different experience and/or putting hacks in to account for those browsers that don't support it.

I'm really liking the "column-count" property.

The time to learn CSS3/HTML5 is now, the time to use it is up to you and your clients.

 

@Lewis I agree -- and that's really the key to the idea of progressive enhancement (vs. graceful degradation). You *start* with the minimum requirements, and make sure that you hit them everywhere, and then you make it look nicer where you can. If rounded corners are a requirement, you *start* there and lean on tricks to make it work in IE.

Now, if Scrivs wanted to make all the buttons on Drawar rounded with gradient backgrounds, say -- why not add in the corners and gradients using CSS3? Sure, it won't show up in IE, but clearly squared-off buttons are acceptable in the design of the site. IE won't look bad, just different.

 

Thing is, when I see a code example like this:

div.coolEffect {
-webkit-transition-property: opacity; /* safari */
-webkit-transition-duration: 2s;
-o-transition-property: opacity; /* Opera */
-o-transition-duration: 2s;
-moz-transition-property: opacity; /* FireFox */
-moz-transition-duration: 2s;
-ms-transition-property: opacity; /* IE */
-ms-transition-duration: 2s;
}

I don't much want to go there...

Source: Belgian design blog Gigadesign

 
 

The only way to get IE users to take the plunge and go for a better browser, is by using css3 a lot.

I disagree with this completely. I don't think there's anything web designers can do to make people stop using IE. Most people only care about design when it stops them from using or understanding something.

If they encounter your site in IE, and it doesn't work or looks broken, they won't change their browser, they'll just find a site that does work or looks trustworthy.

I think as a profession we need to stop this obsession with weaning people off crappy browsers (Microsoft, I'm looking at you here) and just deal with the world as it is. It's our job to make websites that visitors can use; let's get on with it.

 

Sorry I haven't replied to everyone as of yet, this week has been hectic with my great grandfather's funeral and moving into a new place.

I think this is really a matter of personal choice, we can't wait forever for CSS3/HTML5 to be fully supported, but we also can't provide solutions that may look very crappy in some browsers, and amazing in others.

I agree that we can't "force" people into switching browsers by simply using as much CSS3.

I think for now I will use HTML5 and CSS3 for my personal projects, and for sites with designers/developers as their main target group.

 

I started using HTML5 and CSS3 about a month ago in the majority of my work simply to force older browsers to be skipped soon, however I do provide HTML5 compatibility for the elderly with HTML5 Shiv. I'm personally not into getting around problems with javascript because I don't mind variations in the design across different browsers.

I think believe the time is right today because hacking your way around older browsers simply allows too slow development - IE needs to get it's act together quickly!

 

I believe a decently large majority of visitors to most sites will have Javascript enabled. I really hate to feel as if I'm alienating a group of users, but if we continue to cater to outdated technology then we are holding ourselves back.

Even if you have a library of Browser hacks ready to roll, the time spent compensating is still reasonably high. As I progress, I'd much rather be learning the technologies that are going to be shaping the web now and in the future, rather than those that are going to be irrelevant.

 
 

I may be minority here, but I'm starting to be tired of the buzz about html 5 / css 3. For something, that is still unfinished (and won't be finished in next two or three years), all the "special" (css 3) effects used with browser prefixes - it's just < marquee > once again, result of "browser war".

Other than that, I may look into support of html 5, at least how browsers behave with shorter doctype and javascript, but I don't think I'll start using it more just because it's new and shiny.

 

I use CSS3 quite a lot, but as far as HTML5 goes I won't adopt it as soon until all the mainstream browsers support it without having to resort to JavaScript.

It's quite safe to use HTML5 if you're building a mobile site, since the great majority of browsers are webkit (what a sad world we live in when our cellphones can do websites better than our desktop computers), but as far as desktop clients, I'll stick with XHTML for one more year at least.

Perhaps in 2011, with the release of IE9, I'll slowly start to adopt it. Regardless of Andy Clarke's view on the matter, it's much more important for you as a developer and user to have your own opinion on the matter.

The benefits of using HTML5 right now don't outweigh the disadvantages. You can sugarcoat it as much as you want, but that's the truth.

As for CSS3, it's perfectly fine and safe to start using it now, just remember about how your styles will degrade as you move to older browsers and apply the proper fixes, not hacks.

 

If you use DOCTYPE html you are using HTML5 anyways so the time for HTML5 is now. That doesn't mean you can use all the new tags that are associated with it, but to 'upgrade' your code is a simple change so why not make it happen now? As for CSS3, since most of the cool stuff has some type of fallback then I don't see what would be holding you back unless you are looking more at the animation stuff.

The faster we all start to adopt these new technologies though then the faster browser makers will jump on board with them. Then again the only one really holding us back is Microsoft and from what I've read IE9 won't support many of the new CSS3 stuff so we are looking at IE10 for real mainstream adoption.

 
 

Respond To This Post

You need to Login or Register to comment. Become a member of this great community because you like to be a rebel and actually learn on a website.

Recent Posts

Title Last Reply Replies
 

© Emersian // About // Pimped out hosting by (mt)