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.

Sitemaps: What are They and Why Do I Need One?

There are a lot of features on websites you really don’t think about as a user until you get a peek behind the scenes. Sitemaps are one of these features. Whether they’re HTML sitemaps or XML site maps, there are conflicting ideas on whether or not they’re actually necessary. So let’s go into the benefits of having a sitemap.

 

So what is a sitemap?

A sitemap is a page on a website that contains links to every other page on the website. See, here’s ours. It’s usually designed for crawlers and search engines, which I’ll get back to. It’s pretty much what it says on the tin: a map of the site. It’s a one-stop-shop to get to all the other pages.

 

So what are the benefits of a sitemap?

There are many benefits to a sitemap, but the main ones fit into the groups of ease for search engines, ease for users, and organization. 

 

Ease for search engines

For the new kids in class, search engines like Google know which pages to show searchers by looking at millions of websites. They utilize spiders (a tool that follows links and builds a web of links from the connections its found) to understand how everything on the site links to each other. They can do this by simply following internal linking structures, but have a better time when they can go through one page. Hence the sitemap. Crawlers can go directly through the sitemap to every page, saving time and resources. 

 

This would probably be a good time to touch on the differences between HTML sitemaps and XML sitemaps. XML sitemaps are designed solely for search engines. Humans don’t get to see much of it. HTML sitemaps are usually easy to find on a website; ours is linked to in our footer. You can see where all of our pages are and even find links to every single one of our blog posts. Every. Single. One.

 

Ease for users

The user-oriented sitemap is extremely useful for finding pages that might be hidden in layers of internal linking. If you remember the name of one of our blog posts, you are just a click and Ctrl+F away from finding it. It sure beats scrolling back months or years to find it. 

 

Organization

Even nice websites can be sloppily organized. It happens. But a sitemap can help to visualize and show you where you might be able to correct linking structures. If your service pages are organized by type of service, but their URL structures don’t reflect that, your site might have an organization problem. A sitemap will show you how your pages are currently set up, and you can decide whether or not you want to fix that yourself.

 

Downsides of a sitemap

To be honest, there aren’t really any other than it takes time (not even a lot of time) to build it. It’s generally just a good practice to have a sitemap, even if it isn’t necessary

 

Creating a Sitemap

We actually have a blog post about how to create an HTML sitemap, so that’s a good resource for that. As for creating a user-oriented sitemap, there are numerous WordPress plugins for this very purpose. If you would like more information on building a sitemap for your law firm’s website, contact a company that has experience in this area.

Laws of UX Series: Aesthetic Usability Effect, Doherty Threshold and Fitts’s Law

Laws of UX are a collection of design heuristics created by Jon Yablonski to help designers leverage psychology to create more human-centered experiences. You can find explanations for each law on the website lawsofux.com, as well as an in-depth case study regarding his thought process on his website, jonyablonski.com

This will be a series of blog posts briefly covering the many laws and how they can help designers create better experiences for law firms.

 

UX Law Poster1) Aesthetic Usability Effect

“Users often perceive aesthetically pleasing design as design that’s more usable.”

Users tend to assume that things that look better will work better, even if they aren’t actually more productive. Users who visit your website may have a positive emotional response to the visual design of your website, making them more tolerant of minor usability issues while using your site. When I say “minor usability issues” I mean text with low contrast, spelling errors, or typography that isn’t consistent. The Aesthetic Usability Effect does have its limits and when the design puts aesthetics over usability, users will lose patience and leave your site.

For example, I have seen law firm websites that include huge hero images on practice area pages that cover the entire screen without including any information until moving down the page. The page may look appealing at first with a large, beautiful image at the top, however, the image that is taking up the entire screen may be seen as an annoyance once they are trying to complete specific tasks.

 

 

2) Doherty Threshold

“Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.”

Fast websites are fun to use. Laggy, slow response websites suck. The longer it takes for your website to respond to a request, the longer your user is taking to think of what they want to do next. If you keep your users waiting, they will find what they are looking for on another law firm’s site. As a general rule, you want to provide feedback to a user’s request within 400ms in order to keep their attention.

If your website has any loading screens that aren’t imperative to the functionality of the site, fancy page transitions, or anything else that may slow down their experience with your site, you are doing more harm than good with those “cool” features.

 

 

3) Fitts’s Law

“The time to acquire a target is a function of the distance to and size of the target.”

A touch target is an area that responds to user input. Make sure that all touch targets are large enough for users to understand their functionality and easily accessible for users to interact with.

Many law firm websites (and websites in general) have touch targets that aren’t clearly visible or are located in hard to reach places from where a users finger can reach(looking at you hamburger menus located at the top left or right on mobile screens). Make sure any touch target on your website is easily recognizable and accessible to avoid confusing your users.

 

