Responsive vs Adaptive дизайн за начинаещи

Ако често срещате тези термини, но не сте съвсем сигурни какво означават и каква е разликата, ще се опитаме да внесем малко яснота със следващите редове :)  Предвид изключителната сложност и дълбочина на темата, тук са засегнати само основите ѝ и за голяма част от информацията могат да се открият различни мнения и подходи!

Responsive и adaptive сайтовете променят начина, по който изглеждат, на база на разделителната способност на устройството, на което се гледат. Крайната цел и на двата подхода е уеб сайтовете да изглеждат добре и да са лесни за използване на всички устройства.  Начините, по които го постигат, обаче, се различават, както от гледна точка на дизайна като процес, така и на софтуерната разработка и отчасти крайния резултат.

Разликата между responsive и adaptive дизайна може да се сравни с разликата между, грубо казано, плавен и рязък дизайн. Responsive дизайнът е плавен. При него layout-а на уеб сайта (външния му вид) се променя плавно и гладко, независимо от това как се променя размера на браузъра, на който се гледа. Adaptive дизайна от своя страна променя визията си рязко, тъй като страницата показва нещо различно в зависимост от размера на браузър са или устройството, на който се гледа.

Какво е responsive дизайн?

Responsive уеб сайтовете реагират на размера на браузъра във всеки един момент. Без значение каква е широчината на браузъра (width) сайтът настройва своя layout така, че да бъде съобразен с екрана. Няма значение дали широчината на браузъра ви е 5 или 500 пиксела, защото сайтът ще реагира, съобразно с нея и ще приеме „правилния“ вид. Responsive дизайнът пренебрегва устройствата като фактор, с който трябва да бъде съобразен дизайна и се стреми (правилно направен) да предостави оптимално преживяване на потребителите независимо от екрана.

Когато се разработва responsive дизайн, ключов момент е визията на дизайнера за всички възможни изгледи, което може да бъде истинско предизвикателство и изисква както опит, така и гъвкав и креативен подход. Липсата на опит и визия и „донагаждането“ на елементите в движение изключват възможността да се използва responsive дизайн по адекватен начин.  

Основна характеристика на responsive дизайна е използването на относителни единици при определянето на размера на даден елемент. Затова вместо пиксели, каквито се използват при adaptive дизайна, при responsive дизайна най-често се използват проценти. Така всеки обект е съотнесен към останалите процентно, което изглежда най-просто по следния начин:

Това позволява и при промяна на ширината на браузъра, през който сайтът се гледа, елементите отново да съществуват в тези пропорции.

Мястото, където съдържанието се „чупи“( breakpoints) и преминава в друга подредба при използването на responsive дизайн се определя от media queries (модул, който позволява на съдържанието да се адаптира към определени условия), които позволяват на CSS да използва различни style rules на база на характеристиките на браузъра, който се използва в момента. Това е една от най-значимите разлики между responsive и adaptive дизайна, при който предварително са зададени само определен брой breakpoints.

При responsive дизайна почти винаги се използват т. нар. fluid grids.

Кога е подходящ responsive дизайнът?

Content management systems като WordPress, Drupal и Joomla предлагат теми, които сериозно улесняват създаването на responsive дори от не особено опитни дизайнери и програмисти. Това прави създаването и управлението на responsive уебсайт при определени условия бързо, удобно и лесно, тъй като когато се налагат промени, те могат да се направят само на едно място (за разлика от adaptive, където се правят на няколко места).

Сред недостатъците на този вид дизайн са нуждата сайтът да се създаде изцяло наново (не може да се адаптира съществуващ сайт), техническите предизвикателства, които налагат по-дълго време за изработка, което го прави по-скъп и по-бавното зареждане на сайтовете.

Responsive дизайнът не е панацея, нито е необходимо да се използва само защото другите го ползват. Той има своите предимства и недостатъци, които се обсъждат и претеглят на база на ясно дефинирана идея и цел, за да се определят най-добрите начини тя да бъде осъществена. Понякога използването на responsive дизайн е един от тях, понякога не е.

Предлагаме ви да разгледате няколко примера за responsive дизайн. Можете да видите плавното променяне и преподреждане на сайтовете, като леко намалявате размера на браузъра, който използвате:

http://www.ortizleon.es/

http://cuberto.com/

https://studiokraftwerk.com/

Какво е adaptive дизайн?

Adaptive дизайнът се адаптира (изненада!) към ширината на браузъра в специфични моменти. Казано с други думи – сайтът „чака“ широчината на браузъра да стане Х, за да изглежда по един начин, Y, за да изглежда по друг и пр. Моментите, в които сайтът разбира, че трябва да промени изгледа си се наричат breakpoints и се задават в пиксели. Обикновено елементите в сайта, които се правят по този начин имат 3-4 такива момента, в които променят размера и подредбата си. Това се случва рязко и няма плавността на responsive дизайна.

Кога е подходящ adaptive дизайнът?

Adaptive е идеален когато не искате или нямате възможност да създадете нов сайт, а искате да направите стария си по-mobile friendly. За разлика от responsive, тук имате възможността дори да скривате цели елементи от сайта на определен breakpoint и така опростявате сайта, което е абсолютно задължително за мобилни устройства. Използването на този подход позволява на сайтовете да зареждат по-малко информация при отваряне, което ги прави по-бързи, нещо, което е от основно значение, ако искате хората да ползват уебсайта ви.

Намалявайте плавно размера на браузъра си и вижте как тези уебсайтове се променят рязко, когато достигнете определени размери. Можете да ги разгледате и през мобилните си телефони, за да видите разликата

http://www.avenue32.com/

http://www.maplin.co.uk/

http://www.opentable.com/

За създаването на уебсайтове съществува и още един, сравнително нов подход, който се нарича Dynamic Serving. Той е стъпил и на responsive, и на adaptive дизайна, като основната му идея е, че вида на устройството, на което се отваря уебсайтът се засича и се визуализира само тази информация, която е предвидена за съответната революция.

Кой подход е по-добър?

Няма по-добър подход. Повечето уебсайтове, които разглеждате, са микс между adaptive и responsive дизайн. Крайният резултат от двата подхода е еднакъв – сайтът изглежда добре и е функционален на устройства с различна разделителна способност. Изборът ви кой да използвате може да се води от много фактори, например от това какво устройство предимно използват вашите клиенти. Ако се окаже, че те предпочитат мобилни телефони, тогава не е необходимо да инвестирате време и пари в това да правите сайтът responsive. От друга страна ако пък решите да инвестирате средства в responsive, вие си спестявате притесненията и адаптирането на дизайна както за всички съществуващи устройства, така и за всички, които тепърва излизат на пазара.

Еднозначни отговори и мнения по темата за adaptive и responsive дизайна рядко има. Дълбочината ѝе много по-голяма, отколкото може да се види на пръв поглед, но се надяваме, че тази статия ви е ориентирала в основите на двата подхода и ви е послужила за добър старт в навлизането в света на уеб разработката! :)

Коментирайте статията

Блогът на Калипърс е изграден върху WordPress