Posts Tagged ‘HTML’

Five ways with responsive tables

Monday, June 16th, 2014

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. (more…)

Five front-end links for Friday

Friday, June 13th, 2014

A few links I found interesting this week. (more…)

Highlight dates from selection to hover position

Tuesday, May 13th, 2014

This would be useful on a calendar when selecting a range between two dates.

View the demo (more…)

Pure CSS Rollover Image Carousel

Tuesday, April 22nd, 2014

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 (more…)

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

Friday, November 22nd, 2013

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. (more…)

The placeholder attribute

Thursday, August 22nd, 2013
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. (more…)

Same page references, or named anchors

Wednesday, August 22nd, 2012

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 (more…)

Web standards content is platform agnostic

Thursday, September 1st, 2011

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! (more…)

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

Wednesday, April 13th, 2011

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. (more…)

Maintaining the user journey with HTML 5 web storage

Friday, January 21st, 2011

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). (more…)

Front-end developer essentials – which DTD to use?

Wednesday, August 18th, 2010

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? (more…)

CSS for Deprecated HTML Attributes: Part 3

Thursday, March 8th, 2007

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. (more…)

CSS for Deprecated HTML Attributes: Part 2

Saturday, February 10th, 2007

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. (more…)