Stay tuned for the next post in this series where I go over Hick’s Law, Jakob’s Law and the Law of Common Region.

How to Get The Most Out of Your Blog

Maintaining a blog can feel like a fruitless chore, believe me, I get it. You can add and add to it and see no returns on 95 percent of your blog posts. So how can you turn it around and how can you know if it’s even worth it to keep going?

 

Breaking Out of the Spiral of Dis-Content

If you feel like your blog is going nowhere, chances are you don’t have a clear idea of where it’s supposed to go. Without a goal in mind it’s impossible to write functional content.

Your first step is deciding what type of audience you’re writing for, and what part of that audience you want to become clients. Write about what they want to know and, more importantly, what they need to know.  This will help you figure out where your blog is going and will hopefully inspire some interesting posts that drive traffic.

 

Linking to Your Practice

One of the important things to remember about your blog is that it doesn’t have to be directly related to your practice area. You can write about a specific subsection of the law that you find particularly interesting. This will help you stay interested in it while also starting to rank for those long-tail keywords. 

Once you’ve figured out your focus, you can try to find places where it might link to your firm as a whole. Think of where it overlaps with your practice areas. This will help traffic flow to the rest of your site and into your firm.

 

Find a Schedule That Works for You

Daily blogs can honestly be a bit excessive. Annual blogs are a bit sparse. Try to find a schedule that makes sense given your bandwidth and list of ideas. This might mean once a week, twice a month, once a month, or any period. 

Once you have found a cycle that works for you be sure not to get married to it. If a current news story is incredibly relevant to your practice or your blog, write a surprise post. Staying flexible will be your friend.

 

Guest Post

As far as publicity and link building goes, not much works better than guest-blogging. If you can write a post for a well-known publication, or get a well-known author write a post for you, you are building the authority of both you and your blog.

 

Stop the Blog if it Isn’t Working

Not all law firms need blogs. They aren’t a requirement for your bar membership and if no one’s reading it, it’s just costing time. Try to take steps to improve it, but if it still isn’t driving any traffic after a year or 18 months, don’t feel bad for abandoning it. You can pick it up again at any point if you feel the desire, but don’t feel bad for not doing that.

 

If you are worried about your blog and feel like your content could be improved, consider our content development plan. Mockingbird can help you audit your blog, cut what’s slowing your site down, and make a plan for building on what you need. Contact us to learn more.

What is a Manual Action and How Do I Fix It?

Google tries to be vigilant about spam. It really does. Link building schemes, black hat tactics, and malicious software are some of the main things Google looks for. When it finds them, it might respond with a Manual Action.

 

So What is a Manual Action?

A manual action is when an actual, real-life member of Google’s team checks in on your websites and penalizes it for going against best practices. Manual actions can take a variety of forms and can be consequences of a variety of things.

 

Types of Manual Actions

 

  • Partial Matches (partial de-indexing)

If Google finds pages in violation of best practices it might de-index those specific URLs. This means that they will no longer show up in search results. This can be done to a page, sub-domain, forum, or any section of a domain. A partial match action is generally the best possible scenario for webmasters who are facing spam attacks, as the domain is still functioning and traffic can still find your site. It is still important to try and fix the issue and lift the action as soon as possible.

  • Whole Site Matches (total de-index)

If the problem is found to be larger than a few key URLs, Google may de-index the entire domain. This is a harsh penalty, but it can be reversed once the site complies with webmaster guidelines. Whole site matches are generally implemented when a site flagrantly ignores guidelines by cloaking content, redirecting users, and exposing users to malicious content. If your site is facing a whole site match, you need to consider what brought you there and if you need to change course.

 

What Might Cause a Manual Action

 

Google has a long list of reasons for invoking manual actions. Most of them involve spam links, as link building schemes are about the most forms of breaking best practices that webmasters do. The complete list includes:

 

  • User-generated spam

User-generated spam is spam that comes not from the webmaster, but the users of the website. This happens in forums and comments sections of websites.

  • Unnatural links to and from your site

This refers to link building schemes and spam attacks. If your site is suddenly sending thousands of links to a single, low authority site or is showing signs of spammy link exchanges, or has thousands of links from one low-authority site, Google might reprimand the URL or domain.

  • Thin or duplicate content

This is more subjective, as some sites do not need large amounts of content. That being said, many sites have unnecessary numbers of pages with practically duplicate content, which often sees penalties.

  • Cloaked content/images

This is a pretty old-school black hat technique, and Google is pretty good at finding when people try to implement it. Cloaking refers to showing different content to humans than to the GoogleBot. They can do this by having one image cover another, writing paragraphs of keywords in the same color as the background of the page, or stuffing keywords into gibberish text. Google really doesn’t appreciate these techniques and comes down pretty hard on those that do it.

  • Redirects

