Liczba urządzeń mobilnych wokół nas stale rośnie. Wraz z nią rośnie rzesza użytkowników preferujących dostęp do Internetu za ich pomocą. Dlatego, zanim zacznie się budować witrynę, warto pomyśleć, do jakich odbiorców jest ona adresowana. Czy ma być przeznaczona głównie dla użytkowników dużych ekranów, czy powinna być raczej przystosowana do oglądania na wszystkich typach urządzeń. Witrynę, której układ oraz zawartość automatycznie dostosowuje się do wielkości ekranu urządzenia, na jakim jest wyświetlana (komputer stacjonarny, tablet lub telefon) nazywamy responsywną.
|
Responsywność witryny nie jest obowiązkowa, ale zdecydowanie zalecana. Czasem najlepiej jest zbudować dwie jej wersje, jedną na duże ekrany, a drugą na urządzenia przenośne. W obu przypadkach wystarczające może się okazać skorzystanie z funkcji optymalizacji, którą oferuje WebSite X5. Sprawdza ona właściwości przeglądarki i zmniejsza strony tak, że daje się je oglądać na urządzeniach przenośnych. Więcej informacji można znaleźć pod hasłem: Jak utworzyć witrynę "Mobile-Friendly"? |
Opcje na tej karcie pozwalają określić, jakiego rodzaju ma być budowana witryna. Do wyboru są:
| ▪ | Witryna na duży ekran: Witryna przeznaczona do wyświetlania na dużym ekranie. W przypadku przeglądania na urządzeniu przenośnym jej układ i zawartość nie ulega zmianie, a użytkownik może ją w przeglądarce powiększać i zmniejszać. |
| ▪ | Witryna responsywna: Witryna przeznaczona do wyświetlania na wszystkich urządzeniach od dużego ekranu komputera stacjonarnego do małego ekranu smartfona. Aby gość witryny miał zapewniony jak największy komfort, na każdym urządzeniu zawartość stron odpowiednio dopasowuje się do wielkości ekranu. |
Jeśli zostanie wybrana opcja Witryna na duży ekran, należy określić następujące parametry:
| ▪ | Rozdzielczość witryny: Określa w pikselach szerokość stron witryny. Domyślna wartość może być różna w zależności od wybranego wzorca, ale zawsze można ja zmienić. |
|
Domyślna wartość parametru Rozdzielczość witryny jest obliczana tak, by uzyskać najlepszy efekt przy rozdzielczości 1024x768 pikseli. |
Jeśli natomiast zostanie wybrana opcja Witryna responsywna, należy określić punkty kontrolne.
Witryna responsywna może być wyświetlana na kilku różnych rodzajach urządzeń o różnej wielkości ekranu (rozdzielczości). Punkty kontrolne wyznaczają przedziały rozdzielczości, w których układ stron witryny zmienia się tak, by dostosować się do wyświetlania na urządzeniu o określonej rozdzielczości (wielkości ekranu).
By lepiej zrozumieć tę koncepcję, spójrz na poniższy diagram, w którym uwzględniono szereg najczęściej spotykanych urządzeń.
Poniżej na osi rozdzielczości umieszczono punkty kontrolne odpowiadające rozdzielczościom najczęściej spotykanym w tego typu urządzeniach:
| ▪ | Duży ekran: 960 pks |
| ▪ | Tablet ustawiony poziomo: 720 pks |
| ▪ | Tablet ustawiony pionowo: 600 pks |
| ▪ | Smartfon ustawiony poziomo: 480 pks |
| ▪ | Smartfon ustawiony pionowo: mniej niż 480 pks |
Poniżej osi rozdzielczości pokazano oś wybranych rozdzielczości z 3 punktami kontrolnymi, które są domyślnie zdefiniowane w każdym nowym projekcie.
| ▪ | Duży ekran: Ten punkt kontrolny wskazuje rozmiar, w którym witryna będzie wyświetlana na dużych ekranach komputerów stacjonarnych. |
| ▪ | Pośredni: Ten punkt kontrolny pozwala na płynne przejście od widoku wyświetlanego na dużym ekranie do widoku wyświetlanego na ekranie telefonu. |
| ▪ | Smartfon: Ten punkt kontrolny określa najmniejszą rozdzielczość w jakiej może być wyświetlana witryna i ma układ kolumnowy. |
Domyślnie rozdzielczości wyznaczane przez te 3 punkty kontrolne są w poszczególnych wzorcach ustawiane automatycznie.
Na osi wybranych rozdzielczości odcinki między poszczególnymi punktami kontrolnymi odpowiadające poszczególnym widokom są zaznaczone różnymi kolorami. Dla czytelności te same kolory zostały nadane ikonom w tabeli w oknie Ustawienia responsywności i na pasku responsywności w oknie Struktura wzorca oraz w Przeglądarce wyświetlającej podgląd witryny.
Punkty kontrolne są zaznaczone na pasku rozdzielczości oraz w tabeli wraz następującymi elementami:
| ▪ | Punkt kontrolny: W tej kolumnie wyliczone są wszystkie aktywne punkty kontrolne zdefiniowane w projekcie. Punkt kontrolny wskazuje wartość rozdzielczości, przy której układ strony witryny musi się zmienić w celu dostosowania się do innej wielkości ekranu. Każdy punkt kontrolny jest identyfikowany przez wartość rozdzielczości, przy której uaktywnia się. |
| ▪ | Widok: W tej kolumnie wyliczono widoki witryny wyznaczone przez punkty kontrolne. Dla każdej wielkości ekranu definiuje się odpowiadający mu układ strony witryny. Obok każdego widoku widnieje kropka w kolorze, jaki został mu przypisany. Te same kolory widnieją na osi rozdzielczości. Każdemu odcinkowi osi odpowiada stosowny zakres wielkości ekranów. Dla czytelności te same kolory zostały zastosowane w ikonach umieszczonych w tabeli w oknie Ustawienia responsywności i na pasku rozdzielczości w oknie Struktura wzorca oraz w Przeglądarce wyświetlającej podgląd witryny. |
| ▪ | Zakres: W tej kolumnie podane są zakresy (zakresy wartości rozdzielczości) między dwoma punktami kontrolnymi, dla których tworzone są poszczególne widoki. Zakres widoku na dużym ekranie nie jest zawarty między dwoma punktami kontrolnymi, ale jest zdefiniowany jako większy niż największa wartość punktu kontrolnego. |
Przyciski obok tabeli służą do modyfikowania punktów kontrolnych oraz wyznaczonych przez nie widoków:
| ▪ |  Dodaj: Tym przyciskiem dodaje się nowy punkt kontrolny i określa rozdzielczość, przy której staje się on aktywny. Punktów kontrolnych może być maksimum 10. |
| ▪ | Edytuj...: To polecenie pozwala zmienić rozdzielczość przypisaną wybranemu punktowi kontrolnemu. |
| ▪ | Usuń: To polecenie usuwa punkt kontrolny. Punktu kontrolnego Smartfon nie da się usunąć. Natomiast punkt kontrolny Duży ekran można zaznaczyć i usunąć, ale wtedy następny punkt kontrolny staje się automatycznie nowym punktem kontrolnym Duży ekran. Po usunięciu punktu kontrolnego wszystkie ustawienia z nim związane (określone w oknie Ustawienia responsywności ) są stosowane do niższego punktu kontrolnego. Muszą istnieć co najmniej 2 punkty kontrolne: Duży ekran oraz Smartfon. |
|
Trudno jest z góry odgadnąć, jakie punkty kontrolne będą potrzebne. Dlatego ważne jest ustawienie takich punktów kontrolnych, które wprowadzą podział na urządzenia uwzględniając wszystkie możliwe ekrany i zagwarantują wygodną nawigację. |
Weźmy przykład. Niech witryna będzie zbudowana z wykorzystaniem wzorca o szerokości 960 pks. W tabeli wymienione są 3 domyślne punkty kontrolne wyznaczające 4 przedziały odpowiadające 4 różnym widokom:
| ▪ | Punkt kontrolny: 960 pks - Widok: Duży ekran - Zakres: Większy lub równy 960 pks |
Dla rozdzielczości powyżej punktu kontrolnego Duży ekran stosowany jest wzorzec dla widoku przeznaczonego na duży ekran (zdefiniowany w oknie Struktura wzorca), a zawartość witryny jest wyświetlana zgodnie z tym, jak strony były tworzone w Kroku 4 - Strony.
| ▪ | Punkt kontrolny: 720 pks - Widok: Widok 1 - Zakres: Między 959 pks a 720 pks |
Dla rozdzielczości między punktami kontrolnymi Duży ekran i Średni wzorzec zachowuje się zgodnie z ustawieniami tego widoku przypisanymi w oknie Struktura wzorca. W tym przypadku szerokość obszaru Zawartość strony wynosi 720 pikseli, natomiast szerokość okna przeglądarki może mieć do 959 pikseli, przy czym różnicę szerokości wypełnia Tło strony. Obiekty na stronach pozostają rozmieszczone tak, jak w poprzednim przedziale odpowiadającym widokowi na dużym ekranie.
W edycji Pro ten punkt kontrolny może być przesunięty lub usunięty. Inaczej niż w edycji Evo, obiekty są rozmieszczone na stronie tak, jak określono dla tego widoku w oknie Ustawienia responsywności.
| ▪ | Punkt kontrolny: 480 pks - Widok: Widok 2 - Zakres: Między 719 pks a 480 pks |
Przy rozdzielczościach między punktem kontrolnym Średni a Smartfon zawartość witryny jest układana w pionową kolumnę, czyli wszystkie obiekty są wyświetlane jeden pod drugim (zgodnie z ustawieniami ich kolejności oraz widoczności określonymi w oknie Ustawienia responsywności). Podobnie, jak w poprzednim przedziale, wzorzec przyjmuje ustawienia określone dla tego widoku w oknie Struktura wzorca: szerokość obszaru Zawartość strony wynosi 480 pikseli, natomiast szerokość okna przeglądarki może mieć do 719 pikseli, przy czym różnicę szerokości wypełnia Tło strony.
W edycji Pro ten punkt kontrolny może być przesunięty lub usunięty. Inaczej niż w edycji Evo, obiekty na stronie nie są ułożone w kolumnie, tylko zgodnie z ustawieniami określonymi dla tego widoku w oknie Ustawienia responsywności.
| ▪ | Punkt kontrolny: 0 pks - Widok: Smartfon - Zakres: Mniejszy niż 479 pks |
Kolumnowy układ stron witryny jest kontynuowany także dla rozdzielczości mniejszych niż określona dla punktu kontrolnego Smartfon. Wzorzec wyświetlany jest zgodnie z ustawieniami dla tego widoku określonymi w oknie Struktura wzorca , a szerokość strony jest ustawiana jako wartość względna, nie zaś bezwzględna, i zajmuje 100% dostępnego miejsca. W takim kolumnowym układzie obiekty są wyświetlane jeden pod drugim (z uwzględnieniem kolejności oraz ustawień widoczności określonych w oknie Ustawienia responsywności ) i są tak formatowane, by zajmować 100% dostępnej szerokości.
Ten punkt kontrolny jest zdefiniowany także w edycji Pro, ale nie może być ani modyfikowany, ani usunięty.
|
Jeżeli projekt zostanie zbudowany jako responsywny w edycji Evo programu, a następnie otwarty w edycji Pro, to zachowane zostaną wszystkie punkty kontrolne. W edycji Pro istnieje możliwość wstawiania nowych punktów kontrolnych lub zmieniania istniejących ustawień. |
|
Kiedy otwiera się nowy projekt, stosowany jest losowo wybrany wzorzec, który jest zastępowany z chwilą wybrania jakiegoś innego. |
Porady praktyczne:
Więcej informacji:
