Отзивчив дизайн

от Уикипедия, свободната енциклопедия
Направо към: навигация, търсене
Сайт погледнат през различни устройства

Отзивчив уеб дизайн (Responsive Web Design или RWD; „responsive“ от английски – отзивчив), представлява вид стилизиране на уеб страници, целящо да осигури оптималната ѝ визуализация и улеснено взаимодействие с нея, което да е подходящо за различни устройства (мобилни телефони, таблети, настолни компютри и др.) и техните различни резолюции на екрана. Целта на това адаптиране е да се минимизира нуждата от преоразмеряване и скролване.

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

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

Отзивчивия уеб дизайн (Responsive web design) е все по-използван и придобива все по-голямо значение, тъй като количеството на мобилния трафик възлиза на повече от половината от общия интернет трафик. Тази тенденция е толкова разпространена, че Google започна повишаване на рейтингите на сайтове, които са с Отзивчив уеб дизайн (Responsive web design).[7]

Отзивчив дизайн е подходящ за всички видове устройства с различна резолюция[8]

История[редактиране | редактиране на кода]

Първият сайт, чието оформление се адаптира спрямо резолюцията на прозореца на браузъра е „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 са почти готови за дебют[9]. През май 2010 Итън Маркот въвежда термина отзивчив уеб дизайн (Responsive Web Design). В една от кратките си книги, написани през 2011, той детайлно описва теорията и практиката на този тип дизайн. През 2012 терминът Responsive Web Design е регистрирано като номер 2 в Топ уеб дизайн тенденции за 2012 г., а самата класация е оглавена от понятието „progressive enhancement“.

До преди няколко години, уеб сайтовете се изработваха, така че да пасват на повечето десктоп екрани, тъй като по-голямата част от интернет потребителите сърфираха, с помощта на такива устройства. Най-широко използвани бяха мониторите с ширина 800 или 1024 пиксела и в резултат, дизайните на уеб сайтовете трябваше да бъдат с подходящи размери. Постепенно, обаче, пазарът бе залят от устройства с различен размер екрани и дизайнерите поискаха техните уеб сайтове да изглеждат по един и същи начин, независимо от това какво устройство използват потребителите.

Мобилните телефони получиха възможността за достъп до интернет в края на 90-те години на 20 век, но по това време те можеха да показват само текстова информация. Едва няколко години по-късно, когато смартфоните придобиха популярност и мобилните браузъри започнаха да използват CSS и Javascript, нещата се промениха.[10]

Mashable нарича 2013 годината на Responsive Web Design. Много други източници препоръчват „RWD“ като евтина алтернатива на мобилните приложения.

В днешния все по-развиващ се мобилния свят, е невъзможно да се справите, ако при изработка на сайтове не проектирате вашия сайт с отзивчив дизайн. отзивчив дизайн (responsive design) позволява, вашата уеб страница да бъде отворена и да функционира правилно на всяко мобилно устройство. В Интернет има много литература и видео материали за това, как да направите сайта си отзивчив с минимални познания по писане на код[11][12][13].

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), ненатрапчив JavaScript (unobtrusive JavaScript) и прогресивно подобрение (progressive enhancement):
Създаване на мобилната версия преди дизайна на десктоп версиите (Mobile first)[14], ненатрапчив JavaScript (Unobtrusive JavaScript) и стратегията за прогресивно подобрение (Progressive enhancement) са сходни концепции, които предхождат RWD. Браузърите на мобилните телефони от най-ниския клас не поддържат JavaScript или Media заявки, така че препоръчителната практика е да се създаде основен уеб сайт, който да може да бъде използван както от мобилни телефони, така и от компютри, за да не се разчита на поетапно лимитиране на възможностите на страницата, за да може сложен и изпълнен с много изображения сайт да работи мобилни телефони. Прогресивно подобрение (progressive enhancement) въз основа на браузър, устройство или засичането на определена характеристика
Когато един уеб сайт трябва да бъде използван и от мобилни устройства, които не разполагат с JavaScript, „засичането на браузъра“ и „засичането на мобилното устройство“ са двата начина за заключаване дали определени HTML и CSS функции биват поддържани. Въпреки това, тези методи не са напълно надеждни, освен ако не се използват в комбинация с база данни за възможностите на устройството.