Redirects, whether desktop or mobile, refers to when a user clicks on a link to one website then gets redirected to another, completely unrelated, URL. The penalties are usually applied when the redirect goes to a site that is harmful or the redirect is malicious in it’s intent (i.e. sending a user looking for cartoons to a porn site).

 

How to Fix a Manual Action

Fixing a manual action starts by fixing the problem you were originally penalized for. If you were hit for displaying spam comments you might want to delete those comments and block the IPs they were sent from. If you were hit with a spam link attack, go through the disavow process and clean up your referrals. Google has recommendations on how to fix your website after all types of manual actions. 

Once you have made the changes you need to make, you can make a reconsideration request. This is a request for Google to re-review your website and lift the manual action. 

Sometimes you do the work, write the request, and get a denial. This means you didn’t do the fullest work you needed to do. Get back to work and draft a new reconsideration request. 

 

Final Thoughts

Don’t mess with Google. Even if they wrongly put a manual action against you, you apologize and follow the recommendations they give you. Google holds all the power.

In Defense of Location-Based Hero Images

We’ve all been there: you want to build your website, you have a homepage, and you don’t know what to put as the hero image. Should you go for your team, arms crossed and determined, all standing in front of your office? Maybe a picture of you chatting with a client? What about a photo of your infinite bookshelf full of leatherbound, embossed texts? Or maybe even a custom-shot video that includes all of these things and more?

I’m here to argue for the simple location image. If you really want it, a location image with the firm partners in it. Here’re four reasons why:

 

1. Easy to Acquire

A professional photographer should have no problem taking stunning photos of your local scenery, all without the time commitment of a full in-house photo or video shoot. 

 

2. Improves Local Credentials

Local is everything in digital marketing. Consumers make decisions based on what is close and what benefits their communities. A reminder that you are a part of that community as soon as they get to the homepage doesn’t hurt. Local landmarks, scenic views, and sunrises rarely go wrong. 

 

3. Adaptable

So let’s go through some of the other options. That picture of your team? Inspirational now, a weird reminder in a few years after one or more of your team members have moved away. Isolating if someone new joins the team. 

Chatting with a client? Looks good now, kind of confusing if you ever look any different than you did when you took the photo. None can escape the hands of time, holding onto a photo won’t save you.

That custom-shot video? The same issues as the other options arise here: changing team members, changing images. You might even change offices. Not to mention how much an embedded video can slow your site down.

You know what’s reliably beautiful and consistent? A gosh dang sunrise behind a local landmark. 

 

4. Send a Message Without Overthinking It or Underthinking It

You’re here to look like a lawyer and lawyer things are your priority, not spending hours deciding which image should grace your homepage. That being said, a simple stock image won’t cut it. We’ve all seen law firm websites that look like they were tossed together; out of proportion stock images, outdated fonts, just plain weird color schemes. Be different. Be better. Show the world that you’re willing to make an effort, but won’t spend all of your time making an effort on things that aren’t your clients.

 

Obtaining Your Hero Image

So now you know what you want. How do you get it? Through a stock photo site like how we got the hero image for this blog post? Probably not. The homepage to your website is a bit more important than the top of one of our blog posts. 

Hire a photographer. They can help provide you with options while ensuring no one else has the exact photos you’re using. It also gives you the option of having photos of you and your team alongside your scenic locale. You will have more control and will likely get better results.

Find a photographer with good reviews or through someone you trust and schedule your shoot.

How to Properly Use Alt-Text

Images are some of the more misunderstood features of web pages. While they are important for conveying messages and often improve content as a whole, they can also lead to trouble when misused. 

Alt-text is your way of staying out of trouble and improving the indexability of your content. 

One of the worst ways images can get you in trouble is with ADA compliance regulations. When a website isn’t set up for accessibility users with any level of visual impairment will struggle. These users often use software that reads the content out to them. This is tough when the content says “Refer to the above image” and the only thing the software can say about the image is that it is 1926374627.jpeg. Alt-text fixes that.

When you insert an informational image onto your page, chances are you’ve seen the box to insert alt-text for the image. You very easily might have ignored it. You don’t want to ignore it.

 

What to Write in the Alt-Text Box

Ok, let’s look at this chart from Search Engine Land:

Google 2019 ad revenue share pie chart. $98.1 billion from search and other products, 72.7%. $21.61 billion from Google network, 16%. $15.1 billion from Youtube, 15.1%.

What information does it give? It clearly shows that Google earned a majority of its 2019 revenue from Search and other products. You can see that at a glance. What would a computer read? 

Without alt-text, it would read google-ad-revenue-share-property-2019.jpeg.

