• Innovatoria
• | май 25, 2016
• | Блог за дигитален маркетинг

Адаптивен и Респонсив уеб дизайн – каква е разликата?

Adaptive vs Responsive

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

Темата за достъпност на сайтовете, от всякакви устройства, става все по-актуална.  Особено след облъчването, че Google ще оставят в Индекса само добре оптимизирани сайтове, не само от гледна точка на съдържание, интеграция с Google инструменти, но и от гледна точка на мобилна видимост.

Видим ли е вашият уеб сайт през мобилни устройства?

Със сигурност това ще се случи и ако сайтът ви не се открива и достъпва  пълноценно през мобилно устройство, може и да не го намерите в търсачката, в близко бъдеще. Все ще остане някоя следа от вас в Google Places, но само в случай, че сте регистрирали бизнесът си там, създали сте му локация, разбира се само ако преди това сте направили Google+ страница.

Условията стават доста и все повече предстоят, така че колкото и да не ни се иска да мобилизираме сайта си, май му е дошло времето. Вероятно сменяте телефона си веднъж на 2 години, а очаквате Интернет сайтът ви да е вечен?

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

Не бива да се забравят  всички устройства, които вече са с уеб базирани екрани, от рода на перални, сушилни и хладилници, директно пазаруващи от мрежата и обновяващи информацията за съдържанието си, за което отново ни информират мобилно. (Internet of things)

Потребителите, които достъпват съдържание през мобилни устройства, нямат особени претенции към подхода, който сте избрали, за вашия Интернет сайт, стига да не се измъчват да открият, това от което се интересуват. Единственото, което е важно за тях е лесната навигация и бързата ориентация.

Респонсив дизайнът, както и адаптивният уеб дизайн имат обща цел и тя е преоразмеряване на Интернет сайта в зависимост от размера на екрана, на който се преглежда. Има много фина, едва доловима разлика, между двата типа дизайн, която ще се опитам да  разясня. В българския език „респонсив“ може да бъде преведен като “Отговарящ”, което внася допълнителни неточности и често двата термина се считат за синоними. Можем да приемем, че и двата дизайна имат общо приложение и то е пълна видимост на уеб сайтовете през мобилно устройство.

RWD (Респонсив Уеб Дизайн)

От техническа гледна точка RWD използва медия заявки, при които основното правило е чрез процентно преоразмеряване да се премине към гъвкава основа. Преоразмеряването е на процентна база, а не единици пиксели. Използването на флуидни типове, позволява на всеки респонсив уеб сайт, да нагоди съдържанието си пропорционално към екрана на устройството, от което се преглежда. Респонсив дизайнът флуидно (течно) се нагажда (разлива) в зададеното пространство. При RWD няма промяна на позициите и съдържанието, както и преоразмеряване на елементи,, а само на пропорциите.

Съдържанието заема нова форма, спрямо зададената площ. Процентните пропорции позволяват ако една част от вашия сайт заема 100% от екрана на десктоп, същата да се вижда 100% и на мобилен екран.

AWD (Адаптивен Уеб Дизайн)

Адаптивният дизайн използва някои прогресивни подобрения, като начин да се дефинира цял инструментариум от дизайн подходи, които се фокусират върху преживяването на Потребителя, а не на браузъра. Използват се предварително дефинирани сетове от размери (предварително зададени) на устройства, за да се постигне пълно нагаждане към специфично устройство. Целта на AWD е не само да се вижда адаптивния уеб сайт през мобилно устройство, а по-скоро да се създаде индивидуален изглед за конкретното средство и елемент или цели блокове от информация. Създава се специфичен потребителски интерфейс, който подобрява цялостното пребиваване в сайта. Чували сме за уиджитс, както сме ги и виждали. Много често AWD (Адаптивен Уеб Дизайн) се нарича мобилен сайт.

Важно е да се уточни и техническата разлика между двата вида дизайн. Докато респонсив дизайнът флуидно се нагажда, като размер, към всяко устройство, посредством форматиращи процентни медия заявки, то адаптивният дизайн използва 3 основни направления на прогресивния дизайн подход:

1. Променя цялостният лейаут на сайта
2. Променя форматирането на сайта
3. Създава допълнителен потребителски интерфейс, с което се добавят т.нар уеджити (или бутони и форми)

Адаптивният дизайн създава  цялостно, ново вълнуващо преживяване

Позволява динамични промени, които са валидни за всяко конкретно устройство. Допълнителни движения, видео, форми и всичко, което мобилните устройства позволяват и което ще ви завладее и привърже още по-силно към вашия телефон или таблет.

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

По-кондензирано можем да направим извод, че Адаптивният дизайн е този, който се променя, за да се впише в първоначално дефиниран сет от размери на екрани. Дизайнът за различните устройства е предварително изготвен и зададен. Поради тази причина може да се разглежда като мобилен сайт. Адаптивният дизайн на интернет сайт, се изготвя независимо от първоначалния уеб дизайн. Създават се независимо, но са част от облика, в зависимост от това дали е мобилен или десктоп.

И при двата подхода – Респонсив и Адаптивен – целта е една – възможност сайтове да се разглеждат през мобилни устройства.

По това си и приличат. Различават се в подхода си – начина, по който позволяват преглед

Критично важно е, без значение кой подход ви допада повече, вашият сайт да има един от двата вида дизайн. Адаптивният изисква по-голяма инвестиция, но е не само дизайн, а цялостно преживяване.

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

Преценката е индивидуална, но промяната в посока дизайн задължителна!