Układ strony internetowej można wykonać na dwa różne sposoby:
- Naprawiono układy szerokości - Są to układy, w których szerokość całej strony jest ustawiona na określoną wartość liczbową.
- Liquid Layouts - Są to układy, w których szerokość całej strony jest elastyczna w zależności od szerokości przeglądarki przeglądarki.
Istnieją dobre powody stosowania obu metod układania, ale bez zrozumienia zarówno względnych korzyści, jak i niedociągnięć każdej metody, nie można podjąć dobrej decyzji o tym, który z nich należy zastosować na stronie internetowej.
Naprawiono układy szerokości
Naprawione układy to układy, które zaczynają się od określonego rozmiaru, określonego przez projektanta stron internetowych. Pozostają na tej szerokości, niezależnie od wielkości okna przeglądarki, wyświetlającego stronę. Poprawione układy szerokości umożliwiają projektantowi bardziej bezpośrednią kontrolę nad tym, jak strona będzie wyglądać w większości sytuacji. Często są one preferowane przez projektantów z tłem do druku, ponieważ pozwalają projektantowi dokonać drobnych zmian w układzie i zachować spójność między przeglądarkami i komputerami.
Płynne układy
Układy płynne są układami opartymi na procentach bieżącego rozmiaru okna przeglądarki. Pasują do rozmiaru okna, nawet jeśli aktualna przeglądarka zmienia rozmiar przeglądarki podczas przeglądania witryny. Układy szerokości cieczy umożliwiają bardzo efektywne wykorzystanie przestrzeni zapewnianej przez dowolne okno przeglądarki internetowej lub rozdzielczość ekranu. Często są one preferowane przez projektantów, którzy mają dużo informacji, aby uzyskać jak najmniej miejsca, ponieważ pozostają one spójne pod względem wielkości i względnej masy strony, niezależnie od tego, kto przegląda stronę.
Co jest w Stake?
Metoda wybrana do projektowania witryny wpłynie nie tylko na Twój projekt, ale także na responsywność i adaptację witryny. W zależności od tego, co wybierzesz, wpłynie to na zdolność czytelników do skanowania tekstu, znajdowania tego, czego szuka, a czasem nawet korzystania z witryny. Co więcej, styl układu wpłynie na twoje wysiłki związane z marketingiem Twojej strony internetowej poprzez branding, dostępność nieruchomości i estetykę Twojej witryny.
Korzyści z układów 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.
- Naprawione elementy szerokości, takie jak obrazy, nie będą przytłaczały tekstu na mniejszych monitorach, ponieważ szerokość całej strony będzie zawierała te elementy.
- Na długość skanowania nie mają wpływu duże fragmenty tekstu, niezależnie od szerokości przeglądarki internetowej.
Zalety płynnych układów
- Układ szerokości cieczy rozszerza się i kontrakty wypełniają dostępną przestrzeń.
- Wykorzystywane są wszystkie dostępne nieruchomości, pozwalające projektantowi wyświetlać więcej treści na większych monitorach, ale nadal są możliwe na mniejszych wyświetlaczach.
- Płynne układy zapewniają spójność w relatywnych szerokościach, dzięki czemu strona może reagować bardziej dynamicznie na nałożone przez klienta ograniczenia, takie jak większe rozmiary czcionek.
Wady układów o stałej szerokości
- Poprawione układy szerokości mogą powodować przewijanie w poziomie w mniejszych oknach przeglądarki. A większość ludzi nie lubi przewijać w poziomie.
- Mogą również powodować duże rozległe odstępy w większych monitorach, co powoduje dużo niewykorzystanego miejsca i przewija się w pionie, w przeciwnym razie może być konieczne.
- Poprawione układy szerokości bardzo dobrze nie obsługują zmian wprowadzanych przez klientów do rozmiarów czcionek. W przypadku niewielkiego zwiększenia rozmiaru czcionki mogą być w porządku, ale w przypadku większych wzrostów układ może zostać naruszony.
Wady Liquid Layouts
- Płynne układy pozwalają na bardzo małą precyzyjną kontrolę nad szerokością różnych elementów strony.
- Mogą one powodować, że kolumny tekstu są albo zbyt szerokie, by wygodnie skanować, albo w mniejszych przeglądarkach zbyt małych, aby słowa mogły się wyraźnie wyświetlać.
- Układy płynów mogą mieć problemy, gdy element o stałej szerokości, taki jak obraz, zostanie umieszczony wewnątrz kolumny cieczy. Jeśli kolumna jest renderowana bez wystarczającej ilości miejsca na obraz, niektóre przeglądarki zwiększą szerokość kolumny, bez względu na instrukcje projektanta, podczas gdy inne przeglądarki spowodują nakładanie się tekstu i obrazów w celu uzyskania prawidłowych wartości procentowych.
Wniosek
Wiele witryn, które zawierają dużo informacji, które trzeba przekazać w jak najmniejszej ilości miejsca, będzie działało dobrze z płynnym układem. To pozwala im korzystać ze wszystkich nieruchomości, które zapewniają większe monitory, a jednocześnie nie zwierają mniejszych monitorów.
Witryny, które wymagają precyzyjnej kontroli nad wyglądem stron w każdej sytuacji, powinny dobrze się posługiwać układem o stałej szerokości. Zapewnia to większą pewność, że branding Twojej strony internetowej jest spójny i przejrzysty niezależnie od monitora wielkości, na którym jest oglądany.
Preferencje układu
Wielu preferuje podejście mieszane. Nie lubią używać płynnych układów dla dużych bloków tekstu, ponieważ mogą sprawić, że tekst stanie się nieczytelny na małym monitorze lub nie będzie można go odczytać na dużym monitorze. Dlatego mają one na celu ustawienie głównych kolumn stron o stałej szerokości, ale sprawiają, że nagłówki, stopki i kolumny boczne są bardziej elastyczne, aby zajmować pozostałe nieruchomości i nie tracić możliwości większych przeglądarek.
Niektóre witryny używają skryptów do określania wielkości okna przeglądarki, a następnie odpowiednio zmieniają elementy wyświetlania. Na przykład, jeśli otworzysz taką witrynę w bardzo szerokim oknie, możesz uzyskać dodatkową kolumnę linków po lewej stronie, której klienci z mniejszymi monitorami mogą nie widzieć. Zawijanie tekstu wokół reklamy zależy również od szerokości okna przeglądarki. Jeśli jest wystarczająco szeroka, strona będzie otaczać tekst, 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 wykorzystania większych ekranów bez wpływu na wyświetlanie na mniejszych ekranach.
