• 
  Semantyczny szablon strony

  Dlaczego szablon strony powinno się wykonywać na elementach DIV (bloki), a nie na tabelkach?

• 
  Stały szablon

  Jak wykonać szablon o szerokości niezależnej od rozdzielczości ekranu?

• 
  Płynny szablon

  Jak wykonać szablon o szerokości dopasowującej się do rozdzielczości ekranu?

• 
  Responsywny szablon

  Jak wykonać szablon strony automatycznie dopasowujący się do urządzenia, na którym jest wyświetlany (smartfon, smartphone, tablet, laptop, notebook, komputer stacjonarny)?

Szablon strony na DIV-ach

Po lekturze rozdziału pt. Menu w CSS powinny być Ci już znane praktyczne możliwości stylizacji elementów stron internetowych. Wiesz już zapewne, dlaczego rozwiązanie oparte o CSS jest najkorzystniejszym wyborem przy tworzeniu menu nawigacyjnego. Dlaczego zatem ograniczać się tylko do menu, kiedy można przecież zyskać jeszcze więcej, projektując całą stronę w ten sam sposób:

• Wyobraź sobie, że po roku działalności strony zechcesz całkowicie odmienić jej wygląd, np. przenosząc kolumnę menu z lewej na prawą stronę. Dzięki CSS to tylko jedna linijka w arkuszu stylów, zamiast żmudnej modyfikacji być może setek powstałych dotychczas podstron serwisu!
• Bez trudu wprowadzisz okolicznościowe wersje wyglądu swojej witryny - np. z okazji Nowego Roku.
• Chcesz przygotować zestaw skórek dla Twojej strony? Z CSS jest to znacznie prostsze i mniej inwazyjne niż w jakimkolwiek systemie parsowania szablonów. Ponadto rozwiązanie takie jest pozbawione bardzo irytującej wady: jeśli przyszło Ci administrować darmowym systemem CMS lub forum dyskusyjnym i masz już za sobą samodzielne próby wprowadzania modyfikacji dodających nowe funkcje w serwisie, to zapewne wiesz, że bardzo często wymaga to aktualizacji plików wszystkich dostępnych skórek. Po jakimś czasie staje się to tak uciążliwe, że usuwasz wszystkie dodatkowe skórki albo rezygnujesz z wprowadzania jakichkolwiek modyfikacji, mimo iż użytkownicy coraz głośniej się tego domagają. Przejdź na CSS i raz na zawsze zapomnij o tych problemach!
• Znacznie mniejsze rozmiary wszystkich podstron serwisu. Twoi użytkownicy odczują to w postaci zauważalnie krótszego czasu ładowania stron (zadowolony użytkownik częściej powraca do serwisu), a Ty możesz zaoszczędzić na opłacie za utrzymanie witryny, mniej płacąc firmie hostingowej za wykorzystany transfer (w przypadku popularnych serwisów będą to naprawdę niebagatelne sumy).
• Inna wersja strony do wydruku lub dla urządzeń przenośnych? Proszę bardzo - dzięki obsłudze mediów wystarczy dołączyć dodatkowe arkusze stylów i nie trzeba przygotowywać żadnych nowych wersji dokumentów HTML.
• Zależy Ci na wysokiej pozycji w wyszukiwarkach internetowych? Semantyczny kod oparty o CSS jest najprostszą ku temu drogą.
• Nie utrudniaj korzystania z Twojego serwisu osobom niewidomym ani użytkownikom przeglądarek tekstowych, tworząc stronę w technologii sprzed dziesięcioleci.
• Wdrożenie kolejnego serwisu, wchodzącego w skład jednego portalu, może się sprowadzać tylko do niewielkiej modyfikacji jednego krótkiego pliku - arkusza stylów CSS... no i oczywiście zredagowania nowych treści :-) Zaoszczędzisz sporo czasu na programowaniu oraz na szkoleniu redaktorów w obsłudze nowego serwisu, dzięki czemu pozostawisz konkurencję daleko w tyle. Ponadto możesz wykorzystywać raz opracowane elementy we wszystkich serwisach portalu, wszędzie elastycznie dopasowując ich wygląd do lokalnego szablonu.

Analogicznie jak we wspomnianym wcześniej rozdziale pt. Menu w CSS, także i tutaj z góry ustalimy kod HTML, który następnie będzie wykorzystywany we wszystkich przykładach w tym rozdziale. Zmieniając wygląd kolejnych przygotowywanych szablonów, będziemy projektować jedynie kolejne arkusze CSS dla wciąż niezmiennego kodu HTML. Jest to praktyczny przykład implementacji koncepcji rozdzielenia struktury i prezentacji dokumentów, dzięki czemu możliwe są do osiągnięcia wszystkie wymienione powyżej korzyści.

