Projektowanie responsywne i adaptacyjne: jak wybrać między tymi dwoma?

Projektowanie responsywne jest coraz częściej promowane jako złoty standard tworzenia nowej gamy aplikacji internetowych. Jednak ze względu na komplikacje wynikające z używania tego samego kodu we wszystkich wersjach serwisu, marki sięgają obecnie po alternatywę dla technologii RWD, znaną jako adaptacyjne dostarczanie lub projektowanie. Jak byś wybrał między tymi dwoma? Ten artykuł dotyczy tego samego.

Responsywne projektowanie stron internetowych nie jest już nowością. Bractwo projektantów stron internetowych, społeczność technologiczna, a nawet przeciętny, zdeklarowany maniak sieci, wie teraz, że projektowanie responsywne to droga naprzód. Smartfon, urządzenie zmieniające reguły gry, naprawdę zmusiło projektantów stron internetowych do tworzenia stron internetowych, które mogłyby automatycznie reagować i dostosowywać się do dowolnego urządzenia z dowolnym rozmiarem ekranu, i tak narodził się responsywny projekt strony internetowej. Dzięki technikom RWD układ strony można zoptymalizować do wielkości ekranu urządzenia, na którym jest przeglądana. Skąd więc mowa o projektowaniu adaptacyjnym?

Dla niewtajemniczonych oba modne słowa mogą wydawać się wymiennymi terminami dla tej samej techniki. Jednak w miarę jak coraz większy ruch pochodzi z urządzeń mobilnych, coraz ważniejsze dla wydawców jest poznanie różnic między nimi i wybranie tego, co najlepsze dla ich witryny. Poza tym ankieta Millenial Media i comScore przeprowadzona w Stanach Zjednoczonych wykazała, że ​​56% treści internetowych jest obecnie konsumowanych za pośrednictwem smartfonów i tabletów, a pozostałe 44% za pośrednictwem komputerów stacjonarnych. A zmiana wciąż przyspiesza. Tak więc raz na zawsze rozstrzygnięto, jak ważne jest posiadanie witryny dobrze dostosowanej do odbiorców mobilnych. Wracając do pytania: Jak wybrać pomiędzy tymi dwoma?

Co za różnica?

Najprostszym sposobem na wybranie jednej z dwóch opcji jest zrozumienie różnic i zalet, które oferuje jedna z nich.

Podczas gdy projektowanie responsywne to podejście po stronie klienta, w którym cała strona jest dostarczana klientowi (przeglądarka urządzenia), projektowanie adaptacyjne jest generalnie po stronie serwera, gdzie serwer najpierw wykrywa atrybuty urządzenia, zwykle za pomocą wtyczek po stronie serwera lub niestandardowego użytkownika wykrywanie agenta, a następnie ładuje wersję witryny zoptymalizowaną pod kątem jej wymiarów i natywnych funkcji. W ten sposób dostarczanie adaptacyjne wykorzystuje predefiniowane układy, które zostały utworzone dla różnych rozmiarów ekranu. Po wykryciu określonego rozmiaru ekranu odpowiedni układ jest aktywowany i dopasowywany do arkusza stylów. W projektowaniu adaptacyjnym układy zmieniają się na podstawie punktów przerwania.

Istnieje również inna alternatywa, adaptacyjne podejście po stronie klienta, w którym rozbudowany JavaScript jest używany do wyposażenia stron internetowych w zaawansowane funkcje i dostosowywanie. Trochę podobny do responsywnego projektowania stron internetowych, ten rodzaj dostawy działa po stronie klienta lub w przeglądarce użytkownika, która wykrywa różne urządzenia i ładuje odpowiedni szablon dla użytkownika. Zaletą jest to, że wymaga użycia tylko jednego zestawu HTML i JavaScript na wszystkich urządzeniach, dzięki czemu wprowadzanie zmian jest znacznie łatwiejsze.

Responsywny kontra adaptacyjny: który wybrać?

Jedną z największych zalet responsywnego projektu, która zapewniła mu natychmiastową sławę, było to, że pojedyncza baza kodu dobrze służyła zarówno użytkownikom stacjonarnym, jak i mobilnym. Ułatwiło to życie programistom, ponieważ prawie wyeliminowało koszmarne doświadczenie związane z koniecznością opiekowania się wieloma wersjami kodu dla różnych typów urządzeń. Jednak ten sam kod na obu urządzeniach oznacza, że ​​strona uruchamiana na smartfonie będzie miała taki sam rozmiar i złożoność jak wersja na komputery, co jest głównym winowajcą dziwnego i rozdętego zachowania responsywnych stron na urządzeniach mobilnych.

