Category: Basics

A series on fundamental knowledge of web development, aimed at beginners.

A simple explanation of High DPI screens

NB: This post is based on a briefing note I sent around at rehabstudio, the agency I work for. It’s intended to clear up some of the confusion around resolution on mobile devices with high DPI screens, especially when talking with clients, and is aimed at all roles in the agency, not only developers. As such, it may not be one hundred percent ‘correct’, but I think it does a good enough job of explaining the subject.

Read the full article

Removing anonymous event listeners

I recently ran into a problem involving the removeEventListener() method, which caused me a good half an hour of confusion before a lightbulb appeared above my head and I was enlightened by a solution — a solution which, it must be said, is very obvious in hindsight. So doubtless many people know this already, but I’m recording it here along with another approach I thought of afterwards, in the hope that they may be useful to someone in the future.

Read the full article

Bitmap Image Optimisation

Harry Roberts wrote a great article, Front-end performance for web designers and front-end developers, which details various techniques for improving page load times. One thing he skips over, though, is image optimisation. There are many ways to optimise images for loading performance, including using image sprites, icon fonts, and replacing bitmaps with SVGs. But whenever you have to use bitmap images you should also optimise them before they make it to the page.

In this article I want to show a few simple image optimisation techniques I use, which are aimed at reducing the filesize of the images, and therefore speeding up your page loading times.

Read the full article

Practical CSS Tips on the Safari Books Blog

I’ve written some posts for the Safari Books blog, featuring practical CSS advice.

Using CSS Fonts for Adaptive Icons is the lead article, and there are two shorter tips: Making Better Print Stylesheets, and Faking Randomisation With nth-child.

The importance of semantics on the web

We, as website makers, quite often advise our clients to avoid generic link text (read more,click here, etc.), and explain that more verbose descriptions help give context to users with screen readers. But using semantic link descriptions actually helps everyone.

I recently read Peter Morville’s fantastic book, Ambient Findability, which defined really well the motivation to use semantic descriptions for links: they give the target page aboutness.

Read the full article

Checking for installed fonts with @font-face and local()

Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).

One slight drawback of the technique is the blank space that’s displayed as the new font is loaded into the browser; this is especially unnecessary for users who already have that font natively on their system.

The way to get around that is quite simple; use local() to check if the font is on the user’s system first.

Read the full article



I’ve updated my Speaking page to include more conferences, more videos, and a little on my speaking requirements and preferences. I’m planning to cut down on the number of talks I give in 2014 (twelve is too many), but am always open to interesting offers and opportunities, so please get in touch if you’re organising an event.

[#] 1 Comment