Pogodzić wszystkich

Jak wobec różnorodności platform i przeglądarek stworzyć uniwersalną stronę WWW, która tak samo będzie wyglądała na monitorach użytkowników Maców i pecetów? Trzeba pogodzić wszystkich.

Jak wobec różnorodności platform i przeglądarek stworzyć uniwersalną stronę WWW, która tak samo będzie wyglądała na monitorach użytkowników Maców i pecetów? Trzeba pogodzić wszystkich.

Surfując po sieci niejednokrotnie zdarzyło się wam pewnie trafić na stronę, która ewidentnie nie wyglądała tak, jak to było w zamyśle autora. Czasem oglądając taką witrynę jesteśmy w stanie się tego domyślać, ale często też narzekamy na twórcę strony z różnych powodów.

Użytkownikom Maców znane są zbyt małe litery, osobom preferującym mniejsze rozdzielczości (poniżej 1024 x 768 pikseli) - strony niemieszczące się w oknie przeglądarki, natomiast posiadaczom dobrych monitorów operujących dużymi rozdzielczościami - strony, które są "zbyt małe".

Jak więc zaradzić tym wszystkim różnicom, znaleźć złoty środek dla wszystkich użytkowników tworzonej przez nas witryny tak, żeby żaden z nich nie zniechęcił się do jej oglądania przez nasze drobne często niedopatrzenia?

Niezależnie od zawartości strony - jej tematyki, o której nie będziemy tutaj mówić, proces tworzenia witryny możemy podzielić na cztery etapy: projekt graficzny, cięcie grafiki, kodowanie, efekty specjalne. Różnice sprzętowe naszych użytkowników trzeba wziąć pod uwagę już na samym początku, bo późniejsze korygowanie błędów może okazać się bardzo pracochłonne lub wręcz niemożliwe.

ETAP 1 - PROJEKT GRAFICZNY

Rys. 1 Zamknięty projekt graficzny - najkorzystniej, gdy jest wycentrowany w pionie i w poziomie, zawiera się w obszarze nie większym niż 775x380 pikseli.

Rys. 1 Zamknięty projekt graficzny - najkorzystniej, gdy jest wycentrowany w pionie i w poziomie, zawiera się w obszarze nie większym niż 775x380 pikseli.

Na etapie projektowania layoutu strony znaczenie kluczowe ma rozdzielczość monitora użytkownika oraz kolory.

Od dołu jesteśmy ograniczeni rozdzielczością 800 x 600 pikseli (odsetek mniejszych rozdzielczości możemy pominąć), co daje nam ograniczenie szerokości projektu graficznego na 775 pikseli (25 pikseli zostaje na paski przewijania, ramkę okna przeglądarki itp.). Taki poziomy wymiar gwarantuje nam, że strona przy rozdzielczości 800 x 600 nie będzie się przesuwać w poziomie. Od góry natomiast trzeba wziąć pod uwagę, że nie mamy żadnego ograniczenia - gotowy projekt musi dobrze wyglądać nawet w bardzo dużych rozdzielczościach.

W tym momencie w zależności od zawartości i typu tworzonego serwisu musimy podjąć decyzję, czy strona ma mieć wymiary ustalone na sztywno, czy też ma dopasowywać się do wymiarów okna przeglądarki.

Rys. 2 Witryna o ustalonych wymiarach, wycentrowana.

Rys. 2 Witryna o ustalonych wymiarach, wycentrowana.

Pierwszy sposób ma zastosowanie wtedy, gdy projekt stanowi zamkniętą kompozycję, która nie nadaje się w żadnym jej miejscu do rozciągnięcia bądź powielenia - raczej rysunek niż tekst (rys.1). W takim przypadku jest kilka możliwości ułożenia naszej grafiki na stronie. Pamiętając, że całość musi się zmieścić w szerokości 775 pikseli, decydujemy, w którym miejscu okna ma się pojawić - centrujemy? układamy po prawej czy po lewej stronie? (rys. 2). Dobieramy odpowiednie tło - jednolite lub składające się z powielanych (w pionie i w poziomie) obrazów. Warto zwrócić uwagę na to, że jeśli chcemy, aby pewien fragment pojawił się na pierwszym ekranie bez potrzeby przewijania strony, należy go umieścić w pierwszych 380 pikselach od góry. Ma to zastosowanie głównie w przypadku emblematów czy logo firmy, a także zamkniętych w pionie projektów - nie powinny mieć one więcej niż 380 pikseli wysokości.

Projekt "rozlewający się" - dostosowujący się do rozmiarów okna przeglądarki - stosuje się między innymi w serwisach zawierających dużą ilość tekstu (rys. 3). Wyklucza to wystąpienie długiej wstęgi zawartości przy jednoczesnej pustce po bokach, niweluje efekt niewykorzystanej przestrzeni, tak bardzo niepożądany w serwisach informacyjnych. Dostosowywanie szerokości odbywa się procentowym skalowaniem poszczególnych kolumn wchodzących w skład projektu bądź też części z nich (wtedy szerokości pozostałych są ustalone na sztywno). Tutaj niebezpieczne dla nas mogą okazać się bardzo duże rozdzielczości, warto więc empirycznie sprawdzić, jak nasza strona zachowa się w takich warunkach.

Rys. 3 Witryna "rozlewająca się" - swoją szerokością dostosowuje się do okna przeglądarki.

Rys. 3 Witryna "rozlewająca się" - swoją szerokością dostosowuje się do okna przeglądarki.

Na projektantów witryn internetowych czyhają także zasadzki w postaci kolorów, które z naszych wymarzonych, misternie dobranych mogą się przeistoczyć w coś zupełnie nieoczekiwanego. To, oczywiście, bardzo pesymistyczna wersja, jednak możliwa przy przejściu między platformami PC i Mac. Aby rozwiązać ten problem, stworzono 216-kolorową paletę bezpiecznych kolorów (tzw. sześcian Netcape'a), które z pewnością wszędzie będą wyglądać tak samo. Wiadomo, oczywiście, że 216 kolorów to zbyt mało na graficzne szaleństwa, jednakże warto tej palety ściśle się trzymać w przypadku wypełniania kolorem dużych powierzchni, typografii i tła. Każda barwa spoza sześcianu Netscape'a może ulec ditheringowi albo przesunąć się w inną - znów namawiam do samotnego obejrzenia strony na różnych platformach przed wysłaniem jej w świat. Systemy operacyjne różnią się także standardowymi ustawieniami gamma. Ustawienie gamma w Windows daje ciemniejszy obraz niż standardowe ustawienia Maca. To kolejna rzecz, którą trzeba wziąć pod uwagę - w obu systemach dostaniemy różne nasycenia tych samych kolorów.

W tym momencie warto wstępnie rozważyć możliwość wstawienia efektów specjalnych do naszej strony - animacji, ruchomego menu itp. (dokładniej omówione w etapie 4) oraz zaplanować ich umiejscowienie.


Zobacz również