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

Адаптивният уеб дизайн (на английски: responsive web design), на български също се среща като респонзивен (транслитеративна форма на responsive) или отзивчив (от английски: responsive, helpful), е уеб дизайн, който осигурява съответствието на оразмеряванията на екрана и представянето на уебсайта, представлява вид кодиране и стилизиране на уеб страници, целящо да осигури оптималната ѝ визуализация и улесненото взаимодействие с нея, което да е подходящо за различни устройства (мобилни телефони, таблети, настолни компютри и др.) и техните различни резолюции на екрана. В действителност адаптивният уебдизайн е подвид на респонзивния, но на български адаптивен дизайн е по-лесно за произнасяне от респонзивен. Тоест в оригиналната терминология на английски език съществува и терминът adaptive web design, който е сходен като резултат, но с известни различия в начина за постигане. Целта на това адаптиране е да се минимизира нуждата от преоразмеряване на уеб страницата от самия потребител или дори прекомерно скролване.

Сайт погледнат през различни устройства

Уебсайтове, изработени като се използва адаптивен дизайн, при зареждане на браузъра настройват съдържанието си към средата, на която се визуализира чрез използването на гъвкави, базирани на пропорции решетки (fluid, proportion-based grids) , стилизиране на гъвкави изображения (flexible images) и CSS3 медийни заявки (разширение на @media метода в CSS), по следните начини:

• Концепцията за „гъвкава“ или „течна“, плавна, адаптивна решетка (fluid grid) изисква оразмеряването на елементите на уебстраницата да бъде в относителни единици като проценти, а не в абсолютни като пиксели или точки;
• „Гъвкавите“ изображения също се оразмеряват в относителни единици за да се предотврати показването им извън елемента, в който се съдържат;
• Медийните заявки позволяват на уебсайта да използва различни стилове (CSS) според характеристиките и типа на устройството, на което се визуализира, като ширината на браузъра е най-често използваната характеристика. 

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

Адаптивният уеб дизайн е подходящ за всички видове устройства, които имат и различна резолюция

Друг използван термин е Mobile-First Design.

История

Първият сайт, чието оформление се адаптира спрямо резолюцията на прозореца на браузъра е „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 са почти готови за дебют . През май 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“ като евтина алтернатива на мобилните приложения.

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

CSS3 multiple column layout
browser support

Internet Explorer	Firefox	Safari	Chrome	Opera
	3	3	< 10
	4	4	11	11
	5	5	12	12
	6		13	13
10	7		14	14
Chrome 13 has display issues with colwidth parameter.

Допълващи уебдизайн понятия

Създаването на мобилна версия преди уебдизайна на версиите за десктоп компютрите (Mobile First-Design) , включващо ненатрапчив (unobtrusive) JavaScript и прогресивно разширение, и подобрение (progressive enhancement):

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

Прогресивно разширение и подобрение (progressive enhancement) въз основа на уеб браузър, устройство или засичането на определена характеристика

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

За съвременните компютри, устройства и мобилни устройства, JavaScript фреймуърковете като Modernizr , jQuery и jQuery Mobile , могат директно да се тестват и тестват поддръжката на 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 препоръчват използването на адаптивен дизайн при уеб сайтовете, предназначени за смартфони, в сравнение с други подходи за дизайн.

Въпреки че много издатели започват да прилагат адаптивния дизайн, един все още съществуващ проблем за него е, че рекламните банери (banner advertisements) и видеото не са конвертируеми. Въпреки това, рекламата основана на търсенията (рекламиране в търсачки - search advertising) и банер рекламата в сайтовете (display advertising) поддържат специфично платформено насочване и различни по големина рекламни формати за компютър, смартфон и основни мобилни устройства. Различни уеб адреси (URLs) на целеви страници (при зареждане на страницата - page landing) могат да бъдат използвани за различните платформи или Аякс (Ajax) може да бъде използван за показване на различни рекламни варианти на една страница. CSS таблици позволяват хибриден фиксиран и плавен тип оформление.

