Internal Standards, Tracking and ChecklistsQuick links

Productive Weekly Measurements

  • Time logged per week (per staff)
  • Avg. response time to a crisp chat

Wins per week?

Measure in team meeting?

Task completion report?

Standard CSS

All content should be within a wrapper/container

Reason - No matter how wide the website is displayed the content will sit nicely in the center of the site and not stretch preserving the look and feel.

So the HTML would be structured like the below;

            // All structure and content within here            // Outside the wrapper would be absolute elements or any element that needs to stretch     // beyond the wrapper like background images etc...

Then each wrapper would be confined to a certain width (depending on the design file) like so;

section.hero {    // This could also be defined in globals so it's not written in multiple CSS files and     // if it needs to be changed it's easy    .wrapper {         max-width: 1200px;        width: 100%;        margin: 0 auto;   }}

Example: Stepz Group

In the example the red blocks signify padding however this is applied to the section not to the wrapper

Fonts and Styling

This should all be confined to the fonts.scss, globals.scss and variables.scss

If font styling results in one or multiple pages being on more lines than the design then we reduce slightly and make sure they look as good as possible.

Within fonts.scss we should define the fonts that are being used. Current method is structured like;

* {    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}// Le Monde Livre Std Regular & Proxima@import url("https://use.typekit.net/soe4gtt.css");

Inside variables.scss it should look something like;

This allows us to use this font across scss files without having to re-define font-family etc…

@mixin lemondelivre-normal($fw: 100, $fs: 1rem, $c: $black) {    font: {        family: "le-monde-livre-std", serif;        weight: $fw;        size: $fs;    }    color: $c;    line-height: 1.3;}

Then within globals.scss we should be setting the standards for H1, H2, H3, H4, H5, H6, p, a, strong, ul, li etc… like so;

As the design team should be using a consistent set of sizes across the site.

h1 {    // Weight, Size, Colour    @include primary(700, 2.5rem, $primary);}

If we do need to create different versions we can evolve this to have something like the below. Which will allow it to be defined in globals and used across the site. Making it easy to update in one place in the future.

h1 {    // Weight, Size, Colour    @include primary(700, 2.5rem, $primary);        &.normal {        @include primary(400, 2.5rem, $primary);    }        &.small {        @include primary(700, 2rem, $primary);    }        &.large {        @include primary(700, 4rem, $primary);    }}

Variables

We should be utilising variables as much as possible. The reason behind this si so things are easily updated in one place rather than multiple.

An example of this is button styling. We have the button styles defined as the following;

@mixin btn() {    all: unset;    @include proxima(500, 0.875rem, $white);    text-decoration: none;    display: block;    letter-spacing: 1px;    text-transform: uppercase;    padding: 18px 32px;    text-align: center;    border-radius: 8px;    background: $brand;    cursor: pointer;    transition: all .3s ease;    &:hover {        background: $brand_light;    }}

Then in globals for buttons you can define the following;

.btn {    @include btn();}

You can also define parameters with the btn variable like so;

@mixin btn($bg: $white, $radius: 8px) {    border-radius: $radius;    background: $bg;}

This allows you to have varying button styles using one variable. Then in globals it could look like;

.btn {    &.blue {        @include btn($bg: $blue); // Adding a class of blue would change the background to blue    }        @include btn(); // This would default to white}

Standard Boilerplate Features

Adding in a Testimonials Collection as standard

All if not most of our websites have testimonials and this should be in the boilerplate as standard

Using built in partials and field sets

For example Statamic boilerplate comes with a hero partial, buttons field set and some pre-built globals. These are a great start.

Buttons / Standard field sets that may be used across partials

ADDITION BUT NEEDS DISCUSSION

Should we have the buttons as their own partial? So we would include {{ partials:byttons }} in any given partial that needs them. Then they are editable in a central location?

This is a good example of why we should use this as well as others like it. As standard we have a buttons field set. This is a simple repeater with fields in. This can be added to any partial. This means it only needs adding once instead of every partial having it’s own repeater for buttons. You just link to the field set already there.

{{ if buttons }}    

        {{ buttons }}            [{{ text }}]({{ link }})        {{ /buttons }}    {{ endif }}

Standard Statamic Practice

Adding unique classes to form submit buttons

Going forward in order to help the Marketing team track better in GA4 we should be adding a unique class that’s only purpose serves as a tracking target for Google Analytics. As a standard we have implemented submit-btn

Using relevant partials/field sets

For example the first section on the page should ideally be a hero. This allows styling for that and also if configuring content the ability to add a H1 tag to the bard field.

If we were to use a regular section for this because it’s similar that’s not 100% wrong however if means the customer could be adding H1 tags throughout the page and this will show as a negative for Google/SEO. Give us more control.

Monthly Maintenance Client Checklist

  • Visual Check
  • Contact Forms and Recaptcha/ Captcha
  • Patches / Updates/ Plugins
  • Ideas
  • GT Metrix
  • Analytics & Webmaster Tools
  • SSL and Security Issues
  • Legal pages (Cookie Policy and Cookie badge and Privacy page)
  • Site functionality
  • Media files and links and downloads
  • Check for Outstanding Teamwork Tasks / QA
  • Github all in sync