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. 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…

  2. 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.

  3. 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:

  4. 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…

  5. “Mobile First” Considered Confusing

    Dear Web Developer,

    We need to discuss “Mobile First”.

    The term is one of our better, more descriptive, responsive web design concepts. The idea is simple: we start with a basic version of our website — normally a single-column layout. It will work almost everywhere regardless of the device, browser, capabilities, age or screen resolution. It doesn’t matter whether a visitor accesses from Chrome 35 on a MacBook, IE6 on a Windows 98 PC or Opera Mobile on an aging Nokia — they’ll see content.

    Once our basic site is complete, we use CSS media queries and perhaps a little JavaScript object detection to improve the user experience on devices that support modern features and larger screens. For example, we may add drop-down menus, multiple columns, higher-resolution images and more sophisticated layouts.

    The benefits?…

    1. A user with an old browser that doesn’t support media queries will still see the basic site. That wouldn’t be the case if we started with our ‘desktop’ layout and tried to retro-fit a small-screen design.
    2. It’s a logical way to work. We’re progressively enhancing a layout when possible rather than hoping it will degrade gracefully on lesser devices or attempting to remove features that won’t function correctly.
    3. It keeps us focused on what’s important — the content. A linearized view must prioritize text and features. There can be no multi-column, floating element, or modal dialog compromises; important content must appear first.

    We fully understand the context and meaning of “Mobile First”. Unfortunately, it seems our clients and colleagues do not. Even those with considerable IT knowledge appear to have presumptions such as:

    • a separate mobile site will be developed before the desktop version
    • the mobile design will take a higher precedence, or
    • we’re prioritizing devices with a relatively small market compared to traditional desktop PCs.

    None of this is true, but they are logical conclusions when you don’t appreciate what “Mobile First” really means. Perhaps more appropriate terms are:

  6. HTML5 Forms: JavaScript and the Constraint Validation API

    For the final article in this three-part series about HTML5 web forms we’ll discuss JavaScript integration and the Constraint Validation API. If you’ve not done so already, please read The Markup and CSS articles to ensure you’re familiar with the concepts.

    HTML5 allows us to implement client-side form validation without any JavaScript coding. However, we need to enhance native validation when implementing more sophisticated forms because:

    • not all browsers support all HTML5 input types and CSS selectors
    • error message bubbles use generic text (‘please fill out this field’) and are difficult to style
    • :invalid and :required styles are applied on page load before the user interacts with the form.

    A sprinkling of JavaScript magic and the Constraint Validation API can improve the user experience. Be aware that this can get a little messy if you want to support a wide range of browsers and input types which we’ll endeavor to do.

  7. HTML5 Forms: CSS

    In the second article of this three-part series about HTML5 forms, we’re going to look at styling or — more specifically — the selectors you can use to target input fields in a particular state. If you haven’t read it already, please refer to part one to ensure you understand the basic markup concepts.

    Remove Default Styling

    You’ve probably noticed browsers applying default formatting. For example, most browsers apply rounded corners to search boxes and add subtle background gradients which can look misplaced on your flat design.

    To remove default styling, you can use the appearance: none; property which requires prefixes. However, use with caution since it can remove essential styles — checkboxes and radio buttons disappear in Chrome! To be on the safe side, only apply the property when it’s required and test in as many browsers as possible, e.g.

    [code language="css"]
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    }
    [/code]

    Note I have also reset the outline and box-shadow to remove the default ugly blue box-shadow focus and error styling in all browsers.

    The appearance property is documented on CSS-Tricks but it’s in a state of flux.

    Remove Default Styling

    Before we start looking at selectors, you’ve probably noticed browsers applying default formatting. For example, most browsers apply rounded corners to search boxes and add subtle background gradients which look misplaced on your flat design.

  8. HTML5 Forms: The Markup

    This is the first in a three-part series about web forms. We’ll cover the basic markup in this article before progressing to styling and the client-side JavaScript validation APIs. I recommend you read this even if you’re already familiar with forms — there are many new attributes and gotchas!

    HTML forms may be mundane but they’re essential for the majority of web sites and apps. In HTML4, input fields were limited to:

    • input type="text"
    • input type="checkbox"
    • input type="radio"
    • input type="password"
    • input type="hidden" — for data the user cannot view
    • input type="file" — for uploads
    • textarea — for longer text entry
    • select — for drop-down lists
    • button — generally used for submitting a form, although input type="submit" and input type="image" could also be used.

    Also:

    • CSS styling possibilities were limited
    • custom controls such as date and color pickers had to be developed in code and
    • client-side validation required JavaScript.