Jednym z zagadnień, które należy rozważyć podczas projektowania witryny responsywnej jest ustalenie punktów kontrolnych.

Punkt kontrolny jest punktem na osi rozdzielczości, wyznaczającym wartość rozdzielczości, przy której układ strony witryny powinien zmieć się, by jak najlepiej wyświetlać się na ekranie o określonej rozdzielczości. (Należy wyjaśnić, że rozdzielczość lub rozmiar ekranu podaje się w pikselach i jest to liczba pikseli, które mogą być wyświetlone pionowo i poziomo. W przypadku witryn responsywnych interesuje nas poziomy rozmiar - szerokość wyrażona w pikselach. Czyli, jak szeroki jest dostępny obszar wyświetlania).

Poniższy diagram może ułatwić zrozumienie tego mechanizmu. Poniższy przykład schematycznie zobrazuje zachowanie witryny mającej 3 punkty kontrolne: pierwszy o wartości 960 pks, drugi o wartości 720 pks i trzeci o wartości 480 pks. Poszczególne kolory reprezentują w tym przykładzie różne układy wzorca, czyli widoki.

3 punkty kontrolne tworzą 4 widoki. Każdemu widokowi na schemacie przypisano inny kolor. Sposób wyświetlania witryny na ekranie zmienia się w każdym punkcie kontrolnym. Dla wszystkich rozdzielczości między dwoma kolejnymi punktami kontrolnymi sposób wyświetlania witryny pozostaje taki sam. Zmiana koloru na diagramie symbolizuje zmianę układu strony przy przejściu do nowego widoku. Przy rozdzielczości mniejszej od 480 pks witryna ma niebieskie tło. Kiedy szerokość ekranu urządzenia przekracza 480 pks, tło staje się zielone. Pozostaje zielone aż do rozdzielczości 720 pks, kiedy to robi się żółte. Kiedy szerokość ekranu przekroczy 960 pks, tło stanie się czerwone.

Ilu potrzebujesz punktów kontrolnych? Odpowiedź brzmi: liczba punktów kontrolnych zależy od charakteru witryny, jej układu oraz grupy odbiorców, do których jest adresowana. Najlepiej zdefiniować tyle punktów kontrolnych, ile jest różnych rozmiarów ekranów urządzeń używanych przez gości Twojej witryny. (Od wielkich ekranów komputerów stacjonarnych, przez małe i duże tablety oraz większe i mniejsze smartfony. Nie należy zapominać o możliwości ustawienia ekranu pionowo lub poziomo).

Na ogół punkty kontrolne wyznacza się na podstawie różnych wielkości ekranów oferowanych przez popularne firmy. WebSite X5 robi tak samo i proponuje rozmieszczenie na osi rozdzielczości następujących puktów kontrolnych:

Celem przyświecającym tworzeniu takich punktów kontrolnych jest zdefiniowanie makro kategorii. Nie sposób zrobić punktu kontrolnego dla każdego istniejącego urządzenia - jest ich po prostu za dużo. Edycja Evo programu WebSite X5 obsługuje 3 punkty kontrolne, podczas gdy edycja Pro może ich obsłużyć aż do 10 wliczając te, które wyznaczają widok na Duży ekran oraz Smartfon.

Kiedy już wiadomo, jaki będzie zestaw punktów kontrolnych, procedura budowania witryny responsywnej w programie WebSite X5 jest następująca:

Ustalając punkty kontrolne, warto wiedzieć, że:

Lista wszystkich punktów kontrolnych jest podsumowana w tabeli umieszczonej w oknie Ustawienia responsywności.

Jeśli by zastanowić się, jak witryna jest wyświetlana na różnych urządzeniach, to okazuje się, że jeśli ma się dobrze wyświetlać na każdym z nich, wzorzec graficzny witryny powinien mieć dwa wcielenia. W miarę wyświetlania na ekranach o coraz niższej rozdzielczości zaczyna brakować miejsca na pokazanie niektórych elementów wzorca graficznego, dlatego należy zdecydować, które są mniej istotne.