Szablon dwukolumnowy:

<div id="top">
	<div id="NAGLOWEK">Nagłówek szablonu</div>
	<div id="MENU">Menu nawigacyjne</div>
	<div id="TRESC">Treść strony</div>
	<div id="STOPKA">Stopka serwisu</div>
</div>

[Zobacz także: Szablon strony w HTML5]

Rezultat bez stylizacji:

Szablon trójkolumnowy:

<div id="top">
	<div id="NAGLOWEK">Nagłówek szablonu</div>
	<div id="MENU">Menu nawigacyjne</div>
	<div id="INFORMACJE">Dodatkowe informacje</div>
	<div id="TRESC">Treść strony</div>
	<div id="STOPKA">Stopka serwisu</div>
</div>

[Zobacz także: Szablon strony w HTML5]

Rezultat bez stylizacji:

Do budowy szablonu wykorzystamy elementy <div>...</div>, ponieważ jest to poprawne semantycznie. Zgodnie ze specyfikacją HTML 4.01, element DIV jest ogólnym pojemnikiem, pozwalającym dodać strukturę do dokumentu, którą potem można wykorzystać przy stylizacji za pomocą CSS. Musimy jednak w jakiś sposób odróżnić np. blok treści strony od bloku stopki. W tym celu użyliśmy identyfikatorów (atrybuty id="..."), ponieważ wiemy, że w jednym pliku na pewno nie pojawią się np. dwa bloki treści ani podwójna stopka. Jeśli będziemy chcieć wstawić w dokumencie blok, który może się powtórzyć w obrębie tego samego pliku, zamiast identyfikatorów należy użyć klasy (atrybut class="..."). Wielkie litery w identyfikatorach poszczególnych bloków zapobiegną ewentualnym kolizjom nazw elementów występujących w treści (nie dotyczy trybu Quirks).

Dlaczego nie tabele?

Kiedyś do tworzenia szablonów stron WWW używało się tabeli. W czasach, gdy o CSS można było tylko pomarzyć, był to jedyny sposób na stworzenie bardziej skomplikowanej strony. Czy dzisiaj ten powód jest dobrym uzasadnieniem, skoro wszystkie popularne przeglądarki graficzne od dawna obsługują CSS przynajmniej w stopniu zadowalającym? Dlaczego do tworzenia szablonów stron nie należy używać tabelek:

• Tabele służą do prezentacji danych tabelarycznych, a nie do tworzenia szablonów - jest to poważny błąd semantyczny.
• Zwiększają rozmiary dokumentów (dłuższe wczytywanie i wyższe opłaty za transfer).
• Znacznie ograniczają możliwości stylizacji za pomocą CSS.
• Utrudniają odbiór treści przez osoby niewidome oraz użytkowników przeglądarek tekstowych.
• Zwykle wpływają negatywnie na pozycję serwisu w wynikach wyszukiwania.

Czasami osoby początkujące, dowiadując się, jakie to "złe" są tabelki, próbują w każdym przypadku zastępować je elementami <div>...</div>. Tymczasem zwykle jest to tak samo niepoprawne semantycznie, jak ich nadużywanie. W tabelach powinny być prezentowane dane tabelaryczne, które obejmują powtarzający się zbiór elementów (wiersze) tych samych typów (kolumny). Zwykle daje się łatwo rozpoznać, czy w określonym przypadku powinno się użyć tabeli:

1. W prezentowanych danych można wyróżnić poziomy lub/i pionowy nagłówek - może go nawet nie być, ważne żeby dało się go logicznie wyznaczyć choćby wirtualnie.
2. Prezentujemy przynajmniej dwa egzemplarze krótkich danych o podobnym charakterze - będą to odpowiedniki kolejnych wierszy tabeli. Taka tabela może mieć nawet tylko jedną kolumnę danych (w takim przypadku zwykle mamy do czynienia z pionowym nagłówkiem, poprzedzającym kolumnę danych).

Stały szablon (ang. fixed layout) charakteryzuje się odgórnie ustaloną szerokością w pikselach. Jeśli użytkownik zmieni rozdzielczość ekranu lub rozmiar okna przeglądarki, taki szablon będzie zajmował inną powierzchnię szerokości ekranu. Aby zapewnić komfortowe przeglądanie strony, szerokość szablonu nie powinna być szersza od najmniejszej przewidzianej rozdzielczości ekranu, z której mają korzystać czytelnicy serwisu - w przeciwnym razie w oknie przeglądarki pojawi się poziomy suwak i przeczytanie całej linijki tekstu może wymagać ciągłego przewijania w prawo i z powrotem. W wyższych rozdzielczościach ekranu pojawi się puste miejsce po lewej lub/i po prawej stronie właściwego szablonu - zwykle zagospodarowuje się je poprzez umieszczenie tła graficznego (w najniższej rozdzielczości nie będzie ono widoczne, ale nie jest to takie ważne).

