Responsive Web Design - grafika sklepu działająca w trybie RWD

Responsive Web Design - szata graficzna sklepu działająca w trybie RWD

Funkcjonalność modułu RWD

Sklep internetowy z układem strony RWD działa w taki sposób, że w zależności od rozdzielczości (szerokości) ekranu, układ zawartości treści ulega zmianie. Zmiana układu dokonywana jest automatycznie przez przeglądarkę internetową. Ekran roboczy sklepu podzielony jest na kolumnyodstępy między tymi kolumnami. Każda kolumna ma taką samą szerokość, tak samo każdy odstęp ma taką samą szerokość jak inny odstęp. W zależności od rozdzielczości ekranu szerokość kolumn i odstępów może ulegać zmianie zgodnie z niżej podaną tabelą.

Strona bez obsługi RWD działa w taki sposób, że na środku ekranu wyświetlany jest obszar roboczy o ustalonej szerokości (standardowo jest to ekran roboczy dostosowany do rozdzielczości 1280 pikseli w osi X).

Strona z obsługą RWD działa w taki sposób, że w zależności od rozdzielczości ekranu wyświetlana jest odpowiednia liczba kolumn, aby treść lepiej wypełniła obszar roboczy, niż w przypadku strony internetowej bez obsługi RWD.


Obszar roboczy stron sklepu podzielony jest na sekcje treści (np. menu z listą grup towarowych czy okienko produktu na stronie z listą produktów), które wyświetlane są w kolumnach.

W zależności od rozdzielczości układ treści na ekranie będzie wyświetlał różną liczbę kolumn. Parametry ekranu zadane są poniższą tabelą (wszystkie wartości podane są w pikselach):

Rozdzielczość ekranu w osi XSzerokość odstępuSzerokość kolumnyMaksymalna liczba kolumn na stronieSzerokość ekranu roboczego
poniżej 460101402310
od 460 do 739101403460
od 740 do 979202203740
od 980 do 1219202204980
od 1220 do 1459
(rozdzielczość podstawowa)
2022051220
od 1460 (*)2022061460

(*) - najwyższa rozdzielczość (od 1460 pikseli w osi X) jest opcjonalna, tzn. jest uruchamiana na życzenie zamawiającego w trakcie wdrażania projektu graficznego (integracji projektu z oprogramowaniem sklepu).

Przykładowo dla rozdzielczości ekranu 1280 w osi X wyświetlanych będzie 5 kolumn, z których np. jedna będzie zawierała menu kategorii, a pozostałe 4 przeznaczone będą do wyświetlania produktów.

Niektóre strony mogą mieć układ odbiegający od tego schematu, tzn. cała treść może być wyświetlana na całej szerokości ekranu roboczego lub w obszarze roboczym może istnieć 1 kolumna i pozostały obszar, w którym wyświetlana jest pozostała treść. Ten szerszy obszar, w którym wyświetlana jest treść, powstaje poprzez „sklejenie” odpowiedniej ilości kolumn.

Szerokości ekranu roboczego nie należy utożsamiać z fizyczną rozdzielczością danego urządzenia. Niektóre urządzenia (w szczególności dotyczy to telefonów komórkowych oraz niektórych tabletów posiadających stosunkowo mały ekran i dużą rozdzielczość fizyczną) stosują rozdzielczość logiczną, która jest niższa od rozdzielczości fizycznej. W takich przypadkach pole „Szerokość ekranu roboczego” z powyższej tabeli należy rozumieć jako rozdzielczość logiczną urządzenia.

