Using Wordpress customiser to create editable regions
How to use the Wordpress customiser to create live-editable text and image regions. Real-time editing makes decisions about layout and content much easier.
Tips and tutorials about the design and build of web interfaces
How to use the Wordpress customiser to create live-editable text and image regions. Real-time editing makes decisions about layout and content much easier.
The letter-spacing property adds space after the last letter, which causes misalignment on centred or right-aligned text. Here’s how to fix it.

How to create a grid in Illustrator using split into grid and make guides. Covers creating a simple grid and toggling its visibility.
How to set up Wordpress custom fields without a plugin. Covers adding them efficiently, applying custom CSS, changing placement, and using them in your theme.
Adobe added a built-in guide layout creator to Photoshop in 2014. It covers most of what GuideGuide does, lets you save layouts, and syncs with Creative Cloud.
How to add srcset support to Wordpress post thumbnails. A custom function mirroring the_post_thumbnail() that outputs the srcset attribute for responsive images.
Sass maps can provide some powerful functionality to make life easier and less repetitive. I’ll cover briefly how to use them and then detail some of the cases that I use them, as I don’t think the benefits are immediate.
Using CSS mix-blend-mode to apply vintage-style photo filters, much like you would in Photoshop. Includes a live demo to test the different filter options.
‘A few flexbox techniques you can use today without worrying about older browser knock-on effects. Handy when you don’t have time for a full flexbox layout.’

If you’re looking for an alternative approach to responsive navigation, which doesn’t involve the ‘hamburger’ this may be for you.
‘How to use cookies with critical path CSS so returning visitors load the full stylesheet instead. A follow-up to the critical CSS post, covering the caching side.’
How to choose a legible typeface for paragraphs. Covers the key factors to consider: x-height, contrast, width, and the context in which the type will be read.