В наши дни е трудно да се намери някой, който не притежава мобилно устройство. Използването на мобилни устройства и възможността им за сърфиране в интернет в днешно време се разраства с космически темпове. Глобално в света има повече мобилни телефони, отколкото хора.
За съжаление голяма част от интернет сайтовете не са проектирани за такъв тип малки екрани, често те са ограничени в размера на компютърен дисплей или в най-добрия случай към лаптопен екран. Тенденцията за потребление на мобилен интернет ще надмине този на десктоп използване на Интернет в рамките още на тази година. С нарастването на потреблението на мобилен интернет идва въпросът как да се изгради уеб сайт, подходящ за всички видове екрани на потребителите. Отговорът на този въпрос е свързан с използването на адаптивен (отзивчив) уеб дизайн.
Какво е адаптивен или responsive дизайн ?
Responsive design или на роден един адаптивен дизайн е технологията, която прави възможно автоматичното преоразмеряване и преструктуриране на блокове и елементи от един сайт. Например от смартфон потребителите ще виждат съдържанието показано в един изглед от една колона; от таблет може да показва същото съдържание в две колони, но в две колони, а от лаптоп – в три колони. Адаптивен дизайн е практика на изграждане на уеб сайт, подходящ за работа на всяко устройство и всеки размер на екран, без значение колко е голям или малък, дали е мобилен или настолен.
Адаптивен или наречен още отзивчив дизайн е съвременен подход за създаване на уеб страници, с използването на гъвкави оформления, гъвкави снимки и различни медийни стилове спрямо размера на екрана. Целта на отзивчив дизайн е да се изградят уеб страници, които спрямо размера на екрана на посетителя автоматично да промени оформлението на сайт и съответно разположението на блоковете със съдържание. Тези промени са динамични, т.е. в реално време и са обект от уеб програмирането на самия уеб сайт.
Как действа адаптивния дизайн ?
Идеята е много проста – сайта се конструира в проценти от екрана. Всички елементи в страницата се обозначават в размер от общия екран, а не пиксели. Приема се че екрана е 100% и на всеки елемент му се задава ширина от този екран. Например ако имате ляво меню и дясно съдържание може да се зададе в следния ред: лявото меню да заема 25% от екрана, а дясната част с основното съдържание останалите 75%. Това е ОК за лаптоп, настолен компютър или пък таблет, но за смартфон може да е доста сбит текста в това разделение. Тук на помощ идва възможността да се проектира дизайна така, че ако екрана е по малък от 360 пиксела /което е валидно за смартфоните/ то лявата колона която е обозначена от 25% ширина или да бъде скрита и да не се визуализира за да може съдържанието от 75% да заеме целия екран за лесна четимост или пък другия подход – и двете колони да се преоразмерят на 100%, но да се заредят една под друга. Гъвкавостта е основното предимство на адаптивния дизайн. На практика след основния код и стил за визуализация на екрана се прави допълнителен код който указва кой елемент какъв процент да заема от екрана при различните му размери.
Друг пример на действие на респонзивния дизайн е ако си представите една начална страница на сайт с три колони. Всяка една колона от тях би следвало да бъде оразмерена като ширина 33% докато екрана е с размер на лаптоп или настолен компютър. Ако екрана бъде таблет, то в кода на сайта може да се укаже вече всяка колона да е с ширина 50% така че текстовете разположени в тези блокове да са по-видими в самия екран. При екран на сматфон колоните следва да станат със ширина 100% подредени една под друга. Ако не бъде приложена технологията на адаптивния дизайн при смартфон сайта ще изглежда като буболечка, за да се прочете даден текст трябва да се „увеличи“ видимостта в една област и с издърпване наляво и надясно да се възприема целия сайт. Което прави невъзможно на практика приятното разглеждане на сайта. Изображения също се преоразмеряват автоматично спрямо размера на екрана.