Technology · Frontend

Interfaces judged by what they cost on a bad connection

Interface choices are argued as preferences and later experienced as load times, tap targets and support calls. We build for the conditions your teams actually work in: regional connectivity, ageing devices, glare and gloves.

What we optimise for

Three things decide interface quality on this kind of work, and none of them is fashion. Performance under the network conditions staff really have, accessibility for people using keyboard or screen reader, and a component vocabulary consistent enough that a new screen can be assembled without inventing new patterns. Where a client must meet accessibility obligations, we build to WCAG 2.1 AA as the baseline. No single project uses everything listed here.

Interface frameworks and language

5 technologies
React
Next.js
Vue
TypeScript
Tailwind CSS

React

Default for interfaces with real application behaviour: local state, optimistic writes, complex forms. Its ecosystem is unmatched, which is also the risk, since several libraries solve one problem and leave maintainers guessing which was intended.

Next.js

Used where routing, server rendering and caching belong together, especially portals needing fast first paint. The constraint is hosting: it expects a platform supporting its runtime, which narrows deployment choices later.

Vue

Chosen where a code base already uses it or a small team wants less ceremony. The trade-off is a narrower local hiring pool than React, and we raise that before committing anyone to the decision.

TypeScript

Mandatory beyond prototypes. It catches interface mismatches before a browser sees them and keeps refactoring feasible years later. The cost is configuration discipline and occasional type work that tempts people to disable checks.

Tailwind CSS

Default styling for component interfaces, keeping decisions beside the markup and preventing a stylesheet nobody dares edit. It produces verbose templates and suits teams comfortable with utility classes.

Mobile delivery

3 technologies
Flutter
React Native
Progressive web app

Flutter

One code base across Android and iOS where crews need consistent offline behaviour or device interaction. Rendering is quick and widgets consistent, at the cost of app size and another language to maintain.

React Native

Preferred when a team already works in React and the application mostly consumes existing interfaces. Hardware modules still need native knowledge, which surprises clients expecting one skill set to cover everything.

Progressive web app

Recommended more often than clients expect. Job capture and approvals used on company tablets work well in a browser, removing two app stores from the delivery path. Device hardware access is where it stops.

Build tooling, verification and handoff

4 technologies
Vite
Storybook
Playwright
Figma handoff

Vite

Build tooling chosen for fast cold starts and predictable output. A development server should start in seconds, because slow feedback quietly reduces how often work is verified before review.

Storybook

Component catalogues show what already exists and let us review empty, error and loading states in isolation. Clients inherit fewer duplicated controls, and design review happens against real components.

Playwright

End-to-end tests run against a review environment on every release candidate, covering login, create, approve and export. Slower and more brittle than unit tests, so they cover critical paths rather than everything.

Figma handoff

Handoff works when tokens and spacing are agreed before build starts. Where states are undefined we produce them and record decisions in the repository, so later changes stay consistent.

Choose it when, avoid it when

The most expensive interface mistakes are architectural, not visual, and they surface twelve months later as maintenance cost.

Single-page application

Choose it when users work in the interface continuously: dashboards, scheduling boards, complex multi-step entry. Avoid it for read-mostly content, anything needing search visibility, and sites used on thin regional connectivity where every kilobyte matters.

Server-rendered pages

Choose them for internal administration, forms-heavy processes and anything maintained for years by people who are not front-end specialists. Avoid them where interactions need offline queuing or rich local state, which then gets rebuilt badly in script.

Native or cross-platform mobile

Choose it for work performed where no network exists, or where cameras, barcode scanners, bluetooth instruments and background location matter. Avoid it when staff already carry company tablets and the work is done within a browser session.

No framework at all

Choose plain templating and progressive enhancement for small utilities, reports and screens your own staff may need to adjust. Avoid it for interfaces that must hold substantial state, since hand-rolled state management becomes the framework nobody documented.

Where we draw the line

These are refusals we have made more than once, offered here because it saves everyone time later.

Bespoke native apps without a hardware reason

We do not maintain separate Android and iOS applications unless offline capture or device hardware genuinely demands it. Two store accounts, review cycles and a widening device matrix are permanent costs, and most of our clients are better served by one well-built web application.

Heavyweight frameworks for internal tools

An administration screen listing records with a filter does not need a full client-side framework. A heavier stack means a build pipeline, a dependency surface and specialists to maintain it, for an interface used by six people.

Rebuilds justified only by a redesign

We decline projects whose real objective is a new look and whose stated scope is a rewrite. Reskinning an existing screen set delivers most of the perceived benefit for a fraction of the risk, and we will say so even when the rebuild would bill higher.

Devices we have not tested on

We do not claim support for hardware we have not held. Before go-live we test on the actual models in service, including the oldest, because an interface that fails on a three-year-old tablet fails during a shift rather than during a demo.

Practical notes from production

Lessons that arrived as support tickets before becoming part of how we build.

01

Bundle budgets fail slowly

A charting library added for one screen can add hundreds of kilobytes without anyone noticing. The pipeline fails the build when the compressed bundle exceeds an agreed figure, which forces a conversation while it is still cheap to have.

02

Field conditions are the test environment

Interfaces used outdoors need generous targets, high contrast and local queuing for work captured out of coverage. We test on the oldest device in service under simulated poor signal rather than on a developer laptop over office wifi.

03

Dialogues trap keyboards

Modal components routinely break tab order and screen reader flow. Every overlay gets focus management, an escape route and a labelled purpose, verified with a screen reader rather than assumed from the markup.

04

Stale assets cause phantom defects

After deployment, browsers holding cached copies of the previous build produce errors nobody can reproduce. Assets are served with hashed filenames and explicit caching headers so a release always reaches its users intact.

05

Third-party scripts carry real cost

Analytics and chat widgets add latency and quietly transmit visitor data. Each addition is reviewed for its effect on load time and privacy position before inclusion, and many requests are declined for that reason alone.

Assess the interface your team uses daily

We review existing front ends for performance, accessibility and maintenance cost before recommending changes.

Get a Quote