10 Things the Best Law Firm Website

Designs Have in Common

from Lawyerist

2014 Lawyerist Media, LLC

Cover image from Shutterstock.

Introduction
Good design is the foundation of a website that brings in business.
Whether your marketing focus is on offline networking or search-engine
optimization, your website must convince potential clients to take the
next step toward hiring you.
We have been showcasing the best law firm websites for five years, and
we have found that the best-designed law firm websites have some
things in common. A well-designed website should look good, of course,
but the reason to take the design of your website seriously is because a
well-designed website persuades clients to contact and hire you.
Compelling copy and solid search-engine optimization1 are also
important, but in this white paper our focus is design design that helps
turn visitors into clients.

Contents
1. Your Firms Value Proposition
2. Responsive Design
3. Striking Images
4. Hero Homepage Layout
5. Clean Design
6. Great Typography
7. Bold Colors
8. Single-Page Navigation
9. Clear Calls to Action
10. Professional Portraits
Find Out How to Get a Great Website for Your Firm

You dont necessarily have to spend a fortune on SEO if that is not where you want to
focus your marketing strategy, but people should at least be able to find your website if
they search for the name of your firm or the names of any of the lawyers in your firm.

1. Your Firms Value Proposition

Your firm should have a value proposition2 that your website clearly
communicates to visitors. Keep in mind that your website allows you to
communicate with images, videos, colors, fonts, layout, and words.
Dont just use your value statement as your website tagline and leave it
at that.
For example, lets say you are a family lawyer and your value proposition
involves being a good listener and compassionate advocate. Your
website should feature calm colors like green or blue. You would want to
include images of lawyers listening to clients in a comfortable setting
and perhaps touching them supportively. A serif font with a large
x-height might add to the impression of comfort and supportiveness.
If you are a plaintiffs lawyer whose value proposition involves siding with
the little guy and sticking it to the man, your website should probably
feature an aggressive shade of red. For fonts, slab serif headings and a
sans serif body font would add an outsider feel. So would
black-and-white, gritty images related to the work you do or the clients
you represent.
Those are just two examples. The point is to think about ways you can
incorporate your firms value proposition into the design of your website,
not just the copy. People are at least as likely to absorb your value
proposition through the design than by reading your website copy.
You will know you succeeded if, when you ask a client why they decided
to contact you, they repeat your value proposition back to you. (You
seemed like a lawyer who would listen to my concerns or you seemed
like a lawyer who would fight for me and go after the corporation that
screwed me.) If visitors to your website are getting the message, they
are more likely to contact you assuming your value proposition is
attractive to them.

If you do not already have a value proposition for your firm, you should go through the
exercise of creating one. See, for example, the Value Proposition Builder model on
Wikipedia. You dont have to go so far as K&L Gates and produce a slick brochure; a
sentence or two will do nicely.

2. Responsive Design
Desktop computers are no longer the
most-common way to use the
Internet. According to Pew Research,
phones passed desktops in early
2008.3 In fact, 34% of people who
own an Internet-capable phone say
they go online mostly with their
phones. 4 That means your website
must look good to visitors with all
kinds of screens.
A responsive website adjusts to the
device on which it is being displayed
so visitors can get the information
they came for whether they are sitting
in front of a laptop or looking at a
smartphone. At its most basic,
responsive design just means
adjusting the size and orientation of
your content to make it easy to view
and navigate on any size screen. But
responsive websites can also take
into account the type of device.
For example, people who are viewing your website from their phone
probably arent interested in typing a long message into a contact form.
They are more likely to want to call you. Therefore, a good responsive
design will prominently display a clickable phone number or button to
people who are visiting from a phone. You should also make sure your
contact form is easy to use with a tablet, not just a desktop or laptop.
Note that responsive design does not mean having a separate mobile
site. Mobile websites were popular when mobile bandwidth was limited
and mobile browsers had much-reduced capabilities. Now, it is much
better practice to simply build responsiveness right into your website.

3
4

http://www.pewinternet.org/three-technology-revolutions/
http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/

Most responsive websites are built on a grid system that expands and
collapses to fill the screen on which it is displayed. Look at
Lawyerist.com, for example, and resize your browser window from wide
to narrow to see how the site folds up for smaller screens.
In fact, many designers advocate mobile-first design, in part because it
is easier to make a mobile website look good on a desktop than it is to
make a big, complicated desktop website look good on mobile.
If you already have a website that is not mobile, plan to redesign your
website to be responsive in the near future. It may be possible to make
your current website responsive, but that probably is not the best
approach. Instead, look for (or pay for someone to build you) a website
with responsiveness built in.

3. Striking Images

The Internet is also a visual medium, and great images help you get
visitors attention, convey your value proposition, and convince visitors
to stay long enough to decide they want to contact you.
You dont have to use big, wall-to-wall landscapes like Boughton Law,
above. Small images can stand out, too. And stock images are fine, as
long as you avoid cliches like the scales of justice. The point is to use

images to leave a lasting impression on visitors and help define your

firms value proposition.

4. Hero Homepage Layout

The front page of your website should be about one thing, and that one
thing should take up the entire page above the fold. This is sometimes
called a hero layout, and this is basically what it looks like:

It looks simple, but so many websites cram a ton of information and

options onto the homepage. Look at most personal-injury-lawyer
websites and you will see auto-playing videos, bouncing chat boxes,
flashing phone numbers, and tough-looking trial lawyers.
Instead of making it obvious to the user what he or she ought to do, a
busy homepage makes it almost impossible to figure out what to do. At
the opposite end of the design spectrum, the hero layout makes it
completely obvious what a visitor should do.
Dont mistake the hero layout for a boring formula, though. There are
plenty of variations on the theme to explore. Here are a few examples.

Here is Evernotes homepage, emphasizing signups:

Here is Apples homepage, emphasizing a short film about how much its
users love their MacBooks:

Law firm websites can (and should) use the hero layout, too. Here is a
hero layout from Burnet, Duckworth & Palmer:

Each of these asks the visitor to take a specific action. Evernotes

website wants you to sign up to start using Evernote. Apples website
wants you to watch a video. BD&Ps website wants you to look up a
lawyer or practice area to learn more about the individual lawyers and
what they are working on.
All the other options are still there. Evernotes website has a Menu link at
the top right, and the Apple and BD&P websites have a fairly traditional
nav menu up top.
To implement a hero layout, you have to make two important decisions:
1. What is the most important action you want visitors to take?
2. What (short) message will most effectively encourage them to
take that action?
The action could be as simple as a Contact Us button if you think your
potential clients mostly come to your website when they are ready to hire
you. Or if your potential clients generally want to learn, you might ask for

an email address so that you can follow up with the information they are
most-likely looking for.
The message should be short and relate to the action you want them to
take. Do not just reuse your tagline. Your tagline is about your firm; the
message in your hero section should be about the action you want
visitors to take. The BD&P page, for example, emphasizes individual
talents to urge you to look up individual lawyers, and working with
a collective energy to suggest learning more about its practice areas.
A well-crafted hero-style homepage should result in most visitors
especially new visitors taking the recommended action. And if that
action is well calculated to lead to new, high-quality business, then you
should see the results in your firms bottom line.

5. Clean Design
The best websites are designed to be simple and functional without visual
clutter. Clean design helps the reader find the information they came for
by removing visual obstacles that slow down and confuse. Compare two
versions of the same flyer, created by Daniel Higginbotham:

The one on the right is cleaner and more appealing. It uses size to
differentiate between headers and body text, and aligns the columns

instead of relying on borders. Little changes add up to a flyer that is easy

to understand at a glance.5
When it comes to websites, clean design is even more important
because we have a harder time absorbing information on a screen. Every
obstacle your website throws up in front of readers increases the
incentive for them to leave. Conversely, every obstacle you remove
increases the likelihood that they will stick around, read more, and
contact you.
Cleaning up the design of your website helps the visitor comprehend the
information, understand the action(s) you want them to take, and decide
whether you are the lawyer to contact.

6. Great Typography

Shutterstock

If you want people to read your website, take the time to make it as
readable as possible by focusing on typography. Typography is a
complicated subject, but it boils down to clear text and adequate
spacing.
Avoid colored text and pages. Instead, use contrasting shades of gray
for text and pages. Black (or dark gray) on white is usually the best
choice, but you can use other combinations as long as the text remains
clear. Some websites have light-gray text on a very-dark-gray page, for
example.

If you want to know a bit more about clean design, take a few minutes to read
Higginbothams clean-design primer, Clean Up Your Mess: A Guide to Visual Design for
Everyone.

Choose a font that is readable on screen and looks good when printed.6
Dont try to make a statement with body text; just pick a conservative,
readable font. Helvetica Neue (which is what you are looking at now) is
always a solid choice. So are Open Sans and Adobes free Source Sans
Pro (which is what we use for body text on Lawyerist.com). If you prefer a
serif font, try Source Serif Pro or Microsofts Cambria. Or, you can
browse Google Fonts or Fonts.com for a font you like.
The key when picking a body font is to go for readability. Avoid fonts that
are cute or quirky. If you want to have a more interesting font on your
website, pick a different one for headings. Since headings are shorter,
you can be more creative. Creative font or not, your headings must be
readable. And if you use a different font for headings, pick one that
complements your body font.
Be generous with font sizes to make reading easy on visitors eyes, but
dont let the text get too big. A sure sign of a badly designed site is
comically large text (usually as a result of poorly executed responsive
design). And make sure the text adjusts to the size of the screen on which
it is displayed, as well. (See the section on responsive design, above.) As
the screen gets narrower, the text should generally get bigger.
Great typography is rarely the sort of thing ordinary visitors to your
website will notice, but it will tend to make them more engaged with your
website which should result in more potential client contacts.

