Five ways with responsive tables

Recently I was uninspired by Bootstrap’s cop-out for responsive tables where they just add horizontal scrollbars for widths under 768px.

I’d come across a few ideas in the past and now I’m exploring them to give pros and cons for each solution. Continue reading

Pure CSS Rollover Image Carousel

This might be useful for a list of search results where you want the ability to show more images without the distraction of using a full carousel.

View the demo Continue reading

Problem: Background image overlapping right-hand-side of the grid

The first in what I hope is a series of simple techniques to get around problems that at first sight might seem impossible. I like to say that everything is possible given a bit of thought*.

This technique is for when you need to place a background-image more than 100% to the right of the page. 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

Same page references, or named anchors

Named anchors have been around since HTML was created and allowed you to link to a different part of a page. They can be referenced by external page by using a hash then the identifier after the URL 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

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

Maintaining the user journey with HTML 5 web storage

The HTML 5 specification includes a web storage API for data storage in web clients. It means we can store large amounts of data, client-side, to read and write to as we like without causing the site to slow down (when compared to using cookies). Continue reading

Front-end developer essentials – which DTD to use?

A DTD (document type definition) tells the browser what version of (X)HTML you are coding your web page in. Standards compliant pages must contain a DTD as the first item on the page otherwise it will not validate. Which one should you use? Continue reading

CSS for Deprecated HTML Attributes: Part 3

In this series of articles I have described how to remove the deprecated attributes in HTML and replicate the styles using CSS. The first part looked at hspace and vspace, type and border. Part two described how to replicate link, alink and vlink, size, noshade and clear. In this final part I will be mopping up width, height, bgcolor and align. Continue reading

CSS for Deprecated HTML Attributes: Part 2

In Part 1 of CSS for Deprecated HTML Attributes, I described how to replace HTML’s deprecated attributes with CSS, which is more flexible and inline with web standards in use today. If you want to convert an existing site that is using out of date practices or want to understand how to bring your own development up to scratch, then these articles are for you.

Let’s get straight into it with link, alink and vlink. I’ll also cover clear, size and noshade. Continue reading