Attorney Landing Page Design – CHAPTER 3 Landing Page Observations

Overall Design Width

How much of the monitor width does the design use?

There were three possible answers for this question relating to how much of the horizontal space is utilized in the design:

1. Fixed Width: The majority of the web page sticks to a fixed-width container that is less than the width of the browser.
2. Full Screen: The majority of the web page flexibly adjusts to utilize the full width of the browser window.
3. Mixed: The web page uses a relatively equal mix of full screen and fixed width content.

In general, I saw that there were slightly more sites that were mixing fixed and full-width design elements. It was a pretty even count though for all datasets. Good design can be obtained with any of these layouts, and I saw stellar examples from all three categories.

The websites that used a mix of these elements felt a bit more modern to me, and if you study current web design trends, you tend to see the width of the monitor being used in varying ways to provide interest.

If your web designer will be designing in a fixed width, here are the most common screen widths to pay attention to: http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide

---

Logo Location

Was the logo placed on the left, center or right?

One of the primary goals of an effective attorney web design is to make it super easy for the end user to navigate the site. The user interface should feel familiar to someone who needs an attorney because of an injury.

Being credible and having your own identity is important for sure, but I did not see a ton of deviation from the norm in regards to interface layouts. Having the logo in the tried and true location on the left-hand side of the screen seems to be the way to go for the majority of these sites, as only two of them were not in that location.

---

Logo Contains Keyword / Descriptor?

Do the attorneys put a keyword or descriptive text directly in their logo?

36% of all law firm logos have a descriptor attached to it such as “Injury Lawyer” or “Accident Attorneys”.

This could simply be that the law firm’s name actually includes the keyword or it could be to help end users identify that they are on the right type of attorney site before hitting their back button.

My opinion is that the descriptors are not necessary if the rest of the web design is doing its job correctly. They do have their obvious benefits though!

---

Navigation Type

What style navigations are popular among the top lawyer designs?

In other industries, we are seeing a lot more variety in navigational choices with the desktop adoption of the “Hamburger Navigation”, vertically oriented navs or even other more creative solutions. .

In law sites, we are seeing firms stick to horizontal navigations that are situated across the top of the website. People know it and there is no creative thinking required to work it.

Attorneys have little need to be on the leading edge of tech when it comes to UX / UI. I do think we will start to see more and more hamburger navs in the coming years. For now, the PI attorneys holding page one real estate are not adopting it.

---

Phone Number Location?

Do the legal web designers place the phone number prominently and above the fold?

Make it as easy as possible for potential clients to get in touch with you. There is nothing worse than finding what you are looking for, like an attorney who you would not mind starting a dialog with, but then having to hunt for a phone number.

99% of these websites have the law firm’s phone number proudly displayed above the fold.

A perfect visit for any attorney would be for a potential client with a real case picking up the phone and calling or filling out a contact form. Making it as easy as possible to find the lawyer’s phone number is just good sense in the web layout.

---

Hero Image Area Type

What do the attorney designers do with the tops of the web design?

The hero image area is the large area sitting front and center on the website when you first visit. It is the eye draw and first impression for the website. It is huge in determining whether a website visitor stays or goes.

I devised a way to categorize the various ways attorney web designers are using the “hero image” area and placed them into one of five categories:

1. Video Background: There is a video playing in the area a background image would typically be located.
2. Animated Single Page / Single Message: The image and text is the only image and text displayed, but it animates into place for visual interest.
3. Static: There is a static image and text displayed.
4. Animated Multi Page / Multi-Topic: This “slider” would change images and text through multiple messages. Very common with WordPress sites that bundle revolution slider.
5. No Image: These could technically be classified under “static”, but I felt that the lack of any image at all in that prime real estate area of the attorney’s home page should be noted separately.

I was surprised by the outcome. The vast majority of these websites (~70%) used just a static image and text for the main area of the home page. I appreciated the approach though, as these can be very impactful while not having the bloat of a fancier solution.

I feel that multi-page sliders and the fancier slides that you see in modern WordPress design are sometimes wasted as people tend to not sit through them. They would already be moving towards what they want to do before slide #2 happens.

Most WordPress sites come with Revolution Slider. Slider Revolution (Revolution Slider) is an innovative, responsive WordPress Slider Plugin that displays your content the beautiful way. Here are some examples:

---

Attorney Image Above The Fold

Do most legal websites have an image of the lawyer at the top of the website?

80 out of all 100 personal injury attorney websites have an image of the attorney or the law team above the fold.

Working with an attorney can be a profoundly personal experience and letting potential clients get a glimpse of the firm’s personality and culture could help them feel more comfortable with hiring them.

Real imagery exudes authenticity. An actual photograph can help people get over any stigma they may have. If visitors can put a real face to the firm, it can help increase confidence.

There was one particularly good example from the study of excellent attorney portrait photography. Notice the impressive depth of field and excellent post processing on this site: https://www.habbaslaw.com/

---

Custom Photography Above Fold

Does it seem like the law firm hired a professional photographer for the website design?

What I mean by “Custom” photography?

Basically, I was guessing as to whether a photographer was hired to make purpose-built imagery for the website or not. If it seemed like that was the case, then I would mark it as “yes”.

Seeing a scale of justice or gavel as the primary focus of the hero image area would be marked as “no,” as an example.

At times, I had to take a guess as to whether a stock photograph is indeed a real photograph. Because of that, it was difficult to judge sometimes.

90% of all websites had the attorney(s) in the shot and featured the actual office space they work in or an image of the city in which they are located.

---

City Visually Represented in Main Image

Is there imagery of the law firm's city in the hero image?

42% of all websites had a visual representation of the city that the attorney practices in placed into the hero image area of the site. These could be very obvious city skylines or recognizable landmarks, or even office buildings.

It is an excellent way to help a website visitor understand that they are on the website of an attorney that practices in the city where they need them. It helps with familiarity and may make people feel a bit more comfortable at first site.

It is clearly not a priority for all of these lawyers, but it happened enough across these 100 websites that I thought it worth mentioning.