Wprowadzenie

Już od samego początku sieć World Wide Web została zaprojektowana z myślą o niezależności. Nie ma znaczenia, jaki masz sprzęt. Nie ma znaczenia, jaki system operacyjny jest zainstalowany na urządzeniu. Dopóki masz połączenie z internetem, masz dostęp do sieci World Wide Web.

W początkach internetu większość osób korzystała z komputerów. Obecnie internet jest dostępny na komputerach stacjonarnych, laptopach, tabletach, składanych telefonach, lodówkach i samochodach. Użytkownicy słusznie oczekują, że strony internetowe będą dobrze wyglądać na każdym urządzeniu. Pozwala to na elastyczne projektowanie stron.

Elastyczne projektowanie stron nie jest pierwszym podejściem do projektowania stron. Na początku projektowania responsywnego projektanci stron internetowych i programiści wypróbowali wiele różnych technik.

Konstrukcja o stałej szerokości

Na początku lat 90., gdy internet stał się po raz pierwszy popularny, Wymiary większości monitorów wynosiły 640 pikseli szerokości i 480 pikseli wysokości. Były to wypukłe rury katodowe, ale nie do tych z płaskim kryształem.

W początkach projektowania witryn że można było bez obaw projektować strony internetowe o szerokości 640 pikseli. Chociaż inne technologie, takie jak telefony i aparaty, stały się miniaturą, Ekrany stały się większe (a czasem też bardziej płaskie). Przedtem większość ekranów miała wymiary 800 x 600 pikseli. Projekty stron internetowych odpowiednio się zmieniły. Projektanci i deweloperzy zaczęli zakładać, że bezpieczne jest domyślne 800 pikseli.

Potem ekrany znowu się powiększyły. Format 1024 x 768 został ustawiony jako domyślny. To jak wyścig zbrojeń między projektantów stron internetowych i producentami sprzętu.

​​

Może to być 640, 800, 1024 piksele, wybór konkretnej szerokości, który zostanie zaprojektowany, nazywa się projektowaniem o stałej szerokości.

Jeśli określisz stałą szerokość układu, układ będzie wyglądał dobrze tylko przy tej szerokości. Jeśli użytkownik witryny ma ekran szerszy niż wybrana przez Ciebie szerokość, na ekranie zostanie zmarnowane miejsce. Zawartość stron możesz wyśrodkować, by bardziej równomiernie ją rozłożyć (zamiast pustego miejsca po jednej stronie), ale i tak nie wykorzystasz w pełni dostępnego miejsca.

I analogicznie, jeśli użytkownik przychodzi z ekranem węższym niż wybrana przez Ciebie szerokość, więc jej zawartość nie mieści się poziomo. Przeglądarka generuje pasek indeksowania – poziomy odpowiednik paska przewijania – a użytkownik musi przesunąć całą stronę w lewo i w prawo, aby zobaczyć całą zawartość.

Płynne układy

Większość grafików stosowała układy o stałej szerokości, ale niektórzy zdecydowali się nadać im elastyczny wygląd. Zamiast stosować stałe szerokości układów, możesz utworzyć układ elastyczny, wykorzystując wartości procentowe szerokości kolumn. Te projekty sprawdzają się w większej liczbie sytuacji niż układy o stałej szerokości, które wyglądają dobrze tylko w jednym określonym rozmiarze.

Nazywamy je płynnymi układami. Choć układ płynny będzie wyglądać dobrze na szerokich zakresach szerokości, w skrajnych okolicznościach zacznie się pogarszać. Na szerokim ekranie układ wygląda na rozciągnięty. Na wąskim ekranie układ wygląda na ściśnięty. Oba scenariusze nie są idealnym rozwiązaniem.

Możesz ograniczyć te problemy, używając elementów min-width i max-width w układzie. Jednak w przypadku rozmiaru poniżej minimalnej szerokości lub większej od maksymalnej szerokości pojawiają się te same problemy z układem o stałej szerokości. Na szerokim ekranie niewykorzystane miejsce zostało zmarnowane. Aby zobaczyć wszystkie elementy na wąskim ekranie, użytkownik musiałby przesuwać całą stronę w lewo i w prawo.

Słowo płynny to tylko jedno z terminów opisujących ten rodzaj układu. Takie projekty były też nazywane układami płynnymi lub elastycznymi. Terminologia była równie płynna jak technika.

Małe ekrany

W XXI wieku internet wciąż się rozrastał. Podobnie jak monitory. Pojawiły się jednak nowe ekrany, które były mniejsze niż jakikolwiek komputer stacjonarny. Wraz z pojawieniem się telefonów komórkowych z w pełni funkcjonalnymi przeglądarkami projektanci stali przed dylematem. Co może zrobić, aby jego produkty dobrze wyglądały zarówno na komputerze, jak i na telefonie komórkowym? Firma szukała sposobu na dostosowanie stylu treści do ekranów o szerokości do 240 pikseli i szerokości tysięcy pikseli.

Osobne witryny

Jedną z opcji jest utworzenie oddzielnej subdomeny dla użytkowników urządzeń mobilnych. Musisz jednak utrzymywać 2 osobne bazy kodu i projekty. Aby przekierować użytkowników na urządzenia mobilne, sniffing klientów użytkownika. które mogą być zawodne i łatwe do podszywania się. Ze względu na ochronę prywatności Chrome wycofa swój ciąg znaków klienta użytkownika. Poza tym nie ma wyraźnej granicy między komórkowym a niemobilnym. Do której witryny wysyłasz tablety?

Adaptacyjne układy

Zamiast tworzyć oddzielne witryny w różnych subdomenach, możesz mieć jedną witrynę z 2 lub 3 układami o stałej szerokości.

Gdy zapytania o media po raz pierwszy pojawiły się w CSS, umożliwiły udoskonalenie układów. Wielu programistów chciało jednak tworzyć układy o stałej szerokości. Jedna z technik wymagała przełączania się między kilkoma układami o stałej szerokości reklam o określonej szerokości. Niektórzy nazywają to adaptacją.

Projektowanie adaptacyjne pozwalało projektantom tworzyć układy, które wyglądały dobrze w kilku różnych rozmiarach, ale nie wyglądały dobrze przy różnych rozmiarach. Problem nadmiarowej przestrzeni nadal występował, ale nie był tak poważny, jak w układzie o stałej szerokości.

Korzystając z zapytań o media CSS, możesz wyświetlać użytkownikom układ najbliższy szerokości przeglądarki. Jednak ze względu na różnorodność rozmiarów urządzeń istnieje ryzyko, że układ będzie wyglądał mniej niż idealny dla większości użytkowników.

Elastyczne projektowanie witryn

Jeśli układy adaptacyjne to połączenie zapytań o media i układów o stałej szerokości, elastyczne projektowanie witryn to połączenie zapytań o multimedia i układów płynnych.

Termin został wymyślony przez Ethana Marcotte'a w artykułu w serii „A List Apart” w 2010 r.

Eryk określił 3 kryteria projektowania responsywnego:

1. Płynne siatki
2. Ciecz
3. Zapytania o multimedia

Układ i obrazy w elastycznej witrynie będą dobrze wyglądać na każdym urządzeniu. Wystąpił jednak jeden problem.

Element meta dla viewport

Przeglądarki w telefonach komórkowych musiały obsługiwać witryny o stałej szerokości ekranu, dostosowane do szerszych ekranów. Domyślnie przeglądarki mobilne zakładają, że szerokość 980 pikseli jest szerokością planowaną przez użytkowników (i była ona nieprawdziwa). Nawet w układzie płynnym przeglądarka zastosuje szerokość 980 pikseli, a potem skaluje renderowaną stronę internetową w dół do rzeczywistej szerokości ekranu.

Jeśli korzystasz z elastycznego projektowania stron, musisz poinformować przeglądarkę, by nie skalowała się w taki sposób. Aby to zrobić, użyj elementu meta w tagu head tej strony:

<meta name="viewport" content="width=device-width, initial-scale=1">

Dostępne są 2 wartości rozdzielone przecinkami. Pierwsza to width=device-width. Dzięki temu przeglądarka powinna założyć, że szerokość strony internetowej jest taka sama jak szerokość urządzenia (zamiast zakładać, że szerokość witryny wynosi 980 pikseli). Druga wartość to initial-scale=1. Informuje przeglądarkę, ile ma zostać zrobione skalowanie. Elastyczne projektowanie stron pozwala zapomnieć o skalowaniu przez przeglądarkę.

Dzięki temu elementowi meta Twoje strony internetowe są gotowe do responsywności.

Nowoczesne elastyczne projektowanie stron

Obecnie jesteśmy w stanie tworzyć witryny elastyczne, które wykraczają znacznie poza rozmiary widocznego obszaru. Funkcje multimedialne dają deweloperom dostęp do preferencji użytkownika i pozwalają dostosować środowisko. Dzięki kwerendom kontenera możesz udostępniać komponentom własne informacje elastyczne. Element picture umożliwia projektantom podejmowanie decyzji dotyczących kierunków artystycznych na podstawie proporcji ekranu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elastycznym projektowaniu witryn

Projektowanie responsywne to ciekawy świat pełen możliwości. W dalszej części tego kursu poznasz te technologie i dowiesz się, jak ich używać do tworzenia do tworzenia elastycznych witryn dla każdego.