Turner Gear & Engineering Ltd

Turner Gear & Engineering Ltd has made bespoke precision gears in Bilston, in the West Midlands, since 1990, for customers across the UK and Europe. A buyer who gets in touch usually has one question: can you make this particular gear? Sometimes a second, because a machine is standing.

What I found

The site has two pages. I went through it on 14 November 2026 on a 1440 px laptop screen and on a phone:

• On the laptop, the logo starts 97 px to the left of the screen edge and the ISO 9001 mark ends 75 px past the right one, so both are cut off.
• Their strongest argument, the list of sizes (spur and helical to 58 in, grinding to 680 mm), sits on the third laptop screen.
• The opening hours appear twice and disagree: "7.00am – 4.00pm" in the footer, "7.30am – 4.30pm" on the contact page.
• On a phone, the first screen is the logo, contact details and ISO 9001 mark; the headline starts at the bottom edge.
• Enquiries go by phone, email or a general message form, with nowhere for a module or tooth count, so a buyer can't tell whether a gear is within their sizes without asking.

Decisions

Sizes straight under the headline

I kept their own headline, "Bespoke precision gears, made in the UK since 1990", because it says exactly what they do. Right below it comes what the current site leaves for the third screen: the kinds of gear with their largest diameter, then a strip of the five largest sizes. Anyone looking for a gear maker checks the size first.

A drawing, not a photograph

I had no photographs from their workshop, and a generic picture of gears would say nothing about them. So the visual language is the technical drawing, which a buyer and a gear shop already talk over. The tooth profiles are calculated involutes, not traced. The first-screen drawing draws itself once, then stays still. The colour is the navy from their logo, with warm neutrals.

Six kinds, one at a time

The kinds of gear come in turn: a changing drawing sheet on the left, the description, largest size and an enquiry link on the right. Below, the largest diameters are drawn to one scale. Hovering over a row picks out its circle: a 1473 mm spur gear is almost twice the largest wormwheel.

The enquiry sheet

The buyer picks the kind of gear and enters the module or DP and the number of teeth. The sheet works out the approximate outside diameter and checks it against their list; if the gear is larger, it says so and still offers to send. It also takes quantity, material, whether there is a drawing and whether it is a breakdown, which goes at the front of the email subject. Once everything is in, it says it is ready to send, and the button opens a filled-in email to sales@turnergear.co.uk.

The phone

On a phone each kind of gear has its drawing above the text, and while the buyer fills in the form, a bar at the bottom shows the estimated diameter, whether it is within their sizes and how many details are in.

How it's built

Static HTML, CSS and JavaScript, with no framework: the animation is CSS transitions and IntersectionObserver. A Python script generates the drawings from geometry as inline SVG. Hidden starting states are only set once JavaScript has loaded, so without it the whole page is visible, and reduced motion turns the animation off. The tool has no server: the browser does the arithmetic (marked as approximate in the code, d = m · z / cos β, da = d + 2m) and the enquiry leaves through mailto. The page is set to noindex, and the JSON-LD holds only details from their own website.

What I would do next

With the company I would first check which opening hours are right and whether the sizes on the list are current. A real project would add workshop photographs, a form that takes the drawing as an attachment and sends without the buyer's email program, and a redirect for the old contact page.