HTML5! CSS3! How many times you’ve heard about it online or from friends? Its pretty common now everywhere. It is important though to understand the benefits and how they can work for your web project before you decide to use it for your site.
Perhaps we should start from deciphering the abbreviations and tell what they stand for and what they are.
HTML5 – HyperText Markup Language, version 5
HTML is a language for structuring and presenting content on the web. If your website is a house then HTML5 is your walls, chairs, tables, etc. (the interior decor)
CSS3 – Cascading Style Sheets
CSS is a web-based markup language. It is used to describe how your website will look like. Take a look even on this page – everything you see is CSS. It’s your house’s painting. It makes any web site page in html look pretty and add all the customizations that every client requests.

Although we won’t go too deep into the history and how these codes work, but see how they can benefit you:
HTML5
Support
The most impressive feature that HTML5 supports are animations, video and audio integration and functionality.
Earlier if we wanted to create animations, show video or attach playable audio to the website, we needed to use Flash or even browser plugins to do that (eg. Quicktime). However, Now modern browsers are able to do that by themselves with support of different tags such as <audio>, <video>, <canvas> without any problems. Now you can have beautiful animated logos, integrated video and audio in any site which can also play on any device, a computer or mobile device.
New Tags
Thanks to new tags, developers are able to write clean and readable code. You can ask “why do i need that?”. Well, it improves your google seo.
For example, what is more understandable:
<div>…</div> or <article>…</article>

Mobile Devices
With HTML5 you can easily create mobile applications for every platform – iOS (apple), Android, Windows Phones. The benefits are that there is no need to create separate applications for every mobile OS – Just to create it once, and no matter what the device it will work.
Here are some examples:



CSS3
Usage of CSS3 offers you many interesting things also…
Responsiveness – or commonly known as Responsive Design.
With CSS3 you can format your website for every screen – desktop, laptop, tablet, phone etc. How many times when you open the website on your iPhone do you have to scroll or zoom in to read the text?
A good example of this is the New Boston Globe Website. On opening the site, it resizes to fit and be readable for any device.




Gradients, Animations, and Effects
CSS3 allows you to create and use different animations, gradients, shadows, rounded corners, columns and much more.
Maybe you don’t see it as the viewer, and this is the developer/designer problem but it does make a huge difference.
When you open a website the browser needs to load every image from the server. In doing so, the Browser sends the requests to download content, and gets the response with images, and with more images means more requests.
More requests equals more server load time.
More server load means that in time you need a better hosting package.
Do you see where this is going?
Though with css3, it solves this issue, so that to display all these beautiful shadows, gradients, rounded corners, browsers don’t have to make additional requests to the server. This of course means less bandwidth, and faster loading speeds, which in turn can help your sep also with google.
This is a simple example from the traditional method of creating customized effects and gradients, versus the newest methods in web design. Below is a simple example of how many images you need to display a shadow over a rounded box.

With the traditional method, a minimum of 5 images must be loaded to create one simply effect, whilst with css3, it is simply pure code, no images. This not only is more efficient for your site loading speed, but also for updates, as a coder shouldn’t have to reslice the original designs again to make a change, but just change the code to eg. make a gradient or rounded edges more circular, rather than angular.
Fly on the ointment
It all sounds pretty good… but sadly even with these new technologies not every browser supports them. Older browsers, which many viewers and clients still use may not be able to see your site correctly, eg. if using IE7. Of course over time, as people upgrade their browsers, this will not be an issue, though if you are ready to decide on using new technologies for your site, HTML5 & CSS3 are currently only supported fully by these browser versions:
Safari 4+
Firefox 3.5+
IE9+
Chrome
The Conclusion
With the marketplace and technology becoming more and more mobile, its important to have faster loading sites that still are unique and beautiful. With time, and as more users use tablets and phones to view online sites older browsers will phase out. Though, sadly until then if you decide to take advantage of these new abilities to get ahead of the curve, just be aware of the downsides for those clients that may not be able to view your site correctly on an older browser.
If you have questions, drop us a comment below!