Craig is a Director of OptimalWorks Ltd, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

Craig's articles

  1. 5 Uses for Vertical Media Queries

    Media queries are the core technology behind Responsive Web Design yet, despite a plethora of options, few of us dare to venture beyond min-width (and possibly max-width), i.e.

    [code language="css"]
    /* mobile-first layout */
    .column {
    width: 100%;
    }

    /* tablet layout */
    @media (min-width: 50em) {
    .column {
    float: left;
    width: 50%;
    }
    }

    /* desktop layout */
    @media (min-width: 75em) {
    .column {
    width: 33.33%;
    }
    }
    [/code]

    Few other media query properties are required for general use:

    • width, height and the device declarations are a little too exacting
    • resolution can be used for high-density Retina screens but the new HTML5 picture element and srcset attribute are more appropriate for image content
    • color and monochrome properties may only be useful when targeting e-readers
    • aural, braille, handheld, projection, tv, scan, grid etc. have specific device use cases
    • aspect-ratio and orientation may only be needed when screens fall outside the standard 4:3 and 16:9 range

    View the media query reference on MDN.

    However, should we show more love for the min-height and max-height properties? If we only consider min-width and/or max-width we may be making life more difficult for those using smaller devices. There are several situations when media query height properties are useful…

  2. CSS Variables Land in Firefox 31

    Firefox 31 was released on July 22, 2014. You probably already have it but, if not, open the About Firefox dialog from the menu or head to Firefox.com to download a fresh copy.

    Don’t expect too many surprises. There are a few new locales and developer tool tweaks but only one major addition: CSS variables. Firefox 31 is the first mainstream browser to support native CSS variables without having to enable experimental features.

    CSS Variable Syntax

    I first wrote about CSS variables in September 2012. We’ve waited a considerable time and you should note that the syntax has changed.

  3. The Best Programming Language to Learn in 2014: Mid-Year Update

    We last looked at the best languages to learn in February 2014. The results were collated from data obtained from:

    • Jobs Tractor; a company which analyzes job adverts on Twitter
    • Lynda.com; an online video training course provider, and
    • the RedMonk survey which examined the frequency of projects on GitHub and questions on StackOverflow.

    The IEEE Spectrum Survey

    IEEE Spectrum has recently completed their own survey which uses no less than ten sources to rank the popularity of programming languages:

    • search results in Google
    • data from Google Trends
    • tweets sent on Twitter
    • GitHub repositories
    • StackOverflow questions
    • Reddit posts
    • Hacker News posts
    • demand for jobs on the Career Builder job site
    • demand for jobs on the Dice job site
    • IEEE Xplore journal articles

    Languages were allocated to web, mobile, enterprise and embedded categories. The interactive tool allows you to make your own comparisons and apply custom weightings to the data sources if you don’t agree with IEEE Spectrum’s methodology

  4. Is Your Browser Your Next IDE?

    Browser consoles and development tools have become increasingly sophisticated during the past few years. Rudimentary file editing and saving is already available in Chrome so perhaps it’s inevitable vendors are considering full Intergrated Development Environment.

    Mozilla’s WebIDE has been added to Firefox nightly builds and is available from the Web Developer menu after you set the devtools.webide.enabled flag to true in about:config…

    The CodeMirror and Tern-based editor provides a simple tool for editing client-side HTML, CSS and JavaScript files. You can create a new web or Firefox OS application directly in the browser. There are several benefits and intriguing ideas…

  5. How to Track Outbound Links in Google Analytics

    Google Analytics provides an overwhelming quantity of information. If you do nothing but add the tracking script to your pages, you’ll be faced with an endless stream of data and reports about user activity on your site. However, while Analytics shows exit pages it won’t tell you which links users clicked to leave your site. In this article we’ll discover how to add outbound link tracking.

    Does Google Record Outbound Links?

    Probably. If you’re linking from one site using Analytics to another using Analytics Google could record that relationship. Unfortunately, reports would be misleading if one or more outbound sites didn’t use Analytics.

    Google has additional means of collecting data: you can gather a lot of statistics when you own the top browser and search engine! But we’re then moving away from on-site Analytics into more dubious territory; Google wouldn’t necessarily want to share that data.

  6. How to Avoid CSS3 Animation Minification Muddles

    Minification is one of the easier website optimization techniques. Even the simplest processor can shave a third off your CSS download size by concatenating separate file into one file and removing unnecessary characters. Typically, this involves deleting comments, white-space, and the last semi-colon in a rule set, e.g.

    [code language="css"]
    /* my page elements */
    .element1, element2 {
    font-family: sans-serif;
    font-size: 1em;
    padding: 0px 0em 0vh 0rem;
    margin: 10px;
    }
    [/code]

    can be minified to:

    [code language="css"]
    .element1,element2{font-family:sans-serif;font-size:1em;padding:0px 0em 0vh 0rem;margin:10px}
    [/code]

    Your browser doesn’t care that it’s less readable; as far as it’s concerned, the minified code is identical.

    More advanced minifiers take the process further by removing unnecessary values and units. For example, the padding declaration from the previous code block can be reduced to:

    [code language="css"]
    padding:0 0 0 0;
    [/code]

    or:

    [code language="css"]
    padding:0;
    [/code]

    It’s this optimization that caused me several hours of frustration in a recent project. My local site worked fine but, on the the production build, CSS3 animation either failed to start or behaved erratically in some browsers. The cause? Minification…

    Keyframe 0% != 0

    The first issue was the < @keyframes declaration:

  7. What’s New in Firebug 2.0

    Firefox 30 was released on June 10, 2014. It’s a little lackluster but Mozilla are entitled to a break following the browser’s major overhaul in version 29. The most interesting changes:

    • a new background-blend-mode CSS3 property which defines how background colors and images blend together (overlay, multiply, lighten, etc.)
    • Box model highlighting and console.count support in the developer console.
    • It’s now impossible to remove default drop-down arrow styling on select boxes with -moz-appearance: none or the text-indent hack (Bugzilla 649849). Thanks Mozilla — my forms look crappy again and I can’t write that article now!

    More significantly, Firebug 2.0 has been launched. It’s taken a while to reach the milestone given the project is almost a decade old and the current trend for rapidly-incrementing version numbers. The world’s first (good) developer console was starting to fall behind its imitators as vendors improved native browser tools.

    Firebug 2.0 implements several new features and enhancements…