BykonzYard · Full teardown · 11 Sep 2026
Nine pages,
measured.
Every page captured at full height, read top to bottom, then measured — type scale, spacing rhythm, contrast ratios, touch targets, page weight, and what a search engine actually receives. The visual design is strong. Almost everything below is a craft or plumbing problem sitting underneath it.
10
Characters of text Google can read
6.2MB
Homepage weight, 5.9MB of it images
5 / 6
Ticket options that cannot be bought
19
Distinct font sizes on one page
21
WCAG contrast failures
The single most expensive thing on this page. The HTML a search engine
receives is 1,468 bytes containing ten characters of readable text. No
<h1>, no meta description, no og:title. The headline you see in the
hero is not text — it is an SVG image of text. Google cannot read this site at
all.
Second: five of the six ticket options cannot be bought, including all three tables, which the site marks "unavailable" while the ticketing system has them live and in stock right now.
Third: three pages are genuinely excellent — Earn, Contact and Gallery are fully built with zero placeholders between them. All three are hidden behind the hamburger.
Measured, not guessed
The three that are quietly costing the most
These are not visible by looking. They came out of measuring the page and reading what the browser and a crawler actually receive.
A. The headline is a picture, and the site has no readable text
The hero <h1> contains no text. It holds an SVG image with a
colour-matrix filter — a picture of the words "DAY & CLUB DJ". The
element reports a font-size of 132px and an empty text content.
Because the site is a client-rendered SPA with no prerendering, the HTML served to a crawler is 1,468 bytes with 10 characters of body text. No h1, no meta description, no og:title.
Someone who hears about the night and searches "BykonzYard tickets" is the cheapest customer you will ever get — they are already looking for you. Right now there is nothing for a search engine to match them against. Every other problem on this page costs conversion on visitors you already have. This one stops them arriving.
It also explains the hero legibility problem: because the headline is an image rather than text, it cannot take a text-shadow or a scrim, which is exactly why it disappears into the photograph behind it.
- Make the headline real text with a web font. It can still be huge and styled; it just needs to be readable by a machine.
- Add a meta description and og:title — ten minutes of work.
- Prerender the routes at build time. The site is already built with Vite; static generation for nine pages is a config change, not a rebuild.
B. Five of six ticket options cannot be bought
One "Select ticket". Two "Locked". Three "Table sales unavailable".
A correction to my earlier note: I previously said the prices were missing from these cards. That was wrong — I had cropped the screenshot mid-card and only seen the top half. The prices are there, large and gold: £5, £10, £15, £120, £180, £240. The card design is good.
The real problem is worse. Of six purchasable options, one works. Phase 1 and Phase 2 read "Locked — opens when Early Bird sells out". All three tables read "Table sales unavailable".
But the site's own API disagrees with its own interface. /api/tickets/status
returns soldOut: false for all three tables, and the ticketing system
has them live with stock: 4, 4 and 2. The website is refusing sales the till will
happily take — and tables are the highest-value items on the page, at
£120 to £240 each.
Progressive disclosure is right for ticket phases — showing £15 next to an available £5 would be daft. But locking is only honest when it reflects reality. Here the locks are hardcoded rather than driven by stock, so the interface is lying about its own inventory in the direction that costs money.
Turn table sales on — they are in stock and buyable today. Drive the phase locks from the real remaining count (Early Bird is capped at 30) rather than a hardcoded flag, so tiers open by themselves.
C. 6.2MB homepage, for an audience on phones
The mobile hero mid-load: logo, genres, buttons — and a black void where the photograph should be.
Measured from the browser's own resource timing: 6,162KB total, 5,959KB of it images across 20 files. The worst offenders are in the hero:
| File | Size | Note |
|---|---|---|
| byk-5.jpg | 1,277KB | Hero, preloaded |
| byk-3.png | 1,085KB | PNG used for a photograph |
| bykonzyard-house-reference.png | 858KB | PNG |
| byk-4.jpg | 815KB | Hero, preloaded |
The audience for a club night is almost entirely on phones, often on mobile data, often deciding in the moment. On typical UK 4G that hero is roughly eight to twelve seconds before it paints. The screenshot above is not a bug — it is what the page looks like while you wait.
Two of those files are PNGs carrying photographs. PNG is lossless and meant for flat graphics; a photo as PNG is routinely five to ten times larger than the same image as WebP at indistinguishable quality.
Convert every photograph to WebP at around 1600px wide — this alone should
take the page from ~6.2MB to well under 1MB. Serve responsive sizes so a 390px
phone is not downloading a 1440px image. The gallery already proves the pipeline
exists: manchester-flyer.webp is 319KB doing the same job.
The structural problem
The same blocks, over and over
Checked programmatically across all eight content pages. This is what the site is actually made of.
| Block | Home | About | Events | Music | Gallery | Earn | Contact | Press | Times |
|---|---|---|---|---|---|---|---|---|---|
| Email signup | ×2 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | 9 times |
| "In partnership with" strip | ✓ | — | ✓ | ✓ | — | — | — | ✓ | 4 times |
| Day Party / Club Night pair | ✓ | ✓ | — | — | ✓ | — | — | — | 3 times |
| Booking pitch | ✓ | ✓ | — | — | — | — | ✓ | — | 3 times |
| Artist carousel (3 empty portraits) | ✓ | — | ✓ | — | — | — | — | — | 2 times |
The email form appears twice inside 400 pixels
"NEVER MISS A YARD DATE" with an email field — then the identical field again in the footer directly below it. Same label, same button.
Asking twice in one screen does not double the signups, it signals that nobody looked at the page as a whole. It is the clearest symptom of the wider issue: blocks were added per-section without anyone reading the assembled page.
Keep the footer one. Delete the standalone section — that is roughly 350px of homepage gone for free.
The empty artist carousel is on two pages
Events page: "2026 LINE-UP" with the same three "ARTIST PORTRAIT COMING SOON" boxes as the homepage, followed by the same partner strip.
DJ Bykonz, DJ Pelz and Mr Woza appear on both the homepage ("Behind the sound") and Events ("2026 line-up") — identical placeholder boxes, both times.
Repeating a block is only worth it when the block earns its place. Repeating an empty block doubles the evidence that the site is unfinished. And Bykonz appearing as an unphotographed "coming soon" on his own website is the weakest possible version of that.
One artist section, on Events only, and use real photos — there are 167 in the photo library and Bykonz is in plenty of them.
Page by page
What each page is actually worth
Read in full, at desktop width. Verdicts are keep, merge or cut.
The recommendation
Nine pages become five
Now — 9 pages
Home · About · Events · Music · Gallery · Press · Earn · Contact · Terms
43,000px of content, much of it repeated, with 75 empty slots.
Proposed — 5 pages
- Home — hero, the real next event with a price, the story, bookings, gallery teaser. About folded in.
- Events — next date at the top with prices visible, then the past-events archive.
- Gallery — untouched.
- Earn — untouched, but moved to second in the nav.
- Contact — untouched.
Terms stays in the footer. Music and Press come back when there is audio and more than one partner.
Why merge rather than fill
The instinct is to fill the empty slots. But the content does not exist yet, and a visitor cannot tell the difference between "not built" and "not happening" — both read as dead. A smaller site where every page is finished beats a larger one where a third of it is waiting.
It also fixes the nav problem for free: five items fit across a desktop header, so the hamburger goes and Earn, Gallery and Contact stop being invisible.
Still true from the first pass
The three that cost money
1. "Get Tickets" leads to "coming soon"
The sticky header CTA follows you down every page and lands on a card reading "COMING SOON — the next date is being locked in." Meanwhile the ticketing system has a live 13 December event with six products on sale. The site is hiding a sellable event.
Wire the homepage event card to the live event: real date, "From £5", and a button straight to checkout.
3. The logo covers the headline
The headline is "DAY & CLUB DJ". With the logo on top of it, a visitor reads "DA—DJ".
Reading the full page also shows the logo appears three times on one screen
of scrolling — hero overlay, sticky header, and again over the "Press play"
video. The lyric caption underneath (>> Everybody say get in the mood)
looks like a debug subtitle.
The sticky header already carries the logo. Remove the hero overlay entirely and let the headline own the space.
Design system
The craft underneath
Measured from the rendered page. None of this is visible as a single obvious mistake — it is the accumulated drift that makes a good-looking site feel slightly homemade rather than slightly expensive.
Nineteen font sizes on one page
Counted from computed styles on every text element:
10 · 11 · 12 · 13 · 13.33 · 14 · 16 · 17 · 21 · 24 · 26 · 30 · 36 · 38 · 48 · 52 · 58 · 64 · 80
A designed type scale is normally six to eight steps. Nineteen means sizes were chosen per component rather than taken from a system — note 13 and 13.33 both in use, and 36/38 and 48/52 sitting side by side as near-duplicates.
Readers do not consciously notice a type scale, but they feel the absence of one. When 36px and 38px both appear, neither reads as a distinct level, so the hierarchy stops doing its job and everything flattens into "big" and "small".
Collapse to about seven steps — say 12, 14, 16, 20, 28, 40, 64 — and map every element onto one. Purely find-and-replace work, no redesign.
No spacing grid
Vertical padding values in use: 18, 22, 24, 26, 36, 40, 46, 48, 52, 64, 68, 84.
Margins: 22, 24, 32, 34, 40, 44, 46, 48.
There is no base unit. A 4px or 8px grid would give 16/24/32/40/48/64 — instead there are pairs like 46 and 48, and 22 and 24, doing the same job at slightly different values.
Consistent spacing is most of what separates "designed" from "assembled". The eye reads rhythm even when it cannot name it — when gaps are 46px in one section and 48px in the next, sections stop feeling like siblings.
Snap everything to an 8px scale. Nothing will move more than 4px, and the whole page will feel tighter for it.
21 contrast failures, some effectively invisible
Computed against actual backgrounds, using WCAG AA thresholds:
| Element | Size | Ratio | Needs |
|---|---|---|---|
| Arrow glyphs in the menu (↗) | 26px | 1.24:1 | 3:1 |
| "Explore the Yard" | 11px | 2.27:1 | 4.5:1 |
| Menu numerals 01–08 | 12px | 4.25:1 | 4.5:1 |
1.24:1 is essentially no contrast at all — that glyph is invisible to most people in most lighting.
This is not really an accessibility checkbox, it is a nightlife-specific problem. People check event details on a phone outdoors, at a bus stop, at night, half drunk, on a cracked screen. Low-contrast 11px type is unreadable in exactly the conditions your audience is in when they use this.
Lift the muted text one or two steps toward white. The design does not lose anything — the hierarchy is already carried by size and weight.
26 of 54 tap targets are under 44px
Against the standard 44×44px minimum. The worst:
| Target | Actual size |
|---|---|
| Carousel dots (×4) | 28 × 3 px |
| Newsletter consent checkbox | 14 × 14 px |
| Mute button on hero | 32 × 32 px |
| Footer nav links | 40 × 18 px |
A three-pixel-tall hit area is not a control, it is a decoration that happens to be clickable.
The consent checkbox is the one that costs money: it is required to subscribe, it is 14px square, and if someone misses it the form fails. That is a signup lost at the last step, on a site whose main fallback CTA is "join the list".
Keep the dots looking like 3px lines but give them 44px of invisible padding. Make the checkbox 24px with the whole label clickable.
The nav is the one thing without a focus ring
30 of 40 interactive elements show a visible focus state — better than most sites. The 10 that do not are the main menu items and the close button.
Focus states were clearly considered, since most of the site has them. But the gap landed on the primary navigation, which is the element a keyboard user hits first and needs most.
One CSS rule. The pattern already exists elsewhere on the site — apply it to the menu.
Three logos in one screen of scrolling
Logo over the headline, logo in the sticky header, and later the same logo again over the "Press play" video.
The centred badge sits directly on top of the headline, so the visible text reads "DA—DJ". The sticky header already carries the logo, so it is duplicated on screen at the same moment.
Underneath, a caption reads >> Everybody say get in the mood, lose
control. in an untreated grey box — it looks like a debug subtitle rather
than a designed element.
One focal point per screen. The hero currently asks the eye to process a logo, a headline, a genre list, two buttons and a caption at once, so nothing leads. And the element being covered is the one that answers "what is this?" — the single job a hero has.
Drop the hero logo overlay entirely; the header has it. Let the headline own the centre, as real text with a scrim behind it so it survives the photograph.
Smaller
Worth fixing, not urgent
| What | Where | Why |
|---|---|---|
| /about is blank | Any wrong URL | Real path is /bykonz-about. The obvious guess returns HTTP 200 with a
completely empty page — no 404, no redirect. Any stale or mistyped link
dies silently. It cost me twenty minutes believing the site was down. |
| Prefixed URLs | All pages | /bykonz-events instead of /events — longer, harder
to read on a flyer, repeats a word already in the domain. |
| Three CTAs, no primary | Home hero | "GET TICKETS" gold, "SEE WHAT'S ON" purple, plus a third GET TICKETS in the header — all at once, equal weight. |
| Unlabelled floating icon | Every page | A star in a circle, bottom right, no tooltip. Nobody clicks what they cannot identify. |
| Stats undersell | About | "10+ shows played · 2 cities toured · 2 yard seasons" in large type. Either grow the numbers or drop the block — stating them loudly draws attention to how small they are. |
| Monospace body copy | All pages | Suits the small labels and gives real character, but slows reading in the longer paragraphs on About and Earn. |
Order of work
Ranked by cost, not by effort
Each row states what it actually buys. The top three are worth more than everything below them combined.
| Do | Buys you | Size | |
|---|---|---|---|
| 1 | Turn table sales on; drive phase locks from real stock | Five of six ticket options currently cannot be bought, including the £120–£240 tables. Stock exists. This is money on the floor today. | hours |
| 2 | Point the homepage event card at the real 13 Dec event, with price | The main CTA currently lands on "coming soon" while a live event sits behind it. | hours |
| 3 | Real text h1, meta description, prerender the routes | Google currently receives 10 characters. This is the difference between being findable and not existing in search. | 1 day |
| 4 | Convert photos to WebP, add responsive sizes | 6.2MB → under 1MB. Your audience is on phones on mobile data. | hours |
| 5 | Delete Press and Music; remove the duplicate email form and second artist carousel | ~7,000px of dead page gone, 75 "coming soon" labels mostly gone with it. | hours |
| 6 | Fold About into Home; drop the hero logo overlay | Resolves the duplicated Day Party / Club Night pair and unblocks the headline. | 1 day |
| 7 | Contrast lift, 44px tap targets, focus ring on the menu | Usable outdoors at night on a phone — which is when it is actually used. | hours |
| 8 | Collapse to a 7-step type scale and an 8px spacing grid | The polish pass. Nothing moves more than a few pixels; the whole thing tightens. | 1 day |
| 9 | Five-item horizontal nav, no hamburger | Earn, Gallery and Contact — the three finished pages — become visible. | hours |
Worth saying plainly. The visual design is good and does not need redoing. The type, colour, photography and motion are strong, and Gallery, Earn and Contact prove the team finishes properly when the content exists.
What this page is really describing is a gap between how the site looks and how it works. It looks like a finished brand. Underneath: search engines cannot read it, five of six ticket options refuse to sell, it weighs 6.2MB for an audience on phones, and the design system drifted — nineteen font sizes, no spacing unit, twenty-one contrast failures.
None of that is visible by looking, which is exactly why it survived this long. All of it is measurable, and most of it is a day's work.