Adaptacyjny Web Design

Co warto wiedzieć o adaptatywnym tworzeniu stron www

Dobry przedsiębiorca umie dostrzec i wykorzystać okazję rynkową. Najlepsi przygotowują się do zmiany, jeszcze zanim ta w ogóle nastąpi. Nie chcesz pozostać w tyle za konkurencją? Lepiej trzymaj rękę na pulsie. We wpisie tym rzucimy nieco światła na enigmatyczną technologię, jaką jest adaptacyjny web design.

Mobilna rewolucja

To, że ruch sieciowy z urządzeń mobilnych przekroczył w 2016 roku ruch pochodzący z pozostałych urządzeń, jest faktem powszechnie znanym. Prognostycy i specjaliści od dawna zapowiadali coraz większe znaczenie internautów mobilnych dla właścicieli stron internetowych, nie każdy jednak był świadomy skali zachodzących zmian. A tempo wzrostu wcale nie zwalnia i niektórzy szacują, że pod koniec roku 2017 ruch mobilny sięgnie aż... 75% całego ruchu w sieci! Skala tego wzrostu wciąż jest trudna do oszacowania, jednak samo utrzymanie się tendencji wzrostowej jest pewne. Co to oznacza dla Twojego biznesu w sieci? Że zadbanie o wrażenia użytkowników mobilnych stanie się jeszcze ważniejsze niż dotąd!

Jedynym dylematem, jaki pozostaje do rozstrzygnięcia, jest to, w jaki sposób przygotujesz swoją stronę internetową, by sprostała oczekiwaniom klientów. Większość osób bez zastanowienia wybierze responsywną wersję strony internetowej, jednak mało kto zdaje sobie sprawę z tego, że istnieje alternatywa wobec responsywnego web designu. Drugą opcją jest adaptacyjny web design (zwany też adaptatywnym). Pierwsze słyszycie? We wpisie tym rzucimy nieco światła na tę nieco zapomnianą technologię przygotowywania stron internetowych, wskażemy na podobieństwa i różnice między podejściem adaptatywnym a responsywnym oraz wady i zalety obydwu rozwiązań. Wstęp zostawmy już jednak za sobą i zanurzmy się w świecie technologii internetowych.

Czym jest responsywne projektowanie stron

Responsywny Web Design

Osoby, które czytały nasze poprzednie wpisy na blogu, z pewnością kojarzą już, czym są responsywne strony internetowe. Ten fragment tekstu niech potraktują więc jako krótkie odświeżenie wiadomości.

Pojęcie "Responsive Web Design" zostało po raz pierwszy użyte przez Ethana Marcotte w jego książce zatytułowanej... "Responsive Web Design". Tłumaczenie najlepiej oddające istotę tego podejścia to "reagujący" web design. Otóż responsywne strony internetowe reagują na zmiany w szerokości przeglądarki, w której strona jest przeglądana, poprzez dostosowywanie rozmieszczenia i rozmiarów konkretnych elementów szablonu strony do ilości miejsca na ekranie, które jest do dyspozycji. Mówiąc najprościej, responsywne strony internetowe wyglądają jednakowo dobrze (o ile zostały dobrze przygotowane) we wszystkich przeglądarkach i na wszystkich urządzeniach.

Na czym polega adaptacyjne podejście do tworzenia stron

Adaptatywny Web Design

Termin "Adaptive Web Design" został z kolei zaproponowany przez Aaron Gustafsona w książce "Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement" na takie podejście do tworzenia stron internetowych, w którym przygotowuje się kilka różnych wersji strony dla wybranych rozdzielczości ekranu. Strona taka najpierw sprawdza, ile ma miejsca na ekranie do dyspozycji, by następnie wybrać najlepszą w danej sytuacji wersję strony do wyświetlenia internaucie. Jeżeli więc otworzymy stronę adaptatywną na komputerze stacjonarnym, to zostanie nam pokazana wersja najlepsza dla tego rodzaju komputera.

Główne różnice między adaptacyjnym a responsywnym Web Designem

Obydwa podejścia polegają na zmianie wyglądu strony internetowej, by dopasować ją do zmiany rozdzielczości urządzenia, na której jest przeglądana. Celem w obydwu przypadkach jest sprawienie, by strona wyglądała równie dobrze na wielu urządzeniach. Główna różnica polega na sposobie, w jakim cel ten jest osiągany. Design responsywny pozwala na płynne zmienianie się rozmiarów i rozmieszczenia elementów na stronie wraz ze zmianą rozdzielczości. Z kolei strona adaptatywna zmienia wygląd strony wyłącznie po osiągnięciu określonych przy jej projektowaniu rozdzielczości ekranu. Zmiany rozmiaru ekranu pomiędzy tymi punktami nie wpłyną na layout strony.

W przeciwieństwie do strony responsywnej, zmniejszanie i zwiększanie okna przeglądarki nie wpłynie więc na wygląd strony adaptacyjnej. Projektanci adaptacyjnych stron najczęściej decydują się na przygotowanie 6 wersji strony dla najpopularniejszych szerokości urządzeń, tj. 320, 480, 760, 960, 1200 i 1600 pikseli.

Druga różnica jest taka, że elementy responsywnej strony mają najczęściej wymiary określone w procentach aktualnej szerokości przeglądarki. Innymi słowy, wraz ze zmianą wymiarów przeglądarki będzie zachodzić płynna zmiana wymiarów elementów. Będą się one stopniowo powiększać lub maleć. Z kolei podobne działanie na stronie adaptatywnej nie da żadnych efektów. Różnice widać będzie tylko po osiągnięciu wybranych wcześniej rozdzielczości, dla których przygotowano odmienne wersje strony.

