Нещата бяха много по-лесни, преди да имаме достъп до интернет на нашите телефони и таблети. Наличието на онлайн присъствие наложи създаването на уебсайт, който може да се види само на екрана на настолен или лаптоп. Сега обаче трябва да се проучат и приспособят различни размери на екрана, вариращи от по-големи дисплеи на настолни компютри и лаптопи до малки екрани на мобилни телефони и таблети – особено след като уебсайтът не се показва правилно на определено устройство, потребителят веднага ще напусне.
Отзивчивият дизайн и адаптивният дизайн са две техники, за да се гарантира, че уебсайтът е подходящ за дисплеи на мобилни устройства, таблети, лаптопи и компютри. Въпреки че и двамата се стремят да се справят с един и същ проблем, те използват различни подходи.
Познаването на разликите между тези две техники може да ви помогне да определите коя стратегия е най-добра за вашия следващ UX проект.
В тази публикация ще дефинираме какво са отзивчив и адаптивен дизайн, след което ще разгледаме предимствата и недостатъците на всеки един от тях.
1. Какво е отзивчив дизайн и как работи?
Уебсайт, създаден с отзивчив дизайн, предлага едно и също съдържание за всички устройства, но е плавно и променя оформлението и вида си в зависимост от размера и ориентацията на устройството.
Разработчиците използват CSS, за да гарантират, че всяка страница на сайта може да бъде преформатирана според размера на изгледа на потребителя и че сайтът има само една кодова база. Прекъсните точки се използват за информиране на сайта кога трябва да се промени, за да отговаря на различни размери на екрана.
Какъв е крайният резултат? На голям екран на настолен компютър сайтът може да има оформление с четири колони, оформление с три колони на по-малък екран на лаптоп, оформление с две колони на екран на таблет и стил с една колона на мобилен телефон. Ще откриете една и съща основна информация и дизайн на отзивчив уебсайт, независимо какво устройство използвате.
Според Ейми Шайд от Nielsen Norman Group, UX дизайнерите, които работят върху отзивчив дизайн, ще трябва да работят в тясно сътрудничество с разработчиците, за да гарантират, че оформлението е адаптивно към различни размери на екрана. Потребителското изживяване ще се промени, когато компонентите на страницата се променят, така че UX дизайнерът трябва да се увери, че сайтът остава използваем, докато се променя. Един подход за това е да се гарантира, че най-критичната информация е приоритизирана на всички устройства, особено на по-малките екрани.
2. Какво е адаптивен дизайн и как работи?
Адаптивният дизайн създава уникално оформление на уебсайт за екрана на всяко устройство. Сайтът открива размера на екрана при зареждане и предлага оформлението, което е проектирано за този изглед. Всъщност можете да проектирате уникално потребителско изживяване за всеки от шестте най-често срещани размера на екрана: 320px, 480px, 760px, 960px, 1200px и 1600px.
Въпреки това, тъй като проектирането на уебсайт за шест различни размера на екрана би отнело много време, усилията може да бъдат ограничени чрез препращане към потребителска статистика за съществуваща версия на сайта, за да се установят размерите на екрана, на които хората го посещават най-често. Например, ако статистиката разкрие, че по-голямата част от хората имат достъп до сайта чрез своя смартфон Apple iPad и Samsung Galaxy, вие ще създадете потребителското изживяване изключително за тези два размера на екрана, а не за всичките шест.
3. Предимствата и недостатъците на отзивчивия дизайн
Основното предимство на отзивчивия дизайн, от гледна точка на UX дизайнера, е, че той изисква значително по-малко усилия за изграждане и поддръжка, отколкото адаптивния дизайн. Освен това, адаптивните уеб страници ще поддържат безкраен брой размери на екрана, което е чудесна новина, като се има предвид честотата, с която се произвеждат нови и необичайни размери на екрана. Тъй като адаптивните сайтове се считат за удобни за мобилни устройства, те се представят по-добре в резултатите от търсачките.
Отзивчивите уебсайтове, от друга страна, се нуждаят от допълнителен код от разработчиците и дори когато UX дизайнер и разработчик си сътрудничат тясно, за да гарантират, че оформлението е четиво на възможно най-много устройства, е трудно да се управлява оформлението на всяко устройство. В резултат на това уебсайтът може да не е проектиран да предоставя оптимално потребителско изживяване на определени устройства. Освен това, тъй като се предоставя пълният код на уебсайта, независимо от устройството, използвано за преглед на сайта, зареждането на отзивчивия сайт може да отнеме повече време. Потребителското изживяване може да бъде увредено в резултат на това.
Отзивчивият дизайн често е предпочитаният метод за оптимизиране на уебсайт на различни устройства поради неговата гъвкавост, особено когато сайтът се изгражда от самото начало и има голям брой уеб страници.
4. Предимствата и недостатъците на адаптивния дизайн
Може да е по-лесно за UX дизайнер да изгради множеството оформления, необходими за адаптивния дизайн, тъй като това включва просто създаване на телени рамки за зададената ширина на всеки размер на екрана. Следователно UX дизайнерът има пълен контрол върху всяко оформление и може да гарантира, че потребителското изживяване е оптимизирано за всеки размер на екрана. В резултат на това UX дизайнерът може да включи различна информация за различни размери на екрана, ако смята, че има смисъл.
Адаптиран сайт за бизнес с доставка на храна, например, ще има начален екран на настолен компютър с избор на ресторанти и категории храни, както и възможност за търсене на местоположение на ресторант. От друга страна, на мобилен телефон началната страница на същия сайт може просто да включва опцията за търсене на местоположение на ресторант.
Адаптивните сайтове са по-лесни за изграждане от разработчиците и се зареждат значително по-бързо от отзивчивите сайтове, тъй като те просто предоставят кода, необходим за дадения размер на екрана.
Адаптивният дизайн, от друга страна, може да бъде много за един UX дизайнер. Въпреки че е възможно да се ограничи усилията, като се проектира само за два или три от шестте типични размера на екрана, това ще доведе до неправилно форматиране на сайта, ако хората го гледат на устройство, за което не е подготвен. Дори ако всичките шест размера на екрана се поддържат, редките размери на екрана ще останат неподдържани.
Оптималното време за прилагане на адаптивен дизайн е, когато преработвате или подобрявате уебсайта си. Адаптивният дизайн, например, може да бъде идеалното решение, ако клиентът изисква мобилно оформление за съществуващ уебсайт, който не възнамерява да променя.
5. Най-важните изходи
Сега трябва да имате основно разбиране за отзивчив и адаптивен дизайн, както и за предимствата и недостатъците на всеки от тях. Имайте предвид тези неща, когато избирате коя техника би работила най-добре за следващия ви UX проект:
От гигантски настолен компютър до малък мобилен телефон, отзивчивият дизайн може да промени оформлението и вида си според размера на екрана на устройството, на което се гледа.
Адаптивният дизайн налага изработването на уникално оформление за всяко устройство, което ще посети уебсайта.
Отзивчивият дизайн изисква по-малко усилия от UX дизайнер, но те ще трябва да си сътрудничат с разработчика, за да гарантират, че оформлението на сайта е използваемо на всички размери на екрана.
Адаптивният дизайн налага създаването на до шест отделни версии на един уебсайт за различни размери на екрана. Въпреки че това е много усилия, то позволява на UX дизайнера да подобри потребителското изживяване за всяко от устройствата, обхванати от тези оформления.
По-големите сайтове, които се изграждат от самото начало, обикновено се възползват от отзивчивия дизайн.
По-малките обекти, които се ремонтират, могат да се възползват от адаптивния дизайн.
