Web Design in HTML5 & CSS3 – When should I start?

Hi and welcome to our web design video blog. Last week we touched on getting started with html5 and today we wanted to continue by asking the question: when should we start using HTML5 and css3? So although there is no definite answer to this question, there are pro’s and con’s either way, which we are going to quickly run through.Our colleague Dan has also recently been to Adobe’s HTML5 Camp in London, and he’s going to share with us some of his favourite online resources.

The Pro’s

• we all want to progress our coding skills and be at the top of our game – if we start using these techniques now, we can start to learn and absorb new techniques gradually before it’s too late.
• Coding websites in HTML5 and CSS3 is a good selling point from a business point of view, because you’re assuring customers they’re receiving a product that is up-to-date.
• The new semantic tags will hopefully make the development process more efficient and meaningful for developers.
• Plus, the more people that switch-over to using HTML5, the quicker the general world-wide transition will be.

The Con’s

Like we suggested last week however, there are a potential negatives to consider.

• Firstly, there is sporadic compatibility across all of the different browsers. If you’re new to HTML5 and CSS3 you might find yourself taking longer to complete a website because of the cross-browser testing you’ll be doing.
• Some elements have not been fully developed yet, so it can be hard to track the status of HTML5 & CSS3 elements being rolled out and consequently being supported by browsers.

So if you’re new to HTML5 and CSS3, here’s our colleague Dan who’s going to show you some of our favourite resources and references for getting started:

Dan’s Resources

So here are some resources that have helped and still do help me when it comes to HTML5 & CSS3.

The first resource is “Dive into HTML5 is a good place to start (written by Mark Pilgrim) ” and can be found here. It gives you a quick introduction on HTML5 and if you scroll down the page you will see a table of contents structure which directs you to mini articles about each topic. Although this is more of a read than anything technical or hands on, it’s a great place to start.

The second is HTML5 demos found here. This is very useful for looking at various demos and what browsers these are compatible with. You can also filter by tag name so if you have a specific idea and want to take it further – you can view work by other designers/developers that have already made something to do with this specific feature.

For html5 & css3 browser compatibility checker you can go here. This is another site that is useful for knwoing what browsers support what when using new techniques. You’ll also be glad to know that the site runs on HTML5!

There are so many resources out there that you can’t really go wrong. here’s one more to get you on your way, see here. There’s a lot of tutorials, scripts and goodies to be found here.

An essential part of the build, download the whole package or customise what it spits out - http://www.modernizr.com/. It also provides backwards compatibility for the browsers we won’t mention!

One last thing – check out the Google Chrome HTML5 angry birds (must be viewed in Google Chrome). You can also find this on Google + games if you have access to that.