Interactive Campaign Case study

CrushQuiz.pl - wakacyjna kampania E.Wedel

FMCG / Marketing / Food brand

Technical implementation of the E.Wedel summer quiz campaign for the Brainbox agency. Pixel-perfect on every device, PWA, zero frameworks.

About the project

Summer 2026 campaign for E.Wedel run by the Brainbox agency. Our job: turn a complete set of creatives (view mockups from a deck, background art in two orientations, assets for 4 result variants) into a responsive quiz. The technical challenge: the recognizable Wedel heart had to sit exactly centered on any device, from a narrow iPhone with the Safari bar to a large desktop. Solution: aspect-ratio background system per view (16:9 desktop, 9:20 mobile, 7:5 result), overlays positioned in percentages relative to the background (not the viewport), blurred fill behind the canvas for unusual proportions. Full PWA setup with theme-color in the brand's exact navy, so the quiz saved to a phone's home screen behaves like a native app. Zero frameworks, ~35 KB HTML, instant load for a viral campaign.

“Wedel summer campaign, pixel-perfect on every screen.”

Challenge

The agency delivered a complete creative set (view mockups, background art in two orientations, assets per result variant). We had to turn static PPTs into an interactive quiz that renders pixel-perfect on iPhone Safari with the bar, iPhone fullscreen, Android, tablet, desktop 1920, narrow window, short window. The recognizable Wedel heart had to sit exactly centered on every device. Hard seasonal deadline, agency iterations had to move fast.

Solution

Custom scene/canvas system: each view (start, question, result) has its own aspect ratio, background art prepared per orientation. Overlays positioned in percentages RELATIVE TO THE BACKGROUND (not the viewport), CSS custom properties switch per breakpoint - a single change covers all devices. Blurred fill behind the canvas for unusual proportions, so the edges are never empty color bands. Full PWA (manifest, icons, theme-color in the brand's color). Asset versioning via a stamp in the URL, server cache rules: HTML no-cache (new campaign versions ship instantly), assets immutable for a year. Design iterations with the agency ran on concrete artifacts: variant views side by side, screenshots from real devices.

Results & Features

  • Pixel-perfect quiz on all seven tested devices and proportions
  • PWA-ready: manifest + theme-color in the brand's color, the quiz saved to an iPhone home screen behaves like a native app
  • ~35 KB HTML, zero frameworks, instant Time To Interactive for a viral campaign
  • Background art optimized per orientation (desktop 16:9 vs mobile 9:20), WebP + JPG hybrid
  • Server cache rules: HTML no-cache (new campaign versions ship instantly), assets immutable for a year
  • Design iterations with the agency ran on concrete artifacts: variant views side by side, screenshots from real devices

Technologies

Vanilla HTML/CSS/JSPWACSS custom propertiesAspect-ratio bg systemWebP + JPGGoogle Fonts preconnectcyberFolks hosting

Visual character: Wedel navy #153988 + orange #f3901c / #ffb43e (summery, sunny). Fonts Baloo 2 + Montserrat.