1. Touch screens

    January 14th 2015

    A few years ago touch screens were typically associated with phones, and thus small hand held devices. However, they have now become universal even at the bottom end of the price range for laptops and monitors.

    Read article…
  2. CSS specificity graphs

    November 26th 2014

    In a recent article Harry Roberts introduced the idea of CSS specificity graphs and Jonathan Snook followed up by showing how the graph applies in the SMACCS model. This article outlines my experience of putting them into practice.

    Read article…
  3. Native apps vs. Web

    November 18th 2014

    I've had some thoughts about native vs. web bouncing round my head recently, this is an attempt to clarify them in writing. As a result it's opinionated, incomplete and not very well reasoned.

    Read article…
  4. CSS refactoring with Wraith

    November 4th 2014

    Whilst this site started out as a simple blog layout it has grown with new sections being added and I use it to experiment and develop new techniques. Without a defined structure the CSS had become difficult to extend and maintain so it needed refactoring.

    Read article…
  5. A device agnostic approach to inlining CSS

    August 19th 2014

    A performance recommendation that has been getting a lot of attention recently is inlining CSS required to render "above the fold" content. Whilst the principle behind this technique is valuable, my experience of implementing it has led me to the conclusion that the focus on "above the fold" is fundamentally at odds with how I build device agnostic websites.

    Read article…
  6. A front end developer's guide to CommonJS modules

    August 7th 2014

    CommonJS modules are the standard way of writing modules for node so if you're coming from that background they won't need explaining. However, when you are coming from a front end developer's background where you are used to writing code that runs in the browser I found they need a bit more explanation.

    Read article…
  7. Responsive design can be lightning fast

    July 28th 2014

    Inspired by posts from Tim Kadlec and Dave Rupert countering the perception that "responsive design is bad for performance" I outline the implementation choices taken to make this site both responsive and load as fast as possible.

    Read article…
  8. Using a web font loader

    July 4th 2014

    Web fonts open up a lot of opportunities for adding visual interest and branding. However, browsers - particularly WebKit based browsers - don't necessarily do the best thing, especially in non-ideal network conditions. To work round the performance and reliability issues we can use a web font loader to give us the fine control we need.

    Read article…
  9. Quantifying a performance budget using HTTP Archive data

    July 1st 2014

    As network connection speeds are highly variable, setting performance targets in terms of load times can be hard to work towards. To ensure page performance targets are met it is a good idea to set a budget that is defined as quantifiable and repeatable metrics - such as total number of HTTP requests and data transferred. Ideally this budget should be set based on testing and RUM data but for new sites, or other sites that have not generated much data, the HTTP archive can be used as a data set. Based on this a reasonable budget for a site is: 350KB total data in 25 requests, a Page Speed Score of 80% and a Speed Index of 1500.

    Read article…