Responsywne i adaptacyjne projektowanie stron internetowych to obie metody tworzenia witryn przyjaznych dla urządzeń, które sprawdzają się w różnych rozmiarach ekranu. Podczas gdy responsywny projekt stron internetowych jest zalecany przez Google i jest bardziej popularny z tych dwóch podejść, obie te metody projektowania witryn na wiele urządzeń mają swoje mocne i słabe strony.
Przyjrzyjmy się różnicom między responsywnym a adaptacyjnym projektowaniem stron internetowych, koncentrując się w szczególności na tych kluczowych obszarach:
- Łatwość rozwoju
- Poziom kontroli nad projektem
- Szerokość wsparcia dla urządzenia / ekranu
- Jak przyjazne w przyszłości jest rozwiązanie
- Ogólna szybkość pobierania i wydajność witryny
Niektóre definicje
Zanim przejdziemy do naszych równoległych porównań responsywnego i adaptacyjnego projektowania stron internetowych, przyjrzyjmy się definicji wysokiego poziomu tych dwóch podejść.
Responsywne strony internetowe mają płynny układ, który zmienia się i dostosowuje niezależnie od używanego rozmiaru ekranu. Zapytania o media umożliwiają nawet elastycznym witrynom zmianę ustawień "w locie", jeśli zmienisz rozmiar przeglądarki.
Adaptacyjna konstrukcja używa stałych rozmiarów w oparciu o wcześniej określone punkty przerwania, aby dostarczyć najbardziej odpowiednią wersję układu dla rozmiaru ekranu wykrytego przy pierwszej ładowaniu strony.
Mając te szerokie definicje, przejdźmy do naszych kluczowych obszarów, na których się koncentrujemy.
Łatwość rozwoju
Najważniejszą różnicą między responsywnym a adaptacyjnym projektowaniem stron internetowych jest sposób, w jaki te rozwiązania są stosowane na stronie internetowej. Ponieważ responsywny projekt tworzy całkowicie płynny układ, najlepiej jest go stosować w projektach, w których zmienia się projekt witryny od podstaw. Próba zmodernizowania istniejącego kodu strony internetowej w celu uzyskania elastyczności jest często męcząca, ponieważ po prostu nie masz takiego poziomu kontroli, jaki byłby, gdybyś tworzył ten kod od podstaw i uwzględniał responsywny projekt na najwcześniejszych etapach ten proces. Oznacza to, że jeśli zmodyfikujesz stronę, aby była responsywna, jesteś zmuszony do kompromisów, aby pozostać w istniejącej bazie kodów.
Jeśli pracujesz z istniejącą witryną o stałej szerokości, podejście adaptacyjne oznacza, że możesz pozostawić rozmiar, który strona zaprojektowała w nienaruszonym stanie, i dodać w razie potrzeby dodatkowe, adaptacyjne punkty przerwania. W niektórych przypadkach, jeśli budżet projektu jest niewielki i jeśli będzie on uwzględniał jedynie niewielką ilość prac programistycznych, możesz dodać nowe adaptywne punkty przerwania dla mniejszych rozmiarów ekranu / telefonu komórkowego. Oznacza to, że pozwolisz, aby większe ekrany używały tego samego układu - być może wersja z limitem 960, która była pierwotnie przeznaczona dla tej witryny.
Zaletą adaptacyjnego podejścia jest to, że można lepiej wykorzystać istniejący kod strony, ale jednym z wad jest to, że tworzysz różne szablony układu dla każdego punktu przerwania, który wybierzesz. To będzie miało wpływ na obciążenie pracą wymaganą do opracowania i utrzymania tego rozwiązania w perspektywie długoterminowej.
Kontrola projektu
Jednym z atutów responsywnych stron internetowych jest to, że ich płynność pozwala im dostosować i obsługiwać wszystkie rozmiary ekranu, a nie tylko wstępnie ustawione punkty przerwane określone w podejściu adaptacyjnym. Rzeczywistość jest jednak taka, że strony responsywne mogą wyglądać świetnie w niektórych kluczowych rozmiarach ekranu (zazwyczaj rozmiarach odpowiadających popularnym urządzeniom dostępnym na rynku), ale wizualny projekt często rozpada się między popularnymi rozdzielczościami.
Na przykład strona może wyglądać świetnie w układzie szerokoekranowym 1400 pikseli, średniego rozmiaru ekranu wynoszącego 960 pikseli, a mały ekran ma 480 pikseli, ale co ze stanami pośrednimi tych rozmiarów? Jako projektant masz niewielką lub zerową kontrolę nad tymi średnimi rozmiarami, a wizualny wygląd strony w tych rozmiarach jest często mniejszy niż idealny.
Dzięki adaptacyjnej stronie internetowej masz znacznie większą kontrolę nad różnymi używanymi układami, ponieważ mają one ustalone rozmiary w oparciu o ustalone pułapki. Te niezręczne stany pośrednie nie stanowią już problemu, ponieważ starannie zaprojektowano każdy "Ęlook" (co oznacza wyświetlanie każdego punktu przełomowego), który zostanie dostarczony odwiedzającym.
Tak atrakcyjny jak poziom kontroli projektu może brzmieć, musisz zdawać sobie sprawę, że ma on swoją cenę. Tak, masz pełną kontrolę nad wyglądem każdego punktu przerwania, ale oznacza to, że musisz zainwestować czas projektowania wymagany do zaprojektowania dla każdego z tych unikatowych układów. Im więcej punktów przerwania wybierzesz, tym więcej czasu będziesz musiał poświęcić na ten proces.
Szerokość wsparcia
Zarówno responsywny, jak i adaptacyjny projekt strony internetowej cieszą się sporym wsparciem, zwłaszcza w nowoczesnych przeglądarkach.
Adaptacyjne witryny internetowe wymagają albo składników po stronie serwera, albo JavaScriptu do wykrywania rozmiaru ekranu. Oczywiście, jeśli strona adaptacyjna wymaga Javascript, oznacza to, że przeglądarka musi ją włączyć, aby strona działała poprawnie. To może nie być dla ciebie głównym problemem, ponieważ większość ludzi będzie mieć Javascript w swoich przeglądarkach, ale zawsze, gdy witryna ma krytyczną zależność od czegokolwiek, należy zauważyć.
Responsywne strony internetowe i zapytania o media, które je zasilają, będą dobrze działać we wszystkich nowoczesnych przeglądarkach. Jedyne problemy, jakie możesz napotkać, to najstarsze wersje Internet Explorera, ponieważ wersje 8 i niższe nie obsługują zapytań o media. Aby obejść ten problem, często stosuje się polyfill JavaScript, co oznacza, że istnieje tutaj również zależność od Javascript, przynajmniej w przypadku przestarzałych wersji IE.Ponownie, może to nie stanowić problemu dla Ciebie, zwłaszcza jeśli analizy Twojej witryny pokazują, że nie dostajesz wielu odwiedzających korzystających z tych starszych wersji przeglądarek.
Przyszłość życzliwość
Płynny charakter responsywnych stron internetowych daje im przewagę nad stronami adaptacyjnymi, jeśli chodzi o przyjazność przyszłości. Wynika to z tego, że te responsywne witryny nie są zbudowane, aby pomieścić tylko wcześniej ustalony zestaw punktów przerwania. Dostosowują się do dopasowania wszystkie ekrany , w tym te, które obecnie mogą nie być obecne na rynku. Oznacza to, że witryny responsywne nie muszą być "naprawiane", jeśli nagle nowa rozdzielczość ekranu staje się popularna.
Patrząc na niesamowitą różnorodność urządzeń (od sierpnia 2015 r. Na rynku było ponad 24 000 odrębnych urządzeń z Androidem), posiadanie strony, która robi wszystko, aby pomieścić tę szeroką gamę ekranów jest niezwykle ważne dla przyszłości. Dzieje się tak dlatego, że ten krajobraz prawdopodobnie nie będzie w przyszłości mniej zróżnicowany, co oznacza, że projektowanie dla konkretnych ekranów lub rozmiarów stanie się niemożliwe, jeśli jeszcze nie osiągnęliśmy tej rzeczywistości.
Po drugiej stronie tego scenariusza porównawczego, jeśli strona jest adaptacyjna i nie uwzględnia nowych rozdzielczości, które mogą stać się ważne na rynku, wówczas może być konieczne dodanie tego punktu przerwania do utworzonych witryn. Dodaje to czas projektowania i rozwoju do projektów, co oznacza, że te strony adaptacyjne muszą być konsekwentnie monitorowane, aby upewnić się, że na rynku nie pojawiły się żadne nowe pułapki, które należy dodać do witryny. Ponownie, przy różnorodności urządzeń, która jest tym, czym jest, nieustanne sprawdzanie nowych rozmiarów i ich dostosowywanie z nowymi pułapkami jest ciągłym wyzwaniem, które będzie miało wpływ na pracę, którą trzeba wesprzeć witrynę i koszt tej konserwacji dla firma lub organizacja, dla której przeznaczona jest strona.
Wydajność
Responsywne projektowanie stron internetowych od dawna było oskarżane (niesłusznie, w wielu przypadkach) o bycie kiepskim rozwiązaniem z punktu widzenia prędkości / wydajności pobierania. Wynika to głównie z faktu, że w początkach tego podejścia wielu projektantów stron internetowych po prostu przypisywało zapytania o media na małym ekranie do istniejącego CSS witryny. To zmusiło obrazy i zasoby przeznaczone dla większych ekranów do dostarczania na wszystkie urządzenia, nawet jeśli te mniejsze ekrany nie używały ich w ostatecznym układzie. Responsywny design przeszedł długą drogę od tamtych dni, a rzeczywistość jest taka, że witryny responsywne wysokiej jakości nie mają problemów z wydajnością.
Wolne prędkości pobierania i rozdęte witryny internetowe nie są responsywnymi problemami z witryną - jest to problem, który można znaleźć na wszystkich stronach internetowych. Obrazy zbyt ciężkie, pochodzące z mediów społecznościowych, nadmierne skrypty i inne, a także ważą witrynę, ale zarówno strony responsywne, jak i adaptacyjne mogą być budowane tak, aby szybko się ładowały. Oczywiście , mogą być również skonstruowane w sposób, który nie sprawia, że wydajność jest priorytetem, ale nie jest to cechą samego rozwiązania, ale raczej odzwierciedleniem zespołu zaangażowanego w rozwój samej witryny.
Beyond Layout
Jednym z najbardziej atrakcyjnych aspektów adaptacyjnego projektowania stron internetowych jest to, że nie tylko masz kontrolę nad projektowaniem strony dla ustawionych punktów przerwania, ale także zasoby dostarczane dla tych wersji witryny. Na przykład oznacza to, że obrazy siatkówki mogą być wysyłane tylko do urządzeń siatkówki, podczas gdy ekrany bez siatkówki otrzymują bardziej odpowiednie obrazy, które mają mniejszy rozmiar pliku. Inne zasoby witryny (pliki JavaScript, style CSS itp.) Mogą być inteligentnie dostarczane tylko wtedy, gdy są potrzebne i będą używane.
To wykorzystanie adaptacyjnego projektowania stron internetowych wykracza daleko poza proste równanie: "jeśli modernizujesz stronę internetową, adaptacja może być łatwiejsza w użyciu". Wszystkie witryny, w tym pełne przeprojektowania, mogą skorzystać z mądrzejszego podejścia do bardziej dopasowanych do potrzeb.
Ten scenariusz pokazuje zniuansowany charakter tej "responsywnej versus adaptacyjnej" debaty. Chociaż prawdą jest, że podejście adaptacyjne może być lepiej dostosowane do wymagań w przypadku modernizacji witryny, może również być doskonałym rozwiązaniem dla pełnego przeprojektowania. Podobnie w niektórych przypadkach podejście responsywne można dodać do istniejącej bazy kodu witryny, co daje tej stronie wszystkie korzyści w pełni responsywnego podejścia.
Które podejście jest lepsze?
Jeśli chodzi o responsywny versus adaptacyjny projekt strony internetowej, nie ma wyraźnego "zwycięzcy", chociaż responsywność jest z pewnością bardziej popularnym podejściem. W rzeczywistości "lepsze" podejście zależy od potrzeb konkretnego projektu. Ponadto nie musi to być sytuacja "albo" albo ". Istnieje wielu profesjonalistów internetowych, którzy budują witryny, które łączą najlepsze responsywne projektowanie stron internetowych (szerokości płynów, przyszłe wsparcie) z mocnymi stronami projektowania adaptacyjnego (lepsza kontrola projektu, inteligentne ładowanie zasobów witryny).
Powszechnie znany jako RESS (Responsive Web Design z komponentami po stronie serwera), podejście to pokazuje, że tak naprawdę nie ma "jednego rozmiaru pasującego do wszystkich rozwiązań". Obydwa responsywne projektowanie stron internetowych i adaptacyjne mają swoje mocne strony i wyzwania, więc musisz określić, który będzie działać najlepiej dla twojego konkretnego projektu lub jeśli rozwiązanie hybrydowe może ci najbardziej odpowiadać.