Stały szablon jest najczęściej używaną formą rozplanowania serwisów internetowych, ponieważ jest to szablon niezależny od rozdzielczości ekranu. Wszystkie elementy w jego obrębie (tekst, zdjęcia, elementy nawigacyjne itp.) zawsze pozostają ułożone dokładnie tak samo względem siebie. Inaczej mówiąc: jeśli np. w wybranym miejscu wstawimy zdjęcie oblane tekstem, to mamy pewność, że w każdej rozdzielczości ekranu efekt będzie taki sam, dzięki czemu unikniemy nieestetycznego ułożenia, gdy pod zdjęciem znalazłaby się tylko jedna linijka akapitu lub obok zdjęcia tylko jeden wyraz, co nie wszystkim się podoba. Mamy również pewność, że tytuły artykułów rozłożą się tak, jak to zaplanowaliśmy, tzn. np. w pojedynczej linijce, a nie w kilku wierszach.

Szerokość stałego szablonu ustala się w pikselach, ponieważ rozdzielczość ekranu określona jest właśnie w tych jednostkach. Jaka zatem powinna być ustalona szerokość? Zgodnie z danymi statystycznymi rozdzielczości o szerokości poniżej 800 pikseli to obecnie niezmierna rzadkość, dlatego zwykle tę wartość przyjmuje się jako najniższą dopuszczalną szerokość stałego szablonu, w której zajmuje on całą dostępną szerokość zmaksymalizowanego okna przeglądarki. Nie można jednak bezpośrednio przyjąć wartości 800px, ponieważ w oknie musi się jeszcze zmieścić pionowy pasek przewijania. W większości systemów operacyjnych szerokość paska przewijania wynosi 20px, a więc żaden szablon nie powinien być szerszy niż 780px - o ile wyzerujemy poziome marginesy strony.

Biorąc pod uwagę malejącą liczbę użytkowników pracujących w rozdzielczości 800x600, coraz częściej spotyka się stałe szablony, przystosowane do wyświetlania w 1024x768 i wyższych rozdzielczościach ekranu. Wtedy dostępna przestrzeń to 1004px. Jeżeli dobrze zaplanujemy taki szablon, to również użytkownicy 800x600 będą w stanie w miarę wygodnie przeglądać serwis. Nie można przecież jednocześnie korzystać z menu nawigacyjnego oraz czytać treści artykułu na stronie (chyba, że ktoś ma bardzo podzielną uwagę i dużego zeza rozbieżnego ;-)). Zatem przy odpowiednio dobranej szerokości bloku treści, użytkownicy niższych rozdzielczości nie będą musieli używać poziomego paska przewijania podczas czytania artykułu, a jedynie w momencie przejścia do widoku menu nawigacyjnego i odwrotnie. Kolumna bloku treści nie powinna być zatem szersza niż 780px, aby możliwe było odczytanie pełnej linijki tekstu bez potrzeby poziomego przewijania strony.

Ułóżmy nasze szablony, przedstawione na wstępie, tak aby menu i blok dodatkowych informacji rzeczywiście były pionowymi kolumnami (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone):

Dwie kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 630px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Wyjaśnienie:

