Адаптивният уеб дизайн (), на български също се среща като респонзивен (транслитеративна форма на responsive) или отзивчив (от английски: responsive, helpful), е уеб дизайн, който осигурява съответствието на оразмеряванията на екрана и представянето на уебсайта, представлява вид кодиране и стилизиране на уеб страници, целящо да осигури оптималната ѝ визуализация и улесненото взаимодействие с нея, което да е подходящо за различни устройства (мобилни телефони, таблети, настолни компютри и др.) и техните различни резолюции на екрана. В действителност адаптивният уебдизайн е подвид на респонзивния, но на български адаптивен дизайн е по-лесно за произнасяне от респонзивен. Разликата се състои в това, че при втория един и същи код е използван, докато при първия за радличните резолюции, може да има различия в кода. Тоест в оригиналната терминология на английски език съществува и терминът adaptive web design, който е сходен като резултат, но с известни различия в начина за постигане. Целта на това адаптиране е да се минимизира нуждата от преоразмеряване на уеб страницата от самия потребител или дори прекомерно скролване.
Уебсайтове, изработени като се използва адаптивен дизайн, при зареждане на браузъра настройват съдържанието си към средата, на която се визуализира чрез използването на гъвкави, базирани на пропорции решетки (fluid, proportion-based grids) layout на гъвкави решетки, 1stwebdesigner.com, стилизиране на гъвкави изображения (flexible images) flexible images, responsivedesign.is и CSS3 медийни заявки Използване на медийни заявки, developer.mozilla.org (разширение на @media метода в CSS)CSS, www.w3schools.com, по следните начини:
Концепцията за „гъвкава“ или „течна“, плавна, адаптивна решетка (fluid grid) изисква оразмеряването на елементите на уебстраницата да бъде в относителни единици като проценти, а не в абсолютни като пиксели или точки; „Гъвкавите“ изображения също се оразмеряват в относителни единици за да се предотврати показването им извън елемента, в който се съдържат; Медийните заявки позволяват на уебсайта да използва различни стилове (CSS) според характеристиките и типа на устройството, на което се визуализира, като ширината на браузъра е най-често използваната характеристика.
Адаптивният уеб дизайн е все по-използван и придобива все по-голямо значение, тъй като количеството на мобилния трафик възлиза на повече от половината от общия интернет трафик. Тази тенденция е толкова разпространена, че Google започна повишаване на рейтингите на сайтове, които са с адаптивен уеб дизайн.
Друг използван термин е Mobile-First Design. What is Mobile-First Design? MFD is an approach in which web designers start first with the product design for mobile devices.
История Първият сайт, чието оформление се адаптира спрямо резолюцията на прозореца на браузъра е „www.audi.com“, пуснат през 2001 г. Създаден от екип в „Razorfish“, състоящ се от Jürgen Spangl и Jim Kalbach (информационна архитектура), Ken Olling (дизайн) и Jan Hoffmann (развитие на интерфейса). Лимитирани възможности на браузъра означавало че за Internet Explorer оформлението можело да се адаптира динамично в браузъра, докато за Netscape страницата трябвало да бъде заредено повторно от сървъра при преоразмеряване.
През 2004 г. Cameron Adams прави демонстрация, която все още е онлайн. До 2008 г. се използват редица термини като: „flexible“, „liquid“, „fluid“ и „elastic“, за да опишат оформленията на уеб страницата. Към края на 2008 и началото на 2009 media queries са почти готови за дебют Медийни заявки. w3.org. Посетен на 21 май 2015.. През май 2010 Итън Маркот въвежда термина „responsive web design“. В една от кратките си книги, написани през 2011, той детайлно описва теорията и практиката на този тип дизайн. През 2012 терминът „Responsive Web Design“ е регистриран като номер 2 в Топ уеб дизайн тенденциите за 2012 г., а самата класация е оглавена от понятието „progressive enhancement“.
В началото на XXI век уеб сайтовете се изработват така, че да пасват на повечето десктоп екрани, тъй като по-голямата част от интернет потребителите сърфират с такива устройства. Най-широко използвани са мониторите с разделителна способност от 800 или 1024 пиксела и дизайнът на уеб сайтовете се съобразява с тези размери. Постепенно стават все по-популярни мобилните устройства с различен размер на екрана и стана наложително уеб сайтовете да изглеждат по един и същи начин, независимо от това какво устройство използват потребителите.
Мобилните телефони получиха възможност за достъп до интернет в края на 90-те години на 20 век, но по това време те можеха да показват само текстова информация. Нещата се променят едва когато смартфоните придобиват популярност и мобилните браузъри започват да използват CSS и JavaScriptКои бяха предшествениците на водещата в дизайна тенденция?.
Mashable нарича 2013 годината на „Responsive Web Design“. Много други източници препоръчват „RWD“ като евтина алтернатива на мобилните приложения.
В днешния все по-развиващ се дигитален свят, е наложително при изработка на сайтове да се използва адаптивен дизайн. Адаптивният дизайн позволява уеб страницата да бъде отворена и да функционира правилно на всяко мобилно устройство.
Допълващи уебдизайн понятия
Създаването на мобилна версия преди уебдизайна на версиите за десктоп компютрите (Mobile First-Design) www.lukew.com, включващо ненатрапчив (unobtrusive) JavaScript и прогресивно разширение, и подобрение (progressive enhancement):
Това са сходни концепции, които предхождат адаптивния уебдизайн. Тъй като браузърите на мобилните телефони от най-ниския клас не поддържат JavaScript в цялост и имат ограничения при Media заявките, препоръчителна практика е да се създаде един основен дизайн на уеб сайт, който да може да бъде използван както за компютри, така и от мобилни телефони, за да не се очаква лимитиране на възможностите на страницата, за да може дори относително сложен и изпълнен с множество изображения сайт да работи и на мобилните телефони.
Прогресивно разширение и подобрение (progressive enhancement) въз основа на уеб браузър, устройство или засичането на определена характеристика
Когато един уеб сайт трябва да бъде използван, както от десктоп компютри, така и от мобилни устройства, които не разполагат с JavaScript в цялост, „отчитането на вида браузър“ и „отчитането на вида на мобилното устройство“ са двата начина за заключаване дали определени HTML и CSS функции могат да бъдат поддържани при конекцията. Въпреки това, тези методи са относително надеждни, освен ако се използват комбинация на база данни спрямо възможностите на устройството.
За съвременните компютри, устройства и мобилни устройства, JavaScript фреймуърковете като Modernizr , jQuery и jQuery Mobile www.w3schools.com, могат директно да се тестват и тестват поддръжката на HTML/CSS функционалността. Като например, Polyfills може в някои случаи да се използва за добавяне на поддръжка за определени функционалности, като например да се поддържа специфична медийната заявка (което е задължително за адаптивния дизайн), при засилване на поддръжката на HTML на Internet Explorer на браузъра.
Тоест, „Засичането на функции“ също може да не е толкова надеждно; случва се да се докладва за наличието на функционалност, когато въпросната липсва или е все още или в някаква степен приложена с невисоко качество или дори, че на практика е почти нефункционална.
Уебдизайн предизвикателства и други подходи
Рублевски (Luke Wroblewski) е обобщил някои от предизвикателствата пред адаптивния дизайн (responsive web design), като вид мобилен дизайн, и е създал каталог от модели за много-устройствено оформление. Той твърди, че в сравнение с опростения адаптивен подход, RESS (responsive web design with server-side components) подхода може да осигури потребителско изживяване, което е по-добре оптимизирано за мобилни устройства. Приложението на сървърно ориентирани динамичен CSS („dynamic CSS“), каскадни стилове и Sass, или Incentivated's MML може да бъде част от такъв подход, чрез достъп до сървърно базирано приложно-програмния интерфейс (API). Приложно-програмният интерфейс управлява различията на устройствата с помощта на база данни за възможностите на устройството, като целта е да се подобри използваемостта. RESS е по-скъп за разработка, изисквайки не просто клиентски-ориентирана логика, поради което се очертава като предназначен за организации с по-голям бюджет. Google препоръчват използването на адаптивен дизайн при уеб сайтовете, предназначени за смартфони, в сравнение с други подходи за дизайнwww.expert.bg.
Въпреки че много издатели започват да прилагат адаптивния дизайн, един все още съществуващ проблем за него е, че рекламните банери (banner advertisements) и видеото не са конвертируеми. Въпреки това, рекламата основана на търсенията (рекламиране в търсачки - search advertising) и банер рекламата в сайтовете (display advertising) поддържат специфично платформено насочване и различни по големина рекламни формати за компютър, смартфон и основни мобилни устройства. Различни уеб адреси (URLs) на целеви страници (при зареждане на страницата - page landing) могат да бъдат използвани за различните платформи или Аякс (Ajax) може да бъде използван за показване на различни рекламни варианти на една страница. CSS таблици позволяват хибриден фиксиран и плавен тип оформление.
Има много начини за потвърждаване и тестване на адаптивния дизайн, вариращи от мобилни сайт валидатори и мобилни емулатори до инструменти за едновременно тестване като Adobe Edge Inspect и приложението Resizer Отзивчивият уебдизайн , pcworld.bg на Google. Chrome конзолата и Firefox браузърът предлагат различни инструменти за преоразмеряване, така както правят и софтуерите предлагани от други разработчици.
Предимства и недостатъци Предимства по-голяма достъпност от различни уеб поддържащи устройства; изработва се дизайн наподобяващ основния (десктоп дизайн), но за устройства с различни резолюции. Дизайнерите могат да използват един шаблон за всички устройства и просто използвайки CSS да се определи как съдържанието да се нагоди към различните размери екрани; по-добро индексиране от Google (SEO оптимизация) Google SEO; разработва се само един сайт, а не няколко различни според резолюцията на устройството; добро дългосрочно решение, от гледна точка бързо развиващия се и разнообразен пазар на мобилни устройства; удобно и добре изглеждащо съдържание.
Недостатъци Основен недостатък е скоростта на зареждане. Ако сайтът има видеоматериали и слайдове, то става много труден за нормално ползване. Много от недостатъците се проявяват при сайтове с големи размери. При някои от най-известните сайтове за електронна търговия от този тип се наблюдава голямо утежняване на началните страници. Въпреки че ненужните тагове са скрити за по-малките мобилни устройства, браузърите зареждат целия сайт на заден план и това прави адаптивния дизайн излишен в този случай. Определящ фактор е и бюджетът. При адаптивното оформление е нужно пълно пренаписване на кода, което обикновено излиза скъпо. Другият недостатък е при бавен мобилен интернет или слабо устройство. Зареждането дори на сайтове с малки размери се превръща с досадно чакане. Фазата на проектиране и тестване може да се окаже доста продължителна, понеже е трудно да се изработи сайт, който да бъде удобен за визуализиране на всички размери дисплеи. Има адаптивни сайтове, които на екрани с ниска резолюция приличат на парчета от пъзел, които не си подхождат напълно.
Основни разлики между responsive и adaptive дизайн При „responsive“ дизайна се създава гъвкаво оформление на сайта за визуализация от всякакво устройство, свързано с Интернет. Възпроизвежда се пълното му кодиране, дори някои от неговите по-големи елементи да не се показват на браузъра или изображенията с големи размери да се смаляват автоматически на екрана. Всичко това намалява скоростта на зареждане на сайта./* Responsive design */ body {max-width:100%;} img {float:left; width:100%} #container {max-width:95%; margin:0 auto;}