HTML5 and CSS3: What They Mean for Your Business

“Will you be coding the site in HTML5?

At Sage, we hear this question all the time: HTML5 and, to a lesser extent, CSS3 are the buzzwords that everyone wants to hear. But the increasingly bloated W3C specifications of both HTML5 and CSS3 mean that often, neither party has a clear idea of what the other means when they refer to HTML5 or CSS3.  What do these nebulous terms really mean for your business and your website?

At this point, the HTML5 specification is the longest HTML specification the W3C has yet written, so it’s often difficult to extract meaningful details for your business, especially since browser support varies wildly. However, one of the most important and cross-browser compatible aspects of HTML5 is new, more semantic code: tags like <header>, <footer>, <section>, <aside>, and <article> make it easier for search engine crawlers to parse your document and determine the important content. It’s easy to make these tags work in older browsers that don’t support HTML5 elements (IE 6-8, I’m looking at you) by including a simple script dubbed the HTML5Shiv, which is in turn included in Modernizr, which is itself included in the HTML5 Boilerplate – all helpful tools that make your site more cross-browser compatible and more accessible. The HTML5Shiv is somewhat controversial as it relies on JavaScript to make designs render properly in older browsers – in some cases, the entire layout may break. However, browsing statistics indicate that over 98% of users today have JavaScript enabled, and JavaScript is now so important to the functionality of most sites, that supporting users without JavaScript enabled is at best a minor worry.

Another feature of HTML5 that can be implemented immediately are new form input types, such as tel, url, or email. In most browsers, these render as standard text fields, but smartphone users visiting your site will thank you: many mobile devices, notably the iPhone, display custom keyboards optimized for phone number, URL, or email address input. On older browsers, these degrade seamlessly to a standard text field. Microdata, technically part of a separate specification, is another SEO-friendly HTML5 feature: it consists of embedding information into the HTML markup itself in such way that machines are easily able to read it. Microdata is the basis of Google’s Rich Snippets, which gives users relevant summary information about their search results, and since it’s never displayed, it’s totally cross-browser compatible. All these aspects of HTML5 contribute to building a search engine-friendly, future-proof website.

CSS3 speeds up the design and development process by providing CSS rules for techniques that have traditionally been done with a combination of Photoshop, container <div>s, and JavaScript: drop shadows, gradients, and rounded borders, for instance. Rules like box-shadow or border-radius speed up your page and improve the user experience by reducing HTTP requests and minimizing page size. Even older browsers (that is, IE 6-8) can render CSS3 properties correctly with the aid of a progressive enhancement script (at Sage, we’re huge fans of CSS3PIE). It’s easy to degrade gracefully: for rules not yet supported by CSS3PIE (text-shadow jumps to mind), Modernizr (above) allows developers to specify an alternate style for older browsers based on their support. The trade-off to using CSS3 rules, naturally, is somewhat inconsistent rendering (text-shadow, again, is especially unpredictable), but do websites need to look exactly the same in every browser?

These CSS3 rules speed up the development process: where once we needed 4 separate images (and divs) to create a simple rounded box which was next to impossible to change, we can now use a simple set of bulletproof border-radius rules, and easily change the box’s appearance – saving our clients money.

Leave a Reply

Your email address will not be published. Required fields are marked *