Content MarketingВидео маркетинг и продажбиМаркетингова инфографикаМобилен и таблетен маркетинг

Какво е отзивчив дизайн? (Обяснително видео и инфографика)

Отне десетилетие отзивчив уеб дизайн (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 браузър към вашия сайт. Изберете Преглед> Програмист> Инструменти за програмисти от менюто. Това ще зареди куп инструменти в панел или нов прозорец. Щракнете върху малката икона вляво от лентата с менюта с инструменти за разработчици, която изглежда като икона за мобилно устройство и таблет. Можете да изберете някои стандартни устройства и дори да промените дали искате да видите страницата хоризонтално или вертикално.

  • инструменти за разработчици на chrome отзивчив таблет
  • Инструменти за разработчици на chrome отзивчиви мобилни хоризонтални
  • chrome developer tools responsive mobile
  • инструменти за разработчици на chrome, отзивчив работен плот

Можете да използвате опциите за навигация отгоре, за да промените изгледа от пейзаж в портрет или дори да изберете произволен брой предварително програмирани размери на прозореца. Може да се наложи да презаредите страницата, но това е най-готиният инструмент в света за проверка на вашите отзивчиви настройки и гарантиране на това, че сайтът ви изглежда страхотно на всички устройства!

Douglas Karr

Douglas Karr е CMO на OpenINSIGHTS и основателят на Martech Zone. Дъглас е помогнал на десетки успешни стартъпи на MarTech, съдействал е за надлежна проверка на над $5 милиарда в придобивания и инвестиции на Martech и продължава да помага на компаниите при прилагането и автоматизирането на техните стратегии за продажби и маркетинг. Дъглас е международно признат експерт и лектор по дигитална трансформация и MarTech. Дъглас също е публикуван автор на ръководство за манекени и книга за бизнес лидерство.

Свързани статии

Бутон "Нагоре" горе
Близо

Открит е рекламен блок

Martech Zone е в състояние да ви предостави това съдържание безплатно, тъй като осигуряваме приходи от нашия сайт чрез приходи от реклами, партньорски връзки и спонсорство. Ще сме благодарни, ако премахнете блокера си за реклами, докато разглеждате нашия сайт.