Zanim zaimplementujecie praktycznie układ, konieczne jest ustalenie kilku podstawowych kwestii. Powinniście najpierw zdecydować się na rodzaj układu. Ogólnie istnieją trzy możliwości.
• Stały
• Elastyczny
• Elastyczny
CSS umożliwia układy o stałych lub elastycznych wymiarach. W przypadku układów stałych zazwyczaj pracuje się z wymiarami w pikselach. Z kolei elastyczne układy opierają się na wartościach procentowych. Oba rodzaje układów mają swoje zalety i wady.
Układy stałe są stosowane głównie wtedy, gdy grafiki mają znaczący wpływ na układ. (Chociaż także tutaj istnieją wyjątki dzięki użyciu grafik tła CSS). Jeśli w układach wymagane jest precyzyjne pozycjonowanie elementów, najczęściej sięga się również po stałe pozycjonowanie. W tym rodzaju układu zazwyczaj przynajmniej szerokość układu jest ustalana na stałą liczbę pikseli. Ta szerokość zazwyczaj jest ukierunkowana na określone rozdzielczości ekranu.
Sytuacja wygląda inaczej w przypadku elastycznych układów. Tutaj nie podaje się stałej szerokości. Układ dostosowuje się do szerokości okna przeglądarki.
W tego rodzaju układach np. szerokość jest podawana w procentach. Jeśli użytkownik zmieni rozmiar okna przeglądarki, zmieni się również rozmiar układu.
Dzięki nowoczesnym właściwościom CSS istnieje obecnie inny rodzaj układu, a mianowicie tzw. układ responsywny. Tutaj układ zmienia się tak, że na przykład na smartfonie wygląda zupełnie inaczej niż na komputerze stacjonarnym. Tutaj na PSD-Tutorials.de pracowano na przykład z takim układem. Gdy strona jest otwierana na komputerze stacjonarnym z "zwykłym" rozmiarem okna przeglądarki, układa się to następująco.
Gdy okno zostanie jednak zesunięte, faktycznie zmienia się rozmieszczenie elementów znajdujących się na stronie internetowej.
Tworzenie układu responsywnego jest stosunkowo kosztowne. W końcu musi być ustalany rozmiar ekranu odwiedzającego, a następnie prezentowany odpowiedni układ. I faktycznie ten właściwy układ musisz opracować dla różnych rozmiarów ekranów. Odwiedzający Twoją stronę z dużym monitorem otrzyma na przykład trójkolumnowy układ. Natomiast jeśli inny odwiedzający wejdzie na Twoją stronę za pomocą smartfona, zobaczy układ jednokolumnowy.
Zalety i wady poszczególnych wariantów
Zanim zaimplementujesz układ, musisz rozważyć, którą z wymienionych form układów chcesz zastosować. Chciałbym pokrótce przedstawić, jakie zalety i wady mają układy stałe.
• Szablony projektowania można tu z pewnością najłatwiej zrealizować.
• Jeśli odpowiesz standardowym rozdzielczościom, nie będzie problemów z wyświetlaniem strony internetowej.
• Układy są łatwe do zrozumienia. (Ta zaleta na pewno będzie dla ciebie korzystna, jeśli jako programista internetowy chcesz wyjaśnić klientowi układ).
Jednak układy stałe mają też wady.
• Ze względu na stałe wymiary są one nieelastyczne, więc na przykład nie dostosowują się do bardzo małych ani dużych ekranów. Często marnuje się dużo miejsca.
• Pod względem dostępności mają pewne ograniczenia.
Elastyczne układy mają również swoje zalety i wady. Zaczynając od zalet.
• Układy automatycznie dostosowują się do rozmiaru okna przeglądarki.
• Odwiedzający mogą więc wywierać duży wpływ na wygląd strony internetowej.
Jednak tutaj również istnieją wady.
• Jako programista trudno kontrolujesz wyniki. Można więc stosunkowo trudno zrealizować wymagania układu.
• Zawartość stron musiałaby być dokładnie dostosowana.
• W przypadku dużych ekranów wyświetlanie krótkich tekstów może być „nieestetyczne”, ponieważ często stoją one tylko w jednym wierszu. (CSS oferuje odpowiednie właściwości, takie jak min-width).
Kolejna forma układu stanowi złoty środek między stałymi a elastycznymi układami. Są to tzw. układy elastyczne. Ich główną cechą jest jednostka miary em. (Obecnie coraz bardziej popularne stają się również rem. W przeciwieństwie do em, rem zawsze odnosi się do elementu nadrzędnego, a nie jak em do elementu wyższego rzędu).
W tych układach szerokość i wysokość są elastyczne. Design strony skaluje się proporcjonalnie do wielkości okna przeglądarki. Ten sposób projektowania jest z jednej strony z pewnością najbardziej skomplikowany, jeśli chodzi o praktyczne wykonanie. Wynika to po prostu stąd, że trzeba wiedzieć bardzo dokładnie, jak elementy zachowują się w zmiennym oknie przeglądarki. Układy elastyczne są stosowane przede wszystkim na stronach internetowych, gdzie oferowane są liczne zdjęcia i filmy.
Zalety układów elastycznych:
• Dostępna przestrzeń jest optymalnie wykorzystana.
• Zawartość jest zawsze wyświetlana proporcjonalnie jak największa.
Jednak elastyczne układy mają oczywiście również wady.
• Projektowanie tych układów jest bardzo skomplikowane.
• Implementacja także nie jest wcale prosta.
Kwestia wyboru
Musicie więc zdecydować, którą z wymienionych wariantów chcecie wykorzystać. Jeśli dopiero rozpoczynacie swój rozwój HTML/CSS, polecam zacząć od stałego układu. Natomiast osoby posiadające zaawansowane umiejętności w dziedzinie tworzenia stron internetowych powinny od razu zabrać się za układy responsywne. Tutaj jesteście po właściwej stronie, niezależnie od tego, z jakiego urządzenia ostatecznie zostanie wywołana Wasza strona internetowa.
