Optymalne Pozycjonowanie Elementów na Stronach WWW: Od Tabel do CSS Grid i Flexbox
Przy tworzeniu strony internetowej istotne jest, by tworzona strona www była poprawnie wyświetlana niezależnie od urządzenia, na jakim ją oglądamy. W czasach gdy internet raczkował, nie było to wielkim problemem, ponieważ strony powstające w tamtym czasie były bardzo proste, a do ich wyświetlania wymagane było użycie komputera.
Obecnie jednak większość ludzi używa telefonu jako głównego urządzenia do przeglądania internetu. Przykładowo, w serwisie zatorturystyka.pl 73,5% wyświetleń z ostatnich 12 miesięcy pochodziło z urządzeń mobilnych (stan z dnia 26.03.2024). Musimy, więc dostosować stronę w taki sposób, by wyglądała dobrze zarówno na ekranie komputera jak i telefonu.
Jak dawniej wykonywano strony www?
Historycznie do pozycjonowania elementów na stronach używano tabel, co wydawało się dobrym rozwiązaniem, ponieważ tabele pozwalały na łatwe zdefiniowanie struktury strony. Powodowały one, jednak szereg problemów. Były to:
- Brak responsywności witryny — rozmiar i układ elementów tabeli był stały i nie było możliwości na jej łatwą edycję w zależności od rozmiaru okna przeglądarki.
- Zawiłość kodu — fakt, że strukturę tabeli definiuje się, poprzez określanie po kolei każdego wiersza i komórki tabeli sprawiał, że konieczne było, pisanie czasem nawet dużej ilości kodu by dany element znalazł się w pożądanym miejscu.
- Problemy z SEO — dla silnika wyszukiwania indeksującego stronę tabele nie zawierają żadnej informacji odnośnie struktury dokumentu, nie jest on w stanie łatwo stwierdzić, co jest np. nawigacją strony, a co tytułem.
Po odejściu od tabel najczęściej używaną techniką było używanie elementów blokowych takich jak <div> do definicji struktury. Pozwalają one na łatwy podział strony na logiczne sekcje bez używania dużej ilości nadmiarowego kodu. Pozycjonowanie tychże elementów na stronie odbywa się poprzez arkusze stylów CSS. Dzięki temu oddzielamy też kod definiujący zawartość strony od kodu definiującego jej wygląd, co ułatwia pisanie stron oraz pozytywnie wpływa na SEO.
Pozwalało to też na dużo większą dowolność w zakresie definiowania wyglądu strony. W momencie, w którym ten styl pisania stron był najbardziej znany, coraz większą popularność zdobywało przeglądanie internetu z poziomu telefonu. W tamtych czasach jednak dostosowanie strony pod wyświetlanie zarówno na komputerze jak i telefonie było wielkim wyzwaniem, zarówno ze względu na bardzo ograniczoną moc obliczeniową telefonów jak i odmienny, dużo mniejszy, rozmiar ekranu. Często stosowaną techniką było wówczas pisanie 2 osobnych wersji tej samej strony www, jednej na komputery stacjonarne a drugiej na urządzenia mobilne. Do dzisiaj można spotkać strony z przedrostkiem m. zamiast www. w domenie.
Jak obecnie tworzy się strony internetowe?
Współczesna ewolucja tworzenia stron internetowych przyniosła ze sobą kluczowe zmiany w podejściu do ich projektowania. Jednym z kroków milowych w tej dziedzinie było upowszechnienie się techniki pozycjonowania elementów za pomocą selektora @media. Pozwala on m.in. na definiowanie różnych stylów strony w zależności od rozmiaru okna przeglądarki. Nie bez znaczenia był również wzrost mocy obliczeniowej urządzeń mobilnych, co pozwala im na obsługę tego samego kodu co komputery PC.
Odejście od pozycjonowania elementów za pomocą tabel pozostawiło lukę w sposobie, w jaki bezproblemowo można przy ich użyciu rozmieszczać elementy. Rozwiązaniem tego problemu było, więc umożliwienie pozycjonowania elementów z poziomu arkuszy stylów z użyciem technologii CSS Grid w taki sposób jakby były to elementy tabeli. Zasadniczą przewagą używania tego podejścia od definiowania tabel w HTMLu jest możliwość dowolnej manipulacji strukturą utworzonej w ten sposób wirtualnej tabeli oraz dużo większa przejrzystość kodu.
Razem z selektorem @media otwiera nam to wiele możliwości w zakresie umiejscowienia elementów. Przykładowo: dla dużego rozmiaru okna elementy mogą być umieszczone obok siebie w jednym wierszu, ale gdy nie ma odpowiedniej ilości miejsca, mogą zostać przeniesione jeden pod drugi, albo jeden z elementów może zostać ukryty.
Kolejnym rozwiązaniem dodanym obok systemu grid, jest pozycjonowanie Flexbox. Wyświetlanie flex działa w sposób zbliżony do wyświetlania przy użyciu grid, z tą różnicą, że nie mamy podziału na wiersze / kolumny, a elementy potomne umieszczane są obok siebie w jednym wierszu albo kolumnie domyślnie wypełniając całą dostępną przestrzeń. Gdy w kontenerze typu flex znajduje się wiele elementów, możemy również aktywować zawijanie wierszy za pomocą atrybutu flex-wrap: wrap;. Pozwala to na uzyskanie efektu zbliżonego do ściany cegieł, gdzie poszczególne elementy są wyrównane w wierszach, ale nie mamy podziału na kolumny.
Zarówno elementy wyświetlane jako flex oraz grid mają szereg dodatkowych atrybutów pozwalających na łatwe zarządzanie sposobem wyświetlania ich zawartości. Możemy np. zarządzać wyrównaniem zawartości elementów w pionie i w poziomie, czy odstępami między poszczególnymi elementami.
Pozycjonowanie elementów na stronach internetowych
Odpowiednie pozycjonowanie elementów na stronach internetowych jest kluczowe dla zapewnienia doskonałego doświadczenia użytkownika. O ile używanie tabel było kiedyś popularnym rozwiązaniem, dziś należy zdecydowanie preferować CSS Grid i Flexbox. Te techniki nie tylko ułatwiają i przyspieszają tworzenie responsywnych stron, ale także pozwalają na bardziej zaawansowane i elastyczne projektowanie interfejsu użytkownika.
Pełną listę dostępnych atrybutów dla kontenera grid oraz flexbox można znaleźć tutaj:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Autor: Wiktor
