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

отзивчив уеб дизайн

Отне десетилетие отзивчив уеб дизайн (RWD), за да се превърне в мейнстрийм от Камерън Адамс представи за първи път концепцията. Идеята беше гениална - защо не можем да проектираме сайтове, които да се адаптират към изгледа на устройството, на което се гледа?

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

Адаптивният уеб дизайн (RWD) е подход за уеб дизайн, насочен към изработване на сайтове, за да осигури оптимално преживяване при гледане - лесно четене и навигация с минимум преоразмеряване, панорамиране и превъртане - в широк спектър от устройства (от мобилни телефони до настолен компютър монитори). Сайт, проектиран с RWD, адаптира оформлението към средата за гледане, като използва течни, базирани на пропорции решетки, гъвкави изображения и CSS3 медийни заявки, продължение на правилото @media.

Уикипедия

С други думи, елементи като изображения могат да бъдат коригирани, както и оформлението на тези елементи. Ето видео, което обяснява какво е адаптивният дизайн, както и защо вашата компания трябва да го прилага. Наскоро преработихме DK New Media сайт, за да бъде отзивчив и сега работи по Martech Zone да направи същото!

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

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

Оперирането с манталитет на първо място за мобилни устройства е базовият стандарт днес. Най-добрите в класа марки мислят не само за това дали техният сайт е удобен за мобилни устройства, но и за пълното изживяване на клиентите.

Лусинда Дункалф, главен изпълнителен директор на Monetate

Ето инфографика от Monetate, илюстрираща потенциалните ползи от създаването на един реагиращ дизайн за множество устройства:

Отзивчива инфографика за уеб дизайн

Ако искате да видите реагиращ сайт в действие, насочете вашия Google Chrome браузър (вярвам, че Firefox има същата функция) за DK New Media, Сега изберете Преглед> Програмист> Инструменти за програмисти от менюто. Това ще зареди куп инструменти в долната част на браузъра. Кликнете върху малката икона за мобилни устройства в най-лявата част на лентата с менюта на Developer Tools.

responsive-testing-chrome

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

3 Коментари

  1. 1
  2. 2

    Благодаря много Дъглас за тази добре обяснена статия. Трябва да се съглася с това, макар и по отношение на съдържанието на нещата. За повечето сайтове, които правим, адаптивното оформление няма да е достатъчно. Имаме нужда от отзивчиво съдържание. Но за по-основните уебсайтове със сигурност ще използваме вашата добре документирана статия за това как да се справите с това!

    • 3

      Мисля, че си напълно прав, Аарон. Не е достатъчно само да преоразмерите и преместите нещата ... ние наистина трябва да използваме ефективно и съдържанието.

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.