Rich Content i landing page kampanijne dla marki AGD.
Dla marki Haier kodowałem opisy produktowe w formacie Rich Content oraz landing page kampanii sprzedażowych — serię HORIZON, wrześniową promocję cashback i promocję serii X9 przygotowaną dla RTV EURO AGD. Materiały powstawały w czystym HTML i CSS, publikowane w kanale sprzedaży, więc musiały działać poprawnie w cudzym systemie, na cudzym szablonie i przede wszystkim na telefonie.
DesktopMobile
01. Overview
Trzy kampanie dla jednej marki AGD: premierowa seria lodówek HORIZON, promocja cashback ze zwrotem do 5000 zł oraz zestawy pralka plus suszarka z serii X9. Każda w formie kodowanej strony osadzanej w kanale sprzedaży.
02. Challenge
Materiał nie trafia na własny serwer, tylko w kontener sprzedawcy — z jego szablonem, jego skryptem lazy-loadingu i jego ograniczeniami. Kod musi być odporny na to środowisko i przejść weryfikację za pierwszym razem, bo terminy kampanijne są sztywne.
03. Solution
Zbudowałem układy na własnym systemie tokenów CSS — kolory, odstępy, promienie i szerokości jako zmienne — dzięki czemu kolejne kampanie powstają szybciej i wyglądają spójnie. Obrazy podpiąłem pod konwencję lazy-loadingu kanału, a układ oparłem na trzech breakpointach.
04. Highlights
Tokeny CSS zamiast wartości wpisywanych na sztywno, pełne opisy alternatywne obrazów, znaczniki abbr rozwijające skróty techniczne, twarde spacje w polskiej typografii, własny font zmienny w WebP i woff2 oraz siatka do 1370 px.
05. Live preview
Podgląd strony w dużym formacie
Case study pokazuje materiały w ramce przeglądarki oraz kadry z trzech kampanii dla marki Haier, publikowanych w kanale sprzedaży RTV EURO AGD.
Wersja online niedostępna publicznie
Haier
Powiększ ↗
Powiększ ↗Powiększ ↗Powiększ ↗
06. Project structure
Zakres
Kodowanie HTML i CSS
Rich Content opisów produktowych
Landing page kampanijne
System tokenów CSS
Wersje mobilne
Zgodność z kanałem sprzedaży
Detale
Trzy kampanie Haier
Tokeny CSS
Lazy-load kanału
Pełne opisy alt
Efekt
Marka dostała komplet materiałów gotowych do publikacji: opisy produktowe i landing page, które wyglądają jak spójna komunikacja marki, a nie surowy tekst w sklepie. Praca na tokenach i szablonach sprawiła, że kolejne kampanie powstawały szybciej niż pierwsza.
07. Result
Marka dostała komplet materiałów gotowych do publikacji: opisy produktowe i landing page, które wyglądają jak spójna komunikacja marki, a nie surowy tekst w sklepie. Praca na tokenach i szablonach sprawiła, że kolejne kampanie powstawały szybciej niż pierwsza.
Powiększ ↗
Powiększ ↗
Powiększ ↗
Powiększ ↗