Standards and best practices

Our best practices

Best practices are approaches and techniques that help us meet our standards. Here we list our high-level best practices. Typically these affect several aspects of a website at once. Further pages drill down into more specific best practices (e.g. CSS best practices).

At a high level

Mobile first approach

Following this approach, design and code features for mobile first, then for wider and wider screens and device capabilities. The most concrete rule of the mobile first approach is that you should write the CSS declarations that apply to mobile first, and then use 'min-width' media queries to add CSS declarations that apply to larger screens.

Resources: Read Mobile-first responsive web design, which despite its age remains an excellent summary of the key concepts of the mobile first approach and where it touches upon other best practices.

Helps with: maintainability, performance, responsiveness.

Responsive web design

A methodology in which design and development respond to a user's behaviour and environment based on screen size, platform and orientation. It has much in common with the mobile first approach.

Resources: Read Responsive web design basics to learn more.

Helps with: cross-browser compatibility, longevity, responsiveness.

Progressive enhancement

A layered approach to development:

  1. Start by making your page work with with just HTML
  2. Enhance with aesthetic CSS styles and animations
    1. build basic implementations first, making use of the cascade, and specificity
    2. enhance in more advanced browsers, making use of feature queries
  3. Add a layer of JavaScript

Resources: Read Building a resilient frontend using progressive enhancement from the GOVUK Service Manual and Progressive enhancement from the Springer Frontend Playbook for a more detailed description.

Helps with: accessibility, cross-browser compatibility, maintainability/longevity, performance, responsiveness.

Cutting the mustard

If a thing is said to "cut the mustard" it means the thing is considered to be "good enough".

In web development, cutting the mustard is a progressive enhancement technique, using feature detection to determine which browsers will receive a more simple set of styles, and which will receive more advanced styles and JavaScript. We do this because it's not efficient for developers and website performance (and therefore users) to attempt to make advanced CSS and JavaScript work in older browsers.

Use standard-based technologies

The World Wide Web Consortium (W3C) writes up standards so the whole community develops technologies, tools, and software that are compatible with each other. Studio 24 sticks to technologies that are part of these standards or on their way to make it to these standards.

For example, we don't write native mobile apps - we write Progressive Web Apps.

Helps with: cross-browser compatibility, maintainability/longevity.

Keep build tools as simple as possible

  • We use NPM scripts (no 'middle-men' such as Gulp or Grunt)
  • As few NPM packages as possible

For each project, document the version of Node used when setting it up. Write it in the README file and in a .nvmrc file.

We use Node Version Manager (NVM) to switch between node versions between projects.

This talk by Kate Hudson is a very good introduction to NPM scripts and their advantages.

Helps with: maintainability

When building on existing software, refer to their official best practices

Whether you are writing a theme helper function in WordPress or tweaking a template in Laravel, please refer to their official best practices for syntax and structure.

If you stick to documented best practices, it is more likely that another dev picking up the code can make sense of it.

Helps with: maintainability