Sensowne wymiarowanie strony
Zrezygnowałem ze ścigania się z stadem anglojęzycznych serwisów, katalogu drobiazgowych porad dotyczących CSS tu nie będzie. Ale ... poniższa sprawa wydaje mi się szczególnie ważna.
Tak znaczących różnic w rozmiarach monitorów, jakie obserwujemy ostatnio, dawno już nie było. Ciągle są w użyciu wyświetlacze 1024x768 (wymierające monitory CRT tego typu zastąpiły tańsze laptopy i LCD), ale równocześnie coraz więcej osób używa ekranów 1600x800 i większych. Efekt?
Problem, jak wymiarować strony, staje się znowu palący.
Strony sztywno zaprojektowane, z ustaloną ilością pikseli na każdy element, coraz trudniej sensownie skonfigurować. Nie mogą być zbyt szerokie, bo ludzie z małymi ekranami w ogóle nie zobaczą prawego menu a nieraz i części treści (scrollowanie wszerz nie jest operacją popularną). Gdy są wąskie - irytują osoby z ekranami wysokiej rozdzielczości, nieraz obserwujące stłoczony content a obok płachty pustego miejsca (efekt jest szczególnie spektakularny gdy ktoś taki dodatkowo powiększy czcionkę).
Strony z płynnym układem (bez wymiarowania szerokości treści) bardzo źle wyglądają w szerokim oknie przeglądarki na dużym ekranie. Dłuuuuuuuuuugieeee wiersze bardzo ciężko się czyta. Na małych ekranach też jest źle, gdy czytelnik nazbyt zwęży okno przeglądarki, układ strony się zupełnie rozsypuje.
Rozwiązanie? Najsensowniejszym wydaje się w tej chwili zakres wymiarów. Tj. układ, który nie ustawia sztywnego rozmiaru, ale definiuje zakres od-do (gdzie minimum jest dobrane z uwzględnieniem użytkowników małych ekranów, a maksimum dopuszcza duże ale utrzymuje jeszcze stronę w ryzach).
Odpowiednią definicję zapewnia dość prosta sztuczka CSS - Jello Mold Layout. Zapewnia ona powstanie wycentrowanego w poziomie pudełka, którego szerokość może się zmieniać w podanym zakresie.
Najprostszą metodą jej użycia jest skorzystanie z gotowego generatora. Odwiedzamy stronę:
Jello Generator
wprowadzamy odpowiednie parametry, klikamy Submit, testujemy uzyskaną stronę a następnie kopiujemy odpowiedni fragment z jej źródła.
Znaczenie parametrów minimum width i maximum width jest oczywiste, pudełko do którego wkładamy dokument nie będzie nigdy węższe ani szersze (przy węższym niż minimum oknie przeglądarki pojawi się poziomy pasek przewijania, przy oknie szerszym niż maksimum pozostaną wolne przestrzenie na obu marginesach).
Parametr window width at maximum to szerokość okna przeglądarki przy której osiągamy maksymalną szerokość pudełka. Jest to sposób na spowolnienie poszerzania się pudełka dokumentu, np. jeśli ustawimy minimalną szerokość na 600, maksymalną na 900 a window width at maximum na 1200, osoba oglądająca serwis w przeglądarce z oknem szerokości 1000 będzie widziała treść o szerokości około 800 (a szerokość treści 900 uzyska dopiero ktoś, kto poszerzy przeglądarkę do 1200). Warto to stosować, gdy serwis wygląda korzystniej w węższym układzie, w przeciwnym wypadku należy ten parametr ustawić identycznie z maksymalną szerokością.
komentarze obsługiwane przez Disqus