Creating a website for your law firm is an absolute must, but the difference between just having a website and having a stellar one can’t be understated.

Investing in excellent web design and ongoing SEO efforts is essential for:

  • Ensuring your firm stands out from the competition
  • Building your brand
  • Communicating effectively with your audience
  • Converting visitors into clients

That’s why we put together this list of the best attorney websites in 2022. We wanted to give you a resource that will help you identify what works and what doesn’t when it comes to law firm web design.

This isn’t like any other best of list you’ll find on the web. We didn’t just pick a random assortment of the top-ranking pages. We carefully picked out the best sites and analyzed what makes them tick so that you can understand for yourself.

The Levin Firm

Home Page

The first thing visitors should see when they land on your website is your headline. In most cases, this will be a visitor’s first impression of your brand, and you need to make it count. Your headline should make it immediately apparent to them what you do and that they are in the right place.

Many lawyers use headlines that emphasize how “fierce” or “experienced” they are, focusing on themselves and their merits. A better approach is to focus on the potential client by making your headline—and your entire website—about them and how you can help them on their journey.

The Levin Firm gets a clear message out in just three words. “Win With Levin” establishes the firm’s unique value proposition and sets an aspirational tone for the visitor.

This headline may seem attorney-focused rather than client-focused, but there’s a distinction here. Levin’s headline implies that you can win if you hire the firm to help.

Two sentences after the heading elaborate on the firm’s value proposition and give the reader a call to action.

This is great, customer-focused copy that shows the reader that the firm cares about getting them the compensation they deserve. It also clearly outlines what types of cases the Levin Firm handles (personal injury) and where they practice (Philadelphia).

One minor issue with this page is that the text under the headline does not contrast well with all the elements in the background.

On the mobile version of the site, this isn’t too noticeable since most of the background is dark. The site’s desktop version has a looped video with many white elements that slightly obscure the text.

When you design your website, always make sure that all text elements are legible. This ensures you’re aligned with accessibility standards and improves the overall user experience.

A large call to action button sits front and center on the home page, inviting users to call the firm. The blue color of the button contrasts nicely with the dark background.

Below that button is a “free consultation” button that redirects users to the contact page if they’d prefer to reach out through email. At the bottom of the viewport, there is also an unobtrusive live chat button.

Many web designers don’t consider how much a poorly implemented live chat button can interrupt a user’s experience. If you offer a chat feature, make sure it doesn’t obstruct anything else on the page.

All these elements combined make it easy for someone to contact the Levin Firm. The user has multiple ways to get in touch before they scroll to view the rest of the page.

What’s good?

  • An excellent, customer-focused headline and value proposition.
  • Multiple, clear calls to action allow users to get in touch with the firm easily.
  • Unobtrusive live chat features.

What could be better?

  • Some text elements at the top of the page do not contrast well with the background colors.

Contact

The Levin Firm’s contact page follows best practices for a good contact page. This may seem simple, but the order of the elements on contact pages is important.

When visitors land on Levin’s contact page, they’re given two options to make a call right away. Users don’t need to write down or copy and paste the firm’s number. Both the blue button at the top and the phone number at the bottom have tel: links that will prompt the user to make a call.

Always make it easy for a visitor to contact you. This is true of every page you publish, but it’s especially true on contact pages.

On mobile versions of your contact page, the first thing you should give users is the details they need to make a call. Better yet, add a button so that the user only needs to tap to call.

After that, you can worry about alternate means of getting in touch.

On Levin’s site, visitors who scroll past the telephone links can fill out a contact form in case they’d prefer to reach out via email.

The chat widget also sits at the bottom of the screen, giving the user a third option to contact an attorney. Further down the contact page, there are also embedded Google maps with links to directions and details for each of the firm’s offices.

Attorney Pages

Each of the attorney pages on this website starts with what’s most important—contact information.

Potential clients may end up on these pages as they research your firm, but there’s another audience this page can reach. When other attorneys look for a peer to send referrals to, these are the main pages they’ll visit.

Potential clients who visit this page still have the opportunity to call the office, email the firm, or hit the “Contact Gabriel Levin” button, while visiting attorneys can also use the fax number to send over documents when they can’t use email.

Of course, the live chat option sits at the bottom of the screen. It’s out of the way, just in case a user wants to talk then and there.

Below the fold, the user can read a detailed bio of the attorney. Many attorney websites get this element of a bio page wrong by making it all about the attorney and their accomplishments.

Remember, try to make every piece of copy client-focused, even on attorney pages.

The Levin Firm’s attorney pages accomplish this task by showing the reader what their attorneys can do for the user. The copy reassures readers that the attorney will protect their interests and keep them informed.

