Jak działa RWD w sklepie internetowym AptusShop?
Sklep internetowy AptusShop w wersji RWD może działać w różnych rozdzielczościach. Funkcjonowanie modułu RWD najlepiej przedstawić na przykładzie strony, na której znajduje się oferta (lista produktów).
Główna część ekranu podzielona została na kolumny, w których prezentowane są boksy z produktami. Liczba kolumn jest zwiększana bądź redukowana w zależności od aktualnej rozdzielczości wyświetlacza. Dzięki temu zapewnione jest poprawne wyświetlanie stron dla różnych urządzeń. Wygląd strony zmienia się więc wraz ze zmianą rozdzielczości, ale w taki sposób, aby witryna sklepu nie straciła na przejrzystości. W najmniejszej z dostępnych rozdzielczości przeglądanie odbywa się tylko w jednej kolumnie zawierającej produkty, co znacznie ułatwia nawigację – wystarczy przewijać kolejne produkty z góry na dół.
Bannery przy zmianie rozdzielczości są skalowane.
Natomiast nagłówek i stopka witryny w zależności od ekranu ulegają zmianie, prezentując się w formie bardziej zredukowanej bądź rozwiniętej. W nagłówku przy najniższej z dostępnych rozdzielczości, pozostanie tylko logo.
Wraz ze zmianą rozdzielczości karta produktu zmienia układ – np. tekst z opisem produktu przy wyższej rozdzielczości wyświetla się po prawej stronie zdjęcia, a przy rozdzielczości mniejszej zdjęcie jest wyświetlane pod opisem.
Nie ulega wątpliwości, że aby móc najbardziej komfortowo korzystać z witryny, potrzebne jest urządzenie o wyświetlaczu zbliżonym rozmiarami do ekranu komputera. Praca przy rozdzielczościach najmniejszych wiąże się z koniecznością dokonania rozsądnego kompromisu, z zachowaniem możliwie najlepszych walorów funkcjonalnych.
Poniżej przedstawiamy najważniejsze zmiany w wyświetlaniu stron sklepu w zależności od ekranu urządzenia:
- wraz ze zmianą rozdzielczości na niższą redukowana jest oprawa graficzna nagłówka, w którym w najniższej rozdzielczości pozostanie tylko logo;
- główna część ekranu, w której wyświetlane są kafle z produktami ulega redukcji bądź rozszerzeniu o kolejne kolumny;
- bannery na stronie głównej oraz slider są automatycznie zmniejszane do odpowiednich rozmiarów, a przy najniższych rozdzielczościach bannery mogą nie być wyświetlane;
- w najniższych rozdzielczościach wyszukiwarka zajmuje całą szerokość ekranu u góry strony, a poziome menu zmienia się w pionowe z przyciskiem do rozwijania w dół;
- grafika umieszczona w tle nie podlega skalowaniu wraz ze zmianą rozdzielczości;
- karta produktu zmienia układ wraz ze zmianą rozdzielczości.