Dodatkowe założenia do projektu i jego wdrożenia:

  • Poszczególne elementy na stronie – pliki graficzne i zdjęcia nie są skalowane w trakcie zmiany rozdzielczości z wyjątkiem bannerów opisanych poniżej.
  • Po zmianie rozdzielczości przeskalowaniu ulegają bannery zamieszczone w sliderze na stronie głównej. Dlatego użytkownik (administrator) powinien zadbać o to, aby bannery te zostały wczytane w najwyższej wyświetlanej rozdzielczości.
  • Po zmianie rozdzielczości na niższą niż podstawowa:
    • Z nagłówka strony będą usuwane elementy graficzne stanowiące oprawę graficzną. W najniższej rozdzielczości z oprawy graficznej w nagłówku pozostanie wyłącznie logo.
    • Z ekranu roboczego usuwane są sekcje zgodnie z tabelą podaną wyżej. W ten sposób po zmianie rozdzielczości produkty będą wyświetlane np. nie w 3 sekcjach a w 2 sekcjach pionowych.
    • W niższych rozdzielczościach niektóre bannery mogą nie być wyświetlane. Ponadto niektóre elementy funkcjonalne w niższych rozdzielczościach niż podstawowa mogą nie być wyświetlane (np. wyszukiwarka wyświetlana u góry strony w trakcie jej scrollowania czy podmenu rozwijane z menu poziomego).
    • W niższych rozdzielczościach menu poziome zostaje zastąpione przez menu pionowe z przyciskiem umożliwiającym rozwinięcie menu „w dół”. Wyszukiwarka wyświetlana jest pod menu.
    • Jeżeli w tle strony występuje stały element graficzny, to po zmianie rozdzielczości tło pozostaje bez zmian, tzn. nie podlega ono skalowaniu.
  • Po zmianie rozdzielczości na wyższą niż podstawowa:
    • Nagłówek strony będzie powiększany w taki sposób, że poszczególne elementy się tam znajdujące będą rozsuwane aby wypełnić obszar nagłówka do odpowiedniej wielkości zgodnie z podaną wyżej tabelą. Elementy graficzne nagłówka nie są powiększane (skalowane).
    • W ekranie roboczym pojawiają się dodatkowe kolumny zgodnie z powyższą tabelą. W ten sposób po zmianie rozdzielczości produkty będą wyświetlane np. nie w 3 sekcjach a w 4 sekcjach pionowych.
    • Bannery znajdujące się w sliderze na stronie głównej są skalowane.
    • Jeżeli w tle strony występuje stały element graficzny, to po zmianie rozdzielczości tło pozostaje bez zmian, tzn. nie podlega ono skalowaniu.

Działanie modułu RWD nie obejmuje panelu administracyjnego.


Projekt graficzny RWD

Projekt graficzny przygotowywany jest w plikach graficznych (JPG) wyłącznie w podstawowej rozdzielczości ekranu, tj. 1280 pikseli szerokości. Wygląd ekranu w rozdzielczościach innych niż podstawowa uzyskiwany jest w trakcie wdrażania projektu (integracji projektu z oprogramowaniem sklepu) zgodnie z opisem działania modułu RWD.

Koszty wykonania projektu obejmuje prace graficzne, prace związane z integracją grafiki z oprogramowaniem sklepu oraz wdrożenie funkcjonalności modułu RWD dla wybranego wariantu projektu graficznego.

Jeżeli są Państwo zainteresowani wykonaniem szaty graficznej sklepu, działającej w trybie RWD, prosimy o kontakt w celu określenia Państwa dokładnych potrzeb i przygotowania oferty cenowej.


Chcesz otworzyć sklep? Dobrze trafiłeś!

Skontaktuj się z nami lub wypełnij formularz kontaktowy - oddzwonimy!

  • 40-950 Katowice, Pl. Grunwaldzki 8-10 , IV p.
  • Nasze biuro czynne jest od poniedziałku do piątku
    w godzinach od 8:30 do 17:00
Zamów demo sklepu AptusShop!×
Oferujemy możliwość bezpłatnego zapoznania się z funkcjonalnością sklepu internetowego AptusShop przez okres 3 tygodni. Bez żadnych zobowiązań z Twojej strony uruchomimy w pełni działający sklep wraz z panelem administracyjnym pod testowym adresem.