Krótka historia responsywnego projektowania stron internetowych

Strony internetowe nie zawsze były tak elastyczne, jak obecnie. Dla współczesnych projektantów „responsywność” jest jednym z najważniejszych czynników definiujących dobry projekt. W końcu obsługujemy teraz wielu użytkowników, którzy często przeskakują między urządzeniami mobilnymi i stacjonarnymi o różnych rozmiarach ekranu.

Jednak przejście na projektowanie responsywne nie nastąpiło z dnia na dzień. Przez lata ulepszano koncepcję „responsywnego projektowania stron internetowych”, aby ostatecznie osiągnąć etap, na którym jesteśmy dzisiaj.

Dzisiaj przyjrzymy się bliżej historii responsywnego projektowania stron internetowych.

Gdzie zaczęło się projektowanie stron internetowych?
Kiedy powstały pierwsze strony internetowe, nikt nie martwił się o responsywność na różnych ekranach. Wszystkie witryny były wtedy projektowane tak, aby pasowały do ​​tych samych szablonów, a programiści nie spędzali dużo czasu na koncepcjach takich jak projekt, układ i typografia.

Nawet gdy zaczęło się szersze stosowanie technologii CSS, większość programistów nie musiała się zbytnio martwić dostosowywaniem treści do różnych rozmiarów ekranu. Jednak nadal znaleźli kilka sposobów pracy z różnymi rozmiarami monitora i przeglądarki.

UKŁADY PŁYNNE

Dwie główne opcje układu dostępne dla programistów w pierwszych dniach to układ o stałej szerokości lub układ płynny.

W przypadku układów o stałej szerokości projekt był bardziej podatny na błędy, jeśli monitor nie miał dokładnie takiej samej rozdzielczości, jak ta, na której zaprojektowano witrynę.

Alternatywnie, płynne układy, wymyślone przez Glenna Davisa, były uważane za jeden z pierwszych rewolucyjnych przykładów responsywnego projektowania stron internetowych.

Układy płynne mogą dostosowywać się do różnych rozdzielczości monitora i rozmiarów przeglądarki. Jednak treść może również przepełniać się, a tekst często pękał na mniejszych ekranach.

UKŁADY ZALEŻNE OD ROZDZIELCZOŚCI

W 2004 roku wpis na blogu autorstwa Camerona Adamsa wprowadził nową metodę używania JavaScriptu do zamiany arkuszy stylów w oparciu o rozmiar okna przeglądarki. Ta technika stała się znana jako „układy zależne od rozdzielczości”. Mimo że wymagały więcej pracy od programistów, układy zależne od rozdzielczości pozwalały na bardziej precyzyjną kontrolę nad projektem witryny.

Układ zależny od rozdzielczości w zasadzie funkcjonował jako wczesna wersja punktów przerwań CSS, zanim się pojawiły. Minusem było to, że programiści musieli tworzyć różne arkusze stylów dla każdej rozdzielczości docelowej i zapewnić działanie JavaScript we wszystkich przeglądarkach.

Przy tak wielu przeglądarkach do rozważenia w tamtym czasie, jQuery stało się coraz bardziej popularne jako sposób na odrzucenie różnic między opcjami przeglądarek.

POWSTANIE MOBILNYCH SUBDOMEN

Wprowadzenie koncepcji, takich jak projekty zależne od rozdzielczości, miało miejsce mniej więcej w tym samym czasie, gdy coraz więcej urządzeń mobilnych uzyskiwało dostęp do sieci internetowej. Firmy tworzyły przeglądarki do swoich smartfonów, a programiści również musieli to zacząć uwzględnić.

Chociaż subdomeny mobilne miały na celu oferowanie użytkownikom dokładnie tych samych funkcji, które otrzymaliby z witryny komputerowej na smartfonie, były to całkowicie oddzielne aplikacje.

Posiadanie subdomeny mobilnej, choć złożonej, przyniosło pewne korzyści, takie jak umożliwienie programistom kierowania SEO na urządzenia mobilne i przyciągnięcie większego ruchu do odmian witryn mobilnych. Jednak w tym samym czasie programiści musieli zarządzać dwoma odmianami tej samej witryny.

W czasach, gdy Apple dopiero wprowadził swojego pierwszego iPada, niezliczeni projektanci stron internetowych nadal polegali na tej staromodnej i niezgrabnej strategii umożliwiającej dostęp do strony internetowej na każdym urządzeniu. Pod koniec XXI wieku programiści często polegali na wielu sztuczkach, aby uczynić strony mobilne bardziej dostępnymi. Na przykład nawet proste układy wykorzystywały sztuczkę max-width: 100% dla elastycznych obrazów.

Na szczęście wszystko zaczęło się zmieniać, gdy Ethan Marcotte ukuł termin „Responsive Web Design” w A List Apart. Ten artykuł zwrócił uwagę na badania Johna Allsoppa dotyczące zasad architektury projektowania stron internetowych i utorował drogę dla witryn typu „wszystko w jednym”, które mogą działać równie dobrze na dowolnym urządzeniu.

Nowa era responsywnego projektowania stron internetowych
Artykuł Marcotte przedstawił trzy kluczowe elementy, które programiści powinni wziąć pod uwagę podczas tworzenia responsywnej strony internetowej: płynne siatki, zapytania o media i elastyczne obrazy.

PŁYNNE KRATKI

Koncepcja elastycznych siatek wprowadziła ideę, że strony internetowe powinny mieć możliwość przyjmowania różnych elastycznych kolumn, które rosną lub kurczą się w zależności od aktualnego rozmiaru ekranu.

Na urządzeniach mobilnych oznaczało to wprowadzenie jednej lub dwóch elastycznych kolumn treści, podczas gdy urządzenia stacjonarne zwykle wyświetlały więcej kolumn (ze względu na większą przestrzeń).

ELASTYCZNE OBRAZY

Elastyczne obrazy wprowadziły ideę, że podobnie jak treść, obrazy powinny być w stanie rosnąć lub kurczyć się wraz z płynną siatką, w której się znajdują. Jak wspomniano powyżej, wcześniej programiści używali sztuczki zwanej „maksymalną szerokością”, aby to umożliwić.

Jeśli trzymałeś obraz w kontenerze, mógł łatwo się przepełnić, szczególnie jeśli kontener był responsywny. Jeśli jednak ustawisz „max-width” na 100%, obraz po prostu zmieni rozmiar wraz z kontenerem nadrzędnym.