Mockingbird Prepares for Google Web Vitals

Written by

In a previous post, we covered Google announcing Core Web Vitals as metrics to measure a healthy site. In November, they announced that these metrics will be search engine ranking signals in May 2021 along with existing search signals for page experience which include mobile-friendliness, safe-browsing, HTTPS, and intrusive interstitial guidelines. We have been spending time diving into these web vitals and how we can be prepared and provide an excellent page experience.

To review, these are defined as the Core Web Vitals:

  • Largest Contentful Paint (LCP): The time it takes for a page’s main content to load. An ideal LCP measurement is 2.5 seconds or faster.
  • First Input Delay (FID): The time it takes for a page to become interactive. An ideal measurement is less than 100 ms.
  • Cumulative Layout Shift (CLS): The amount of unexpected layout shift of visual page content. An ideal measurement is less than 0.1.

Let’s dive into how Mockingbird is preparing.

  • Using Sage 10 starter theme that comes prepared to use tools that help purge, minify, and cache the theme assets we make. This is important for site speed and most importantly, first input delay. We combine and concat our JavaScript and CSS files down to bare minimum to make them extra lean.
  • Using CSS to fill in spacing for fixed elements. Often websites have fixed elements (we have fixed headers that react to user scroll) like banners or ads. If you don’t accommodate for that space before the element loads, it will shift the website layout when the rest of the website doesn’t, thus increasing your CLS score which we don’t want.
  • Using WebP images – a more progressive web format that can be compressed smaller than your typical image formats.
  • WordPress now comes with lazy loading which means it doesn’t load page elements into view until the content is within the viewport.
  • Removing useless JavaScript like light-boxes and carousels. JavaScript is a huge offender in page load and the less JavaScript, the better.
  • Using Autoptimize to load combined third party Javascript and CSS files into one bundle. This drastically helps with site speed and decreasing FID.

The Results

Below are screenshots of some recent law firm websites we have created using the above techniques.

Law Firm Website Marketing Website Metrics for personal injury attorney

Rochester Law Firm Website Metrics

Long Island law Firm Website Metrics

Google Introduces Core Web Vitals

Written by

In early May, Google announced they would be tracking user experience by the creation of three new web vitals or as they say, “essential metrics for a healthy site.” In the beginning of July, google had its annual web dev live conference where the first day was majority focused on explaining these new vitals and how to optimize these vitals. Measuring user experience will always be a moving target and Google has stated that they will be reviewing web vitals annually during their I/O conference. I will cover what these web vitals are and some overview learning of watching videos form the conference.

Overview of the New Core Web Vitals

Largest Contentful Paint (LCP)

LCP measures loading and speed by marking when the largest (usually primary content) is loaded into the viewport. A great example of this would be a hero image often found on websites. Your target goal of LCP should be 2.5seconds or less when the page first starts loading. Google explains LCP more in depth.

Common Issues Affecting LCP

  • Slow server response times
    • Cheap hosting
    • Terrible server side coding
    • Unoptimized database queries
  • Render blocking JS/CSS – Before website loads content, it has to parse HTML page. CSS and JS files by default block the rending of this page till they are loaded.
  • Slow resource times
    • Unoptimized images – usually the main culprit
    • Loading videos
  • Client-side rendering – using JavaScript to dynamically load content like API calls and not optimizing or caching the calls.

You can learn to optimize for LCP from Google.

First Input Delay (FID)

FPD measures your sites interactivity and responsiveness by measuring how long it takes for a user to interact with your page as it loads. It measures the delay of your web page being unresponsive to the user. Goal is to have a FPD of 100 milliseconds or less. Google explains FID more in depth.

JavaScript Biggest Offender

The greatest impact of FID come from JavaScript. Javascript blocks the webpage from loading until it’s executed, it’s known as “render blocking.” For internal JavaScript files, it’s best to optimize and chunk your Javascript code. Third party scripts affect your site’s loading speed too.

You can learn more in depth ways to optimize FID from Google.

Cumulative Layout Shift (CLS)

CLS measures visual stability by quantifying any unexpected layout shifts of visible web content. Think of when a page loads and you start reading an article, then an image loads in and pushes the paragraph down or a website banner load sin late and shows the entire web page lower, both of these are examples of CLS. CLS is calculated by impact fraction * distance fraction.

