Sieć WWW nigdy nie została zaprojektowana, by przypominać gazetę. Kiedy Tim Berners-Lee wizualizował swój system połączonych hiperłączami dokumentów, myślał o pracach z fizyki i cytowaniach akademickich, a nie o migających banerach, notowaniach giełdowych czy oknach czatu. HTML, w swojej najczystszej, pierwotnej formie, był agnostyczny względem układu graficznego. Troszczył się o strukturę – nagłówki, akapity, listy – ale zupełnie nie dbał o to, gdzie konkretnie te piksele osiądą na ekranie monitora.

Jednak na przełomie tysiącleci sieć uległa transformacji. Przestała być jedynie repozytorium dokumentów; stała się miejscem docelowym. W Polsce ta zmiana ucieleśniła się pod postacią „Portalu".

Snapshot 2001

Zrzut WP.pl z 2001 roku, pełen tabelkowego układu

WP.pl w tabelkowym układzie z 2001 roku – reklamy, linki i ciasno upakowane treści.

Jeśli spojrzymy na migawkę strony Wirtualna Polska (WP.pl) z lutego 2001 roku, nie patrzymy jedynie na stronę internetową. Patrzymy na pole bitwy, na którym projektanci walczyli z ograniczeniami przeglądarek, próbując zaprowadzić porządek w chaosie. Ich bronią z wyboru była tabela HTML.

Siatka przed erą CSS Grid

Dzisiaj traktujemy układ strony (layout) jako coś oczywistego. Dysponujemy CSS Grid i Flexboxem, aby przesuwać elementy z matematyczną precyzją. Ale w 2001 roku kaskadowe arkusze stylów (CSS) były wciąż marzeniem, które przeglądarki takie jak Netscape 4 czy Internet Explorer 5 ledwie rozumiały, a często interpretowały w diametralnie różny sposób.

Aby zbudować serwis taki jak WP.pl – który aspirował do bycia stroną startową dla całego narodu – deweloperzy potrzebowali gęstości informacji. Potrzebowali lewej kolumny na nawigację („Katalog", „Poczta"), środkowej na wyszukiwarkę i newsy, oraz prawej na reklamy i pogodę. Potrzebowali pewności, że piksele pozostaną dokładnie tam, gdzie zostały postawione.

Rozwiązaniem stał się hack, który zdefiniował dekadę web designu: layout oparty na tabelach.

Znacznik <TABLE> został stworzony z myślą o danych tabelarycznych – liczbach, datach, arkuszach kalkulacyjnych. Jednak wczesna generacja webmasterów odkryła lukę w specyfikacji: jeśli ustawi się atrybut ramki na zero (border="0"), tabela staje się niewidzialnym rusztowaniem.

Labirynt kodu

WP.pl z 2001 roku była arcydziełem tego strukturalnego nadużycia. Gdybyśmy zajrzeli w kod źródłowy ówczesnej strony głównej, nie znaleźlibyśmy tam znaczników semantycznych opisujących treść. Znaleźlibyśmy labirynt znaczników <tr> (wiersz tabeli) i <td> (komórka tabeli), zagnieżdżonych jeden w drugim niczym matrioszki.

To była inżynieria wymuszona koniecznością. Aby uzyskać 10-pikselowy odstęp między sekcją „Wiadomości" a „Pasażem Handlowym", nie używano właściwości margin. Wstawiano przezroczysty obrazek o nazwie spacer.gif do komórki tabeli i nadawano mu sztywną szerokość.

Spójrzmy na strukturę nawigacji na górze strony. Użycie ramek (Frames) – kolejnego reliktu przeszłości – pozwalało utrzymać nagłówek w miejscu podczas przewijania. To rozwiązanie, choć funkcjonalne dla użytkownika końcowego, łamało podstawową zasadę jednolitości adresu URL i utrudniało indeksowanie treści.

Koszt sztywnej kontroli

