Building a Charge Page Template for a Criminal Defense Site

If you build or maintain a website for a criminal defense firm, most of your work will end up in one template: the charge page. A typical defense site has twenty to sixty of them, one for each offense the firm handles, sometimes split by county or by first and repeat offenses. They bring in most of the search traffic and most of the calls.

A good charge page template makes those pages easy for lawyers and editors to write, consistent for readers and fast on a phone. A weak one turns every new page into a custom design job. This post covers how to design the template from the content model up, with notes from the kinds of problems that show up on real law firm sites.

Start with a content model, not a layout

Before opening a design tool, define the fields a charge page needs. Lawyers think in terms of the charge, the possible penalties, the court process and common defenses. The CMS should reflect that so editors fill in structured fields rather than one large rich text box.

A starting model might look like this:

charge_page:
  charge_name: string        # "Domestic Battery"
  jurisdiction: string       # state or county the page covers
  statute_refs: list         # optional citations, plain text
  intro: richtext            # first 80-120 words, answers "what now?"
  penalties: richtext        # reviewed by a lawyer before publish
  process_steps: list        # arrest, arraignment, hearings
  defenses: richtext
  faq: list[question, answer]
  attorney: reference        # lawyer who handles these cases
  related_charges: list[reference]
  last_reviewed: date

The last_reviewed field matters more than it looks. Penalties and procedures change, and a visible review date helps both readers and the firm keep pages accurate.

Design the first screen for a phone

Most people reach a charge page from a phone, often in a stressful moment. The first screen should show the charge name as the heading, a short opening that speaks to the reader's situation and a clear way to call. Large hero images push all of that below the fold, so keep them small or leave them out.

A sticky call bar at the bottom of the viewport works well on mobile. Use a real tel: link, make the tap target at least 44 by 44 CSS pixels and test that the bar does not cover form fields or the cookie banner. Keep it out of the way on desktop, where a header button usually does the job.

Build sections that editors cannot break

Each field in the content model should map to a section component with fixed styling. Editors choose the content, not the fonts, colors or spacing. That keeps forty charge pages looking like one site rather than forty experiments.

Some practical rules:

• Render the FAQ from the structured list so questions use consistent heading levels.
• Generate the related charges block from references, not hand-typed links, so renamed pages do not leave broken links behind.
• Show the attorney card from the referenced bio, including photo and name, so updates in one place flow to every page.
• Limit rich text options to headings, lists, links and paragraphs.

Navigation matters as the number of charge pages grows. This guide on building a menu for a defense firm with many practice areas covers how to group charges so visitors and crawlers can find them.

Keep it fast

Charge pages compete in local search, and page experience is part of what Google considers. Watch the Core Web Vitals: Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift. On law firm sites, the usual causes of trouble are oversized hero images, chat widgets that load early and block the main thread, and fonts or embeds that shift the layout as they load.

Set explicit dimensions on images and embeds. Load third-party chat and tracking scripts after the main content. Self-host fonts or limit the number of weights. Test on a mid-range Android phone over a throttled connection rather than only on a fast laptop.

Leave room for legal review and compliance

Lawyers need to review penalty and process content before it goes live. Build a draft and review state into the CMS workflow, and record who approved each page. Attorney advertising rules vary by state, and some require disclaimers on certain pages. Add a disclaimer field or a site-wide component that can be switched on per page rather than hard-coding text.

Accessibility belongs in the template too. Use proper heading order, sufficient color contrast and form labels that screen readers can announce. A person in crisis may be using assistive technology, and an inaccessible contact form loses calls.

For more design ideas aimed at defense practices, see the collection of law firm website design guides.

Questions developers ask about charge page templates

Should each charge page have its own design?

No. A shared template with structured fields keeps the site consistent and makes maintenance far easier. Variation should come from the content.

How do I handle county-specific versions of the same charge?

Use the same template with a jurisdiction field and require unique local content, such as the courthouse and local process, so the pages are not near-duplicates.

Where should schema markup come from?

Generate it from the structured fields so it stays in sync with the visible content. Only mark up what is actually on the page.

SBD Marketing works only with criminal defense law firms, one firm per city. It helps them with website design, SEO for the charges they defend, visibility in AI search tools and SEO audits.