Let’s fix that.

So it’s Google’s 2019 ad revenue share. We can start with that.

 

“Google 2019 ad revenue share pie chart…”

 

Now, what does it actually show? Let’s go through the data.

 

“Google 2019 ad revenue share pie chart. $98.1 billion from search and other products, 72.7%. $21.61 billion from Google network, 16%. $15.1 billion from Youtube, 15.1%.” 

 

There you go. That’s an alt-texted informational image.

 

But what about decorational images?

 

So not all images are informational. They don’t all have clearly defined data. What if it’s just a random image? What if it’s just a descriptive image to show a picture of your product?

If it’s a random image (like the hero image here) alt-text isn’t 100% necessary. No one is missing out not seeing this stock image of water.

If it’s a product, describe it as you would your product. 

Here is our Definitely Real product, Google Juice:

Google Juice. Green juice in a glass with two straws and kale.

How might we use alt-text to describe this Totally Not Fake Google Juice?

 

“Google Juice…”

 

Well, that was covered in the file name. Let’s go a bit more in-depth.

 

“Google Juice. Green juice in a glass with two straws and kale.”

 

That’s better. 

 

So now you know how to do alt-text. It does take a bit more time when creating a webpage, but it’s cheaper than an ADA lawsuit

Monitoring Your Internal Linking on Ahrefs

Internal linking is a key aspect of on-page SEO, but can sometimes be hard to keep track of or remember to do. When you’re writing content it’s likely that creating anchor text is the last thing on your mind. If you want to learn more about why internal linking is important, visit one of our old blog posts. TL: DR; internal links help users navigate the site and search engines understand which pages are more important.

 

Using Ahrefs

Here at Mockingbird, we use a tool called Ahrefs to keep track of our and our clients’ top-performing pages and linking. One of the datasets it provides is the number of referring internal links for each page. 

 

Finding the Dataset

Image showing screenshot from ahrefs where location for the data set can be seen in the menu and the number of internal dofollow links can be seen for each page
From Ahrefs.com

 

The information you’re looking for can be found under the Pages → Best by links section, then select the Internal tab on top. 

 

When you sort by Dofollow links you’ll probably notice that the pages with the highest URL ratings tend to have the most links. This isn’t entirely coincidental, as you’ve probably guessed. 

 

Why Internal Linking Matters (to Ahrefs and beyond)

When a site has thorough internal linking the user is able to navigate the site easier and is more likely to visit the pages that are being linked to. The more unique visitors a page has, the higher it’s URL rating. This is why homepages often have high URL ratings: the homepage is usually the most visited page.

 

One of the major benefits of internal linking is that it’s a free way to improve your URL Rating. Unlike link building campaigns, you don’t need to call anyone. It’s a simple way to improve your site.

 

How to do Internal Linking

Just in case you made it to the end of this blog post without knowing how to do internal linking, this is for you. 

 

Internal linking simply refers to when one page on your site links to another page on your site. Two pages within a domain, linking to each other. The pages should be relevant, see the links above to previous blog posts on this subject. For law firms, this can be as simple as linking to your car accidents page in your blog post about a local car accident.  

 

In Conclusion

Now that you know what internal links are, how to create them, why they’re important, and where to check in on them, go out and build your internal linking networks.

Using Google Analytics to Improve Page Speeds

The uses and functionality of Google Analytics can sometimes feel endless. On that note, let’s break into page speed insights.

 

Finding Page Speeds

Behavior → Site Speed → Page Timings

Behavior → Site Speed → Page Timings

Knowing which of your pages are slowing your site down is key in optimizing your entire website. You can find individual page loading times under “Page Timings.” Within this dataset, you can toggle page views, average load time, and bounce rate.

By selecting a comparison view for the data visualization you can see which of your pages are taking longer than the site average. 

Once you know which pages are being problem children, you can begin to fix them. 

 

Fixing Page Speeds

Behavior → Site Speed → Speed Suggestions

Behavior → Site Speed → Speed Suggestions

Not only does Google Analytics tell you which pages are slow, they give suggestions on how to fix them. When you go to “Speed Suggestions” you can get suggestions on pages that aren’t even below the average site speed. 

Clicking on the suggestions will take you to a page that gives you the diagnostics on both your desktop and mobile pages. Since Google indexes on a mobile-first basis, neglecting your mobile site-speeds is probably a bad idea.

When you scroll down on the page you can see suggestions and how to implement them. Many of them can be solved using plug-ins, some of them can be solved by just reducing image sizes, and some can be ignored. These decisions are up to you as a webmaster. Or they’re up to us if you’re paying for on-site optimizations.

No matter what you decide to do with this information it’s good to have. Knowing what’s happening with your website is key to knowing what’s happening with your business.