How A Great Website Design Can Help Your Law Content Shine

Don't let bad design ruin your website copy.

All lawyer websites have a story to tell about the firm. Page content should be supplemented with design that leads visitors through this story and convinces them to take action.

Great content lies at the heart of every good design. Giant hero images, complex animations and brilliant illustrations cannot by themselves support a site that does not have anything interesting to say.

For any number of reasons, content can become an afterthought. Maybe the project is rushed, or some elements are particularly complex, taking up too much mental space. Sloppy content can have consequences, however, causing users to abandon your site or lose trust in your firm.

Here are five things that will help ensure your website’s design helps your content shine.

1. Respect readability
Many things go into making a website readable. One of the most important factors is negative space: the space between letters, between lines of text and between different content elements. Space helps group similar content and delineate separation between different topics. Making a website readable also means making it scannable. Almost no one reads a website fully, top to bottom, left to right. Visitors scan, looking for relevant bits of information. To help them, pay attention to the following:

Line height: Website copy can suffer from one of two ills: too much space between lines of text, or too little. Both make paragraphs difficult to read.

The line-height element sets the amount of space between lines, relative to the height of the text. A line height of between 1.25 and 1.5 is ideal, or space between lines that is 125 to 150 percent the height of the text.

Line length: The length of each line of can also make websites more or less hard on readers’ eyes. Lines that are too long are difficult to keep in focus because it is hard to see where one line ends and the next begins. Lines that are too short (or narrow) break up the reader’s concentration too frequently. Every time readers start a new line, they are energized; that is, their attention is brought back to the text. That attention wears off as the reader continues along the line of text. Your goal is to re-focus attention at optimum intervals.

Line length can also be used to link concepts. For example, if a headline and subhead keep the same line length, it is clear to the visitor that those two ideas belong together as a unit.

Optimal line length for paragraph copy will depend on the font size. Generally, 50 to 75 characters per line is considered ideal.

The Golden Ratio: The golden ratio is a mathematical concept that can be seen in art, architecture, design and the natural world. The ratio itself is an irrational number, approximately 1.618, and it represents the ratio between two items, one of which is larger than the other. Two items are in the golden ration if the sum of the two has the same ratio to the larger amount as the larger amount has to the smaller. (Or, mathematically, a+b is to a, as a is to b, where a is larger).

The golden ratio is considered naturally harmonious and pleasing to the eye. The spiral of the nautilus shell is often said to expand in accordance with the golden ratio, although mathematically it does not. Salvador Dalí explicitly used the golden ratio in some of his works, and some artists use the golden ratio to determine the size of their canvasses.

The golden ratio can be used in web design to set margins, establish the space between paragraphs or set headline sizes. For example, if a website uses 16 point text for body copy, the golden ratio would dictate that sub headings should be 20 points, headlines 26 points and titles 42 points. This is, of course, not a rule set in stone, but it can be a good guideline.

Scannability: As stated earlier, website visitors do not read pages; they scan them. This means that while people will generally start at the top of the page, their eyes then jump from spot to spot, looking for items that stand out or that may be relevant to the information they are looking for. People tend to read headlines first, then skip whole blocks of content. They will read the first sentence of a paragraph, or just the first few words of a sentence, before determining whether to read on.

Because of this, copy must be broken into scannable bits. An ideal paragraph will contain only two to three sentences, and paragraphs will be broken up with headlines or sub headlines. Bullet points are also a good way to supplement long spans of copy, as are pull quotes or graphics. Use textual elements strategically to draw readers’ attention to your most important points.

2. Establish hierarchies
When everything on the page is the same size, nothing stands out. Readers rely on a website to create a hierarchy that tells them what is most important and what they should pay attention to.

People visit lawyer websites for a variety of reasons, most of which are informational. It is your website’s job to lead visitors to what they are looking for, with a hierarchy of design that prompts them to action. Larger design elements should be the most important, and elements should scale down as they become less important. Your primary call to action, for example, should be prominent, clearly showing visitors what is the action they should take.

