Jak technicznie powstaje strona WWW: HTML, CSS i szablony

Kiedy projekt graficzny jest gotowy, zaczyna się właściwa praca. Z obrazka powstaje strona, która działa tak samo na telefonie z 2019 roku jak na 32-calowym monitorze, którą da się obsłużyć klawiaturą i którą za dwa lata nadal będzie można zmienić. Jak to się dzieje, to żadna tajemnica. To trzy warstwy, budowane w tej kolejności.

Najpierw struktura, nie wygląd

Na początku jest HTML, a HTML opisuje znaczenie, nie wygląd. Tu jest nagłówek, tam lista, to jest nawigacja, to treść główna, to stopka. Czy nagłówek będzie na końcu duży i niebieski, w tej warstwie nie ma znaczenia.

Test jest prosty: proszę w myślach wyłączyć wygląd. Czy zostaje dokument, który da się przeczytać od góry do dołu i który jest sensownie podzielony? Jeśli tak, struktura jest w porządku. Dokładnie tak stronę czyta czytnik ekranu i mniej więcej tak czyta ją wyszukiwarka.

Kręgosłupem jest przy tym układ nagłówków. Strona ma dokładnie jeden poziom pierwszy – to, o czym jest. Pod nim poziomy drugie dla sekcji, pod nimi trzecie. Bez przeskoków, bez nagłówka, który jest nagłówkiem tylko dlatego, że ma wyglądać na większy.

Potem wygląd: własny CSS, Bootstrap czy Tailwind?

W sieci to pytanie omawia się z zapałem, a w praktyce ma ono trzeźwą odpowiedź: zależy, jak dużo strony ma być własne.

Framework jako rusztowanie

Bootstrap daje siatkę, odstępy i kilka gotowych elementów. Jego opinia nudnego wyglądu jest prawdziwa – ale dotyczy ustawień domyślnych, nie narzędzia. Kto przejmie dostarczony niebieski, dostarczone zaokrąglenia i dostarczoną czcionkę, dostanie stronę, która wygląda jak dziesięć tysięcy innych. Kto je wymieni, dostanie niezawodnie działającą siatkę, a na niej własne oblicze.

Tailwind idzie inną drogą: zamiast gotowych elementów – wiele małych klas, z których się je składa. To szybkie i bardzo elastyczne, ale przenosi wygląd do HTML. Dla zespołu z systemem projektowym to świetne rozwiązanie. Dla klienta, który później sam chce poprawić kafelek, to udręka.

Własny CSS

Wszystko, co sprawia, że strona jest niepowtarzalna, to w końcu własny CSS – niezależnie od tego, jakie rusztowanie jest pod spodem. Pytanie nie brzmi „framework czy nie”, tylko ile procent wyglądu pochodzi z ustawień domyślnych. Przy stronie, która ma wyglądać jak jej firma, jest to niewiele.

Design tokeny: pokrętła w jednym miejscu

Najważniejszy zabieg nie kosztuje prawie nic. Kolory, zaokrąglenia, rozmiary czcionek i odstępy nie są wpisywane w stu miejscach, tylko raz definiowane jako zmienne – a wszystko inne się do nich odwołuje.

:root {
  --brand:   #4f39c4;
  --radius:  10px;
  --ink:     #1b1f27;
}

.projekt-karte {
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

Różnicę widać przy pierwszej prośbie o zmianę. „Ten niebieski jest za ciemny” to wtedy jedna wartość, a nie przeszukiwanie czterdziestu plików. A druga strona dla innej firmy dostaje tę samą technikę z innymi wartościami – bez budowania czegokolwiek podwójnie.

Potem szablony

Strona składa się z części, które powtarzają się raz po raz: kafelek, nagłówek, formularz, kafelek z realizacją. Każda z tych części może istnieć w projekcie dokładnie raz.

Brzmi to oczywiście, a mimo to jest ciągle łamane. Kafelek projektu na stronie głównej i ten na stronie przeglądu wyglądają tak samo, więc buduje się go dwa razy – raz tu, raz tam. Pół roku później ktoś poprawia jeden z nich. Drugi zostaje, jaki był. Nikt tego nie zauważa, dopóki klient nie zapyta, dlaczego na jednej stronie zdjęcia są obcięte.

Dlatego szablon nie jest kwestią zamiłowania do porządku, tylko niezawodności: poprawka ma trafić wszędzie tam, gdzie dana część występuje.

Responsywność oznacza dziś coś innego niż dziesięć lat temu

Długo dopasowywano strony do szerokości ekranu: „poniżej 768 pikseli jedno pod drugim”. To było oczywiste – i jest to złe pytanie. O tym, ile miejsca ma dany element, nie decyduje bowiem ekran, tylko kolumna, w której stoi.

Kafelek w siatce trzykolumnowej na monitorze o szerokości 1600 pikseli ma około 360 pikseli szerokości. Jeśli pyta o okno, uważa się za ogromny i ustawia zdjęcie i tekst obok siebie – każde po 160 pikseli. Zdjęcie jest wtedy znaczkiem pocztowym, a kafelek dwa razy wyższy, niż trzeba.

Nowoczesne przeglądarki potrafią to zrobić odwrotnie, czyli poprawnie: element mierzy miejsce, które faktycznie ma, i na tej podstawie decyduje. Ten sam element stoi wtedy w szerokiej kolumnie obok siebie, a w wąskiej jeden pod drugim – bez wpisanej nigdzie szerokości ekranu, która za dwa lata przestanie się zgadzać.

Co z tego jest dla Państwa widoczne

Nic z tego nie widać na gotowej stronie. Zauważą to Państwo w trzech miejscach: strona ładuje się szybko, bo nie ciągnie za sobą niczego, czego nikt nie potrzebuje. Działa na urządzeniach, o których przy budowie nikt nie myślał. A zmiana to kwestia godzin, nie tygodni.

To jest cały cel tej staranności: nie piękno kodu źródłowego, tylko niska cena następnej zmiany.