To podejście zapewniało jedną rzecz, której brakowało wczesnej sieci: przewidywalność. Gwarantowało, że link do „Encyklopedii PWN" pojawi się dokładnie na górze, a chaotyczna mieszanka kategorii e-commerce („Biżuteria" obok „Telefonów") pozostanie zamknięta w swoich wyraźnych boksach.

Jednak ta kontrola miała wysoką cenę.

Kod był ciężki. Przeglądarka musiała pobrać całą strukturę tabeli, zanim mogła wyświetlić choćby jeden piksel treści. Na modemach dial-up, powszechnych w Polsce początku lat 2000., skutkowało to niesławnym „białym ekranem śmierci", podczas gdy silnik renderujący przeglądarki mozolnie obliczał geometrię tysięcy zagnieżdżonych komórek.

Co więcej, był to koszmar semantyczny. Dla robota indeksującego wyszukiwarki lub czytnika ekranu dla osób niewidomych, WP.pl nie była ustrukturyzowanym serwisem informacyjnym. Była po prostu bezznaczeniową siatką niepowiązanych fragmentów tekstu. Wizualny porządek maskował strukturalny nieład.

Migawka ambicji

Istnieje specyficzny urok w patrzeniu wstecz na WP.pl z tej epoki. Strona używała kapitalików („KATALOG", „ROZRYWKA"), by domagać się uwagi w świecie niskich rozdzielczości ekranowych. Była to próba przeniesienia układu drukowanej gazety na medium, które nie było na to gotowe.

Z perspektywy współczesnych standardów, projekt ten był nieefektywny, niedostępny i „brzydki". Ale był również triumfem inżynierii nad ograniczeniami.

💡 Lekcja dla Ciebie: Co Możemy Ukraść z Tabelkowej Architektury?

Deweloperzy Wirtualnej Polski nie używali tabel z niewiedzy. Używali ich, ponieważ mieli zadanie do wykonania: uporządkować informacje ze świata dla polskiego odbiorcy, używając narzędzi, które były fundamentalnie wadliwe. Zmusili sieć, by stała się tym, czym potrzebowali, aby była.

Co więc możemy przenieść z WP.pl z 2001 roku do nowoczesnego projektowania?

  • Precyzyjna Kontrola i Przewidywalność: Stare portale wymuszały maksymalną dyscyplinę w rozmieszczaniu treści. Lekcja: zanim zaczniesz pracować, stwórz bardzo sztywny wireframe. Wiedz dokładnie, gdzie ma stać każdy element. Dziś osiągniesz to, stosując CSS Grid i metodologie jak BEM (Block, Element, Modifier).

  • Modułowość i Grupowanie Treści: Tabela wymuszała traktowanie każdego bloku jako zamkniętej komórki. Lekcja: Dziś, zamiast pisać cały kod od zera, używaj modułów i komponentów (np. w React, Vue). Myśl jak komórka tabeli: ten komponent musi być niezależny i działać w dowolnym miejscu.

  • Rozwiązywanie Problemów Pomimo Ograniczeń: Najważniejsza lekcja: w technologii najważniejsze jest rozwiązywanie problemów, niezależnie od tego, czy masz do dyspozycji eleganckie narzędzia, czy tylko młotek i dłuto. Polski web zrodził się z potrzeby i kreatywności.

Od tamtego czasu przeszliśmy do semantycznego HTML5 i responsywnego designu. Porzuciliśmy layout tabelkowy i spacer.gif. Jednak patrząc na tę gęstą, zatłoczoną, dopasowaną co do piksela mozaikę z 2001 roku, musimy podziwiać czysty upór niezbędny do zbudowania imperium na tak kruchych fundamentach.

Czy nie masz wrażenia, że internet sprzed dwóch dekad to niemalże cywilizacja, która upadła, zostawiając po sobie fascynujące ruiny? Ja mam!

A teraz, kiedy już wiesz, dlaczego WP.pl wyglądała, jakby była zrobiona w Microsoft Wordzie, wskocz do naszej maszyny czasu!

👉 Sprawdź inne retrospektywy o ikonach polskiego internetu, jak o mistrzowskim UX strony Gadu-Gadu czy fenomenie Księgi Gości!

Linki