The Levin Firm could improve this section by breaking up the text a bit.

This page features large blocks of text that may be intimidating to some readers. Breaking it up into smaller paragraphs could help with readability.

Below each attorney’s bio section, these pages also include an awards and honors section. This is another element that many attorneys don’t get right.

Some sites front-load their attorney pages with awards, accolades, and community leadership positions. These may be important to you and your peers, but most potential clients will have no idea what those things are. They don’t know if the award is prestigious or a participation trophy.

Levin’s attorney pages follow the right structure. It’s better to lead with the essential things like contact info followed by a trust-winning bio than to start on the wrong foot with a list of accomplishments with no frame of reference.

David Bryant Law

Home Page

David Bryant Law’s homepage opens with a customer-centric headline that sets positive expectations for the reader. This is all about the potential client and their experience, not the lawyer.

The paragraphs that follow the headline demonstrate empathy for potential clients’ situations, showcase David Bryant’s approach to keeping clients up to speed, and clarify who it is that he serves. All of this information is contained in just three sentences that don’t take up much of the page.

Below the value proposition, a clear call to action invites users to contact David.

Using the attorney’s first name on the button instead of a generic phrase like “contact us” or “get a free consultation” provides a personal touch to the home page. This is paired with a friendly picture of David Bryant just above the fold.

These elements combined help reinforce David Bryant’s brand as a reliable, approachable, and empathic solo personal injury lawyer.

Another thing to note about this page is the location of the contact button.

Credit: thesmashingmagazine.com

If you were to divide this mobile page into thirds, that button sits at the top of the bottom third. This is what designers refer to as the “thumb zone.” It’s the easiest place for most people to reach and press buttons regardless of handedness.

Placing important buttons in the thumb zone is a best practice because the easier that button is to reach, the more likely people are to click on it.

Live Chat

One last element that the user sees before scrolling further on the home page is a simple chat widget in the bottom right corner of the screen.

The widget doesn’t get in the way of copy or design elements and stays in the bottom right as the user scrolls. This live chat feature can be found on every page on the site so that the user can always contact the attorney no matter where they are on a particular page.

Contact

The “Contact David” button on the home page, the “Contact Us” button in the navigation header, and many other elements on the site all redirect the user to this straightforward contact page.

Users are prompted to fill out a short form to get in touch via email.

What’s good about this page is that, although the full form takes up more room, the first three of five fields sit above the fold. The user doesn’t have to scroll to understand what action they should take on this page.

Blog Posts

One thing that most people don’t take into consideration when publishing content to a blog is that most visitors do not read the whole article. Users tend to skim to find the part that is most relevant to them and to assess whether the article as a whole is worth their time.

Your website needs to take this facet of user behavior into account if you want to reach potential clients.

All the blog posts on David Bryant’s website have a table of contents that allows users to find the section that they think is most relevant. When the user selects a section heading in the table of contents, the page smoothly scrolls to that section.

On mobile browsers, the table of contents sits at the top of the screen and is collapsed by default. This element is also sticky, so it moves with the user as they scroll down the page. This allows them to jump to any section of the post no matter how far they’ve scrolled down.

The font used for the blog posts is clear and legible, with good text spacing for readability. Blocks of text are broken up into small paragraphs.

This helps make the text more inviting because it seems like less of a chore to read. It also helps visitors who skim the page identify key points to stop at.

A final thing to note about David Bryant Law’s blog has less to do with design best practices than content marketing.

The first paragraph of each blog post follows the BLUF method. This means there is a concise statement at the beginning of each article that directly answers the reader’s primary questions about the topic.

BLUF statements help reassure readers that they’ve landed on the right article and avoid fluffy intros so that readers get the information they want as soon as possible. It can also have some beneficial effects on ranking your blog posts on Google.

Service Pages

Another page type that is a must for a personal injury lawyer website are your service or practice area pages.

The service pages on David Bryant Law’s website have a hero section at the top of the page that contains a picture of the attorney, a heading that declares what the page is about, and then a short text section that explains how David Bryant can help the reader.

If you notice, this text section is both client-centered and follows the BLUF principle. It explains the stakes of a car accident lawsuit and what it takes to win. The implication is that you can win the compensation you deserve by hiring an experienced PI lawyer like David.

Following this text is a call to action for people who are already convinced. Tapping or clicking “Free Case Evaluation” redirects the user to the firm’s contact page.

The rest of the service page looks similar to the site’s blog post template. It answers pertinent questions that the reader may have about their cause and provides a table of contents at the top so that readers can navigate to relevant sections.

Blevins & Adams Law Group

Home Page

Blevins & Adams’s home page opens with a great piece of customer-focused copy as the headline. The headline’s focus is entirely on the user and not the firm.