Common Issues Affecting CLS

  • Images without dimensions – always include width and height attribute on media elements such as images or videos
  • Ads, embeds, iframes, etc, without dimensions
  • Dynamically loaded content (often from APIs) – don’t forget to save some allotted space for any content being loaded dynamically. Avoid loading new content above existing content, unless triggered by a user interaction like a load more button.
  • Web fonts causing FOIT(Flash of Invisible Text)/FOUT(Flash of unsettled text)

You can learn more in depth ways to optimize CLS from Google.

Measuring Web Vitals

Along with the announcement of these new core web vitals came some new tooling and updated to existing tools. Google measures these three metrics with two types of data. Lab data is artificial interactions used to track down errors and bugs. Field Data is real world users and how they are interacting with your site. If 75% of the page views meet the good threshold for each measurement, then the website is classified as having a good performance for that metric. First let’s explain Lighthouse, the main technology powering these tools.

Lighthouse: the Underlying Technology

Google uses Lighthouse, a website auditing tool that powers different tools to measure these vitals. Lighthouse 6.0 has been released with reporting on the three new core web vital metrics. The web core vitals: Largest Contentful Paint, Cumlative Layoutshift, and Total Blocking Time (Lab data to simulate First Input Delay) are now added into the scoring system. The performance scoring system is broken down below.

Weight % Audit
15 First Contentful Paint (FCP)
15 Speed Index
25 Largest Contentful Paint (LCP)
15 Time to Interactive (TTI)
25 Total Blocking Time (TbT)
5 Cumlative Layout Shift (CLS)

Tools Provided to Measure your Website

  • Pagespeed Insights – a tool that has been around for a long time and shouldn’t be new to anyone working with websites. What is new is leverages Lighthouse to measure core vitals. Great for finding and diagnosing easily replicable errors.
  • Chrome UX Report (CrUX) – uses real users for data and be setup using Data Studio or BigQuery to create reports. Developers can also leverage the CrUX API to pull in JSON data and visualize it how they’d like.
  • Search Console – has a new web vitals report built in based on real user data. Awesome for a constant monitoring tool your live website and uses real world data.
  • Chrome Dev Tools – had some new features implemented into the performance tab to measure core web vitals. You can also perform lighthouse audits direct int he Chrome dev tools as well. You can learn more from the web dev live video. Very useful for local debugging.
  • Web vital extension – you know Google had to create a Chrome extension.
  • Site Kit from Google – a WordPress Plugin from Google that connects to Google services and displays an overview in your WP dashboard.

Mockingbird’s Approach to Building Websites

Written by

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.

Creating Effective PPC Landing Pages

Written by

Earlier this year, emarketer released a report stating that 2019 will be the first year digital ads surpass traditional ads. A claim was also made that by 2023, 2/3 of all advertising will be digital. If your law firm is not already putting the majority of advertising into reaching potential clients online then you’re already behind your competition.

Because pay-per-click encompasses such a large amount of the digital ad spend for our clients, we’re constantly trying to refine our designs and create websites that will perform well when it comes to converting your online ad spend into actual new clients. Here’s an overview of our process and what we try to convey on a successful PPC landing page.

After hours of external research and testing our creations, we have laid out our process for creating law firm PPC landing pages.

Determine Your Audience.

The first step, as it should be with any marketing material, is determining your audience and how we can appeal to their emotional desires. How we write copy is very important and just tweaking an ads copy can drastically increase click through rates and increase conversions on your landing pages. Once we know the audience, we can start the trust enhancing design.

Build the Landing Page

Now we know who the audience is, it’s time to think about the page structure and design of the landing page. We want the page to load fast, while gaining the user’s trust enough that they’ll want to contact your firm. When we create each landing page, we keep these three principles in the back of our heads:

  • Keep it minimal and uncluttered.
  • Each section should appeal to the user’s desires and reflect the search they conducted when finding your ad
  • The page should load as quickly as possible.

Header – Contact Bar

The header will serve more as a contact bar and an internal navigation. Your PPC landing page will not link to any external pages. We want to keep visitors on the landing page and emphasize contacting you on this first visit to your site. We also want your phone number and/or a contact button easily visible at all times. We will keep this fixed on the page so it’s constantly visible, but small enough that it’s not distracting users from your content.