Program WebSite X5 pozwala zdefiniować zmiany zachowania wzorca przy różnych rozdzielczościach ekranu, czyli w widokach między poszczególnymi punktami kontrolnymi.

Po zakończeniu prac nad układem wzorca, można przejść do przygotowania nagłówka i stopki. Te elementy także mogą się zmieniać w zależności od rozdzielczości, w jakiej wyświetlana jest witryna.

W każdym widoku można

•	Ukrywać obiekty. Aby ukryć obiekt, należy go zaznaczyć, kliknąć przycisk Pokaż/Ukryj i wybrać, czy obiekt ma by, czy obiekt ma być ukryty tylko w bieżącym widoku, czy także we wszystkich następnych.

•	Ponownie wyświetlić ukryte poprzednio obiekty. W tym celu należy kliknąć przycisk Pokaż/Ukryj, żeby rozwinąć menu, i wybrać polecenie Zarządzanie obiektami ukrytymi dla tego widoku. Zostanie otwarte okno, w którym można zaznaczyć na liście obiekty i zmienić ich widoczność.

Warto pamiętać, że wszystkie domyślne wzorce w programie WebSite X5 są przygotowane do budowania witryn responsywnych. Oznacza to, że jest w nich zdefiniowany określony zbiór punktów kontrolnych, które stają się aktywne z chwilą zaznaczenia pola wyboru Witryna responsywna w oknie Rozdzielczości i projekt responsywny. Ten domyślny zestaw punktów kontrolnych można w miarę potrzeby zmodyfikować.

Ustawienia odpowiadające za zachowanie wzorca witryny responsywnej są zapisane w pliku wzorca, nie w pliku projektu. Gdy zmieni się wzorzec witryny i spośród wzorców domyślnych wybierze inny, wtedy pojawi się okno z pytaniem, jak przeprowadzić zmianę ze starego wzorca na nowy.

Na okno to ostrzega, że style zostaną zastąpione i pyta:

W projekcie responsywnym, niezależnie od stopnia skomplikowania witryny, rzeczą fundamentalną jest wymyślenie dobrej strategii zarządzania treścią, dotyczącej nie tylko zawartych treści, ale także sposobu ich prezentacji.

Dobrą strategią jest zrobienie listy wszystkich elementów umieszczonych na stronie i przydzielenie im priorytetów od najwyższego do najniższego. To pomoże wyłonić najważniejsze treści, które muszą być widoczne w każdym przypadku, i uporządkować resztę zgodnie i ich przydatnością, tak by stopniowo ukrywać je w miarę obniżania rozdzielczości. Takiej analizie należy poddać każdą stronę witryny.

Dla lepszego zrozumienia tego mechanizmu, weźmy przykład witryny pewnej restauracji. Kiedy witryna jest wyświetlana na dużym ekranie komputera stacjonarnego, można w pełni wykorzystać wszelkiego rodzaju obrazy i animacje, które pozwolą tak zaprezentować dania z menu, żeby klientom ciekła ślinka. Jednakże, gdy witryna jest oglądana na telefonie, klienta prawdopodobnie bardziej zainteresuje skrót menu, rezerwacje lub kontakt, niż wielkie zdjęcia dania na talerzu w wysokiej rozdzielczości. Dlatego należy wyciąć zdjęcia i skoncentrować się na najważniejszych informacjach, które mogą zainteresować potencjalnego klienta, który właśnie znalazł tę restaurację na swoim smartfonie, ma kiepski zasięg, a chce szybko znaleźć najważniejsze informacje, bo jest głodny.

W programie WebSite X5 jak tylko skończy się budowanie strony w widoku przeznaczonym na duży ekran (patrz Jak utworzyć stronę w tabeli układu strony?), można zaraz przystąpić do ustalania zmian potrzebnych w każdym punkcie kontrolnym. A robi się to tak:

▪