Z drugiej strony, stosując podejście adaptacyjne, serwer ma swobodę wyboru optymalnego sposobu renderowania stron, usuwania lub dodawania funkcjonalności w locie, na podstawie wykrytego urządzenia i informacji o użytkowniku.

Korzyści można podsumować w następujący sposób:

• Deweloperzy nie musieliby odtwarzać strony internetowej od zera, tak jak w przypadku strony responsywnej. Większość witryn internetowych staje się z czasem zbyt złożona, a jedna funkcjonalność jest dodawana na drugiej, a drapanie całego wysiłku nie jest realną opcją. Faza projektowania i testowania jest szczególnie wymagająca, ponieważ trudno jest dostosować wrażenia użytkownika do każdego urządzenia lub kontekstu.
• Witryny adaptacyjne są szybsze i czasami bardziej przyjazne dla użytkownika. Powód jest dość prosty. Ponieważ dostarczanie adaptacyjne polega na przesyłaniu tylko zasobów specyficznych dla urządzenia, obrazy i treści multimedialne można optymalizować w locie, aby dopasować je do rozdzielczości i rozmiaru wyświetlacza.

Adaptacja po stronie serwera oferuje różne szablony dla każdego urządzenia, umożliwiając wyższy poziom dostosowywania wraz z szybszym ładowaniem stron internetowych. Ponadto jest kompatybilny z różnymi wtyczkami po stronie serwera, które są dostępne dla popularnych systemów zarządzania treścią i systemów eCommerce, takich jak Magento. Jednak takie podejście wymaga znacznych zmian w systemach zaplecza, a jeśli masz ograniczony budżet, może okazać się trochę bolesne. Będziesz musiał zarządzać wieloma szablonami, co będzie widoczne jako wzrost kosztów utrzymania. Problemy z wydajnością mogą również wystąpić, gdy serwery są mocno obciążone.

Dolna linia

Witryny z dużą zawartością treści, w których nie ma dużej różnicy w intencjach użytkowników między użytkownikami komputerów stacjonarnych i mobilnych, zazwyczaj wybierają responsywny projekt. Jeśli jednak projektujesz witrynę internetową, w której intencje użytkowników mobilnych znacznie różnią się od docelowych odbiorców komputerów stacjonarnych, lepszym rozwiązaniem będzie projektowanie adaptacyjne. Przykładem są sklepy internetowe.

Poza tym, jeśli webmaster wybierze projekt adaptacyjny, może jeszcze bardziej zoptymalizować wrażenia użytkownika, korzystając z dodatkowych funkcji oferowanych przez te urządzenia, na przykład lokalizacji. Właśnie dlatego 82 procent ze 100 najlepszych globalnych witryn Alexa używa pewnego rodzaju wykrywania po stronie serwera do udostępniania treści.

W przypadku większości organizacji dobrze sprawdza się projektowanie responsywne w połączeniu z dostarczaniem adaptacyjnym. Część witryny zawierająca dużo treści wykorzystuje podejście responsywne, umożliwiające czytelnikom konsumowanie treści w satysfakcjonujący sposób, bez względu na to, na jakim urządzeniu się znajdują. Z drugiej strony części witryny, które mają duże znaczenie, działają dobrze dzięki dostarczaniu adaptacyjnemu. Kluczem jest znalezienie równowagi między obsługą użytkowników a osiągnięciem celu biznesowego.

Projektowanie stron internetowych to obecnie jedna z najgorętszych umiejętności na rynku. Według danych dotyczących zatrudnienia oferowanych przez Bureau of Labor Statistics, perspektywy zatrudnienia dla twórców stron internetowych wynoszą 20%, czyli szybciej niż średnia. Raport Best Jobs 2014 magazynu USNews umieszcza zawody związane z projektowaniem stron internetowych w pierwszej trójce zawodów technologicznych. Dlatego dla początkującego projektanta stron internetowych znajomość niuansów projektowania, takich jak opisany powyżej, może być bardzo owocna.