Section: 1 – Establish Your Value Proposition

You want a marketing hero that has everything the client needs to contact you. This includes an appealing headline and/or copy that establishes your value proposition, imagery, and a call to action, that all appeals to your user’s desires.

Section 2: Build Trust

We have the user’s attention and they are interested in your value proposition, but they want to know who you are and why they should trust your value proposition? Section two should be a brief “about your firm” and clearly communicate why the client should trust you. This is a great place for an awesome testimonial or award. Just don’t overload the user with how awesome you are. Pick a few standout items that reinforce the values you’re trying to convey.

Section 3: Explain How Your Value Proposition is Unique

This section is to explain how awesome your firm is at meeting the desires your client is trying to fulfill. How does your firm stand out from the competition? You should use a short paragraph on how you stand out and include a result or two that backs up your claims.

Section 4: Encourage Contact Form Submissions

Buttons will also be in different sections that will anchor to this capture form section. Here we want a very simple form that captures name, email, and a quick description of the prospect’s issue or problem. We just want them to contact your firm so the intake team can handle the rest.

Test the Landing Page

It’s always important to test your landing pages. Play with copy, imagery, and placement to see what works better for your audience. You can easily (and should) run A/B testing on different versions of your landing page. Every audience is different and tweaking to get your maximum conversions is a must. Only data can prove what is working.

Why We Start Design Projects with a ‘Discovery Phase’

Written by

We start every digital project with a discovery phase, which is an initial research period that will help provide structure during the design process. This research phase provides propose and direction to both us and the client when creating a digital solution. The discovery phase also helps identify potential roadblocks before we start designing or building a website and allows for more informed decisions throughout the cycle of the project. We don’t just want to build what a client asks us to build, we aim to build a successful product that aligns with the client’s business goals, appeals to their users, and helps them stand out from the competition.

How do we do this at Mockingbird? We break down the discovery phase into three categories.

Business Goals and Client Perceptions

  • Business Goals
  • Internal Perception

We start the conversation by finding out where the client falls within their current market and where they’d like to be headed. This requires an understanding of their current business goals, relative strengths and weaknesses, and competitive advantages within their industry or geographic area.

We have a client questionnaire that goes over internal perceptions to help identify any unique points that make a firm stand out and appeal to potential clients.

User Behavior and Customer Desires

  • Demographics
  • User Behavior Through Analytics

Next, we want to answer the question, “Who are we designing for?” We gather as much information, mostly by gathering analytics and running our own report, to define who the client’s current website users are and how can we appeal to them. No matter what field of practice, hiring an attorney is a fairly emotional ordeal. We want appeal to the right desires. We want to imagine the website from their perspective. In doing so, we can appeal to their emotions and make it as simple as possible to contact your firm.

Market Landscape and Opportunities

  • What Competitors Are Doing
  • Your Position Within the Market

Finally, we want to find the room for opportunity. What are competitors doing? Are they all doing the same thing? Is the client’s market saturated with law firm websites showcasing the same interchangeably well-tailored lawyers with crossed arms, touting their millions of dollars recovered? We don’t want our clients to blend into the crowd of attorneys, we want to show off how each firm is unique and prove they stand above the competition.

By taking a step back and looking at the entire landscape before starting any of the actual site mockups we’re able to take a more data driven approach to the design process. It’s not enough to build a website that loads fast and looks great. The true differentiator comes from creating a site that sets each client apart from their competitors, aligns with the emotional needs of their clients, and helps them achieve their firm’s business goals. The discovery phase is a key first step and helps build the foundation for each successful website.

Taking a Content First Approach to Website Design

Written by

The main goal of a law firm’s website is to create a solution that meets their target audience’s needs and encourages conversions by getting visitors to contact the firm. Understanding your target audience and your firm’s business goals is the driving factor behind website content. We want to convey your firm’s narrative in a way that’s clear, concise, and emotionally appealing to potential clients. Below are key reasons why your firm should start every website project with a content first approach.

Tackling content first helps shape design and saves time.

Agreeing on content structure helps eliminate two major obstacles: creating new content to fit the design AND needing to edit old content to fit an updated design. Both of those events are avoidable if you create a design with content in mind. This can cut down on rounds of revisions where you may end up making small content changes and allows the designer to present your content visually in a way that appeals to the user’s emotions and conveys your firm’s story.

A solid content plan speeds up the workflow of the project.

Frequently, the biggest road block when creating a new website for a client is waiting for content. Establishing the structure and content needed before the design eliminates this obstacle so you don’t end up waiting on content decisions when the site is almost ready for launch. Developing a plan for content at the start of the project will help clarify who will be creating new content, when it needs to be created, and how that content is going to be structured before anything is designed. Instead of waiting in the middle of a project, we establish this up front for an optimal workflow.

A content first approach makes for a better user experience.

When the design is built around the content, the user has a consistent experience across the website. All practice areas look uniform and aren’t structured differently, location pages have all the necessary content for Google My Business and are displayed the same. We want the user to know they are on a location page or a contact page, not guess because one office’s content is displayed differently than another. Uniformity not only helps speed up the website because there’s less code, but when users navigate the site everything reinforces one uniform message about your firm. With a content first approach, we know what to display from mobile to desktop and how the content will scale in different views and sizes.

Content planning provides scalability and structure moving forward.

Often, content will be managed post launch by someone in your firm. Having the content structured and following an outline helps scale the website in consistency and design. Someone who wasn’t present during the design process can manage the content afterwards without missing a beat.

In short, a lot of the difficulties that pop up during the design and development process can be mitigated if you spend some time planning out what you want to convey with your website, and more specifically, what type of content you’re going to use to communicate that message.

Jeffrey Zeldman Quote on Content in web design

Quote from Jeffrey Zeldman, a legend in the web design world.

Law Firm Branding: Crafting Your Brand Image

Written by

Think of your firm’s brand image as the person we want to bring to life. A brand image is crafted from doing research into your current market bases, potential markets, and internal perceptions. We craft the brand image following an intensive research phase. Not only do we want to study the market and users, but we also need to study the law firm and how their employees and clients view the firm’s strengths and weaknesses.

Below is an overview of our process and the steps involved in defining a firm’s brand image.

Research Phase

As a marketing company with the goal of branding a law firm, we have a lot of questions to answer. We want to base your law firm’s brand on actual data and analysis, not just a hunch. We need to dig deep and discover who the market is, where your law firm stands, and how we can engage with that market. What differentiates your firm from other law firms? Where is there opportunity? These are questions we need to answer in the research phase.

Market Research

We want to discover and then define the current community where your law firm is established. We also want to look at potential markets and how to expand your brand into these markets. We want to define and answer:

  • Who is the current market? What are their hobbies, interests, and overall demographics?
  • Who are your current clients? How do they perceive your law firm?
  • What are the needs and desires being considered when your services are sought out?

Company Research

After defining the market, we want to see where your law firm can position themselves for ultimate success. In order to do so, we need to discover who the current brand of the law firm is. This includes:

  • Identifying company values and goals.
  • Assessing internal strengths/weaknesses.
  • Comparing against your competitors.
  • Identifying where your firm can bring the most value for clients.

Unique Selling Proposition

Once the research is done, it’s time to bring together the analysis. We understand your market, your internal perception, and where the competitors stand. With this knowledge, we can define your law firm’s unique selling proposition. This is when we define what actually makes your firm different and how we can position the firm to your potential clients.

Brand Personality

It’s time to start bringing the brand to life! Based on the research, we need to determine the brand personality. This will reflect the brand’s messaging, identity, attitude, and overall how the brand will be perceived from here on out. We take our findings and then select the appropriate archetype that lines up with our completed research.

Selecting an Archetype

Archetypes were created by psychologist Carl Jung, and in marketing, we use them to define how we will create a deep connection between your law firm and its users.

Defining the Brand Image

This is where we tie each of the above items together. We’ve done the research and agreed on a brand personality that will reflect your law firm’s unique selling proposition. This brand image will be laid out in the first part of your branding book to use for marketing purposes. It will define your brand personality, tone, messaging, and brand essence.

Brand Essence

The brand essence is the heart of the brand. Based on the personality defined, it’s time to write out to the world who your law firm really is. We want a finalized version of what makes the brand beat. Here we write out the values, mission statement, and vision statement.

Brand Identity

Our next step is to visually create your brand based on the image we have developed. Once we’ve crafted the heart and soul of your firm, it’s time to bring it to life.