Zalety i wady podejścia responsywnego

Zalety responsywnej strony

Projektowanie responsywne jest zazwyczaj trudniejsze i wymaga większej ilości pracy. Zdecydowanie łatwiej jest stworzyć kilka wersji strony, które będą działać dla konkretnych rozdzielczości (design adaptatywny), niż jedną, uniwersalną stronę działającą równie dobrze w każdym przypadku. Sytuacja ta obraca się jednak o 180 stopni jeśli chodzi o utrzymanie i konserwację witryny. W końcu zajmować się trzeba tu tylko jedną wersją strony. Z drugiej strony design responsywny nie daje pełnej kontroli nad wyglądem strony dla konkretnych rozdzielczości. Niedoświadczeni projektanci często tracą sporo czasu, aby na różnych urządzeniach wszystko działało zgodnie z ich zamysłem. Gdy już jednak uda się to osiągnąć, to strona będzie czytelna i przejrzysta na wszystkich urządzeniach.

Kolejną przewagą podejścia responsywnego jest fakt, iż przeglądarki nagradzają strony, które zostały zaprojektowane w zgodzie z jego zasadami. Jako wadę należy wskazać dłuższy czas ładowania stron responsywnych, które wszystkie informacje o stronie mają zawarte w jednym pliku, który niezależnie od rozmiarów urządzenia musi zostać cały wczytany. Problemy mogą też stwarzać leciwe przeglądarki internetowe, które wciąż nie są dostosowane do technologii responsywnej.

Silne i słabe strony podejścia adaptywnego

Wady adaptacyjnej strony

Dobrze zaprojektowana strona adaptatywna zapewni (przynajmniej teoretycznie) najlepsze wrażenia dla internautów przeglądających ją na urządzeniach posiadających ekrany o wybranych przy projektowaniu rozdzielczościach. Problem zacznie się w momencie, gdy internauta spróbuje zmniejszyć okno przeglądarki. Strona adaptatywna nie zareaguje na to, przez co jej część stanie się dla przeglądającej osoby niewidoczna. Tak samo użytkownicy urządzeń o innych niż określone rozdzielczościach nie będą mogli komfortowo przeglądać takiej strony. Nawet jeżeli stworzymy wersje strony adaptatywnej dla wszystkich popularnych urządzeń, wciąż istnieje ryzyko, że pojawi się jakieś nowe urządzenie, dla którego trzeba będzie od nowa projektować osobną wersję strony.

Z powodu tego, że jednorazowo wczytywana jest tylko jedna z kilku wersji strony, to ilość kodu, który będzie musiał zostać przetworzony, również będzie znacznie mniejszy. Co to oznacza w praktyce? Adaptatywne strony często ładują się nawet kilkukrotnie szybciej niż ich responsywne odpowiedniki. A szybko ładującą się stronę lubią nie tylko sami internauci, ale również wyszukiwarki, które dają szybkim stronom kilka punktów przy określaniu ich pozycji na listach wyszukiwania.

Kilka wersji strony oznacza o wiele więcej pracy w ich przygotowaniu i utrzymaniu, co pociąga za sobą wzrost kosztów takiej strony. Co gorsza, pozytywny wpływ szybkości ładowania się strony jest neutralizowany przez negatywny wpływ istnienia kilku wersji strony o tej samej treści. A roboty wyszukiwarek nie lubią identycznych tekstów, które najczęściej traktują po prostu jako plagiat.

Co więc wybrać: stronę adaptatywną czy responsywną?

Responsive Web Design vs Adaptative Web Design

Odpowiedź na to pytanie może być tylko jedna: to zależy od sytuacji oraz indywidualnych potrzeb. Ogólnie rzecz biorąc ilość i znaczenie zalet przemawia zdecydowanie za stroną responsywną, do najważniejszych zaliczymy mniejsze koszty związane z jej stworzeniem i utrzymaniem, lepszą optymalizację pod pozycjonowanie oraz dobre wyświetlanie się na wszystkich ekranach i dla każdej rozdzielczości.

Warto wziąć pod uwagę wady i zalety obydwu rozwiązań. Być może zdecydowana większość Twoich klientów przegląda Twoją stronę tylko na kilku rodzajach urządzeń? W takim wypadku oczywistym wyborem może być strona adaptatywna. Adaptatywna wersja strony będzie też lepsza w przypadku modernizacji już istniejącej strony, która ma gotowy layout. Tworząc wersje strony dla innych rozdzielczości wystarczy więc zmienić ustawienia projektu, zamiast tworzyć go zupełnie od zera. Z kolei tworząc nowe strony internetowe zdecydowanie lepiej jest wybrać responsywność. Podobnie jeżeli stronę mamy stworzoną w oparciu o jeden z popularnych systemów zarządzania treścią, jak np. Wordpress czy Joomla, które oferują gotowe szablony responsywnych stron internetowych.

Według naszego doświadczenia najczęściej opłaca się jednak stworzyć responsywną stronę internetową. Chciałbyś mieć stronę wyglądającą równie atrakcyjnie na dowolnym urządzeniu, tańszą w utrzymaniu i wyświetlającą się wyżej w wynikach wyszukiwania? Skontaktuj się z nami, a my Ci w tym pomożemy. Skorzystaj z darmowej konsultacji z naszym doradcą klienta, który pomoże dobrać rozwiązanie według Twoich potrzeb. Pokażemy Ci, dlaczego to właśnie responsywne tworzenie stron jest wybierane przez większość projektantów stron internetowych.