1. Pierwszą regułą stylów w arkuszu CSS jest ustalenie domyślnego koloru tła oraz kolor tekstu w całym dokumencie. Zawsze trzeba o tym pamiętać, ponieważ użytkownik może zmienić domyślne kolory w swoim systemie operacyjnym, a wtedy przypadkowo możemy uzyskać dość osobliwy efekt kolorystyczny - np. czarny tekst na czarnym tle. Nigdy nie zakładaj, że domyślny kolor tekstu to czarny, a kolor tła - biały!
2. W tym samym miejscu usuwamy wszystkie marginesy strony. Analogicznie postępujemy z marginesem wewnętrznym, aby zabezpieczyć się przed możliwą odmienną interpretacją w niektórych przeglądarkach. Wyzerowanie marginesu jest konieczne, aby uzyskać maksymalną dostępną przestrzeń w poziomie - dla rozdzielczości 800x600 będzie to 780px. Te oraz poprzednie deklaracje są przypisane jednocześnie elementom html oraz body, z uwagi na różnice interpretacji elementu podstawowego (korzeń - ang. root) drzewa dokumentu w niektórych przeglądarkach (element podstawowy posiada określone domyślne marginesy strony, które chcemy usunąć).
3. Ustalamy odpowiednią szerokość szablonu, tzn. taką, aby zmieściła się w najniższej planowanej rozdzielczości ekranu - w tym przypadku 800x600. Musimy przewidzieć 20px miejsca dla suwaka do przewijania treści, dlatego ostatecznie, przy zerowych marginesach strony, ustalamy szerokość szablonu na 780px.
4. Dla bloku nagłówka po prostu przypisujemy odrębny kolor tła, aby był lepiej widoczny na załączonych przykładach.
5. Cała "magia" dzieje się dla bloku treści strony i menu nawigacyjnego. Normalnie wszystkie bloki szablonu były ułożone jeden pod drugim. Aby ułożyć wspomniane kolumny pionowo, użyliśmy własności float: left, wykorzystywanej zwykle przy oblewaniu elementów (np. ilustracji) tekstem. Kilka następujących po sobie bloków z określonym oblewaniem, ustawia się obok siebie - o ile mieszczą się w dostępnej szerokości ich rodzica [zobacz: Szerokość i marginesy automatycznie - "Elementy z oblewaniem (float) nie-zastępowane" - punkt nr 5]. Suma szerokość wszystkich kolumn nie może przekroczyć 780px, ponieważ jako najmniejszą dopuszczalną rozdzielczość ekranu założyliśmy 800x600 (od wartości 800 odejmujemy szerokość pionowego suwaka).
6. Oblewane bloki kolumn posiadają również własność przepełnienia overflow: hidden. Jest to zabezpieczenie na wypadek, gdyby w ich zawartości znalazły się elementy szersze niż mogą pomieścić. W takim przypadku, w zależności od przeglądarki, zbyt szerokie elementy mogłyby zachodzić na sąsiednie bloki, zasłaniając ich zawartość albo blok taki mógłby zostać przeniesiony poniżej wcześniejszego, co zupełnie zepsułoby szablon. Własność przepełnienia po prostu obetnie niemieszczący się element - z dwojga złego lepsze chyba to, niż zupełne "rozjechanie" strony.
7. Stopce serwisu nadajemy własność przylegania clear: both, ponieważ bez tego szablon mógłby wyglądać następująco:
   Nagłówek szablonu

   Menu nawigacyjne

   Treść strony

   Stopka serwisu
   Efekt ten wynika z ustalonego oblewania (float: left) dla środkowych bloków szablonu, które próbują wyświetlić się obok (w tym przypadku po lewej stronie) pozostałych elementów, które w kodzie źródłowym są umieszczone pod nimi. Deklaracja width: 100% została dodana tylko ze względu na możliwy błąd w bardzo starych przeglądarkach, który objawiał się wyświetleniem koloru tła stopki od dolnych krawędzi ustawionych powyżej oblewanych bloków, a tekstu stopki prawidłowo - poniżej nich.

Trzy kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Konstrukcja analogiczna jak poprzednio z tym wyjątkiem, że kolumnę dodatkowych informacji musieliśmy przesunąć na prawą stronę, używając float: right.

Spróbujmy teraz przestawić kolejność kolumn, bez ingerencji w ustalony wcześniej kod źródłowy HTML:

Dwie kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 630px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Tak, to tylko jedna zmieniona linijka w arkuszu stylów CSS! Pomyśl, ile plików trzeba by modyfikować, jeśli szablon byłby oparty o tabelki. Kolumna menu ustawiła się po prawej stronie, ponieważ tym razem została jej przypisana własność float: right, co wymusiło ułożenie po prawej stronie innych elementów - w tym przypadku bloku treści z ustalonym float: left.

Trzy kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

Normalna kolejność wyświetlania elementów byłaby taka, jak bez żadnej stylizacji, czyli: menu nawigacyjne, dodatkowe informacje, treść. Rozpoczynamy przestawianie:

1. Kolumna menu nawigacyjnego powinna się znaleźć po prawej stronie, a w kodzie źródłowym znajduje się na początku, zatem zostaje jej przypisana własność float: right.
2. Kolumna dodatkowych informacji może pozostać w kolejności wynikającej z ułożenia w kodzie źródłowym, a zatem przypisujemy float: left.
3. Kolejność bloku treści strony, wynikająca z naturalnego ułożenia, również jest odpowiednia (powinien się wyświetlić po kolumnie dodatkowych informacji, która w kodzie źródłowym poprzedza blok treści), a zatem - float: left.

Możliwe są również inne konfiguracje - np. czasami spotykane ułożenie obu wąskich kolumn po lewej, a treści po prawej stronie:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
}

#top {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}

#TRESC {
	width: 480px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	width: 100%;
	background-color: #888;
}

W tym przypadku naturalna kolejność wyświetlania bloków, wynikająca z ułożenia elementów w kodzie źródłowym strony, jest odpowiednia. Przypisanie własności float: left, miało jedynie na celu ustawienie kolumn obok siebie, a nie pod sobą. Natomiast nie wpływa to na ich kolejność.

