Kiedy projektuje się witrynę responsywną, ważne jest ustalenie hierarchii ważności poszczególnych elementów na każdej stronie, tak by łatwo było zidentyfikować ważniejsze treści, które muszą na stronie pozostać widoczne. Nie bez znaczenia jest rozkład tych elementów na stronie, gdy wyświetlana jest na urządzeniach o mniejszej rozdzielczości.
W programie WebSite X5 informacje o tym jak wygląd strony będzie się zmieniał w zależności od zdefiniowanych punktów kontrolnych można znaleźć w oknie Ustawienia responsywności.
W oknie widoczny jest pasek responsywności z widokami wyznaczonymi przez aktywne punkty kontrolne oraz tabela z informacjami o konfiguracji strony dla każdego wybranego punktu widoku. Pierwszą rzeczą, jaka należy zrobić jest ustalenie kolejności, w jakiej obiekty będą pojawiały się na stronie.
Definicja kolejności wyświetlania polega na ustaleniu, w jakiej kolejności obiekty będą pojawiały się na ekranie wtedy, gdy szerokość okna przeglądarki nie pozwoli na wyświetlenie wszystkiego, co zostało umieszczone w widoku przeznaczonym na duży ekran.
Każdy obiekt w tabeli wyposażony jest w ikonę podającą jego rodzaj oraz numer porządkowy określający położenie w kolejności wyświetlania.
Obiekty są początkowo numerowane przez program automatycznie, ale kolejność ta nie musi przypaść do gustu autorowi. Może on w razie potrzeby zmienić kolejność pojawiania się obiektów.
Aby rozpocząć ustalanie prawidłowej kolejności wyświetlania obiektów, należy przejść do widoku Duży ekran i kliknąć przycisk 
Kolejność. Obiekty staną się półprzeźroczyste, a wokół niektórych pojawią się czerwone obwódki, które świadczą o tym, że należy je kliknąć, żeby ustalić kolejność.
|
Celem definiowania kolejności wyświetlania jest takie ustawienie obiektów na stronie, by można je było wyświetlać jeden pod drugim. Program za każdym razem przelicza możliwości uporządkowania obiektów i za pomocą czerwonej obwódki zaznacza te, które mogłyby być następne w kolejności bez przerywania ciągłości, co mogłoby utrudnić prawidłowe ustawienie obiektów w kolumnie jeden pod drugim. |
Teraz spośród obiektów obwiedzionych na czerwono można wybrać ten, który ma pojawić się jako pierwszy. Obiekt kliknięty staje się traci półprzezroczystość, a w rogu pojawia się jego numer porządkowy. Wszystkie pozostałe obiekty są półprzezroczyste i w razie potrzeby ich numery są aktualizowane.
Za każdym razem zmienia się wybór obiektów do wyboru (obwiedzionych na czerwono) w zależności od tego, który obiekt został kliknięty i jak obiekt ten był oryginalnie położony w tabeli układu strony.
Poniższe rysunki powinny ułatwić zrozumienie teho mechanizmu.
Rysunek 1. Układ początkowy
Przy takim rozmieszczeniu elementów na stronie w chwili rozpoczęcia numerowania obiektów program zaznaczył czerwonymi obwódkami elementy w pierwszym wierszu, ponieważ pierwszy obiekt w kolejności wyświetlania musi być wybrany spośród tych czterech.
Jeżeli obiekt nr 1 ma być pierwszy na liście, to jego kliknięcie zmieni sytuację na następującą:
Rysunek 2. Kliknięty 1: do wyboru są 2, 3 lub 4
Jak widać, kliknięcie obiektu nr 1 ustawia go na pierwszym miejscu kolejności wyświetlania, a program informuje (czerwonymi obwódkami), że drugi obiekt można wybrać spośród 2, 3 lub 4.
To tylko jedna z wielu możliwych propozycji kolejności wyświetlania. Gdyby został kliknięty na przykład obiekt numer 3, oferowane możliwości byłyby inne.
Wróćmy do naszego przykładu. Na kolejnym rysunku obiekty o numerach 1, 2 i 3 zostały zatwierdzone na swoich pierwotnych miejscach. Teraz program daje do wyboru obiekt numer 4 lub 5.
Rysunek 3. Wybór między 4 i 5
Wybór dokonany w tym momencie będzie miał wpływ na zmianę układu strony. Jeśli zostanie kliknięty obiekt numer 4, zostanie utworzony układ o dwóch wierszach, podczas gdy kliknięcie obiektu numer 5 spowoduje utworzenie układu o dwóch kolumnach.
Rysunek 4. Kliknięcie obiektu 4: układ o dwóch wierszach
Rysunek 5. Kliknięcie obiektu 5: układ o dwóch kolumnach
Czasem podczas wybierania kolejności obiektów tworzą się w układzie strony bloki obiektów. Przykładowo na rysunku 5. obiekty 1, 2, 3 i 4 tworzą jeden blok, a obiekty 5 i 6 drugi. Blok obiektów zachowuje się tak, jak pojedynczy obiekt. Żeby wiadomo było, gdzie znajdują się bloki, są one zaznaczane zaraz po ich sformowaniu.
Rysunek 6.
Rysunek 7.
Na rysunkach 6 i 7 widać jak różna kolejność wyświetlania wpłynęła na sformowanie różnych bloków obiektów, determinujących różny układ strony.
Blok obiektów nie musi pozostać blokiem w następnych widokach.
Rysunek 8. Blok obiektów w widoku na dużym ekranie
Rysunek 9. Po ukryciu obiektu 4 blok nie został zrekonstruowany w następnym widoku
Na przykład na rysunku 8 obiekty 1, 2 i 3 utworzyły blok, ponieważ sąsiadują z obiektem 4 zajmującym oba wiersze. Jak widać na rysunku 9, jeśli wstawi się linię podziału między blokiem a obiektem 4 (jest to możliwe w edycji Pro), lub jeśli obiekt 4 zostanie ukryty, to obiekty 1, 2 i 3, nie mając już sąsiada obok, w następnym widoku nie będą blokiem.
Blok obiektów pozostający blokiem we wszystkich widokach (poza widokiem smartfon, gdzie wszystkie obiekty ustawiane są jeden pod drugim) bez możliwości rozbicia go nazywa się blokiem nierozdzielnym. Takie bloki także sa widoczne w tabeli, ale zaznaczone są innym kolorem niz pozostałe.
Rysunek 10. Przykład bloku nierozdzielnego
Na rysunku 10 pokazano przykład bloku nierozdzielnego. Jak widać układ "kwiatka" powoduje, że nie można wyodrębnić wierszy ani kolumn. Taki układ zdecydowanie redukuje możliwości wyboru kolejności. W tym przypadku między obiektami nawet nie da się przeprowadzić linii podziału (dzielenie wierszy jest dostępne w edycji Pro). Nie da się tu nawet ukryć jednego obiektu bez automatycznego ukrycia pozostałych z grupy. W przypadku pojawienia się bloku nierozdzielnego, zdecydowanie zalecane jest uproszczenie układu obiektów, co da szansę uzyskania większej swobody w określaniu kolejności wyświetlania.
Reasumując, nie da się powiedzieć, że jeden porządek jest lepszy od drugiego. Wszystko zależy od zawartości strony i efektu, jaki chce się uzyskać. Porządkując obiekty, warto pamiętać o częstym sprawdzaniu efektów swojej pracy na podglądzie. Warto widzieć, jak strony będą wyglądały w różnych rozdzielczościach. Jeżeli zawartość witryny ma spójny układ z możliwością ustalenia logicznej funkcjonalności, nie trzeba będzie prawdopodobnie niczego w niej zmieniać.
Porady praktyczne:
