вид стилизиране на уеб страници From Wikipedia, the free encyclopedia
Адаптивният уеб дизайн (на английски: responsive web design), на български също се среща като респонзивен (транслитеративна форма на responsive) или отзивчив (от английски: responsive, helpful), е уеб дизайн, който осигурява съответствието на оразмеряванията на екрана и представянето на уебсайта, представлява вид кодиране и стилизиране на уеб страници, целящо да осигури оптималната ѝ визуализация и улесненото взаимодействие с нея, което да е подходящо за различни устройства (мобилни телефони, таблети, настолни компютри и др.) и техните различни резолюции на екрана. В действителност адаптивният уебдизайн е подвид на респонзивния, но на български адаптивен дизайн е по-лесно за произнасяне от респонзивен. [1] Тоест в оригиналната терминология на английски език съществува и терминът adaptive web design, който е сходен като резултат, но с известни различия в начина за постигане. Целта на това адаптиране е да се минимизира нуждата от преоразмеряване на уеб страницата от самия потребител или дори прекомерно скролване.
 | Тази статия се нуждае от подобрение. Необходимо е: преработване на неенциклопедичната част от текста, например „адаптивното оформление помага да нагаждате сайта си“ или „невъзможно е да се справите, ако не проектирате вашия сайт с адаптивен дизайн“.. Ако желаете да помогнете на Уикипедия, използвайте опцията редактиране в горното меню над статията, за да нанесете нужните корекции. |
Уебсайтове, изработени като се използва адаптивен дизайн, при зареждане на браузъра настройват съдържанието си към средата, на която се визуализира чрез използването на гъвкави, базирани на пропорции решетки (fluid, proportion-based grids) [2], стилизиране на гъвкави изображения (flexible images) [3] и CSS3 медийни заявки [4][5] (разширение на @media метода в CSS)[6], по следните начини:
Адаптивният уеб дизайн е все по-използван и придобива все по-голямо значение, тъй като количеството на мобилния трафик възлиза на повече от половината от общия интернет трафик. Тази тенденция е толкова разпространена, че Google започна повишаване на рейтингите на сайтове, които са с адаптивен уеб дизайн.
Друг използван термин е Mobile-First Design. [7]
Първият сайт, чието оформление се адаптира спрямо резолюцията на прозореца на браузъра е „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 са почти готови за дебют [8]. През май 2010 Итън Маркот въвежда термина „responsive web design“. В една от кратките си книги, написани през 2011, той детайлно описва теорията и практиката на този тип дизайн. През 2012 терминът „Responsive Web Design“ е регистриран като номер 2 в Топ уеб дизайн тенденциите за 2012 г., а самата класация е оглавена от понятието „progressive enhancement“.
В началото на XXI век уеб сайтовете се изработват така, че да пасват на повечето десктоп екрани, тъй като по-голямата част от интернет потребителите сърфират с такива устройства. Най-широко използвани са мониторите с разделителна способност от 800 или 1024 пиксела и дизайнът на уеб сайтовете се съобразява с тези размери. Постепенно стават все по-популярни мобилните устройства с различен размер на екрана и стана наложително уеб сайтовете да изглеждат по един и същи начин, независимо от това какво устройство използват потребителите.
Мобилните телефони получиха възможност за достъп до интернет в края на 90-те години на 20 век, но по това време те можеха да показват само текстова информация. Нещата се променят едва когато смартфоните придобиват популярност и мобилните браузъри започват да използват CSS и JavaScript[9].
Mashable нарича 2013 годината на „Responsive Web Design“. Много други източници препоръчват „RWD“ като евтина алтернатива на мобилните приложения.
В днешния все по-развиващ се дигитален свят, е наложително при изработка на сайтове да се използва адаптивен дизайн. Адаптивният дизайн позволява уеб страницата да бъде отворена и да функционира правилно на всяко мобилно устройство.
| 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) [10], включващо ненатрапчив (unobtrusive) JavaScript и прогресивно разширение, и подобрение (progressive enhancement):
Това са сходни концепции, които предхождат адаптивния уебдизайн. Тъй като браузърите на мобилните телефони от най-ниския клас не поддържат JavaScript в цялост и имат ограничения при Media заявките, препоръчителна практика е да се създаде един основен дизайн на уеб сайт, който да може да бъде използван както за компютри, така и от мобилни телефони, за да не се очаква лимитиране на възможностите на страницата, за да може дори относително сложен и изпълнен с множество изображения сайт да работи и на мобилните телефони.
Прогресивно разширение и подобрение (progressive enhancement) въз основа на уеб браузър, устройство или засичането на определена характеристика
Когато един уеб сайт трябва да бъде използван, както от десктоп компютри, така и от мобилни устройства, които не разполагат с JavaScript в цялост, „отчитането на вида браузър“ и „отчитането на вида на мобилното устройство“ са двата начина за заключаване дали определени HTML и CSS функции могат да бъдат поддържани при конекцията. Въпреки това, тези методи са относително надеждни, освен ако се използват комбинация на база данни спрямо възможностите на устройството.
За съвременните компютри, устройства и мобилни устройства, JavaScript фреймуърковете като Modernizr [11], jQuery и jQuery Mobile [12], могат директно да се тестват и тестват поддръжката на 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 препоръчват използването на адаптивен дизайн при уеб сайтовете, предназначени за смартфони, в сравнение с други подходи за дизайн[13].
Въпреки че много издатели започват да прилагат адаптивния дизайн, един все още съществуващ проблем за него е, че рекламните банери (banner advertisements) и видеото не са конвертируеми. Въпреки това, рекламата основана на търсенията (рекламиране в търсачки - search advertising) и банер рекламата в сайтовете (display advertising) поддържат специфично платформено насочване и различни по големина рекламни формати за компютър, смартфон и основни мобилни устройства. Различни уеб адреси (URLs) на целеви страници (при зареждане на страницата - page landing) могат да бъдат използвани за различните платформи или Аякс (Ajax) може да бъде използван за показване на различни рекламни варианти на една страница. CSS таблици позволяват хибриден фиксиран и плавен тип оформление.
Има много начини за потвърждаване и тестване на адаптивния дизайн, вариращи от мобилни сайт валидатори и мобилни емулатори до инструменти за едновременно тестване като Adobe Edge Inspect и приложението Resizer [14] на Google. Chrome конзолата и Firefox браузърът предлагат различни инструменти за преоразмеряване, така както правят и софтуерите предлагани от други разработчици.
Основен недостатък е скоростта на зареждане. Ако сайтът има видеоматериали и слайдове, то става много труден за нормално ползване. Много от недостатъците се проявяват при сайтове с големи размери. При някои от най-известните сайтове за електронна търговия от този тип се наблюдава голямо утежняване на началните страници. Въпреки че ненужните тагове са скрити за по-малките мобилни устройства, браузърите зареждат целия сайт на заден план и това прави адаптивния дизайн излишен в този случай. Определящ фактор е и бюджетът. При адаптивното оформление е нужно пълно пренаписване на кода, което обикновено излиза скъпо. Другият недостатък е при бавен мобилен интернет или слабо устройство. Зареждането дори на сайтове с малки размери се превръща с досадно чакане. Фазата на проектиране и тестване може да се окаже доста продължителна, понеже е трудно да се изработи сайт, който да бъде удобен за визуализиране на всички размери дисплеи. Има адаптивни сайтове, които на екрани с ниска резолюция приличат на парчета от пъзел, които не си подхождат напълно.
При „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 дизайна са налични няколко оформления на сайта с определени фиксирани размери за различните устройства:
/* 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) {}
Когато се поставя YouTube видео плейър (вграждан посредством iframe) в уеб сайт, който използва адаптивен дизайн, малкият CSS трик за 100% ширина няма да помогне. Необходимо е да се допише css файлът за сайта с адаптивен дизайн по следния начин[17]:
.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>
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