Płynny szablon (ang. liquid layout) charakteryzuje się zmianą swoich poziomych proporcji przy zmianie rozmiaru okna przeglądarki lub rozdzielczości ekranu. Najczęściej w każdych warunkach zajmuje on całą dostępną szerokość w oknie. Jest on raczej rzadziej stosowany, ze względu na niemożliwe do przewidzenia ułożenie elementów treści. Poza tym tekst w zbyt długich linijkach zwykle gorzej się czyta, ponieważ trudniej przenieść wzrok z końca wiersza na początek następnego. Czasami jednak może być wygodny, np. kiedy zawiera jakieś szerokie elementy, które mogą nie zmieścić się w ustalonej szerokości dla stałego szablonu (czyli zwykle 780px minus szerokość kolumny menu i ewentualnie dodatkowych informacji).

W płynnych szablonach najczęściej tylko blok treści strony dopasowuje się do rozmiarów okna przeglądarki, a pozostałe kolumny zawsze pozostają stałe. Dla kolumny menu zmiana szerokości zwykle nie miałaby większego sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny od rozdzielczości ekranu, a w tym przypadku jest to mocno wskazane.

Cały czas jedynie stylizując niezmienny kod HTML przedstawiony na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone):

Dwie kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Wyjaśnienie:

1. Ustalamy kolor tła oraz tekstu dla całej strony oraz usuwamy marginesy, aby mieć większy obszar dostępny na nasz szablon.
2. Ustalamy stałą szerokość kolumny menu nawigacyjnego, aby nie rozszerzała się przy zmianie rozmiarów okna przeglądarki ani rozdzielczości ekranu. Menu nawigacyjne zwykle zawiera elementy o ustalonej szerokości, dlatego jego rozszerzanie mogłoby być niewskazane. Ustalenie oblewania (float: left) powoduje, że kolumna ustawia się po lewej stronie następnego bloku. Deklaracja pozycjonowania relatywnego (position: relative) została dodana tylko ze względu na możliwy błąd w bardzo starych przeglądarkach, który objawiał się znikaniem z ekranu oblewanego bloku menu nawigacyjnego.
3. Dla bloku treści strony tym razem nie ustalamy własności oblewania ani szerokości, dzięki czemu w miarę zmieniania rozmiarów okna przeglądarki lub rozdzielczości ekranu, szerokość tego bloku będzie się dopasowywać do nowych dostępnych rozmiarów, tak że szablon zajmie zawsze 100% szerokości okna. Na przykład przy zmaksymalizowanym oknie, w rozdzielczości 800x600 treść najprawdopodobniej przyjmie szerokość:
   800px - 20px - 150px = 630px,
   podczas gdy w rozdzielczości 1024x768:
   1024px - 20px - 150px = 854px.
4. Lewy margines bloku treści strony powinien wynosić dokładnie tyle samo co szerokość kolumny menu nawigacyjnego, ustawionej po lewej stronie. Nie spowoduje to jednak odsunięcia treści od kolumny menu o podaną wartość marginesu, ponieważ elementy oblewane (float) - w tym przypadku kolumna menu - są usuwane z normalnego biegu treści w dokumencie. Blok treści strony nie jest oblewany tak jak menu, zatem jego margines jest liczony od lewej krawędzi okna przeglądarki, a nie od prawej krawędzi kolumny menu. Margines ten jest konieczny, ponieważ bez niego, kiedy blok treści byłby wyższy od kolumny menu, dolna część tekstu znalazłaby się pod kolumną menu, przylegając do lewej krawędzi okna. Zatem margines przygotowuje miejsce na kolumnę menu, która została ustawiona dokładnie nad nim. Możliwy efekt bez lewego marginesu:
   Nagłówek szablonu

   Menu nawigacyjne

   Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony... Treść strony...

   Stopka serwisu
5. Stopka serwisu posiada przypisaną wartość przylegania clear: both, ponieważ w przeciwnym razie mogłaby się ustawić obok kolumny menu nawigacyjnego, które jest oblewane:
   Nagłówek szablonu

   Menu nawigacyjne

   Treść strony

   Stopka serwisu

Trzy kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Sytuacja analogiczna jak poprzednio, jednak teraz musimy ustawić kolumnę dodatkowych informacji po prawej stronie treści strony (float: right), a co za tym idzie, blok treści posiada dodatkowy prawy margines o wartości równej szerokości prawej kolumny, czyli dodatkowych informacji.

Odwrotna kolejność:

Dwie kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Trzy kolumny:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: right;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 150px;
	margin-right: 150px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Jeszcze inne ustawienie:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#INFORMACJE {
	width: 150px;
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #ccc;
}

#TRESC {
	margin-left: 300px;
	background-color: #fff;
}