Readers also rely on hierarchy to establish rules for navigating a site. Buttons, for example, should always look the same, as should links and headlines. Consistency creates a pattern that makes pages easier to consume and sites easier to navigate.

3. Do not overdo design
Each piece of your website’s design should exist because it serves a purpose. Legitimately, that purpose may be to get a user’s attention. Illustrations, animations, drop shadows and subtle motion effects all serve to direct visitors’ attention and can be effective when used sparingly.

When building website elements, always ask why. Would a piece of information, for example, be better represented by a graphic or slideshow? Would that keep the user engaged? If the answer is yes, use the design. If you cannot think of a good reason for a design element’s existence, leave it out. Too many bells and whistles prevent visitors from seeing your site clearly.

4. Invest in graphics
Out-of-date or low resolution pictures are an instant turn off. Just one can stand out, causing people to concentrate on the thing that is wrong rather than all the elements that may be right. When choosing graphics for a website, make sure they are up to date, but not trendy. The hipster beard, for example, has made its way into many stock collections, and it will instantly date any website that uses it. Make sure your website is modern and that it has staying power.

Attorneys can benefit from professional photography. When you hire a photographer, you will receive a custom, high resolution archive of photographs that can be used to showcase your firm’s personality and connect with clients. You can always sprinkle some stock into your collection as well.

When preparing graphics for the web, always make sure to do the following:

Check your resolution: Screen technology has come a long way, and some visitors will be viewing your site on high-resolution retina monitors — monitors that can easily expose flaws in image resolution. Make sure all graphics are large enough to fit into the space assigned to them without being stretched or distorted. If a picture does not have the resolution needed for the space required, leave it out. Having no picture is better than having a poor quality one.

Optimize images: Many visitors will also be viewing your site on mobile devices. All images should be optimized, or compressed, to the smallest file size possible. Online tools like compressor.io can help significantly reduce file size without sacrificing quality.

Use svgs: An svg file is a vector file, as opposed to an image, which is raster. Raster images are made up of individual pixels, and therefore cannot stretch to fit any space, as there are only so many pixels available. Vector files will display in high quality at any size because the image is defined mathematically. An svg file will always be smaller than a picture (raster) file and will always display clearly. Not all graphics can be svgs; the format is uniquely suited to illustrations. However, when possible, use them. Any element, like a logo, that can be represented with a vector file should be.

5. Test continuously
While testing is not a design trick, it is essential. It can be easy to overlook website fundamentals, like checking for broken links, or having a visible phone number on every page. These small things are big trust builders — or busters. Here is a quick testing checklist:

1. Links: Do all menu, in page and button links function? If you use WordPress as your content management system, you can use a plugin like Broken Link Checker to crawl your site for broken links.

2. Speed: Do your pages load quickly? Google has a PageSpeed Insights testing tool. The tool will both rate your site’s speed and give you tips for how to improve load times.

3. Responsiveness: Does your site adapt to all screen sizes? Some visitors will see your site on a number of different devices, and the experience should always be consistent.

4. Basic on-site SEO: Does your site have title tags and meta descriptions? Does it contain schema markup that identifies important elements like reviews and phone numbers? Do your images have alt tags? These are all items your development team should be paying close attention to. For a quick primer on basic on-site SEO, try Moz’s on-site SEO resources.

5. Analytics: Do you have a way to monitor performance?

6. Browser testing: Is your site free of errors on all major browsers?

7. Third-party applications: Are the necessary connections made between your site and third-party services? Is your chat online? Does your newsletter subscription input talk to your list management service?

8. Calls to action: Are they present? Are they obvious?

9. 404 pages: Sometimes, even with the best testing, links will break. In these cases, you need a well-designed 404 page. A 404 page should give the user the opportunity to search for what they were looking for, and if possible suggest alternative content. Never let a visitor hit a dead end.

Your website’s design can help you stand out and earn trust with visitors and potential clients, if it works in harmony with your content. When you take the time to attend to the details of your typography, image quality and space, you help build a good user experience where the whole really is greater than the sum of its parts.