Какво е отзивчив дизайн? (Обяснително видео и инфографика)
Отне десетилетие отзивчив уеб дизайн (RWD), за да стане мейнстрийм оттогава Камерън Адамс представи за първи път концепцията през 2010 г. Идеята беше гениална – защо не можем да проектираме сайтове, които се адаптират към прозореца за изглед на устройството, на което се гледа?
Какво е отзивчив дизайн?
Адаптивният уеб дизайн е дизайнерски подход, който гарантира, че уебсайтът предоставя оптимално изживяване при гледане на всяко устройство, независимо от размера на екрана или разделителната способност. Това включва използване на гъвкави оформления, базирани на решетка оформления и медийни заявки за създаване на сайт, който се приспособява към размера на екрана, на който се гледа. Това означава, че уебсайт, проектиран с адаптивен уеб дизайн, ще изглежда и ще функционира добре на настолен компютър, таблет или смартфон.
С други думи, елементи като изображения могат да бъдат коригирани, както и оформлението на тези елементи. Ето видео, което обяснява какво представлява адаптивният дизайн, както и защо вашата компания трябва да го внедри. Ако получавате нов дизайн на сайт или разработено уеб приложение, адаптивният уеб дизайн е задължителен, а не опция, като се има предвид, че над половината от целия уеб трафик идва от мобилни устройства, които имат различна ширина и височина на прозореца за изглед.
Отзивчивият дизайн също е оптимален за уеб дизайнерите, които не трябва да създават независими изживявания, които са уникални въз основа на устройството или прозореца за изглед. Адаптивен уеб дизайн може да бъде постигнат с помощта на CSS.
Отзивчив дизайн CSS Viewport заявки
Ето пример за лист със стилове, който коригира размера на шрифта въз основа на прозореца за изглед с помощта на медийна заявка:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
Браузърите осъзнават размера си и зареждат таблицата със стилове отгоре надолу. Чрез запитване към приложимите стилове за размера на екрана можете да зададете конкретни елементи за стил за всяка минимална и максимална ширина на устройството. Това не означава, че трябва да проектирате различни сайтове за всеки размер на екрана, просто трябва да разместите необходимите елементи с помощта на медийните заявки.
Оперирането с манталитет на първо място за мобилни устройства е базовият стандарт днес. Най-добрите в класа марки мислят не само за това дали техният сайт е удобен за мобилни устройства, но и за пълното изживяване на клиентите.
Лусинда Дункалф, главен изпълнителен директор на Monetate
Ето инфографика от Monetate илюстриране на потенциалните ползи от създаването на един адаптивен дизайн за множество устройства:
Вашият сайт реагира ли?
Един лесен начин да видите дали сайтът ви реагира е просто да увеличите или свиете прозореца на браузъра си, за да видите дали елементите се движат въз основа на ширината на браузъра.
За по-голяма точност насочете своя Google Chrome браузър към вашия сайт. Изберете Преглед> Програмист> Инструменти за програмисти от менюто. Това ще зареди куп инструменти в панел или нов прозорец. Щракнете върху малката икона вляво от лентата с менюта с инструменти за разработчици, която изглежда като икона за мобилно устройство и таблет. Можете да изберете някои стандартни устройства и дори да промените дали искате да видите страницата хоризонтално или вертикално.
Можете да използвате опциите за навигация отгоре, за да промените изгледа от пейзаж в портрет или дори да изберете произволен брой предварително програмирани размери на прозореца. Може да се наложи да презаредите страницата, но това е най-готиният инструмент в света за проверка на вашите отзивчиви настройки и гарантиране на това, че сайтът ви изглежда страхотно на всички устройства!