Category: Basics

A series on fun­da­men­tal knowl­edge of web devel­op­ment, aimed at beginners.

A simple explanation of High DPI screens

NB: This post is based on a brief­ing note I sent around at rehab­stu­dio, the agency I work for. It’s intend­ed to clear up some of the con­fu­sion around res­o­lu­tion on mobile devices with high DPI screens, espe­cial­ly when talk­ing with clients, and is aimed at all roles in the agency, not only devel­op­ers. As such, it may not be one hun­dred per­cent ‘cor­rect’, but I think it does a good enough job of explain­ing the subject.

Read the full article

Removing anonymous event listeners

I recent­ly ran into a prob­lem involv­ing the removeEventListener() method, which caused me a good half an hour of con­fu­sion before a light­bulb appeared above my head and I was enlight­ened by a solu­tion — a solu­tion which, it must be said, is very obvi­ous in hind­sight. So doubt­less many peo­ple know this already, but I’m record­ing it here along with anoth­er approach I thought of after­wards, in the hope that they may be use­ful to some­one in the future.

Read the full article

Bitmap Image Optimisation

Har­ry Roberts wrote a great arti­cle, Front-end per­for­mance for web design­ers and front-end devel­op­ers, which details var­i­ous tech­niques for improv­ing page load times. One thing he skips over, though, is image opti­mi­sa­tion. There are many ways to opti­mise images for load­ing per­for­mance, includ­ing using image sprites, icon fonts, and replac­ing bitmaps with SVGs. But when­ev­er you have to use bitmap images you should also opti­mise them before they make it to the page.

In this arti­cle I want to show a few sim­ple image opti­mi­sa­tion tech­niques I use, which are aimed at reduc­ing the file­size of the images, and there­fore speed­ing up your page load­ing times.

Read the full article

Practical CSS Tips on the Safari Books Blog

I’ve writ­ten some posts for the Safari Books blog, fea­tur­ing prac­ti­cal CSS advice.

Using CSS Fonts for Adap­tive Icons is the lead arti­cle, and there are two short­er tips: Mak­ing Bet­ter Print Stylesheets, and Fak­ing Ran­domi­sa­tion With nth-child.

The importance of semantics on the web

We, as web­site mak­ers, quite often advise our clients to avoid gener­ic link text (read more,click here, etc.), and explain that more ver­bose descrip­tions help give con­text to users with screen read­ers. But using seman­tic link descrip­tions actu­al­ly helps everyone.

I recent­ly read Peter Morville’s fan­tas­tic book, Ambi­ent Find­abil­i­ty, which defined real­ly well the moti­va­tion to use seman­tic descrip­tions for links: they give the tar­get page about­ness.

Read the full article

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

Fire­fox 3.5 was released ear­li­er today, and joins Safari in sup­port­ing the @font-face rule with Open­Type and True­Type font fam­i­lies, allow­ing you to use a wider range of fonts in your designs (as long as they are cor­rect­ly licensed, of course).

One slight draw­back of the tech­nique is the blank space that’s dis­played as the new font is loaded into the brows­er; this is espe­cial­ly unnec­es­sary for users who already have that font native­ly on their system.

The way to get around that is quite sim­ple; use local() to check if the font is on the user’s sys­tem first.

Read the full article



I’ve updat­ed my Speak­ing page to include more con­fer­ences, more videos, and a lit­tle on my speak­ing require­ments and pref­er­ences. I’m plan­ning to cut down on the num­ber of talks I give in 2014 (twelve is too many), but am always open to inter­est­ing offers and oppor­tu­ni­ties, so please get in touch if you’re organ­is­ing an event.

[#] 1 Comment