HTML5 and CSS3 in 2011 One Foot, Then the Other

One major buzz item in 2010 was designers and developers starting to implement HTML5 and C335 standards into web designs. HTML5 – CSS3 tends to be included when discussing HTML5 – is the next stage in the evolution of HTML, the base language that is used to build the vast majority of the Web.


Going into 2011, as the markup is not yet finalized by the W3C, and certain techniques have not been adopted by all browsers, what does this mean for the PR and social media industry today? Additionally, what does this mean for a site’s visitors and application users in the short and long run?

Why should I care about HTML5?

HTML5 and CSS3 bring a lot of user experience techniques like image and animation effects, transitions, and styling, as well as geolocation and other programming capabilities to browser level, without having to download an Adobe Flash animation or program.

Why is this cool? Flash is a technology that can do many things, but it requires that you install and update proprietary third-party software in your browser. Moreover, Flash applications can also be resource-intensive on some systems. With HTML5, many user experience capabilities can be built and implemented by designers and developers with a few simple lines of code in a basic text editor with impressive results.


HTML5 was also developed with mobile platforms in mind. The standards take into consideration how the websites and web apps would need to function on smaller, GPS and proximity-enable, touch-screen devices, that need to be light-weight programming wise.

So what does this all mean for clients?

It means websites and web apps can be made in less time, with cleaner code. Richer web experiences are easier to implement because you don’t need proprietary software to build elements like animation or images, and web products that are less websites, and more web-based applications.

This is not saying that Flash is irrelevant; Flash accomplishes many things that cannot be done using HTML5 code, like elaborate, feature rich multimedia experiences. But these new code methods offer many options to create and deploy richer web experiences without the extra coding, downloading, and processing needs of Flash.

HTML5 Web App Timer

YouTube HTML5 Trial

Google Voice Web App
(You will need to view this site using your iPhone or Android mobile browser).

Watch Out for Bumps in the Road

HTML5 is not a completed product. There are some elements that have not been adopted by all browsers yet, and will require planning for graceful degradation depending on the items being used (graceful degradation is the planning of a web design to perform, even if some functionality is not supported by the some browser, like IE6). As with any project, it’s important to consider what resources are available in the planning stages, so you can pick the right tool for the job. That being said, it’s worthwhile to begin diving into the new standards today, to be fully involved in the way the web will function tomorrow.


Although not every browser renders every new HTML5 standard, it important to build sites and apps using progressive enhancements for websites today, in anticipation for their use tomorrow. The first thing everyone working with the web should do – from account reps to designers and developers – is get familiar with the features and capabilities HTML5 has to offer. Go on, get dirty start using new standards today.

Here are a few sites that can help you get familiar with some of the new techniques and applications of HTML5 standards:

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
Push Your Web Design Into The Future With CSS3
Twinbow – A more colorful online twitter client experience.
To Do List – Simple, easy to use online to-do-list app. – This site allows you test font and type layout using a Photoshop-like experience.
Okcool – A Fashion Magazine/Blog which has fully implemented the new , , , and structural elements into its build and layout.
Nike BetterWorld – Stunning use of CSS3 multiple backgrounds
CSS3 ButtonsThese are examples of high impact call to action buttons created completely from CSS3 code, no static graphics are needed
Apple Safari HTML Showcase – An ongoing showcase of new sites that fully integrate all sorts of new HTML5 elements into their design. (Safari and Chrome required to view.
Take a look at the three site below on your IPhone or Android Browser
Subaru Cars
Underarmor Clothing
Schiphol Airport

As the language evolves, how do you anticipate implementing HTML5 into your digital media plan? Have you discussed what HTML5 techniques can be introduced today with your development and design teams? Are you looking at ways that HTML5 can be used for mobile web app development?