Na zakończenie kliknij przycisk Responsywna, żeby otworzyć okno Ustawienia responsywności. W oknie znajduje się pasek rozdzielczości, więc można zająć się wszystkimi widokami wyznaczonymi przez punkty kontrolne zdefiniowane w witrynie (w oknie Rozdzielczości i projekt responsywny). W tym oknie warto pracować nad poszczególnymi widokami po kolei od Duży ekran, potem zaznaczając kolejne widoki na pasku responsywności aż do ostatniego widoku Smartfon.

▪

Gdy wybierze na liście widok Duży ekran, wtedy na diagramie przypominającym tabelę układu strony pojawi się konfiguracja zdefiniowana w oknie Tworzenie strony. Kliknięcie przycisku Kolejność rozpoczyna proces ustalania kolejności wyświetlania obiektów na stronie. Program sam automatycznie przypisuje poszczególnym obiektom numery porządkowe.

Proces porządkowania kończy się z chwilą:

WebSite X5 pomaga wyznaczyć kolejność wyświetlania obiektów. Kiedy wybierze się obiekt, wokół pozostałych obiektów o nie przypisanej jeszcze kolejności pojawia się czerwona obwódka. Łatwiej się dzięki temu zorientować, które obiekty można kliknąć, a których nie. Kolejność wyświetlania obiektów zdefiniowana w widoku Duży ekran zostanie zachowana dla wszystkich następnych widoków.

▪

Kliknij przycisk Pokaż/Ukryj obiekty w celu wyznaczenia obiektów, które należy pominąć przy wyświetlaniu następnego widoku. Kliknięciem zaznacz obiekty, które mają zostać ukryte, gdy witryna będzie wyświetlana w następnej, niższej rozdzielczości. Ponowne kliknięcie przycisku Pokaż/Ukryj obiekty zatwierdza wprowadzone zmiany i kończy proces wyboru.

▪

Kliknięcie przycisku rozpoczyna proces definiowania podziału wierszy, które zostaną zastosowane w widoku o niższej rozdzielczości niż Duży ekran. Program pomaga wyznaczyć podziały, wyświetlając szare linie tam, gdzie podział można wstawić. Kliknięcie linii zmienia jej kolor na czerwony i definiuje nowy podział. Ponowne kliknięcie przycisku Podział wiersza zatwierdza wprowadzone zmiany i kończy procedurę.

▪

W edycji Pro można zdefiniować maksymalnie 10 punktów kontrolnych. Jeżeli istnieją widoki pośrednie, należy zaznaczyć na pasku responsywności odpowiedni zakres i przejść do następnego widoku poniżej Duży ekran. Układ strony zostanie zmieniony zgodnie z nowymi ustawieniami poczynionymi w widoku Duży ekran. Teraz można ukryć te obiekty, które nie są potrzebne w tym widoku oraz wstawić niezbędne linie podziału. Ten sam proces należy powtórzyć dla każdego widoku zdefiniowanego w witrynie.

Z zaprezentowanego opisu wynika, że każdy układ strony odzwierciedla jej strukturę w danym widoku. Wszystkie zmiany wprowadzone w danym widoku określają strukturę strony w następnym widoku.

Chcąc sprawdzić działanie witryny responsywnej przed jej opublikowaniem, wystarczy obejrzeć ją na podglądzie offline. Pogląd oferuje wszelkie narzędzia potrzebne do symulacji zachowania strony w różnych rozdzielczościach.

▪	Jeśli strona nie wygląda zgodnie z oczekiwaniami, należy kliknąć przycisk Pokaż numerację. Na podglądzie pojawią się obwódki poszczególnych obiektów i numery porządkowe każdego z nich. To pomaga znaleźć miejsce, gdzie należy poprawić błąd.

Żeby mieć pewność, że witryna działa poprawnie, zaleca się przed jej opublikowaniem sprawdzanie podglądu każdej strony w każdym punkcie kontrolnym.

-

Jak działa mechanizm wyznaczania kolejności wyświetlania?

-

Jak wstawiać podziały i do czego są potrzebne?