#STOPKA {
	clear: both;
	background-color: #888;
}

Wstęp

Nie powinno być chyba dla nikogo zaskoczeniem, że urządzenia mobilne (smartfony, tablety) są dzisiaj używane tak samo chętnie lub nawet częściej niż tradycyjne komputery stacjonarne czy laptopy. Cechą wspólną tego typu urządzeń zwykle jest mniejszy ekran. W końcu trochę dziwnie by wyglądało taszczenie pod pachą dwudziestocalowego "mobilnego" monitora do naszego smartfona ;-) Dla twórców stron internetowych oznacza to jedno: konieczne jest takie projektowanie serwisów, aby wyglądały dobrze, były czytelne i wygodne w użytkowaniu również na urządzeniach przenośnych. Jak to jednak zrobić? Istnieje kilka strategii.

Powiększenie strony

Pozornie najprostszym rozwiązaniem jest nic nie robić ;-) Nowoczesne urządzenia mobilne posiadają wbudowaną funkcję powiększania strony, z której użytkownik może skorzystać, jeśli tekst jest dla niego za mały, aby można go było wygodnie czytać. Problem w tym, że każdy kto choć raz był zmuszony skorzystać z tego rozwiązania wie, że jest ono szalenie niewygodne.

• Po powiększeniu strony zwykle trzeba wciąż przewijać ją na boki. Do tego niektóre przeglądarki mobilne nie posiadają funkcji automatycznego zawijania tekstu w długich linijkach, które nie mieszczą się na ekranie, co skrajnie utrudnia czytanie.
• Czasami sytuację poprawia obrócenie urządzenia do poziomej orientacji ekranu. Ale zwykle to również nie jest mile widziane - zwłaszcza przez użytkowników smartfonów, którzy nie lubią co chwilę żonglować swoim urządzeniem ;-)

Jeśli traktujesz poważnie użytkowników Twojej strony, nie zdawaj się na wbudowany w urządzenia mobilne mechanizm powiększania strony.

Skalowalny szablon

Wcześniej w tym rozdziale został opisany płynny szablon, który dynamicznie dopasowuje się do aktualnej szerokości okna przeglądarki. Jego modyfikacją mogłoby być ustalanie szerokości wszystkich bloków szablonu, a nawet rozmiaru tekstu i marginesów w jednostkach względnych długości - np. procentach, em lub rem. W takiej sytuacji cała strona automatycznie przeskalowałaby się tak, aby nigdy nie trzeba było jej przewijać w poziomie.

Do pewnego stopnia jest to dobre rozwiązania. Jednak w praktyce trudno się spodziewać, aby nawet tylko dwukolumnowy szablon bez problemu zmieścił się na wąskim ekranie smartfona i nadal tekst był wystarczająco czytelny.

Możesz stosować szablon skalowalny tylko w ograniczonym zakresie - np. kiedy Twoja strona składa się tylko z jednej kolumny.

Strona mobilna

Skoro urządzenia mobilne tak bardzo różnią się od tradycyjnych komputerów i laptopów, może warto przygotować dla nich zupełnie osobną wersję strony? Kiedyś był to właśnie podstawowy sposób tworzenia serwisów przeznaczonych dla urządzeń mobilnych.

Koncepcja pozornie jest bardzo prosta: przygotowujemy drugą wersję każdej podstrony w naszym serwisie, która będzie lepiej przystosowana do urządzeń mobilnych. Do najczęstszych tego typu zabiegów można zaliczyć:

• Usunięcie elementów strony, które mogą być mało przydatne użytkownikom mobilnym
• Przesunięcie kolumny menu na początek lub koniec treści bądź umieszczenie jej w otwieranym menu
• Dopasowanie rozmiaru czcionki
• Przygotowanie fizycznie pomniejszonych zdjęć i innych multimediów
• Zapewnienie większej przestrzeni wokół klikalnych elementów menu, tak aby łatwiej je było wskazać palcem na ekranie dotykowym urządzenia bez przypadkowej aktywacji sąsiednich elementów

Niestety problemem tego podejścia jest konieczność osobnego utrzymywania dwóch oddzielnych wersji strony. Za każdym razem kiedy będziemy chcieli wprowadzić coś nowego, trzeba to robić w dwóch miejscach. Nieco ułatwiają to skrypty wykonywane po stronie serwera - np. PHP. Jednak nawet w takim przypadku nie ustrzeżemy się od pewnych niedogodności:

• Użytkownik może przypadkowo trafić na wersję strony nieprzeznaczoną dla jego urządzenia.
• Co prawda dzięki np. wspomnianym już skryptom PHP możemy automatycznie wykryć typ urządzenia użytkownika, który odwiedza naszą stronę i dynamicznie wyświetlić mu odpowiednią jej wersję. Niestety taka detekcja również może być jednak obarczona błędami.
• Nie zawsze można jednoznacznie zaklasyfikować urządzenie do wersji mobilnej. Niektórzy użytkownicy tabletów z wystarczająco dużym ekranem mogą preferować wygląd strony przystosowany dla tradycyjnych komputerów.

Stosuj oddzielną mobilną wersję strony tylko w przypadku, kiedy ma ona oferować diametralnie różną funkcjonalność. W takiej sytuacji mocno zalecane jest również użycie skryptów po stronie serwera (np. PHP) wraz z automatyczną detekcją typu urządzenia.

Responsive Web Design (RWD)

I tym sposobem dochodzimy do metody tworzenia serwisów przystosowanych dla urządzeń mobilnych, która jest najpopularniejsza i zwykle daje zdecydowanie najlepsze rezultaty. Są to strony responsywne (ang. Responsive Web Design - w skrócie RWD).

Przede wszystkim musimy pogodzić się z tym, że wcale nie powinno nam chodzić o to, aby nasza strona wyglądała dokładnie tak samo na każdym urządzeniu. Nie można oczekiwać, że witryna przygotowana do wyświetlania na laptopie czy tradycyjnym komputerze z dużym monitorem będzie tak samo wygodna w odbiorze na małym ekranie smartfona. Strona nie ma wyglądać wszędzie tak samo, ale ma być tak samo wygodna i czytelna na każdym urządzeniu. Oznacza to, że jej wygląd zwykle powinien być diametralnie różny na urządzeniach z dużym ekranem wyposażonych w precyzyjne urządzenie wskazujące np. w postaci myszki komputerowej, a inaczej na małych urządzeniach mobilnych z ekranami dotykowymi. A taki właśnie efekt pozwalają uzyskać Kaskadowe Arkusze Stylów (CSS). Można to zrobić w trzech prostych krokach opisanych poniżej.

Skalowanie

Aby stworzyć stronę responsywną, najpierw musimy wstawić w nagłówku dokumentu, tzn. w dowolnym miejscu pomiędzy znacznikami <head> i </head>, następuje polecenie:

<meta name="viewport" content="width=device-width, initial-scale=1">

Oznacza ono, że przeglądarka mobilna nie musi pomniejszać strony, ponieważ to my zadbamy o to, aby strona była wygodna w odbiorze na urządzeniach przenośnych [zobacz: Skalowanie].

Responsywne obrazki

Następnie powinniśmy zadbać, aby w miarę możliwości wszystkie ilustracje na stronie były responsywne - zobacz: Responsywny obrazek.

Punkty przeskoku

Na koniec pozostaje użycie zapytań mediów w celu zdefiniowania dynamicznych zmian w szablonie strony w zależności od dostępnej szerokości ekranu urządzenia. Zauważmy, że w wielu przypadkach zwykle nie ma potrzeby, aby szablon naszej strony idealnie dopasowywał się do maksymalnej poziomej przestrzeni na ekranie. Na dużych monitorach panoramicznych mogłoby to być nawet niekorzystne, ponieważ tekst w bardzo długich linijkach trudno się czyta. Z tego powodu na wersjach strony przeznaczonych dla tradycyjnych komputerów często można spotkać się z dodatkowymi marginesami po lewej i prawej stronie. Natomiast urządzenia mobilne również często różnią się oferowaną rozdzielczością ekranu i stąd zapewne jedna wersja mobilna nie będzie optymalnym rozwiązaniem.

Zamiast tego wyznacza się tzw. punkty przeskoku (ang. breakpoints). Punkty przeskoku to lista najczęściej używanych szerokości ekranu, przy których zachodzą istotne zmiany w szablonie naszej strony. Istotną zmianą może być na przykład:

• Zmiana typu szablonu ze stałego (który zwykle może być bardziej przydatny na dużych ekranach panoramicznych) na płynny (laptopy i większe tablety)
• Ułożenie menu i treści w jednej kolumnie (smartfony i mniejsze tablety bądź czytniki e-booków) oraz być może zupełne ukrycie niektórych elementów strony, które mogą być mało przydatne na takich urządzeniach

Spróbujmy zebrać całą wiedzę nabytą w tym rozdziale i stworzyć najprostszy szablon responsywny korzystający z niezmiennego kodu HTML przedstawionego na wstępie.

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	background-color: #ccc;
}

#TRESC {
	background-color: #fff;
}

#STOPKA {
	background-color: #888;
}

@media only all and (min-width: 800px) {
	#MENU {
		width: 150px;
		float: left;
		overflow: hidden;
		position: relative;
	}

	#TRESC {
		margin-left: 150px;
	}

	#STOPKA {
		clear: both;
	}
}