Има много начини за потвърждаване и тестване на адаптивния дизайн, вариращи от мобилни сайт валидатори и мобилни емулатори до инструменти за едновременно тестване като Adobe Edge Inspect и приложението Resizer на Google. Chrome конзолата и Firefox браузърът предлагат различни инструменти за преоразмеряване, така както правят и софтуерите предлагани от други разработчици.

Предимства и недостатъци

Предимства

• по-голяма достъпност от различни уеб поддържащи устройства;
• изработва се дизайн наподобяващ основния (десктоп дизайн), но за устройства с различни резолюции. Дизайнерите могат да използват един шаблон за всички устройства и просто използвайки CSS да се определи как съдържанието да се нагоди към различните размери екрани;
• по-добро индексиране от Google (SEO оптимизация) ;
• разработва се само един сайт, а не няколко различни според резолюцията на устройството;
• добро дългосрочно решение, от гледна точка бързо развиващия се и разнообразен пазар на мобилни устройства;
• удобно и добре изглеждащо съдържание.

Недостатъци

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

Основни разлики между responsive и adaptive дизайн

При „responsive“ дизайна се създава гъвкаво оформление на сайта за визуализация от всякакво устройство, свързано с Интернет. Възпроизвежда се пълното му кодиране, дори някои от неговите по-големи елементи да не се показват на браузъра или изображенията с големи размери да се смаляват автоматически на екрана. Всичко това намалява скоростта на зареждане на сайта.

/* Responsive design */
body {max-width:100%;}
img {float:left; width:100%}
#container {max-width:95%; margin:0 auto;}
#sidebar {float:left; width:35%;}
#footer {clear:both; max-width:100%; height:auto;}

При adaptive дизайна са налични няколко оформления на сайта с определени фиксирани размери за различните устройства:

• 320, 360 пиксела за смартфони;

• 768 – за таблети;

• 960 – за компютри.

  /* Adaptive design */
  /* Tablet Portrait size to standart 960 (devices and browsers) */
  @media only screen and (min-width:768px) and (max-width:959px) {}
  
  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width:767px) {}
  
  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width:480px) and (max-width:767px) {}
  
  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width:479px) {}
  

  Адаптивното оформление помага да нагаждате сайта си към различни размери на екрана, като визуализацията му остава еднаква при всички видове устройства. Това е така, защото посетителите използват едно-единствено гъвкаво оформление и един URL. Адаптивният дизайн позволява създаването на отделни оформления на уеб сайта за различните устройства – оптимални за онези сайтове, които задължително трябва да имат различен изглед и функционалност при двете версии – десктопната и мобилната.

Пример

Когато се поставя YouTube видео плейър (вграждан посредством iframe) в уеб сайт, който използва адаптивен дизайн, малкият CSS трик за 100% ширина няма да помогне. Необходимо е да се допише css файлът за сайта с адаптивен дизайн по следния начин:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Там, където трябва да се появи плейърът, се поставя следният html код:

<div class="videoWrapper">
    
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Вижте също

• CSS
• Дизайн
• Мобилни технологии
• Потребителски интерфейс
• Уеб сайт
• Уеб

Източници

Тази страница частично или изцяло представлява превод на страницата Responsive_web_design в Уикипедия на английски. Оригиналният текст, както и този превод, са защитени от Лиценза „Криейтив Комънс – Признание – Споделяне на споделеното“, а за съдържание, създадено преди юни 2009 година – от Лиценза за свободна документация на ГНУ. Прегледайте историята на редакциите на оригиналната страница, както и на преводната страница, за да видите списъка на съавторите. ​ ВАЖНО: Този шаблон се отнася единствено до авторските права върху съдържанието на статията. Добавянето му не отменя изискването да се посочват конкретни източници на твърденията, които да бъдат благонадеждни.​