Адаптивен дизайн
вид стилизиране на уеб страници / From Wikipedia, the free encyclopedia
Адаптивният уеб дизайн (на английски: responsive web design), на български също се среща като респонзивен (транслитеративна форма на responsive) или отзивчив (от английски: responsive, helpful), е уеб дизайн, който осигурява съответствието на оразмеряванията на екрана и представянето на уебсайта, представлява вид кодиране и стилизиране на уеб страници, целящо да осигури оптималната ѝ визуализация и улесненото взаимодействие с нея, което да е подходящо за различни устройства (мобилни телефони, таблети, настолни компютри и др.) и техните различни резолюции на екрана. В действителност адаптивният уебдизайн е подвид на респонзивния, но на български адаптивен дизайн е по-лесно за произнасяне от респонзивен. [1] Тоест в оригиналната терминология на английски език съществува и терминът adaptive web design, който е сходен като резултат, но с известни различия в начина за постигане. Целта на това адаптиране е да се минимизира нуждата от преоразмеряване на уеб страницата от самия потребител или дори прекомерно скролване.
![]() | Тази статия се нуждае от подобрение. Необходимо е: преработване на неенциклопедичната част от текста, например „адаптивното оформление помага да нагаждате сайта си“ или „невъзможно е да се справите, ако не проектирате вашия сайт с адаптивен дизайн“.. Ако желаете да помогнете на Уикипедия, използвайте опцията редактиране в горното меню над статията, за да нанесете нужните корекции. |
![](http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Responsive_Web_Design.png/320px-Responsive_Web_Design.png)
Уебсайтове, изработени като се използва адаптивен дизайн, при зареждане на браузъра настройват съдържанието си към средата, на която се визуализира чрез използването на гъвкави, базирани на пропорции решетки (fluid, proportion-based grids) [2], стилизиране на гъвкави изображения (flexible images) [3] и CSS3 медийни заявки [4][5] (разширение на @media
метода в CSS)[6], по следните начини:
- Концепцията за „гъвкава“ или „течна“, плавна, адаптивна решетка (fluid grid) изисква оразмеряването на елементите на уебстраницата да бъде в относителни единици като проценти, а не в абсолютни като пиксели или точки;
- „Гъвкавите“ изображения [3] също се оразмеряват в относителни единици за да се предотврати показването им извън елемента, в който се съдържат;
- Медийните заявки [5] позволяват на уебсайта да използва различни стилове (CSS) според характеристиките и типа на устройството, на което се визуализира, като ширината на браузъра е най-често използваната характеристика.
Адаптивният уеб дизайн е все по-използван и придобива все по-голямо значение, тъй като количеството на мобилния трафик възлиза на повече от половината от общия интернет трафик. Тази тенденция е толкова разпространена, че Google започна повишаване на рейтингите на сайтове, които са с адаптивен уеб дизайн.
![](http://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Responsive_Web_Design_for_Desktop%2C_Notebook%2C_Tablet_and_Mobile_Phone.png/640px-Responsive_Web_Design_for_Desktop%2C_Notebook%2C_Tablet_and_Mobile_Phone.png)
Друг използван термин е Mobile-First Design. [7]