7. Bold Colors
Law-firm color schemes are often about as interesting as American
sedans in the 1980s. There is a lot of beige, maroon, beige, navy blue,
and beige. These color schemes encourage one reaction: blah.

Or use a separate stylesheet for printing.

Shutterstock

Make your firms website more memorable by using at least one bold
color as an accent. Even a beige color scheme can look great with a
bright orange or strong teal as an accent color. If you dont trust yourself
to pick a color scheme, or you are not sure where to find inspiration,
spend a little time clicking around the popular color schemes on Kuler,
Adobes color-picking tool.
Color can also help you highlight your call to action. If there is one color
that stands out, use it to highlight the button or form that is your call to
action, and nothing else. A unique color will help that call to action stand
out from the rest of your website, which means visitors will be more likely
to take the action you want them to.

8. Single-Page Navigation
Traditionally, most websites are structured with a homepage that serves
as an entry point and introduction, and separate pages for everything
else. A more recent trend in web design involves placing all of the
essential content on the homepage so a reader can read all of it by
scrolling or by clicking links in the nav menu that take the reader up and
down the page.
There are several advantages to designing a homepage this way. First,
because the visitor is just navigating around a single page, the reader
does not need to wait around for pages to load. Second, a reader can
learn the essential details just from scrolling down your homepage. Third,
a single-page structure can improve the SEO value of your homepage,

while still giving you the flexibility to target additional keywords on

separate pages.
Not everyone thinks single-page navigation is a good idea, to be fair.
Plenty of web designers and SEO experts have written about why they
dislike it. But we think single-page navigation is a good fit for law-firm
websites, and it is something you and your web designer should definitely
consider.
To implement single-page navigation, focus on the essential messages
you want to get across. Limit the amount of text to avoid cluttering the
page and bogging down the visitor. Instead, convey information in
bite-size chunks.
The entire site does not need to be on one page; readers can visit other
pages to get more in-depth information. The goal is to give the
homepage visitor a complete overview on a single page.
To implement single-page navigation, start with the hero layout at the
top, then keep going. For a great example of single-page navigation,
check out Apples iPhone 6 product page. For examples of law firm
websites using single-page navigation, look at the websites of Nu|Legal
or ClearCounsel.

9. Clear Calls to Action

The hero homepage is one kind of call to action that makes it completely
obvious what you want the reader to do. It works best when coupled with
a clean design, so the reader does not have to think. But your hero
homepage should not be the only call to action on your website. Design
every page on your website for the action you want visitors to take. Every
page on your website (and every section of your homepage if you use a
single-page layout) should have a clear call to action.
Dont make visitors think.
At a minimum, your phone number and a contact form7 should be
prominently placed near the top of every page. People who visit your
website from a smartphone probably arent interested in the contact
7

Even in this day and age, not everyone has secure access to a personal email account.
A contact form allows potential clients to contact you by email even if they do not have
email themselves.

form, which is difficult to fill out by thumb-typing, but they would probably
like to see your phone number as a clickable button.
If your website includes free resources, the landing page for those
resources should make it easy for people to get them preferably by
giving you their email address so you can follow up later on.

10. Professional Portraits

Lawyer bio pages are usually the most-frequently-visited pages on a
law-firm website. Among the things visitors expect to see on your bio
page is a good and relatively current picture of you. People want to
know who you are and what you look like. It may not have anything to do
with your ability as a lawyer, but it still matters to clients and it will make a
difference in the number of people who contact you after visiting your
website.
Your pictures should also be nice and big. Few things are more frustrating
than encountering tiny photos online. Visitors want to see what you look
like, not just a postage-stamp-sized outline of a head.
Find a professional photographer who can make you look good, and
update your photos about every five years.

Find Out How to Get a Great Website for Your Firm

Weve talked a lot about value propositions and clear calls to action, so
here are ours. We want to help you get a great website. We wont build it
for you, but we will help you get the help that best fits your budget and
your needs.
To get started, take a couple of minutes to complete our website needs
assessment, and we will follow up with you to recommend the best
solution for your firm.
Click here to get started!