Last week I inadvertently started a debate at work about how much HTML5 we can use/get away with in client work, with me firmly in the camp of using as much as we can and the HTML5 shiv should be leveraged to serve layouts to IE. For me the advantages outweigh the supposed pitfalls, and by continuing to be restrained by older browsers, including our old favourite, then we’re not only not doing our jobs properly, we’re letting our clients down.
(*Note this is a general argument, not taking into account site specifics such as stats etc.)
For me, the bare minimum we should be doing is switching over to the new HTML5 doctype and begin to take advantage of as many features as we can such as the new form elements, and format of javascript links etc. HTML5 has been designed to be backwards compatible so switching to the new doctype will have no ill effects at all.
Personally I would go one step further and begin marking pages up using the new structural elements such as header, footer, section, article etc, making use of Remy Sharp‘s excellent HTML5 shiv to display these elements properly in IE. I know there are accessability issues surrounding the use of javascript to render page layout, as those users without javascript will see a poorly rendered layout. I’m usually a firm believer in everyone being able to access a site regardless of the device they’re using and it’s capabilities, with javascript adding extras which if taken away do not affect the functionality of the site. However, with HTML5 now at a mature level and with IE6 still hanging around I think it’s time we took a step and dragged users along a bit by beginning to use these new elements and serve javascript up to IE and older browsers.
I understand the reasons for being wary of this approach, it’s not fully accessible, relies on an externally hosted file and introduces an extra point of failure for the site if the external file can’t be loaded for some reason. However, the number of users with javascript turned off is negligible and with the rise in popularity of use of frameworks such as jQuery and MooTools means that those small percentage of users will be well used to websites not looking spectacular. For me the benefits now outweigh the drawbacks and we’re not doing as well as we can by sticking to the tried and trusted methods and we should be pushing the envelope a bit further if possible.
For me it’s not a question of whether we use HTML5 (or some of the newer CSS3 declarations), but how much of it we use?
Having attended the DIBI Conference in April and been witness to the brilliant presentation given by Andy Clarke, I was fascinated with a technique he demonstrated with pure CSS of items appearing to flip over on hover, and wanted to try this for myself. I had the ideal project coming up which was an end of year university site that required building, and this would have been perfect for it. Each “card” was going to have an image of the module and when flipped over would have some text information and a download link of the work. Alas, I wasn’t successful at the time and had to abandon that idea as time ran out.
I was still determined to figure it out though and I’ve kept returning to it in the months since until I finally cracked it!
Take a look at the demo. – You’ll have to be using the latest version of Safari to see it in it’s full effect
I know this is a long way from web standards and being able to use in client work but it’s good to experiment and know what’s possible. To achieve the effect makes heavy use of webkit only properties such as -webkit-backface-visibility, -webkit-perspective and -webkit-transform-style
I won’t go into the full code structure but the technique is achieved by hiding the back until it is hovered using -webkit-backface-visibility and positioning to achieve. Feel free to look at the full HTML and CSS to see how it was done.
CSS media queries have been around for quite a while, with CSS 2 introducing media=screen and media=print also available to create print stylesheets, but CSS3 has added to this with the new media queries which allows much more targetting of browser types. These allow different stylesheets or different rules to be targetted by declaring the widths of browsers. Examples of this include:
@media print {
body{width: 100%}
}
Or more advanced targetting such as:
@media screen (max-width: 1024px) {
body {background: #fff;}
}
The CSS spec states that:
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
This means that sites can be optimised to both the device and screen resolution, although one could argue that by hiding certain elements on smaller devices is changing the content. For example, if this site is scaled down to 800×600 the “about” section on the homepage is not displayed, as this prevents horizontal scrollbars and is not essential. Users can still access the navigation and the latest posts, but I feel that this information can be removed and not alter the experience too much.
Media queries have received a lot of attention recently with the A List Apart article on Responsive Web design and excellent uses of the technology by Simon Collison and Jon Hicks, and whilst I was impressed with them I held off from experimenting with it for a while, as I didn’t know too much about them and they seemed a little scary!
However after experimenting with them recently on this site, it’s a really simple technique of over-riding your default stylesheet with specific styles for the devices and browser sizes stated. Although screen resolutions are increasing and very few users are still using 800×600 or even 1024×768, the art of progressive enhancement means that these users shouldn’t be ignored and media queries allows sites to be tailored to these users. Resize your browser to see how this site reacts to smaller browser sizes, although there are more impressive examples out there.
Having played with them now and seeing the power of what can be achieved, I’ll definitely be making use of them in future projects, both at work and in personal projects.
