Let's get started

Welcome to the Ranger blueprint

Introduction

Why do we need a blueprint?

Our goals:

Our goals when building a website is simple: tell the client’s authentic story in a compelling way while providing a great experience for the end-user. Oh, and make sure the website is a pleasure to build for the “forgotten audience” – the content managers.

The challenge:

Too often, technology can get in the way of our goals, taking too much of the project’s budget and brainpower. We’ve been designing websites for a long, long, time, and the problems are still the same.

Here are just a few things that drive us crazy and waste time:

  • Inconsistencies – Especially in spacing and typography
  • Typography – Lack of a good, flexible typography system
  • Complex content – Page elements that are difficult to edit or update
  • Non-global styling – Applying the same style 100 times in a page-builder, only to have to re-apply it when a change is made
  • Responsive tweaks – Not taking responsive design into account early and often
  • Code overload – Sloppy or unnecessary code
  • Complexity – Over-engineered solutions where a simple solution does the job

The solution:

To keep our focus on what’s really important – copywriting, design, enhanced functionality, and little bits of surprise and delight – we’ve created a baseline system for design and development.

We strive to use the right solutions for the right problem:

  • Atomic design philosophy – Creating a design system where every item builds on one another, creating a harmonious design system
  • A custom child theme – Clean and helpful code that can be used to create a consistent baseline, especially in the page builder
  • Elementor ecosystem – Using the parts that work best, and working around the one’s that don’t.
  • The right plugins – We never want to overload a site with plugins, but a good plugin, especially a premium one, can work wonders.
  • Documentation – A good system is worthless if no one knows how to use it.

What exactly is a blueprint and what's included in ours?

To ensure a clean, consistent starting point for our designers, developers, copywriters, and clients, we wanted to create a common set of tools we could use on every website – a blueprint of sorts.

A blueprint also means we can continue to make changes as we learn. So the blueprint is updated often as we learn new things and as technology continues to evolve.

Here’s what’s in our current iteration of the Ranger blueprint: