Accessible HTML video as a background

Today I got a comment on Autoplay is bad for all users which asked:

So why does this high-traffic site designed by a former top-Google UX designer use it?

The comment has linked to a page which has video as a background element playing underneath the introduction text and call to action button, the images are moving but there is no sound on page load. At times this apparently important information is completely invisible.

Using video as a background is on the increase so it’s important to know how to make it accessible for everyone. Continue reading

Old web standards vs. new best practices

My professional life as a front-end developer started just before the Web Standards Project, everyone was working to make sure style was separated from content. It was drummed into me and I drummed it into you for many years, so it’s been difficult to forget. Continue reading

Autoprefixer – the write once works everywhere Gem

Are you bored of looking up which vendor-prefixes are still required for a particular rule on a particular day, or you want to remove the bloat that a catch-all mixin gives you? Then read on. Continue reading

The placeholder attribute

Translations: French

For years designers have overlaid labels onto input fields in order to save screen real-estate. As front-end developers we implement this using absolute positioning and event handlers to move the label offscreen once the user has focused into the field. User focuses; label disappears.

The placeholder attribute was introduced in HTML5 and has since been misused in order to replicate the functionality described above. Let me set this out very clearly before we move on, the placeholder attribute IS NOT a replacement for a label. Continue reading

Autoplay is still bad for all users

Just over three years ago I wrote an article called Autoplay is bad for all users. It was written a few months after WCAG 2 became a formal recommendation but before HTML5, particular the video element, had really gone into mass production.

Much, if not all, of that article still holds true today but there are a couple of points to add to it. Continue reading

Web standards content is platform agnostic

A while ago I wrote ‘It’s not HTML5! But that’s ok’ and then I finished a web standards version of The Guardian’s interactive in order to prove they do not require Flash. So when I saw I had been mentioned on The Guardian website’s technology section I was excited! Continue reading

Guardian interactive review: Flash vs. web standards

The Guardian Interactive Team use Flash, almost exclusively, to create data visualisations and infographics for interactive content on guardian.co.uk. The two main reasons are that it is quick to build and that it looks identical in all browsers. Continue reading

It’s not HTML5! But that’s ok.

Web 2.0, AJAX and now HTML5 – all buzz words that have got non-developers a little bit more excited about web development and me using a lot more /facepalm.

As a developer you know what these buzzwords mean and can read between the lines when asked for an HTML5 site. They don’t really want a site full of offline-storage, data-* attributes, video and audio elements but you can give them one that is progressively enhanced and standards compliant. Continue reading

Why we should support users with no JavaScript

Why should we want to support users that, for whatever reason, have Javascript disabled? I had found it difficult to answer this question in a constructive way, whilst also being backed up by research. This post aims to give you some reasons why we should still be supporting users without Javascript. Continue reading

Front-end developer essentials – Accessibility & web standards

This is the second in a series that should form the building blocks to being a good all-round front-end developer. Previously I explained the basic ideas behind user interface design and here I’ll discuss why accessibility and web standards are important. Continue reading

Autoplay is bad for all users

Translations: Belorussian and Polish

Autoplay is a bad idea not just for accessibility but for usability and general sanity while browsing. This article will explain what the problems are, where to find backup for arguments and what you can do if autoplay is a must have. Continue reading

Helping the Developers

In a recent article, Marco Battilana wrote about how he ensured his standards-compliant designs remained so after handing them over to a client. His solution was to target the depreciated tags and attributes and style them using BRAT, which made the developer acutely aware that there was some problem behind their WYSIWYG‘d page.

I had a similar problem a couple of years ago when I was employed by a company to tidy up front-end code and to design a cleaner looking user interface and I had to come up with a subtle way of steering them in the right direction. Continue reading