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

Какво е отзивчив дизайн?

Отзивчивият дизайн е подход за дизайн на графичния потребителски интерфейс (GUI), използван за създаване на съдържание, което се приспособява плавно към различни размери на екрана. Дизайнерите оразмеряват елементи в относителни единици (%) и прилагат медийни заявки, така че техните проекти могат автоматично да се адаптират към пространството на браузъра, за да осигурят съгласуваност на съдържанието между устройствата.

Защо отзивчивият дизайн е толкова популярен

В началото на 2010-те дизайнерите трябваше да се справят с исторически феномен. Повече потребители започват да имат достъп до уеб материали на преносими устройства, отколкото на настолни компютри. Имаше две основни решения. Дизайнерите могат да изработят няколко версии на един дизайн и да направят всяка с фиксирани размери (подход, наречен адаптивен дизайн). Като алтернатива те биха могли да работят по един, гъвкав дизайн, който да се разтяга или свива, за да пасне на екрана (отзивчив дизайн). Организациите и дизайнерите откриха, че е трудно да се игнорират предимствата на отзивчивия дизайн. Вместо да работят с абсолютни единици (например пиксели) на отделни версии, дизайнерите бяха свободни да се съсредоточат само върху един дизайн и да го оставят да тече като течност, за да запълни всички „контейнери“. Отзивчивият дизайн не е безупречен. Въпреки това той има значителни предимства и привлекателността му непрекъснато нараства. Същото е и броят на безплатните рамки, съобразени с него. Отзивчивият дизайн се превърна в една от задължителните функции на няколко организации (напр. Google).

Fluid Grid System – Елементите заемат един и същ процент от пространството, колкото и голям или малък да е екранът (т.е. потребители, разглеждащи дизайни на различни устройства). Това означава, че избирате къде да се показват пикселите и дефинирате размера на оформлението, така че елементите да се мащабират нагоре или надолу по фиксиран начин. По-лесно е, ако използвате CSS (Cascading Style Sheets) мрежова система и генератор за основата на вашия дизайн (някои се предлагат безплатно). Трябва да изчислите целевия размер, разделен на контекста, като процент. Това е максималната ширина на вашата дизайнерска функция, разделена на максималната ширина на браузъра на потребителите. Когато приложите тези проценти от функции към необходимите свойства в CSS скрипта, ще имате един дизайн, който се разширява или свива според размера на екрана на потребителите.

Използване на флуидно изображение – За разлика от текста, изображенията не са естествено флуидни. Това означава, че те по подразбиране имат еднакъв размер и конфигурация от екрана на едно устройство към следващия. Очевиден риск е, че вашият дизайн ще изглежда несъвместим между устройствата, тъй като изображенията може да не успеят да се коригират и следователно да се показват непропорционално на други елементи. Така че, трябва да приложите CSS команда—: img {max-width: 100%;} – за да се гарантира, че изображението се свива за по-малки екрани. За да включите много изображения, използвате друга CSS команда.

Мултимедийни заявки – Това са филтри, които използвате, за да откриете размерите на устройството за сърфиране и да направите вашия дизайн да изглежда по подходящ начин. С тях вие сондате, за да определите какъв размер на екрана потребителят разглежда вашия дизайн. Те ще променят оформлението на сайта, за да отговарят на определени условия. Включвате ги и чрез CSS, а най-често използваните са min-width, max-width, min-height и max-height. Така че, въз основа на ширината, височината, ориентацията на екрана и т.н. на екрана, можете точно да посочите как ще бъде изобразен вашият дизайн, за да го виждат различните потребители.