The idea that “you” receive your money by working with “us” is only heavily implied. This clear and simple value proposition gets the point across immediately.

The headline may be the first thing the users see, but it’s not the first thing on the page. The firm’s number is prominently displayed as a clear call to action. Clicking that link on mobile opens the user’s call context menu so they can speak with the firm in a matter of seconds.

There are a few glaring issues with this home page, though.

First, the logo at the top of the page is far too big, the gap between the headline and the following text is too wide, and there’s a menu bar at the top with wasted space to the left.

These choices take up a lot of valuable real estate that could be used to build on the bold claims made in their headline.

For example, the paragraph below the heading is cut off by the wasted space.

If this firm were to tighten the design elements up, the user would be able to read that Blevins & Adams only charges a 25% contingency fee. They would also see a call to action button asking them to schedule an appointment.

When you’re designing your website, you need to ask yourself what’s more important to you: a big logo or getting potential clients into your pipeline.

The rest of the home page goes through standard information like why the reader should choose them and what areas of PI law they practice. All this information is good for the user, except they don’t have another chance to convert until they get to the contact form at the bottom of the page.

To this law firm’s credit, this form is simple and easy to use, but it may come just a little too late for users.

If the firm used live chat or a sticky contact button, they might see an increase in conversions.

Contact

Blevins and Adams’s contact page starts on the right foot with a clickable telephone number at the top of the screen.

Following that with a map to their office is a suboptimal choice for this page. People who are visiting this page are looking for contact information first. Locations and directions are an afterthought.

A text box with addresses and phone numbers comes after the embedded Google map.

Since these numbers are not clickable, they take up valuable space on the page. Few users would be willing to copy and paste, write down, or memorize the number.

Also, note that the text spacing between the mailing address and office location details is uneven. This makes both of them hard to parse out since they’re so close together.

It’s not until the user gets to the bottom of the page that they can enter their information into a contact form.

This page would benefit from a layout restructuring. The contact form should move so that it is on top of the map element. The address and contact information text box should be updated so that the details are not confusing, and the telephone numbers should be clickable links.

Morgan & Morgan

Home Page

As you would expect out of one of the most well-known firms in the country, there are many things to like about Morgan & Morgan’s home page.

That doesn’t mean there aren’t some opportunities for improvement, though.

The headline is not the most client-focused, but it isn’t self-aggrandizing. The theme of “size is strength” is the prevailing theme throughout the entire page. If a user were to view the whole page, that’s one key message they’d take away from this brand.

They might have used their “For the People” tagline to emphasize client-centered ideals instead of focusing on the size of their firm.

The call button in the navigation bar and the “Have a Case” button provide the user with options for reaching out to the firm. The navigation bar is compact, so it’s never in the way of site content, and it’s sticky, so users are always one click away from talking on the phone.

The chat element at the bottom of the screen is sticky so that users can initiate conversations anywhere on the page. Using a picture of John Morgan in the chat element could make the user feel like they’re just one step away from chatting with a real person—or even Morgan himself.

While this chat element looks nice on larger phone screens, it takes up a lot of space on smaller screens. Any potential client with an older or smaller phone won’t be able to see as much of the content, hindering their user experience.

Scrolling down to the next section, the user sees more of the “size is strength” branding, which reinforces the overall theme of the page.

What stands out here is the “See for yourself” button which links to a page filled with client testimonials. Each section of the page has its own call to action.

The logic is if someone lands on the page and scrolls past the calls to contact the firm, maybe they’re looking for reassurance that Morgan & Morgan is right for them. The user may want to learn from previous clients’ experiences.

Users who keep scrolling, see more messaging that plays into the overall theme. This time the heading is more customer-focused than the ones further up the page.

The button on this page directs the user to the practice areas page. As with the previous section, there’s a similar logic regarding CTAs. This is designed to get users who are looking for help with a specific case type to the service page that’s right for them.

The verdicts and settlements section includes a great idea that’s poorly implemented on mobile devices. There is a searchable table with over 1600 successful cases. This is an excellent way for Morgan & Morgan to showcase wins and the types of cases they handle.

The table itself is too large for even the biggest phones. The fact that you need to scroll left to right to get all of the information isn’t obvious.

The table looks great on desktop and tablet browsers but should be omitted or modified on mobile.

The last element on the home page is the contact form. This is a standard form for those who want to receive emails, but one thing about it stands out.

Users must pick their case type from a predefined list between the email and message fields. This dropdown includes common types like “car accidents” and less familiar terms like “defective drugs.”

It’s one thing to prequalify form submissions by asking users to give you some information on their case. It’s another to ask them to choose from terms they may not be familiar with.

