Отзивчив или адаптивен сайт

 

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

Как може да се осъществи това? Има наколко варианта да се направи сайт, който да е удобен за всички потребители. Това се постига чрез разработването на отзивчиви и адаптивни сайтове. Адаптивните могат да бъдат с:

Всеки от тези методи за изработване на сайт си има своите предимства и недостатъци. Опитният уеб дизайнер ще прецени коя технология е най-подходяща за всеки конкретен проект.

Отзивчив уеб дизайн

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

Ключово предимство на този подход е, че дизайнерите могат да използват един шаблон за всички устройства и просто използвайки CSS да се определи как съдържанието да се нагоди към различните размери екрани . Освен това, този метод позволява на дизайнерите да работят с HTML и CSS технологии, с които вече са запознати. В същото време се увеличавя броя на платформите с отворен код и инструментите, които опростяват процеса на изграждане на отзивчиви сайтове. Ето защо броят на отзивчивите сайтове бързо се увеличава.

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

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

 

Адаптивен дизайн

Адаптивния дизайн се изгражда също за да отговори на потребностите на широк набор от хора притежаващи различни електронни прибори за връзка с интернет. При него се използва JavaScript и PHP за да се подобри функционалността и персонализацията. Например ако сайта е адаптивен може да изпраща снимки с висока резолюция за Retina дисплеите, а за VGA екраните ще изпрати по-ниско качество на изображението.

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

Адаптивен дизайн от страната на клиента

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

Този метод също така ви позволява да се съсредоточите към конкретни устройства или екранни резолюции. Например ако очаквате, че по-голямата част от мобилния ви трафик ще идва от Iphone устройства, то адаптивния дизайн от страна на клиента ви позволява да оптимизирате сайта специално за Apple смартфони.

За разлика от отзивчивия дизайн адаптивния гарантира, че само необходимите ресурси се зареждат на устройството на клиента, но разработчиците трябва да имат солидни познания по JavaScript за да използват тази техника.

Адаптивен дизайн от страната на сървъра

Защо да изберем адаптивен дизайн от страната на сървъра? Защото обикновено предлага различен шаблон за всяко устройство, позволяващи по-добро персонализиране, а механизма за откриване устройството се намира на сървъра, което позволява по-малки мобилни страници, които се зареждат по-бързо. Освен това има на разположение множество плъгини от страна на сървъра за системи за управление на съдържанието и системи за електронната търговия като Magento.

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