Why Button Placement Matters More on a Phone Than a Desktop
Picture a prospective client standing in a hospital parking lot after a car crash. She searches for a local injury lawyer, taps your result and lands on your homepage. Within a few seconds she decides whether to call you or hit the back button. Attorney contact button placement shapes that moment more than almost anything else on the page.
On a desktop screen, a phone number in the header is easy to spot. On a phone, however, the same header may shrink into a hamburger menu. The number disappears and the visitor has to hunt for it. For a solo attorney with a small marketing budget, every lost call matters.
There is no single placement that works for every firm. A criminal defense lawyer who takes late night calls has different needs than an estate planning attorney who books consultations a week out. The goal is to understand the options, apply sound tap target rules and then test what works for your own visitors.
The Four Main Places a Contact Button Can Live
Most law firm sites use some mix of four placements. Each one has strengths and tradeoffs, so it helps to look at them separately before deciding how to combine them.
Header Buttons
The header is the first thing a visitor sees. A “Call Now” button or a tappable phone number at the top of the page tells people right away how to reach you. For example, a DUI defense attorney might place the number in the top right corner of the header so it is visible before any scrolling.
The downside is that the header scrolls away on many themes. Once a visitor reads three paragraphs about your practice, the button is gone. In addition, crowded mobile headers often squeeze the logo, menu icon and phone link into a tiny strip, which makes each target harder to tap.
Sticky Bars and Floating Buttons
A sticky bar stays fixed at the top or bottom of the screen as the visitor scrolls. Many mobile layouts use a bottom bar with two buttons, such as “Call” and “Email,” because the bottom of the screen is easy to reach with a thumb.
Sticky elements keep contact options visible at all times. Still, they take up screen space and can cover content. A family law attorney with long pages about custody schedules may find that a tall sticky bar hides part of every paragraph. Keep the bar slim, make sure it does not cover cookie notices or form fields and confirm that it does not block the browser’s own controls.
Sidebar Calls to Action
On desktop, a sidebar with a short contact form or a “Schedule a Consultation” box sits beside the content and stays in view on wide screens. An immigration attorney writing detailed posts about visa timelines might use a sidebar to offer a consultation link next to the reading material.
On mobile, though, most themes push the sidebar to the very bottom of the page. As a result, a sidebar button that looks prominent on a laptop may be buried beneath a long article on a phone. If you rely on a sidebar, check where it actually lands on a small screen.
Footer and In Content Calls
The footer is where visitors look when they have finished reading and want to act. A clear phone number, office address and contact link in the footer catch people who scroll all the way down. Meanwhile, in content buttons appear inside the body, often after a key section. For instance, a workers’ compensation lawyer might add a short line after a section on filing deadlines that invites the reader to call with questions.
In content calls work because they show up at the moment a visitor has a question. On the other hand, too many of them can feel pushy. One or two well placed calls on a long page usually read more naturally than one after every heading.
Tap Targets and Accessibility Basics
A contact button only helps if people can actually tap it. Small buttons, cramped spacing and low contrast all cause missed taps, and they create real barriers for visitors with limited dexterity or low vision.
Several published standards give useful reference points:
- WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) sets a floor of 24 by 24 CSS pixels for pointer targets, with exceptions such as enough spacing around smaller targets or links inside a sentence. The W3C notes that larger targets help many people and suggests aiming higher for important controls.
- Apple’s Human Interface Guidelines recommend a hit target of at least 44 by 44 points for controls on iPhone and iPad.
- Google’s Android and Material Design guidance recommends touch targets of at least 48 by 48 density independent pixels.
In practice, a primary call button on a law firm site should comfortably clear these numbers. Give it padding, leave space between the phone and email buttons and use a label that screen readers can announce clearly, such as “Call our office” rather than a bare phone icon. Additionally, check color contrast so the button text stands out against its background.
Keep in mind that meeting a minimum is not the same as testing with real people. If possible, ask someone who uses a screen reader or a larger text setting to try your contact path from start to finish.
How to Test Attorney Contact Button Placement
Because there is no universal winner, testing beats guessing. Fortunately, a solo attorney does not need an expensive research budget to learn what works. The steps below build on each other.
Set Up GA4 Events First
Before changing anything, make sure you can measure clicks. In Google Analytics 4, you can track taps on phone links, email links and form submissions as events. Many firms then mark the most important ones as key events so they show up in reports.
Label each button so you know where the tap came from. For example, a “header_call” event and a “sticky_call” event let you compare placements instead of seeing one lump total. Without that detail, you cannot tell which button is doing the work.
Review Heatmaps and Session Recordings
Heatmap tools show where visitors tap and how far they scroll. If most mobile visitors never reach your footer, a footer only phone number is not serving them. Similarly, if people repeatedly tap a non clickable phone number in an image, that is a clear sign to turn it into a real link.
Before adding any recording tool, review what it captures. Configure it to mask form fields and avoid recording anything a visitor types, since prospective clients may enter sensitive details. Also make sure your privacy policy accurately describes the tools you use.
Run Simple A/B Tests
An A/B test shows one version of a page to some visitors and another version to the rest. For instance, you might compare a bottom sticky call bar against a header only phone link on your main practice area page.
Keep each test focused on one change. If you move the button, change its color and rewrite the label at the same time, you will not know which change made the difference. Also, a small solo practice may need several weeks of traffic before the results mean much, so be patient and avoid declaring a winner too early.
Check on Real Devices
Browser previews are helpful, but they do not replace holding an actual phone. Test on at least one iPhone and one Android device, in both portrait and landscape. Try it with one hand, with the text size turned up and on a slow connection.
Then tap every contact option yourself. Confirm the phone link dials the right number, the email link opens a message and the form sends to an inbox someone checks. It sounds basic, yet broken contact links are a common problem after theme updates.
Ethics and Confidentiality Cautions
Contact buttons are advertising, so state bar rules apply. Most states base their rules on the ABA Model Rules of Professional Conduct, including Rule 7.1, which prohibits false or misleading communications about a lawyer’s services. Button labels such as “Get Your Settlement Today” or “Guaranteed Results” can create problems. Check your own state’s rules, since some states add filing, disclaimer or labeling requirements.
Confidentiality deserves equal attention. Under rules modeled on ABA Model Rule 1.18, lawyers owe certain duties to prospective clients, and information a visitor sends through a form can raise conflict questions. For that reason, many firms add a short note near the form asking visitors not to submit confidential details until a conflict check is complete. Likewise, a brief statement that contacting the firm does not create an attorney client relationship sets clear expectations.
If you use a chatbot or an AI intake tool behind a contact button, review where the data goes and who can see it. Ask the vendor how messages are stored, whether they are used to train models and how long they are kept. Then confirm that the setup fits your duty of confidentiality.
Practical Starting Points for Solo Attorneys
While every firm should test, a few starting points make sense for most solo practices:
- Put a tappable phone number in the mobile header so it is visible on load.
- Consider a slim sticky call bar if your practice relies on urgent phone calls, such as criminal defense or personal injury.
- Add one in content call after the section that answers the most pressing visitor question.
- Keep a full contact block in the footer with phone, address and office hours.
- Measure each placement separately in GA4 and review the numbers monthly.
From there, let your own data guide changes. A placement that works for a busy injury firm may not fit a transactional practice where visitors prefer to send a message and wait for a reply.
Web Design FAQ Hub Entries
Where should a phone button appear on a law firm mobile site?
Many firms place a tappable phone number in a persistent header or sticky bar so it stays visible while visitors scroll. In content placement, such as a call link right after a section on deadlines, catches visitors at the moment they have a question. Both approaches can work, so measure taps on each and choose based on your own results. Also test with a screen reader and larger text settings to confirm the button is labeled clearly and easy to tap.
How long should a law firm practice area page be?
There is no required word count. A practice area page should be long enough to answer the questions a visitor arrives with, such as what the process looks like, what the firm handles and how to get in touch. A page about a simple traffic ticket may need far less detail than one about a complex business dispute. Focus on completeness and visitor intent, then trim anything that does not help the reader decide.
What should be included in an attorney biography?
A strong biography lists verifiable credentials, including law school, bar admissions and the courts where the attorney practices. It should describe practice experience accurately and avoid claims that could mislead under state bar advertising rules. A current, professional photograph helps visitors recognize who they will speak with. Finally, include clear contact details or a link to the contact page so readers know how to take the next step.
How can a law firm test a redesigned website before launch?
Start by submitting every form and confirming each message reaches the right inbox. Next, map old URLs to new ones and check that redirects work, then review every key page on real phones and tablets. Confirm that analytics and event tracking fire correctly and that the site is not blocked from search engine indexing by a leftover setting. Lastly, run an accessibility check covering contrast, keyboard navigation and tap target sizes.
The information here is general information about website design and marketing for law firms. It is not legal advice, and attorneys should review the advertising and professional conduct rules in each state where they are licensed.