Including the dropdown may help Morgan & Morgan weed out cases they are not interested in or route submissions to the right attorney, but the firm could be losing out on valuable leads. Some people may not finish filling out the form because they aren’t sure what their case qualifies as.

Contact Page

Morgan & Morgan’s service page follows all of the best practices for mobile. There’s a clickable telephone button at the top, followed by a contact form.

What stands out here is that the call button is animated. This draws the user’s attention and directs them to the action the firm wants them to take.

This little touch spices up the page in a big way.

Service Page

Compared to the home and contact pages, Morgan & Morgan’s service pages leave much to be desired.

The heading for this page—“Car Accidents”—is small and deemphasized in contrast with the photo at the top of the screen.

This photo has no connection to car accidents and looks like a dull stock image. This page would look much better if it were related to the topic.

The next section could also do with some stylistic changes.

The font is tiny, line spacing too narrow, and the large block of text may seem daunting to some readers. This could be made more readable by increasing the text size and spacing and breaking it up into smaller paragraphs.

Further down the page is a FAQ section for readers to learn more about Morgan & Morgan’s services. The content here is good, but, just like with the first section of text on this page, the font size is too small and the paragraph length is too long.

Drugwatch

Drugwatch is not a personal injury lawyer, but this publisher writes content covering PI topics. If you have a personal injury blog and your firm focuses on mass torts, defective products, or prescription drugs, chances are you’ll end up competing against them at some point.

Blog Posts

Drugwatch uses a simple blog post template which may seem unremarkable, but there are two crucial items to note here.

First, each blog post follows the BLUF principle. In one condensed paragraph, they get the main point across to the reader as quickly as possible.

Second, each article has a few features that can help build trust with the reader.

  • The writer and editor get credit for the article, and their credentials are clearly listed. There are also links to their profiles on Drugwatch explaining why readers should trust them.
  • Under the byline, there is also a link that shows the reader all of the citations for the article.
  • The article is marked as “fact checked,” and there is a link to a resource explaining Drugwatch’s editorial review standards.

In some cases, Drugwatch even gives credit to a “medical reviewer.” Most of the time, this person is a doctor who has confirmed that all of the claims made in the article are factually and medically accurate.

These elements combine to help build the site’s authority and credibility with Google.

Dolman Law Group

Home Page

Dolman Law Group’s website offers users two different phone buttons above the fold, one in the body of the page and another in the header. The latter follows the user as they scroll through the site.

The phrase “We Listen and We Care” on the call to action button is a great customer-focused touch. Language that touches on customer service and results speaks to this firm’s compassion and attention to detail without calling attention to the attorneys themselves.

The live chat features on this site are well thought out. The chat element is unobtrusive and easy to reach.

One thing Dolman Law Group could improve with the chat widget would be to include an image of one of the attorneys. Users may be more likely to initiate a conversation if they feel they’re talking to another person rather than a chatbot.

Blog and Service Pages

The blog and service pages on this site have clear and legible text. It’s clear that the designer of this site paid close attention to font sizes and spacing to keep everything readable.

For the most part, the length of each paragraph is appropriate. There aren’t large blocks of text that prevent users from wanting to read. Skimmers can easily find relevant information and make their decisions about the firm.

Contact

Dolman Law Group displays its contact form prominently at the top of this page. It’s big, and there’s no question about what action the user should take here.

Phone links and the chat widget sit at the top and bottom of the screen just in case the user would prefer a different method.

How We Picked These Websites

We looked at hundreds of personal injury websites to find the best of the best. The criteria we used to select these sites included:

People-first copy: Is the copy on the site clear and easy to understand? Did the attorneys who approved the design focus on their customer’s needs, or did they focus on their achievements? With Google’s new Helpful Content Update, making sure that your content meets user needs is now more important than ever.

Conversion-focused: Does the site provide the reader with ample opportunities to contact the attorney? Is it easy for them to reach out, and can they use the method that works best for them?

Ease of navigation: Is it easy for users to find the information they want? It’s one thing to have clear calls to action on each page so that users know how to take the next step. It’s another to make it easy for them to do their own research on your site.

Attention to detail on mobile browsers: Is the entire site usable and legible on mobile? Mobile-first optimization has been a best practice for so long that it’s basic table stakes for a good website. So many attorney websites ignore the mobile user’s experience that sites with appropriate text sizing, chat widget placement, and thoughtfully designed elements have the edge over the competition.

If your firm’s website is ready for a redesign or you need to build a new one from the ground up, we can help you.

At Rankings.io, we have years of experience working with top-performing personal injury firms. We know what it takes to get your website design, user experience, and SEO performance on the right path to ranking on the first page of Google’s search results and converting potential clients into new clients when they land on your page.

To learn more, contact us today.