Jak działa Design Adaptacyjny Adaptive Design?
Czym jest design adaptacyjny
Design adaptacyjny (adaptive design) polega na stworzeniu kilku osobnych wersji strony – zwykle dla kilku szerokości ekranu, np. 320px, 768px, 1024px, 1440px. Serwer lub skrypt wykrywa urządzenie użytkownika i serwuje mu najbliższy pasujący layout. Każda wersja jest zaprojektowana osobno, z własnym rozmieszczeniem elementów.
To różni się od designu responsywnego, który używa jednego elastycznego układu ze skalowalnymi siatkami i media queries – strona płynnie dostosowuje się do każdej szerokości, bez skoków między wersjami. Adaptive działa skokowo, responsive – ciągle.
Kiedy się przydaje
Adaptive design ma sens przy przebudowie starych serwisów, gdzie łatwiej dodać kilka stałych wersji niż przepisywać cały CSS na responsywny. Sprawdza się też tam, gdzie zależy nam na pełnej kontroli nad wyglądem na konkretnych urządzeniach – np. w aplikacjach mobilnych z dedykowanym UI albo w e-commerce z osobnym layoutem na tablet.
Wada: tworzenie i utrzymanie kilku wersji kosztuje więcej czasu niż jeden elastyczny układ. Dla nowych projektów częściej wybiera się responsive web design jako tańsze i bardziej uniwersalne rozwiązanie.
Czego nie mylić
Nie myl adaptive design z progresywnym ulepszaniem (progressive enhancement) ani z AMP. To osobne podejścia do budowy stron, choć czasem łączone w praktyce.