Wstęp: czym jest rich content i po co o nim piszemy?
Zanim zanurzymy się w kod, grafiki i zapachy, warto najpierw przypomnieć, czym właściwie jest rich content – i dlaczego sklepy internetowe (zwłaszcza z branży beauty) tak bardzo go potrzebują.
To nic innego jak rozszerzona treść produktowa – czyli wszystko to, co wykracza poza surowy układ „zdjęcie, tytuł, cena, koszyk”.
Mówimy tu o pełnych sekcjach treści: grafikach, storytellingu, infografikach, tabelach, animacjach czy mikrointerakcjach.
Więcej o tym, czym jest rich content i jak go projektujemy, przeczytasz w naszym artykule: Rich content w e-commerce. Jak go tworzymy i dlaczego to ma sens?
Co było do zrobienia?
Klient dostarczył nam gotowe projekty graficzne kilkudziesięciu stron rich content – a naszą rolą było ich zakodowanie i przygotowanie do wgrania na największą drogerię kosmetyczną w Polsce (tak, tę, o której teraz pomyślałeś).
Zakres? Czyste kodowanie. Zero kreatywnego wymądrzania się, maksimum technicznej precyzji.
Każdy projekt musiał być:
- lekki,
- zoptymalizowany pod Core Web Vitals,
- zgodny z WCAG,
- responsywny,
- w 100% kompatybilny z restrykcyjnym CMS-em sklepu.
Wersja desktop – czyli jak to wyglądało na dużym ekranie
Zastosowaliśmy klasyczny podział layoutu na sekcje: wizualne intro z dużym zdjęciem lub grafiką, opisy nut zapachowych, storytelling, porównania, wskazówki użytkowania czy storytelling brandu.
Wszystko to kodowane w ramach precyzyjnie nazwanych klas (unikamy konfliktów stylów z resztą sklepu), przy zachowaniu czystości struktury HTML i czytelnej hierarchii nagłówków.
Wersja mobilna była równie ważna – zresztą to właśnie ona najczęściej decyduje o tym, czy użytkownik zostanie dłużej na stronie.
Wdrożyliśmy:
- responsywną siatkę opartą na klasach sklepowych,
- skalowanie grafik i tekstu pod konkretne breakpoints,
- priorytetową kolejność informacji,
- czytelność sekcji takich jak: opisy składników, storytelling, mikroinfografiki.
To nie była nasza pierwsza przygoda z rich contentem – ale z pewnością jedna z większych.
Zrealizowaliśmy kilkadziesiąt wdrożeń, każde inne, każde z unikalnym layoutem. Wspólny mianownik? Perfekcyjnie działający kod, zgodny z e-commerce’owym środowiskiem klienta i gotowy do wrzucenia bez krzyków z działu IT.
Jeśli chcesz, by Twój produkt opowiadał historię (a nie tylko wisiał w sklepie), napisz do nas. Albo zajrzyj jeszcze raz do wpisu:
Rich content w e-commerce i zobacz, jak do tego podchodzimy w Fold Now Studio.
- SEO?
- Responsywność?
- Zadowolony klient?
I tak lubimy pracować.
Warto też zajrzeć:
- Guide to Building E-Commerce Rich Content Spreads (1WorldSync)
– kompleksowy przewodnik o tym, jak budować bogate sekcje produktowe (A+ content) z przykładami. - WCAG 2.1 Quick Reference (W3C)
– przystępny przewodnik po dostępności stron internetowych, który warto mieć pod ręką podczas projektowania rich contentu.
Napisz i sprawdźmy, co możemy wspólnie zdziałać. Wystarczy jedno zdanie. Potem może być już tylko lepiej. Zacznijmy od kontaktu — odpowiedź przyjdzie szybko 🙂