Sieć WWW od samego początku została zaprojektowana z myślą o niezależności. Nie ma znaczenia, jaki masz sprzęt. System operacyjny nie ma znaczenia. Jeśli masz połączenie z internetem, masz dostęp do sieci WWW.
W początkach internetu większość użytkowników korzystała z komputerów. Obecnie internet jest dostępny na komputerach stacjonarnych, laptopach, tabletach, składanych telefonach, lodówkach i samochodach. Użytkownicy oczekują, że strony internetowe będą dobrze wyglądać bez względu na to, jakich urządzeń używają. Jest to możliwe dzięki elastycznemu projektowaniu.
Projektowanie responsywne nie jest pierwszym podejściem do projektowania witryn. Na przestrzeni lat przed projektowaniem responsywnym projektanci i programiści stron internetowych wypróbowali wiele różnych technik.
Projekt o stałej szerokości
Na początku lat 90., gdy internet stał się po raz pierwszy popularny, większość monitorów miała wymiary 640 pikseli szerokości i 480 pikseli wysokości. Były to wypukłe progi promieni katodowych, inne niż płaskie wyświetlacze z płynnymi kryształami.
W początkach projektowania stron internetowych projektowanie stron o szerokości 640 pikseli było bezpiecznym pomysłem. Podczas gdy inne technologie, takie jak telefony i aparaty fotograficzne, miniaturyzowały się, ekrany powiększały się (a w końcu stały się płaskie). Kiedyś większość ekranów miała wymiary 800 x 600 pikseli. Projekty witryn odpowiednio się zmieniły. Projektanci i programiści zaczęli zakładać, że 800 pikseli to bezpieczne ustawienie.
Następnie ekrany znów stały się większe. Wartość domyślna to 1024 x 768. Wyglądało to jak wyścig ramion między projektantów stron internetowych a producentami sprzętu.
Niezależnie od tego, czy to 640, 800 czy 1024 piksele, wybór konkretnej szerokości projektu nazywany jest projektem o stałej szerokości.
Jeśli określisz stałą szerokość układu, będzie on wyglądał dobrze tylko przy tej konkretnej szerokości. Jeśli użytkownik witryny ma szerszy ekran niż wybrana przez Ciebie szerokość, stracisz miejsce na ekranie. Możesz wyśrodkować zawartość stron, aby bardziej równomiernie rozłożyć to miejsce (zamiast pozostawiać puste miejsce z jednej strony), ale nie w pełni wykorzystasz dostępną przestrzeń.
Jeśli natomiast użytkownik wyświetli stronę z ekranem węższym niż wybrana przez Ciebie szerokość, Twoje treści nie zmieszczą się w poziomie. 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ść projektantów używa układów o stałej szerokości, ale niektórzy decydują się na ich elastyczność. Zamiast korzystać z stałych szerokości układów, możesz stworzyć układ elastyczny, podając wartości procentowe szerokości kolumn. Takie projekty sprawdzają się w większej liczbie przypadków niż układ o stałej szerokości, który wygląda dobrze tylko w określonym rozmiarze.
Nazywano je układami płynnymi. Jednak chociaż układ płynny będzie dobrze wyglądać przy różnych szerokościach, zacznie się pogarszać w skrajnych okolicznościach. 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ą idealne.
Możesz rozwiązać te problemy, stosując w układzie komponenty min-width i max-width.
Jednak każdy rozmiar poniżej minimalnej lub powyżej maksymalnej szerokości powoduje te same problemy, co w przypadku układu o stałej szerokości.
Na szerokim ekranie traci się niewykorzystane miejsce.
Na wąskim ekranie użytkownik musiałby przesuwać całą stronę w lewo i w prawo, aby zobaczyć wszystko.
Słowo ciekły to tylko jedno z terminów opisujących ten układ. Tego rodzaju projekty były również nazywane układami płynnymi lub elastycznymi. Terminologia była równie płynna jak technika.
Małe ekrany
W XXI wieku sieć powiększała się i rozwijała. Podobnie jak monitory. Pojawiły się jednak nowe ekrany, które były mniejsze niż zwykłe komputery. Wraz z nadejściem telefonów komórkowych wyposażonych w w pełni funkcjonalne przeglądarki projektanci napotkali dylemat. Co może zrobić, aby ich projekty wyglądały dobrze zarówno na komputerze, jak i na telefonie komórkowym? Trzeba było dostosować styl treści do ekranów o szerokości 240 pikseli i szerokości tysięcy pikseli.
Oddzielne witryny
Jedną z możliwości jest utworzenie osobnej subdomeny dla użytkowników urządzeń mobilnych. Musisz jednak obsługiwać 2 osobne bazy kodu i projekty. Aby przekierowywać użytkowników korzystających z urządzeń mobilnych, musisz przeprowadzić wychwytywanie klientów użytkownika, które może być zawodne i łatwe do sfałszowania. Ze względu na ochronę prywatności Chrome będzie wycofywać swój ciąg klienta użytkownika. Nie ma też wyraźnej granicy między urządzeniami mobilnymi a niemobilnymi. Do której witryny wysyłasz informacje o tabletach?
Adaptacyjne układy
Zamiast tworzyć osobne 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 pojawiły się po raz pierwszy w CSS, otworzyła ona drzwi do bardziej elastycznych układów. Jednak wielu programistów nadal czuje się pewniej podczas tworzenia układów o stałej szerokości. Jedna z metod wymagała przełączania się między kilkoma układami o stałej szerokości, które mają określoną szerokość. Niektórzy nazywają to projektowaniem adaptacyjnym.
Projektowanie adaptacyjne pozwoliło projektantom tworzyć układy, które wyglądały dobrze w kilku różnych rozmiarach, ale nigdy nie wyglądały one dobrze w tych rozmiarach. Problem z nadmiarem miejsca nadal występował, ale nie był tak poważny, jak przy układzie o stałej szerokości.
Za pomocą zapytań o media CSS możesz wyświetlać użytkownikom układ najbardziej zbliżony do szerokości ich przeglądarki. Biorąc jednak pod uwagę różne rozmiary urządzeń, możliwe, że układ strony nie będzie idealny dla większości użytkowników.
Elastyczne projektowanie witryn
Jeśli układy adaptacyjne to połączenie zapytań o multimedia i układów o stałej szerokości, elastyczne projektowanie witryn to połączenie zapytań o multimedia i płynnych układów.
Termin ten został ukuty przez Ethana Marcotte w 2010 roku w artykule A List Apart.
Ethan określił 3 kryteria elastycznego projektowania stron:
- Siatki elastyczne
- Multimedia
- Zapytania o multimedia
Układ i obrazy elastycznej witryny będą wyglądały dobrze na każdym urządzeniu. Pojawił się jednak jeden problem.
Element meta dla: viewport
Przeglądarki na telefonach komórkowych miały do czynienia z witrynami zaprojektowanymi z układem o stałej szerokości dla szerszych ekranów. Domyślnie przeglądarki mobilne zakładały, że szerokość, na którą projektowali użytkownicy, to 980 pikseli (i nie mylili się). Nawet w przypadku układu płynnego przeglądarka zastosuje szerokość 980 pikseli, a potem powiększy renderowaną stronę do rzeczywistej szerokości ekranu.
Jeśli korzystasz z elastycznego projektowania, musisz poinformować przeglądarkę, by nie skalowało tego interfejsu.
Możesz to zrobić za pomocą elementu meta w elemencie head strony internetowej:
<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 może przyjąć, że szerokość witryny jest taka sama jak szerokość urządzenia (zamiast 980 pikseli).
Druga wartość to initial-scale=1.
Informuje ona przeglądarkę o zakresie skalowania.
Dzięki elastycznemu projektowi przeglądarka w ogóle się nie skaluje.
Gdy dodasz ten element meta, Twoje strony internetowe będą gotowe do responsywności.
Nowoczesne projektowanie responsywne
Obecnie możemy tworzyć witryny elastyczne, które są responsywne w znacznym stopniu niż rozmiar widocznego obszaru.
Funkcje multimedialne dają deweloperom dostęp do preferencji użytkownika i pozwalają na personalizację.
Zapytania dotyczące kontenerów umożliwiają komponentom posiadanie własnych elastycznych informacji.
Element picture umożliwia projektantom podejmowanie decyzji dotyczących kierunku artystycznego na podstawie proporcji obrazu.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę z zakresu elastycznego projektowania witryn
W 2021 roku warto projektować strony o stałej szerokości?
Przy jakich rozmiarach ekranu układy płynne mają problemy?
Trzy podstawowe kryteria projektowania responsywnego to:
Projektowanie responsywne to ekscytujący, stale powiększający się świat możliwości. W dalszej części tego kursu poznasz te technologie i dowiesz się, jak ich używać, aby tworzyć atrakcyjne i elastyczne strony internetowe dla każdego.