In April of 2015, Google rolled out the penalty for websites that are not mobile friendly. So, how do you find out if your website is mobile friendly? What is the penalty for having pages that are not mobile friendly? Conrad Saam explains how to test your site and why it’s important.
Did the Google Mobile Update have any effect? We did a survey of our clients to find out. BUT, let’s figure out if it had an impact on your mobile search traffic — get step by step notes on how to check.
Advance on this post: I recently had the opportunity to design a website for a client that works with individuals and families that have experienced a traumatic brain injury. Different from our typical client, this pro-bono project was made possible by Mockingbird 1% for Good — part of our ongoing effort to make the world a little better for everyone.
This project has been a welcome doorway into the world of web accessibility. I quickly learned how little I knew, and how strongly the lessons I learned applied to the legal industry. Thanks to the patience and assistance of a great client, we were able to design a website that appeals and works for everyone, including those with disabilities.
Without further delay — or in case you happen to be a skim reader — please help yourself to any of these website accessibility tips. And don’t be shy, implement them and keep a sharp eye on your analytics.
You might be amazed how people engage with your website when they can see your content.
Why Legal Cares About Accessibility
Let’s just start with the easy stuff. People with visual, motor, cognitive, hearing impairments, or any type of disability deserve to be treated equally. Everyone should care about accessibility.
It’s not being accommodating, it’s being decent.
Do you have any clients who are elderly? Clearly, with age comes wisdom, but so too comes vision and cognitive changes.
Do you have clients that have been injured in say, a car accident? The workplace? Affecting cognitive, visual, auditory, or motor impairments?
All for one, and one for all. Designing with disabilities in mind only enhances good, classic, design techniques for everyone.
Legally, it’s the law…well almost. You know the old Section 508 of the Rehabilitation Act and how it currently only requires government websites to comply with accessibility standards? Well times are changing. In some cases, the DOJ has ruled that all websites must comply with the ADA, even if the current regulations are not explicit.
These are some pretty convincing punch points. But now let’s get technical, so that we can start to make changes that are inclusive and a win for everyone.
20.6 million people are estimated to be visually impaired in the US. Imagine you are blind or visually impaired, how will you interpret a website and its content? Even more important, how can you make critical decisions like, who to choose to represent you in a legal case?
caption: How does a screen reader work? Try installing and activating Chrome Vox, to view your website as a screen reader would. Now, don’t cheat, close your eyes!
Some people will use a screen reader. All the text, links and images in a website will be read out loud, from top to bottom. Some good practices here are to make sure all of your text is text, rather than images. Be sure to have a page hierarchy that makes sense: important, broad info at the top, clear navigation, and also clear divisions on the sections of your site.
Other people won’t need a screenreader, but will use a text-only zoom. This is set in their browser accessibility settings. To help them out, you just need to make sure that all your text can be enlarged without breaking your site. To test this, try opening your website in Firefox. Select Options, Content, Fonts & Colors and try increasing the font size. Is your site still readable and useable? Is all the content still on the page?
If you have a website, at some point, some designer, somewhere, has probably hit you over the head with the battle cry, color matters. I firmly agree, but not in the way you think. Better stated here, contrasting color matters. Genetic color blindness affects about 8% of all men and about 0.5% of all women.
Contrasting color is a fascinating topic — placing two colors together can actually change the way you perceive each color (see image below). But color can also determine whether or not information will even be visible to people. To see what I mean, try running your website through various color deficiency filters to experience your site through different eyes.
Even people without visual impairments struggle with content comprehension when there is not sufficient contrast in colors. Changes in vision that occur with age can make it more difficult to read a computer screen as well. People experience reductions in the amount of light that reaches the retina, loss of contrast, and loss of ability to discern details.
So, what is the golden color contrast ratio that will magically allow more people to see your content (and thus increase your pool of potential clients)? Properly known as contrast ratio, the minimum current standard is a ratio of 4.5 to 1. Test your site’s color contrast ratio and adjust to make things readable. Many visually impaired users make use of highlighting as a quick trick to increase contrast and visual focus. Now, onto those lovely hero images you’ve got on your site…
Alt Text for Images Matters
With visual impairments in mind, alt text for images becomes very important. Rather than a tool for SEO or text to look at while the page loads, alt text may be the entirety of information that a potential client has to conceptualize, visualize and interpret your message. So, make it good!
Providing strong alt text can be helpful for both people with visual impairments and those with some types of cognitive disabilities. There are tons of articles on how to provide strong, descriptive, alternative text for images — so I’ll let you Google that for the complete list. But one I‘d like to highlight: don’t use the phrase “image of…” or “photo of…” in your alternate text as that is redundant information in an image tag.
A Side Note on Font Awesome
Let’s jump to an example where I felt sheepish. I have always been a fan of Font Awesome: scalable vector icons where you can easily change the size, color and other appearances. For a website mockup, I used a Font Awesome icon, over a button, over an image. I assumed that this layered approach would be good for multiple types of users on the site, and for providing good visual cues and separators. I also assumed, as a sheep might, that since Font Awesome is popular, that it would be well-versed in current accessibility practices. Well bah-bah-bad idea. Ok, done with the sheep thing, really.
I looked into font awesome accessibility, and the verdict is, it’s not that great — on it’s own. Their website says: “Screen Reader Compatible. Font Awesome won’t trip up screen readers, unlike other icon fonts.” Now this is fairly useless information, when there isn’t additional information to help us understand exactly how it interacts with screen readers.
There are many reasons that icons and font awesome are super handy for websites. Most browsers (used in conjunction with screen readers) expose CSS generated content through the accessibility layer. Meaning, screen readers may be able to describe your icon out loud. Using an icon on a button or call to action is good, just don’t forget to provide an alternate way for people to understand your content if the icon isn’t expressed.
So, general rule of thumb on this one: use CSS generated content only to supplement the design, not to create key page content.
Don’t Be Terrified: Best Practices Still Apply
That’s right, the world has not flipped over on it’s axis, oh wait, yes it has. But don’t worry about that, because all the great things that you are having your designer / marketing assistant / front desk person / nephew do on your website are still applicable to good, universal website design.
Great designs are built in a way that maximize aesthetic and functional appeal to everyone, regardless of age and ability. Wait now — you say you don’t have someone implementing great design, content, and accessible features on your website? Well, seize the day: call someone who cares about this stuff.
Or ruminate on this: how many potential clients are missing out on your legal services because they struggle to figure out who you are and how you can help them?
Put a bird on it. There is a reason that this phrase from the quirky Portland-based show has stuck around — well there are two reasons:
By placing a bird image on clothing, bags, and otherwise utilitarian items, they became elevated to art, perceived as inviting and worth more. Short lesson: images matter.
A once whimsical image that provided visual intrigue & lightness to mundane designs got overused. It is now a tired stereotype. It represents a lack of imagination and creativity. Short lesson: don’t put a bird on it…And let go of overused stock photography.
Why You Care
Images make ordinary things emotional, increase engagement, and can keep people on your content longer.
We process visuals 60,000 times faster than text.
Hm…maybe I should have put that last bit in an image. Did you know that just by visually imagining a written word as an image, it increases the likelihood that someone will remember the word? Already we’ve got two reasons to include great images on our websites: faster connection, stronger connection. But there’s more.
Images pack powerful emotional and cognitive sway. Remember when you do the group cohesion tests to find out what kind of learner everyone is? Examples include auditory, kinesthetic…the list goes on. But guess what — big surprise here — pretty much everyone, is also a visual learner. One more reason that images are something to care about on your legal website.
Stock Images that Won’t Kill Your Spirit
So, you’ve decided, you will put some stock images on your website. Fair enough. Here are a couple of free resources: compilation of many free stock images, variety of local and other high-res photos. We just ask, if you can, don’t put a bird on it…unless your business name is Mockingbird Marketing, then you should certainly put a bird on it. Really though, as you make decisions about what defines your firm and what makes sense for your branding, one easy rule is this: steer clear of legal images that haven’t had a rest since pretty much the beginning of law. See below for a solid, though not comprehensive, list.
Spare Yourself these Top 7
Scales of justice
European judge (unless you practice in Europe)
Statue of Lady Justice
Piles and piles of law books
American flag laid over any of the previous items
Here’s a quick tip: Google “law firm.” Select Images. Anything you find here is very, very tired. Be polite, let it rest.
You Are Above the Gavel
Think of your firm and your firm’s photos as a personal calling card. They represent who you are, your brand, and if you can give people the extra edge to associate your firm or your photos with your firm, then you are one step closer to a phone call. Visuals are a huge part of how we tell our story and how we initially engage with people. It’s often our first impression beyond a Google Search. So, if you have the budget, one better than selecting compelling stock photos is to have attorney and firm photos taken by a professional photographer.
Think about what defines your law firm. What differentiates you? And not just what is interesting to you; flip that around. What will potential clients find important? What about your firm will be of value to them?
For example, say you think your law firm culture — relaxed, Hawaiian shirt Friday — is quite delightful and unique. I agree, go for it. BUT before you publish your luau Friday firm look to the website, consider this: why does a potential client care? Unless you can share (visually, written, etc.) how your hang loose Hawaiian look benefits the client, then keep it internal. Because worst case scenario here, it can come across as self-absorbed and inward-thinking.
From Selfie to Self-Assured
So we’ve just compiled a list of things to avoid. Let’s shift gears to things that work. Again, great law firm photos can help bring to life your qualities, value, philosophy, and story. They can give you an edge on how you are different from other law firms.
After launching over 500 legal websites, I have seen a wide array of law firm photos: the good, the bad and the ugly. From blurry head-shots, to poorly green-screened firm photos, to selfies in a courthouse bathroom, it’s all been done. And it all gets posted to the website.
Instead, take the time to hire a local photographer. Have staff prepared for the photoshoot and strategize beforehand with the photographer so that you know what you are going to get out of it.
Scout out locations in and around your office that are interesting. Are there major landmarks that people will recognize? Is there a good view near your location? Some of the best firm photos for websites are action photos. It doesn’t have to be rocket science. Just try to get everyone walking, speaking, and moving like great, engaging, caring humans do. Great law firm photos can tell a story and it is your job to make sure that story is worth telling.
Conrad Saam answers a question from the crowd: can I make virtual offices work for me in terms of local SEO? How can I rank in local results if I am outside of the centroid of a city? Within Google guidelines, may I establish separate pages around my virtual office location? What has the Pigeon update done to affect the use of “fake” offices?