Web Design for Life On Tap — Podcast and Hospitality, Cheshire

At a glance

What was the problem with launching a podcast with no website?

There was nowhere to send anyone. The show existed, the episodes were recorded, and the only thing Dave and Em could share was a link to a podcast platform with a placeholder square on it.

That creates three concrete problems. A new podcast with no home of its own looks like a hobby, which makes sponsorship a hard conversation. Nothing was searchable, so anyone looking for the show by name found the two pubs instead. And there was no way to collect anything — no enquiries, no guest suggestions, no sponsor interest.

They also had no brand. The podcast had a name and nothing else. No logo, no colours, no artwork that could sit on a platform tile, a poster or a pump clip.

How we designed a brand for a show that had no visual identity yet

We started with the room. Bar 20/20 has a neon sign on the wall, and the podcast is recorded underneath it, so neon was the obvious language — it already belonged to the business rather than being imported from a mood board.

We presented six logo routes as a single scrolling board, each one rendered as real neon rather than flat type:

Every route came in two to four colourways — pink, cyan, amber and warm white — plus a square crop for platform tiles. The pack shipped as 75 files: transparent PNGs for use over photography, matching versions mounted on a dark plate for anywhere transparency is not supported, and JPGs for print and messaging apps.

The artwork direction was generated using AI design tools, then rebuilt by us. Every cutout was masked by hand, decontaminated of the white fringe left behind, and re-cropped. The neon logo routes were drawn programmatically rather than painted, which meant we could re-render any route in any colourway at any size in seconds when the client changed their mind — and they did, twice.

• The Sign — type only inside a lit frame, closest to lifting their own sign off the wall
• Hollow Tube — the same layout with the letters drawn as glass tubing rather than filled
• With Dave & Em — the wordmark with a credit line ruled off beneath it
• The Pump — a beer pump handle that doubles as a microphone on a stand
• The Pint — a pint glass in a neon roundel, the warmest and most pub-first route
• The Oche — a dartboard sitting between LIFE and TAP, tying the show to Bar 20/20

Why we built it by hand rather than on WordPress

Because the site needed to do things a theme would have fought us on. The opening sequence, the episode archive and the stacked venue cards are all custom, and building them inside a page builder would have taken longer and performed worse.

The whole site is static HTML, CSS and JavaScript on Cloudflare Pages. No database, no plugins, no admin login to be brute-forced. What that bought:

All of the motion sits behind a reduced-motion check. Anyone who has that setting turned on gets a still, quiet site with no countdown at all.

• An animated opening sequence that plays on load — a full-screen 3-2-1 studio countdown, then an introduction card, then a broadcast test card that holds, breaks up, and cuts hard into the site as the hero switches on like an old television
• A hero built as a lit screen rather than a flat image, with scanlines, a blinking REC tag and a slow push-in on the artwork
• Section headings that strike on like neon tubes the first time they scroll into view, then settle into a slow hum
• Buttons that glow on independent timings, so they drift out of sync rather than pulsing together
• Stacked venue cards that scale and dim as the next one slides over them
• An interactive dartboard on the Bar 20/20 section that you can actually throw at, with a running score

How we built an episode archive the client can run themselves

We put every episode in a single list in the code, and made the page build itself from it. Twenty episodes are live at launch.

Each entry holds the title, date, running time, category, play count, show notes, timestamped chapters and listener comments. From that one list the page generates:

Adding an episode is copying the block above it and changing the words. Everything else updates on its own. That matters for an ongoing project: this is not a site that gets built and abandoned, it is one that grows every Friday.

• Full-text search across titles, descriptions and categories
• Filter chips for Pub life, Family, Business, Guests and Darts
• Sorting by newest, oldest, most played or longest
• Expandable rows showing show notes and chapters on the left, listener comments with star ratings on the right
• A sticky player that slides up from the bottom and survives filtering and scrolling
• Header statistics — episode count, total listening time, average rating — all calculated from the data so the page can never contradict itself

How we structured the site to be found

We built it as five separate pages, not a single-page app. This was a deliberate reversal: the staging version was one file with hash-based routing, which is fast and easy to preview, but hash routes are not indexed as separate pages. Once indexing became the goal, we rebuilt it as index, episodes, about, contact and sponsor — each with its own URL, title and description.

The technical work, page by page:

We did not build town landing pages, and we would not recommend them here. A podcast is not a service area business. The local signals that matter for this site are the venue details and schema on the contact page, and Runcorn and Cheshire named in the page titles and headings. If Dave and Em want the pubs themselves to rank for local searches across Runcorn, Widnes and Warrington, that is a separate piece of work on the venues, and we have told them so rather than selling them pages that would not earn their keep.

An honest note on rankings. We have made no ranking promises and we are not making any here. What we have done is build a site that is technically clean, correctly marked up, fast, and structured so search engines can understand what each page is for. Where it lands depends on competition, consistency and how often new episodes go up — none of which a launch build controls.

• Unique title tag and meta description on all five public pages, written to length rather than truncated by Google
• Exactly one H1 per page — the home page had none at all, which we found in the audit
• Canonical tags, Open Graph and Twitter card markup, and a purpose-built 1200×630 share image
• JSON-LD structured data: PodcastSeries on the home page, and two BarOrPub entries on the contact page for The Lockdown Pub & Kitchen and Bar 20/20
• sitemap.xml and robots.txt, with the private logo board and the thank-you page excluded from the index
• A full favicon set — .ico, 16px, 32px, 180px Apple touch icon, 192px and 512px Android icons and a maskable variant — plus a web manifest carrying the brand colours
• Google Analytics 4 across every page, with the thank-you page available as a conversion event

How do enquiries actually reach Dave and Em?

Straight to an inbox, with no admin panel to log into. Every form posts to Web3Forms and lands as an email at hello@lifeontappubpodcast.co.uk, which is set up, registered and tested.

There are two forms and one pop-up:

Every submission carries a hidden field naming which form it came from, so the email itself says whether it was a booking, a guest or a sponsor. All three send the visitor to a custom thank-you page that tells them Dave and Em will get back to them, then pushes them towards the episodes rather than dead-ending.

This suits the trade. Publicans are not sitting at a desk. They are behind a bar, and the phone in their pocket is the only interface that matters. An email they can answer between serving is worth more than a dashboard they will never open.

• The contact form, with a topic selector covering table bookings at The Lockdown, board bookings at Bar 20/20, function enquiries, podcast guests and sponsorship — one form, five different jobs
• A "Be a guest" pop-up reachable from every page, with a four-way picker: I have got a story, I am an act, I run a local business, or I am nominating someone
• Social follow buttons for Facebook, Instagram and Apple Podcasts, marked as coming soon until the channels are live, with an email fallback so interest is still captured in the meantime

What does the business have now?

Brand concepts to a live, indexable site in under three weeks, built around two people who were running two venues the whole time.

• A complete brand identity — six logo routes, four colourways, 75 production files in transparent PNG, dark-plate PNG and JPG
• A five-page website with an animated opening sequence, built to make a new show look like an established one
• An episode archive holding twenty episodes, with search, filtering, sorting, expandable show notes and a sticky player
• A sponsorship page with three packages, an audience section and an honest FAQ — the sales asset the show did not have
• Three routes into one inbox, each tagged so enquiries can be told apart at a glance
• Full technical SEO, structured data, a sitemap, a favicon set and analytics with conversion tracking available
• A site they can add episodes to themselves, every week, without calling us

What nearly went wrong, and how we caught it

The opening sequence shipped broken twice, and both times it failed silently rather than throwing a visible error.

The first fault: we had placed the overlay markup inside the home route container, which carries a CSS transform. A transform changes what a fixed-position element is positioned against, so the full-screen overlay was trapped inside its parent. Worse, anyone landing on a URL other than the home route never saw it at all.

The second fault was subtler. After moving the markup, it ended up below the script that controls it, so the script ran, found nothing, and exited quietly. On top of that, the countdown element shared an ID with the episode counter on the archive page, so the 3-2-1 was being written into the wrong element entirely.

None of this showed up in a syntax check, which is exactly why syntax checks are not enough. We caught it by loading the page in a headless browser and stepping through the sequence frame by frame, asserting at each stage that the overlay was visible, the countdown had changed, the card had appeared and the page had unlocked. That test is now the last thing we run before any build with motion in it goes out.

Thinking about a website for your podcast or your pub?

We build sites for small businesses that need to look established from day one. If you run a podcast, a pub, or both, we have done this exact job and we can talk you through what it involves.

Pricing https://whiteskidigital.com/pricing/

Web design in Runcorn https://whiteskidigital.com/web-design-runcorn/

Podcast website design https://whiteskidigital.com/podcast-website-design/

WhatsApp 07725 541812 — quickest way to get hold of us.

Frequently asked questions