За по-способните съвременни мобилни устройства и компютри, JavaScript фреймуъркове като Modernizr[15], jQuery и jQuery Mobile[16], могат директно да тестват поддръжката на HTML/CSS функционалности. Polyfills може да се използва за добавяне на поддръжка за определени функционалности, например да се поддържа медийната заявка (което е задължително за RWD) и засилване на поддръжката на HTML5 на Internet Explorer. „Засичането на функции“ също може да не е толкова надеждно; случва се да се докладва за наличието на функционалност, когато въпросната липсва или е толкова некачествено приложена, че на практика е нефункционална.

Предизвикателства и други подходи[редактиране | редактиране на кода]

Отзивчив дизайн адаптира съдържанието си към средата на която се визуализира

Luke Wroblewski е обобщил някои от предизвикателствата пред RWD (responsive web design) и мобилния дизайн, и е създал каталог от модели за много-устройствено оформление. Той твърди, че в сравнение с опростеният RWD подход, RESS (responsive web design with server-side components) подхода може да осигури потребителско преживяване, което е по-добре оптимизирано за мобилни устройства. Приложението на сървърно ориентирани „dynamic CSS“ каскадни стилове езици като Sass или Incentivated's MML може да бъде част от такъв подход, чрез достъп до сървърно базирано API (Приложно-програмен интерфейс). Приложно-програмният интерфейс управлява различията на устройствата с помощта на база данни за възможностите на устройството, като целта е да се подобри използваемостта. RESS е по-скъп за разработка, изисквайки не просто клиентски-ориентирана логика, поради което се очертава като предназначен за организации с по-голям бюджет. Google препоръчват използването на RD(отзивчив дизайн) при уеб сайтовете, предназначени за смартфони, в сравнение с други подходи за дизайн[17].

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

В момента има много начини за потвърждаване и тестване на отзивчивите уеб дизайни(RWD), вариращи от мобилни сайт валидатори и мобилни емулатори[18] до инструменти за едновременно тестване като Adobe Edge Inspect и приложението Resizer[19] на Google. Firefox браузърът и Chrome конзолата предлагат инструменти за преоразмеряване, така както правят и софтуери предлагани от трети лица.

Предимства и недостатъци на Отзивчив уеб дизайн (Responsive web design или RWD)[редактиране | редактиране на кода]

Предимства[редактиране | редактиране на кода]

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

Недостатъци[редактиране | редактиране на кода]

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

Основни разлики между отзивчивия и адаптивния дизайн[редактиране | редактиране на кода]

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

1 /* Отзивчив дизайн */
2 body {max-width:100%;}
3 img {float:left; width:100%}
4 #container {max-width:95%; margin:0 auto;}
5 #sidebar {float:left; width:35%;}
6 #footer {clear:both; max-width:100%; height:auto;}

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

  • 320, 360 пиксела за смартфони;
  • 768 – за таблети;
  • 960 – за компютри.
     1 /* Адаптивен дизайн */
     2 /* Tablet Portrait size to standart 960 (devices and browsers) */
     3 @media only screen and (min-width:768px) and (max-width:959px) {}
     4 
     5 /* All Mobile Sizes (devices and browser) */
     6 @media only screen and (max-width:767px) {}
     7 
     8 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
     9 @media only screen and (min-width:480px) and (max-width:767px) {}
    10 
    11 /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    12 @media only screen and (max-width:479px) {}
    
    Отзивчивото оформление помага да нагаждате сайта си към различни размери на екрана, като визуализацията му остава еднаква при всички видове устройства. Това е така, защото посетителите използват едно единствено гъвкаво оформление и един URL. Адаптивният дизайн позволява създаването на отделни оформления на уеб сайта за различните устройства – оптимални за онези сайтове, които задължително трябва да имат различен изглед и функционалност при двете версии – десктопната и мобилната[21].

Примери за Отзивчив дизайн[редактиране | редактиране на кода]

Вижте също[редактиране | редактиране на кода]

Източници[редактиране | редактиране на кода]

Криейтив Комънс - Признание - Споделяне на споделеното Лиценз за свободна документация на ГНУ Тази страница частично или изцяло представлява превод на страницата „Responsive_web_design“ в Уикипедия на английски. Оригиналният текст, както и този превод, са защитени от Лиценза „Криейтив Комънс - Признание - Споделяне на споделеното“, а за съдържание, създадено преди юни 2009 година — от Лиценза за свободна документация на ГНУ. Прегледайте историята на редакциите на оригиналната страница, както и на преводната страница. Вижте източниците на оригиналната статия, състоянието ѝ при превода, и списъка на съавторите.