Responsive Web Design - grafika 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 – część ekranu w postaci pionowej szpalty przeznaczona na wyświetlenie treści i oprawy graficznej witryny internetowej. W zależności od rozdzielczości wyświetlacza (monitora) ekran roboczy może zajmować całą szerokość ekranu przeglądarki internetowej (dla mniejszych rozdzielczości) bądź też posiadać po bokach marginesy (dla większych rozdzielczości).

Rozdzielczość graniczna ekranu roboczego – rozdzielczość (podawana w pikselach liczonych w osi X dla ekranu komputerowego), powyżej której ekran roboczy nie ulega zwiększeniu bądź zmniejszeniu przy zmianie rozdzielczości okna przeglądarki. Rozdzielczość ta wynosi standardowo 1280 pikseli w osi X. Powyżej tej rozdzielczości szerokość ekranu roboczego jest równa rozdzielczości granicznej (standardowo 1280 pikseli w osi X), a ekran roboczy wyświetlany jest na środku okna przeglądarki internetowej tworząc po bokach marginesy. Ekran roboczy ulega zwiększeniu bądź zmniejszeniu wraz ze zmianą rozdzielczości, jeżeli rozdzielczość ekranu nie przekracza rozdzielczości granicznej ekranu roboczego.

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 szerokości ekranu (wyrażonej w piskelach) układ treści na ekranie będzie wyświetlał różną liczbę kolumn.

Przykładowo dla rozdzielczości ekranu komputerowego powyżej 1280 pikseli w osi X wyświetlanych będzie 5 kolumn, z których np. jedna będzie zawierała menu grup towarowych, a pozostałe 4 przeznaczone będą do wyświetlania produktów. Dla mniejszych rozdzielczości wyświetlana będzie mniejsza liczba kolumn – im mniejsza rozdzielczość, tym mniejsza liczba kolumn. W najniższej rozdzielczości dla urządzenia typu smartfon prezentowane będą tylko 2 kolumny.

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” należy rozumieć jako rozdzielczość logiczną urządzenia.

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

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. Skalowaniu mogą również podlegać elementy strony głównej wprowadzane przez panel administracyjny oraz zdjęcia produktów prezentowane na listach produktów.

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ół”.
• 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.
• W ekranie roboczym pojawiają się dodatkowe kolumny. 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.

Więcej informacji o technice Responsive Web Design.

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.