Mobile-First Municipal Websites

Designed from the phone in a resident's hand outward, because that is where most visits to a town website begin.

Most municipal websites were designed on a desktop and then squeezed down. The result works, technically: it fits the screen. But the navigation collapses into a menu nobody opens, the important links sit below a carousel, tables run off the edge, and the phone number is text rather than something you can tap. Meanwhile the majority of residents are arriving on a phone, often standing somewhere, trying to answer one question.

The size most residents arrive atThe same content, ordered for a thumb. Nothing is hidden on the small screen because it was hard to fit.

Illustration with invented content.

  • The small screen firstDesigned there, then given more room, rather than squeezed down
  • One handTap targets, type and forms sized for a thumb
  • Rural connectionsFast on an older phone with two bars

What residents get

A desktop layout compressed into a phone is how a municipal website ends up with a menu nobody can open and a table nobody can read. Starting at the phone forces the decisions about what matters, and the desktop version is better for it.

Most residents are standing up, holding something, and using one thumb. Controls are large enough to hit, text is large enough to read without zooming, and forms do not require precision tapping.

Not every resident has a new phone or a strong signal. Pages are light enough to arrive quickly on both, which matters more in practice than any feature on this page.

Hiding content on small screens assumes phone users want less. They want the same things, in a better order, which is a design problem rather than a reason to withhold.

What staff get

The person who knows the road is closed is standing near the road. Every publishing screen works on a phone, so the notice does not wait for somebody to reach a desk.

There is no separate mobile site to keep in step, which removes the failure where the phone version is six months behind and nobody noticed.

Upload the picture the camera produced. The site sends a version suited to the screen asking for it, so a large photo does not quietly become a slow page on a rural connection.

Attaching a file, checking a date, fixing a typo: all of it works on a phone. That is what makes "do it now" realistic rather than aspirational.

Not a smaller desktop site

  • There is no separate mobile site to fall out of date. One site adapts, which is why the content can never disagree with itself
  • Layouts start from the narrow case and gain structure as the screen widens, rather than starting wide and hiding things
  • Tap targets are sized for a thumb, including in the places municipal sites usually forget, like document lists and tables

Included in every TownFront site

This is part of the core product, not an add-on module. Every TownFront website includes it, and it is built to the same standard as the rest of the site: fast on an ordinary phone connection, navigable by keyboard, readable by a screen reader, and maintainable by your own staff.

See how this would work for your community. Request a conversation and we will walk through your current site and what changes.

Other capabilities

Where residents actually use your website

In the car outside the recycling centerChecking what the center takes and when it closes, on a phone, in a hurry, with one hand. That is the real test of a municipal website, and it is not the test most of them are designed for.
At the counterStaff pulling up the same page a resident is looking at.
On the busReading the agenda before tonight is too late.
At the kitchen tableFilling in a permit application after the children are in bed.

Related reading