Mockingbird’s Approach to Building Websites

We are going to go over the tools and techniques used to make Mockingbird custom websites and how it helps us achieve our technical metrics and goals. We are constantly researching and trying to improve our build process. As more techniques and tools come out, we start learning how to incorporate them into our process.

What are our goals?

  1. Site Speed – we aim for all websites to load 3s or below (without third party scripts)
  2. Accessibility – We clear the AA Level of the Web Content Accessibility Guidelines
  3. Sexy and clean – sometimes, clients decide to leave us. When they do, we want to make sure whoever takes a look under the hood of the theme can easily do what they need to do.

What theme are we using?

  1. Sage 9 Theme – The sage theme comes with a lot of tools baked in for advanced WordPress development.
    • Blade Templating Engine – stay DRY (don’t repeat yourself) by using Blade templates which makes it easy to organize code so developers can quickly find what they need and prevent unneeded code bloat.
    • Webpack – we can write JavaScript and SASS that can be easily compiled, minified, and concatenated to reduce the size of the theme.
    • JavaScript Routing – combined with Webpack, we can dynamically load JS files on different pages to reduce load size on each page.
    • Automatically optimize theme images – all image files within the theme get compressed and minified for production.
  2. Tailwind CSS – the never ending debate of CSS structure and conventions can be tiresome. After some long consideration, we landed on tailwind, which is a utility first approach to writing CSS.
    • We don’t have to think of clever names for classes
    • Easier to scale vs other methodologies where you can easily repeat yourself such as adding borders or shadows to elements.
  3. Blade SVG – a way to easily incorporate SVG files into the website.
  4. Purge CSS – we configure a script to run throughout the site to purge all the extra CSS classes that aren’t being used, therefor reducing the file size.
  5. Lazyloading – we have created a custom implementation to enable lazy loading so pictures only load when they are needed.
  6. WP-CLI – installed on our local environments and hosting to easily manage things or run scripts on our projects.

What plugins do we use?

  1. Soil – cleans up all the extra junk WP likes to add to websites when rendering.
  2. Advanced Custom Fields – this is the only way to easily extend your WordPress customization.
  3. Query Monitor – used during development only so we can watch our calls to the database and see anything that is being resource intensive.

What tools are used in QA?

We want to measure how we are doing with everything above so we use a few different tools to measure.

  1. Wave – an accessibility website or extension that scans your pages and displays any accessibility issues.
  2. GTMetrix – a website speed analysts tool
  3. Google Lighthouse/Devtools – another tool that rates your website on site, speed, and accessibility.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>