RankRentAI Classroom
Lessons (5)

0/5 complete

  1. Why every site you build must be genuinely different (the uniqueness gate)
  2. Shipped isn't "looks right" — the visual check that caught 4 wrong logos
  3. When every "Save" button in your dashboard fails at once
  4. When the truth audit FAILs your site — and how to fix it without gutting the local flavour
  5. Building a UX rulebook for the app from expert YouTube channels
← All modules

Shipped isn't "looks right" — the visual check that caught 4 wrong logos

  • .superpowers/sdd/shots/live2/ montages
  • 5 redeployed sites
  • 4 replaced logo SVGs

What you're doing and why

When you publish a site, the deploy tool tells you the files uploaded fine (HTTP 200, hashes match). That proves the files ARRIVED. It does not prove the page LOOKS right. After every publish — every site, no exceptions — you screenshot the top and bottom of each live page on a phone-width and a desktop-width screen and actually look at them. This lesson exists because that check caught a bug that every automated check missed: 4 of our 5 live sites were showing the WRONG COMPANY'S LOGO.

The exact steps

  1. Publish the site (or batch) like normal.
  2. For EVERY site you shipped (not a sample — all of them), take a screenshot of the live URL at desktop width (1280px) and mobile width (390px). Any headless browser works; we use Chrome's --headless=new --screenshot mode.
  3. Look at the header and the footer of each shot. Check: the logo renders and isn't clipped or misspelled, the business name wraps normally, the call button isn't overlapping anything, and the compliance/disclaimer line in the footer is there.
  4. If one site is wrong, assume they ALL are — a visual defect on one site usually means the template is broken. Fix the template, re-ship the whole batch.

What it looked like for us

  • We retrofitted 5 live sites with an upgraded template. Every automated check passed: pages 200, key files live, footer disclaimers present in the HTML.
  • The desktop screenshots told a different story: 4 of the 5 headers showed a logo for a company that doesn't exist on that site — a duplicated SVG that had been quietly copied between sites weeks earlier and only became visible after the rebuild.
  • Fix: each site got an SVG wrapper embedding its own correct logo PNG, all 4 sites redeployed, re-screenshotted, verified. The one site whose logo was genuinely its own was left untouched.
  • Receipts: before/after montages in .superpowers/sdd/shots/live2/ (desktop + mobile, headers
    • footers, all 5 sites).

Gotchas

  • The bug was invisible to every non-visual check. HTTP 200s, file hashes, even HTML content checks all said "fine" — the wrong logo was a perfectly valid file. Only eyeballs caught it.
  • Duplicate assets hide until a rebuild. The wrong SVGs shipped for a week unnoticed because the old pages used a different (PNG) header. The template change exposed them. Any template change = full visual re-check of the fleet.
  • Below-the-fold images can screenshot blank (lazy loading). Scroll them into view first, or don't lazy-load small brand images like the footer logo — a blank screenshot will send you chasing a bug that doesn't exist.
  • Check all N, not a sample. The one good logo out of five would have "passed" a sample check.
Review your sites' screenshots →