Układ strony internetowej stosuje jedno z dwóch różnych podejść:
- Układy o stałej szerokości: Są to układy, w których szerokość całej strony jest ustawiona za pomocą określonej wartości liczbowej.
- Płynne układy: są to układy, w których szerokość całej strony jest elastyczna w zależności od szerokości przeglądarki widza.
Istnieją dobre powody, aby korzystać z obu metod układu, ale bez zrozumienia obu względnych zalety i wady każdej metody, nie możesz podjąć dobrej decyzji, której użyć w swojej sieci strona.
Układy o stałej szerokości
Układy stałe to układy, które zaczynają się od określonego rozmiaru określonego przez projektanta stron internetowych. Zachowują tę szerokość, niezależnie od rozmiaru okna przeglądarki wyświetlającego stronę. Układy o stałej szerokości umożliwiają projektantowi bardziej bezpośrednią kontrolę nad wyglądem strony w większości sytuacji. Są one często preferowane przez projektantów z drukowanym tłem, ponieważ pozwalają projektantowi na drobne poprawki w układzie i pozostają spójne we wszystkich przeglądarkach i komputerach.
Płynne układy
Układy płynne to układy oparte na procentach rozmiaru bieżącego okna przeglądarki. Dopasowują się one do rozmiaru okna, nawet jeśli bieżąca przeglądarka zmienia rozmiar przeglądarki podczas przeglądania witryny. Układy płynnej szerokości umożliwiają efektywne wykorzystanie przestrzeni zapewnianej przez dowolne okno przeglądarki lub rozdzielczość ekranu. Często są preferowane przez projektantów, którzy mają dużo informacji, aby się z nimi zapoznać na tak małej przestrzeni, jak jest to możliwe, ponieważ pozostają one spójne pod względem rozmiaru i względnej wagi strony, niezależnie od tego, kto ogląda strona.
O co toczy się gra?
Twój projektowanie stron internetowych wpływa na twoje responsywność i adaptacyjność strony. W zależności od tego, co wybierzesz, zdolność czytelników do skanowania tekstu, znajdowania tego, czego szukają, a czasem nawet korzystania z Twojej witryny, może być ułatwiona lub utrudniona. Ogólna tożsamość marki Twojej witryny również może być zagrożona, zwłaszcza jeśli standardy Twojej marki są zgodne z modelem logicznym „najpierw wydruk”.
Zalety układów o stałej szerokości
W niektórych sytuacjach pomocny jest układ o stałej szerokości.
- Układ o stałej szerokości umożliwia projektantowi tworzenie stron, które będą wyglądać identycznie bez względu na to, kto na nie patrzy.
- Elementy o stałej szerokości, takie jak obrazy, nie przytłaczają tekstu na mniejszych monitorach, ponieważ szerokość całej strony będzie zawierać te elementy.
- Duże segmenty tekstu nie będą miały wpływu na długość skanowania, bez względu na szerokość przeglądarki.
Zalety płynnych układów
Płynny układ najlepiej sprawdza się w innych okolicznościach.
- Układ o szerokości cieczy rozszerza się i kurczy, aby wypełnić dostępną przestrzeń.
- Wykorzystywana jest cała dostępna nieruchomość, co pozwala projektantowi wyświetlać więcej treści na większych monitorach, ale nadal jest opłacalne na mniejszych wyświetlaczach.
- Układy płynne zapewniają spójność we względnych szerokościach, dzięki czemu strona reaguje bardziej dynamicznie na ograniczenia narzucone przez klienta, takie jak większe rozmiary czcionek.
Wady układów o stałej szerokości
Jednak stały format nie jest pozbawiony kosztów.
- Układy o stałej szerokości wymuszają przewijanie w poziomie w mniejszych oknach przeglądarki. Większość ludzi nie lubi przewijać w poziomie.
- Pozostawiają duże przestrzenie białej przestrzeni na większych monitorach, co skutkuje dużą niewykorzystaną przestrzenią i większym przewijaniem w pionie, niż mogłoby to być konieczne.
- Układy o stałej szerokości nie radzą sobie dobrze ze zmianami rozmiarów czcionek przez klientów. W przypadku niewielkich wzrostów rozmiaru czcionki mogą być w porządku, ale w przypadku większych wzrostów układ może ulec uszkodzeniu.
Wady płynnych układów
Również układy płynne nie są pozbawione wad.
- Układy płynne pozwalają na bardzo mało precyzyjną kontrolę nad szerokością różnych elementów strony.
- Mogą powodować kolumny tekstu, które są albo zbyt szerokie, aby wygodnie je zeskanować, albo w mniejszych przeglądarkach są zbyt małe, aby słowa były wyraźnie widoczne.
- Błąd układów płynnych, gdy element o stałej szerokości, taki jak obraz, jest umieszczony wewnątrz kolumny płynu. Jeśli kolumna jest renderowana bez wystarczającej ilości miejsca na obraz, niektóre przeglądarki zwiększą szerokość kolumny, lekceważenie instrukcji projektanta, podczas gdy inne przeglądarki wymuszają nakładanie się tekstu i obrazów, aby uzyskać poprawny procentach.
Preferencje układu i podejścia mieszane
Niektórzy projektanci wolą łączyć te koncepcje. Nie lubią używać płynnych układów dla dużych bloków tekstu, ponieważ ta struktura sprawia, że tekst jest nieczytelny na małym monitorze lub niemożliwy do zeskanowania na dużym. Dlatego mają tendencję do tworzenia głównych kolumn stron o stałej szerokości, ale tworzą nagłówki, stopki i strony kolumny bardziej elastyczne, aby zająć pozostałą nieruchomość i nie tracą pojemności większych przeglądarki.
Niektóre witryny używają skryptów, aby określić rozmiar okna przeglądarki, a następnie odpowiednio zmienić wyświetlane elementy. Na przykład, jeśli otworzysz taką witrynę w bardzo szerokim oknie, możesz otrzymać dodatkową kolumnę linków po lewej stronie, której odwiedzający z mniejszymi monitorami mogą nie widzieć. Ponadto zawijanie tekstu wokół reklam zależy od tego, jak szerokie jest okno przeglądarki. Jeśli jest wystarczająco szeroki, witryna owinie się wokół niego tekstem, w przeciwnym razie wyświetli tekst artykułu pod reklamą. Chociaż większość witryn nie wymaga takiego poziomu złożoności, pokazuje sposób na wykorzystanie większych ekranów bez wpływu na wyświetlanie na mniejszych ekranach.