@media only all and (min-width: 1280px) {
	html, body {
		text-align: center;
	}

	#top {
		width: 1260px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#MENU {
		width: 300px;
	}

	#TRESC {
		width: 960px;
		float: left;
		overflow: hidden;
		margin-left: 0;
	}

	#STOPKA {
		width: 100%;
	}
}

Wyjaśnienie:

1. Na początku powyższego arkusza stylów znajdują się podstawowe reguły przystosowujące stronę dla najmniejszych urządzeń mobilnych. Takie podejście nosi nazwę najpierw urządzenia mobilne (ang. mobile first). Wszystkie bloki na stronie - nagłówek, menu, treść i stopka - znajdują się w jednej kolumnie, której szerokość dynamicznie dopasowuje się do całej dostępnej poziomej przestrzeni okna przeglądarki. Dzięki temu strona powinna być czytelna nawet na najmniejszych ekranach.
2. Pierwszy punkt przeskoku zdefiniowaliśmy na wartości 800px. Jeśli użytkownik dysponuje urządzeniem z przynajmniej tak dużym ekranem, zaprezentujemy mu płynny szablon, w którym menu zostanie ustawione w kolumnie po lewej stronie, a treść dynamicznie dopasuje się do pozostałej dostępnej szerokości okna przeglądarki.
3. Drugi punkt przeskoku został zdefiniowany na wartości 1280px (jest to rozdzielczość HD ready). Od tego momentu nie chcemy już bardziej rozciągać szerokości layoutu, aby nie utrudniać użytkownikowi czytania tekstu w zbyt długich linijkach. W związku z tym użyliśmy stałego szablonu. Jeśli użytkownik będzie dysponował np. ekranem full HD, zobaczy dodatkowe marginesy po lewej i prawej stronie ekranu. Oprócz tego poszerzyliśmy kolumnę menu do 300px, ponieważ teraz mamy wystarczająco dużo miejsca, aby to zrobić.
   Zwróć uwagę, że definiując ten punkt przeskoku nie musieliśmy ustawiać wszystkich deklaracji od podstaw, ponieważ mogliśmy skorzystać tutaj z kaskadowości stylów. Trzeba było tylko wyzerować lewy margines dla bloku z treścią, ponieważ w przeciwnym razie przyjąłby on ustaloną wcześniej wartość 150px. Pozostałe deklaracje, zgodnie z zasadą kaskadowości, zostały przejęte z reguł stylów wpisanych wcześniej w arkuszu stylów.

Oczywiście w miarę potrzeby na swojej stronie możesz zastosować więcej punktów przeskoku. Na przykład być może już przy poziomej rozdzielczości ekranu równej 1080px można by było poszerzyć kolumnę menu do 200px. Pamiętaj jedynie, aby punkty przeskoku umieszczać w arkuszu stylów w taki sposób, aby były uporządkowane w kolejności rosnącej.

Nie musisz wszystkich zmian testować na różnych fizycznych urządzeniach mobilnych. Wystarczy że na komputerze przeciągniesz krawędź okna przeglądarki zmieniając w ten sposób jego szerokość. Strona dynamicznie dopasuje się do nowego rozmiaru - nawet bez potrzeby jej odświeżania.

Analogicznie można przystosować szablon dla trzech kolumn:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	background-color: #ccc;
}

#INFORMACJE {
	display: none;
}

#TRESC {
	background-color: #fff;
}

#STOPKA {
	background-color: #888;
}

@media only all and (min-width: 800px) {
	#MENU {
		width: 150px;
		float: left;
		overflow: hidden;
		position: relative;
	}

	#INFORMACJE {
		display: block;
		background-color: #ccc;
		width: 150px;
		float: right;
		overflow: hidden;
		position: relative;
	}

	#TRESC {
		margin-left: 150px;
		margin-right: 150px;
	}

	#STOPKA {
		clear: both;
	}
}

@media only all and (min-width: 1280px) {
	html, body {
		text-align: center;
	}

	#top {
		width: 1260px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#MENU, #INFORMACJE {
		width: 150px;
	}

	#TRESC {
		width: 960px;
		float: left;
		overflow: hidden;
		margin-left: 0;
		margin-right: 0;
	}

	#STOPKA {
		width: 100%;
	}
}

W tym przypadku w widoku dla najmniejszych urządzeń mobilnych w ogóle ukryliśmy kolumnę dodatkowych informacji zakładając, że zwykle znajdują się tam tylko poboczne treści, które w takiej sytuacji mogłyby zaciemniać odbiór głównej treści. Oczywiście jeśli na Twojej stronie kolumna z dodatkowymi informacjami zawiera istotne treści, które nawet na smartfornach nie powinny zostać pominięte, nie stosuj deklaracji "display: none".