Czy strony zawsze były responsywne i mobilne?
Strony internetowe na początku powstawania światowej sieci były bardzo proste w swojej konstrukcji.
Do zarządzania układem siatki (tzw. grid) wykorzystywano zwykle tabelki dzięki temu zawartość treści strony i poszczególne elementy jej konstrukcji utrzymywały proporcjonalne relacje stosunku do siebie, zwykle stosowano wartości procentowe, które formatowały szerokości poszczególnych kolumn siatki strony w procentowym odniesieniu do całkowitej szerokości okna przeglądarki, w zależności od dostępnej rozdzielczości monitora na którym wyświetlana miała zostać później strona internetowa. Z czasem jednak wraz ze wzrostem przepustowości łącz oraz rozwojem różnych formatów zapisywania grafiki, strony zaczęły stawać się bardziej lub mniej skomplikowane i przyozdabiane elementami graficznymi. Aby przyspieszyć ładowanie się graficznych elementów odpowiedzialnych za oprawę wizualną strony, w początkowym okresie stosowano cięcie dużych struktur graficznych na mniejsze elementy w postaci małych plików graficznych składanych w całość za pomocą umieszczania ich poszczególnych komórkach tabeli. To rozwiązanie jednak nie pozwalało na elastyczne dopasowywanie się oprawy do możliwie dostępnej globalnej szerokości całego wolnego okna przeglądarki. Stosowanie pełnoekranowych background`ów było również mocno ograniczone, ze względu na rozmiar i wagę plików graficznych, które były na tyle ciężkie, iż wręcz niemożliwe było ich relatywnie szybkie załadowanie się na stronie.
Z czasem modne stało się wykonywanie dynamicznych i efektownych wizualnie stron internetowych w technologii flash. Nie były to jednak jeszcze strony responsywne w pełnym tego słowa znaczeniu. Co prawda niektóre obiekty .swf zawierały pełną strukturę funkcjonalną strony internetowej wraz z działającym menu oraz content`em, i mogły być skalowane na 100 procent szerokości ekranu, jednak w przypadku rozdzielczości większych niż rozdzielczość natywna oryginalna plików graficznych użytych we flash`u, obrazy rozciągały się ponad ich oryginalną wielkość co powodowało utratę jakości, tzw. zoom uwidaczniał nadmiernie przeskalowane pixele, z których tworzone były pliki graficzne używane w prezentacji. W przypadku natomiast wyświetlania flash`owej strony na ekranach o dużo mniejszej rozdzielczości niż oryginalna rozdzielczość pliku .swf, cały obiekt zostawał skalowany w dół, przez co wszystkie jego komponenty takie jak sekcje z tekstem czy przyciski nawigacyjne stawały się zupełnie nieczytelne, poprzez wizualne "zgniecenie" do bardzo małych rozmiarów.
Pojawienie się na rynku urządzeń mobilnych kilka lat temu sprawiło, iż ludzie zaczęli posiadać przenośny dostęp do internetu, dzięki czemu powszechniejsze stało się odwiedzanie stron internetowych z tego typu urządzeń. Z racji tego, iż w początkowym okresie mobilnego internetu w polskich realiach, ceny transferu danych były relatywnie wysokie a sama prędkość internetu mobilnego pozostawiała dużo do życzenia, wiele liczących się na polskim rynku firm, portali czy też serwisów internetowych chcąc zagwarantować mobilny sposób przeglądania treści przez nich publikowanych, decydowało się na stworzenie typowo mobilnych wersji zawartości swoich domen. Zaczęły licznie powstawać lekkie mirrory stron, działające zwykle przy wykorzystaniu subdomen z przedrostkiem m.nazwadomeny. Mobilne wersje stron były praktycznie okrojone ze wszystkich ciężkich wagowo elementów takich jak ciężkie pliki graficzne o stosunkowo dużej rozdzielczości, ciężkie skrypty czy elementy dynamiczne i .swf. Typowe wersje mobile stron sprowadzały się w głównej mierze do prezentowania treści w formie tekstowej, często przy skromnym wsparciu styli css. Z czasem jednak operatorzy zaczęli oferować coraz to szerszemu gronu użytkowników mobilny internet o znacznie większej prędkości przesyłania danych. Ceny transferów danych zaczęły systematycznie spadać a w ofercie niektórych operatorów zniesiono limity transferu danych.
Dzięki temu internet posiadany w telefonach komórkowych zaczął być częściej stosowany przez użytkowników i stał się alternatywnym sposobem przeglądania sieci dla dotychczasowego rozwiązania, jakim było surfowanie po stronach przez urządzenia tradycyjne takie jak komputery stacjonarne czy laptopy, ciągle jednak korzystające ze stacjonarnych sposobów łączenia się z globalną siecią. Nie tylko sama prędkość dostępnego mobilnie internetu spowodowała taką popularyzację korzystania z przenośnych urządzeń. Do progresu przyczynił się również niewątpliwie szybki rozwój, spadek cen i ogólna dostępność samych urządzeń czyli sprzętu, z którego zaczęli korzystać użytkownicy. Klasyczne telefony komórkowe zostały wyparte poprzez wchodzące na rynek coraz to nowsze generacje smart-fonów. Wraz z rozwojem tego segmentu telefonii komórkowej, zaczęły być wdrażane coraz to nowe generacje samych systemów operacyjnych oraz aplikacji przeglądarek internetowych, które były wstanie poprawnie interpretować i wyświetlać wszystkie zasoby technologiczne którymi współcześnie posługuję się branża web.
Szybki internet, sprawnie interpretujące przeglądarki oraz urządzenia, które w szybki i sprawny sposób były w stanie wyświetlać zawartość serwisów, portali i zwykłych stron na swoich wyświetlaczach spowodowały, iż korzystanie z internetu za pomocą przenośnych urządzeń stało się bardziej podobne do klasycznego rozwiązania jakim było przeglądanie stacjonarne. Z racji tego, iż nowoczesne telefony oferują wyświetlacze o coraz to większych rozdzielczościach, naturalnym biegiem rzeczy jest fakt, iż użytkownicy chcieliby na swoich podręcznych urządzeniach przeglądać serwisy w sposób , który nie okrajałby ich nie tylko z pełnej funkcjonalności, ale również prezentował się w sposób pełny również w odniesieniu do kwestii wizualnych. Biorąc pod uwagę wszystkie wyżej wymienione fakty, designerzy oraz webdeveloperzy zaczęli zastanawiać się, jak pogodzić pełnowartościowość strony z ograniczeniami, które niesie za sobą szerokie zróżnicowanie rozdzielczości, którymi dysponują różne typy, rodzaje i modele telefonów komórkowych.
Wyjściem z sytuacji było powstanie i rozwój techniki RWD (Responsive Web Design). Responsywność to taka technika projektowania, konstruowania i pisania stron www, aby jej układ (wygląd i elementy struktury) automatycznie dostosowywał się to rozmiaru okna danego urządzenia, na którym zostaje wyświetlany. Tym sposobem wzrasta uniwersalność samego produktu jakim jest strona internetowa czy sklep internetowy, dzięki temu, iż czytelnie i poprawnie wyświetla się ona na każdym urządzeniu, niezależnie czy jest to smart-fon starszej generacji o stosunkowo niskiej rozdzielczości, tablet czy inne urządzenie. Pełna responsywaność powinna uwzględniać pełny zakres rozdzielczości, czyli od bardzo małych (ok 320px) aż po pełne fullHD (1920px) i więcej.
Responsywność stron, które w czasach obecnych zawierają wiele elementów, w tym elementów czysto funkcjonalnych takich jak wielopoziomowe listy nawigacyjne (zwane popularnie menu) czy też formularze, jest zatem wieloaspektowa. Sama obsługa responsywności odbywa się za pomocą tak zwanego media queries - czyli kodu, który ma na celu rozpoznać rozdzielczość danego urządzenia, po czym dobrać pod jego kątem odpowiednie klasy arkuszy styli - całe, bądź uwzględniające fragmentaryczne zmiany (w odniesieniu do formatowania pełnoekranowego) z których skorzysta przeglądarka aby w optymalny sposób sformatować wizualny (i strukturalny) układ strony pod kątem jak najkorzystniejszego, najczytelniejszego wyświetlenia się na danym urządzeniu. Zwykle stosuję się tak zwane progi przełączania (breakpoints), które opierają się na zakresach rozdzielczości najbardziej popularnych na rynku. Oczywiście na najniższym zakresie rozdzielczości, zagęszczenie progów przełączania będzie większe (przykładowo 640px, 480px, 320px i 256px) , gdyż im mniejszy zakres rozdzielczości, tym mniejszy margines tolerancji na wykorzystanie wolnej przestrzeni ekranu danego urządzenia.
Istnieją dwie głowne szkoły projektowania stron responsywnych. Pierwszą z nich jest zasada mobile first - czyli zaczyna się od oprogramowania struktury front-end danego projektu webowego na urządzenia mobilne w pierwszej kolejności. W późniejszych etapach dostosowuje się kod css tak aby pod większymi rozdzielczościami wprowadzić zmiany, które dostosują formatowanie się zawartości elementów struktury pod urządzenia o rozdzielczościach większych (tablety, laptopy i monitory desktop). Alternatywnym rozwiązaniem jest zasada desktop first. W myśl tej idei, wygląd strony czy aplikacji internetowej projektuje się wyjściowo w skali 1:1 pod rozdzielczość pełnoekranową (najczęściej fullHD). Następnymi etapami są analizy i modyfikacje progów przełączania i struktury arkuszy styli (css), które optymalizują sposób wyświetlania się elementów strony podczas stopniowego zawężania dostępnych zakresów rozdzielczości. Dodatkowo pod kątem czystej ergonomii i zasad na których opiera się korzystanie z urządzeń mobilnych, dostosowuje się elementy funkcjonalne pod katem obsługi dotykowej. Jak wiadomo, na urządzeniach takich jak telefon czy tablet nie dysponujemy żadnymi urządzeniami wskazującymi (takimi jak mysz w przypadku komputera).
Obsługa sprowadza się w głównej mierze do pionowego przewijania ekranu za pomocą palca, oraz nawigowania przy jego pomocy. Pod tym katem muszą ulec modyfikacji takie elementy jak obszary selekcji (menu) czy inne. W tym celu klasyczne sekcje nawigacyjne (horyzontalne menu etc.) zwykle przerabia się na rozwijalne w dół tzw. dropdown`y czyli rozwiązania wyjęte stricte z typowych aplikacji mobilnych. Wszystkie te operacje mają na celu takie dopracowanie kodu, aby zapewnić intuicyjną i prostą obsługę/nawigację, czytelność (brak konieczności używania tak zwanego pich to zoom czyli powiększania przy pomocy rozciągania zawartości strony dwoma palcami) , szybkośc dotarcia do interesujących użytkownika treści oraz graficznych elementów. W tym celu również coraz szerzej zaczyna być stosowana i popularyzowana ikonografia. Ikony zapewniają bardziej intuicyjną interpretację oznaczenia dynamicznych elementów strony oraz w przypadku wyświetlania na urządzeniach o małej przekątnej ekranu - są poprostu bardziej czytelne niż przyciski tekstowe. Z racji tego, iż wiele urządzeń nie wspiera już całkowicie technologii flash, bądź ich dostępność wymaga doinstalowywania dodatkowych zewnętrznych wtyczek - nowoczesne strony responsywne bazują obecnie głownie na technologii html5, css3 oraz skryptach js i pochodnych, których interpretacja wspierana jest przez wiodące przeglądarki na rynku urządzeń mobilnych.
