Building a Sticky Mobile Call Bar for a Law Firm Website

Most visitors to a criminal defense website arrive on a phone, and many of them want to call rather than read. A sticky call bar, a strip pinned to the bottom of the screen with a tap-to-call button, is one of the most common patterns on law firm sites for that reason. It is also one of the most commonly broken. Bars can cover footer links, collide with chat widgets, sit under the iPhone home indicator, or hide the last line of every page. This post walks through building one that behaves well: correct on notched phones, accessible, easy to measure, and out of the way of the content.

Purpose of a Sticky Call Bar

A sticky call bar enhances the mobile user experience by providing a persistent, easily accessible call-to-action for immediate contact. This is especially important for law firms, where potential clients may be in urgent situations.

Design Considerations

Markup

Keep the bar simple. Include one primary action (the phone call) and, optionally, a secondary action (like a link to the contact form). Two buttons fit comfortably on small screens, while three usually do not. Use a real tel: link with the number in international format, and display the human-readable number for clarity.

Accessibility

Wrap the bar in a landmark element with a label so assistive technology can identify it. This is important for users who rely on screen readers.

Safe Area Handling

On phones with a home indicator, content at the very bottom of the viewport can sit underneath it. Use CSS environment variables to address this issue. Make sure to include the viewport meta tag with viewport-fit=cover to ensure the bar is not obscured.

.call-bar {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #0c1a33;
  z-index: 50;
}

.call-bar a {
  flex: 1;
  min-height: 48px;
  display: grid;
  place-items: center;
}

body.has-call-bar {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .call-bar {
    display: none;
  }
  body.has-call-bar {
    padding-bottom: 0;
  }
}

Content Padding

Adjust the body padding to match the bar's height. This prevents the bar from covering important content, such as footers with disclaimers and addresses. Test with large text settings since the bar may grow when users increase the font size.

Tap Targets

Ensure tap targets meet WCAG 2.2 guidelines, which set a minimum size of 24 by 24 CSS pixels for most targets. For the main call button, aim for a size of around 44 to 48 pixels tall. This is especially important since users may be stressed or using one hand when tapping.

Collision Avoidance

Law firm sites often have chat widgets, cookie banners, and other fixed elements that can overlap with the call bar. Establish a consistent stacking order to avoid confusion. You might choose to move the chat launcher above the bar or integrate it into the call bar as a secondary action.

Conditional Display

Consider whether the call bar should be displayed on every page. For instance, on a long charge page, the bar keeps the number in reach. However, on a contact page, it may add unnecessary clutter. Some sites only reveal the bar after the visitor scrolls past the first screen, but this should be tested to ensure it does not hinder immediate access to the call.

Content Matters

The words on the button can influence whether people tap it. Labels like "Call now" next to the actual number are clearer than vague promises.

Measuring Effectiveness

Track taps on the call link as an event in your analytics tool. Attach the listener to the link without preventing the default action so that the dialer still opens if the analytics script is slow or blocked. Record the page the tap came from, as this is valuable data for marketing teams.

Testing

Emulators can catch layout problems, but they miss important details. Test on real devices, including one recent iPhone and one Android phone, both held upright and sideways. Also, check how the bar behaves when the keyboard opens.

Frequently Asked Questions

Does a sticky call bar hurt SEO? — A small bar that does not cover the main content is generally fine. Avoid anything that hides most of the screen on page load, as this can create a poor user experience.

Should the bar show on desktop? — Usually not. Desktop visitors rarely place calls from the browser, so a header with the phone number is more effective.

Can the bar include a text message option? — Yes, using an sms: link, as long as the firm monitors that number and responds quickly.

Conclusion

Creating a sticky mobile call bar is a valuable addition to a law firm's website. It enhances user experience by making it easy for potential clients to reach out quickly.

Merits

• Provides immediate access to contact information.
• Improves user engagement on mobile devices.
• Enhances accessibility for all users.

Demerits

• May clutter the interface if not designed carefully.
• Could interfere with other fixed elements on the page.

Caution

This article is educational. Any placeholder values must be replaced with actual data, and readers should verify claims against the original source before relying on them.

Frequently asked questions

• What is a sticky call bar? — A sticky call bar is a fixed element at the bottom of a mobile screen that allows users to easily tap to call.
• How can I make a sticky call bar accessible? — Use clear labels, proper markup, and ensure it does not cover important content.
• What design considerations should I keep in mind? — Focus on simplicity, tap target size, and avoiding collisions with other elements.
• Can I track calls from the sticky bar? — Yes, by using analytics tools to measure taps on the call link.
• Is it necessary to show the call bar on every page? — Not necessarily; consider the context of each page.
• What happens if the call bar overlaps with other elements? — Establish a stacking order to prevent confusion and ensure usability.

Tags

#webdev #css #mobile #lawfirm #userexperience #accessibility #stickybar #calltoaction