Што такое спагадны дызайн? (Тлумачальнае відэа і інфаграфіка)

На гэта спатрэбілася дзесяцігоддзе спагадны дызайн (RWD) перайсці ў мэйнстрым з тых часоў Камерон Адамс упершыню прадставіў канцэпцыя ў 2010 годзе. Ідэя была геніяльнай - чаму мы не можам ствараць сайты, якія адаптуюцца да акна прагляду прылады, на якой яны праглядаюцца?

Што такое спагадны дызайн?

Адаптыўны вэб-дызайн - гэта дызайнерскі падыход, які гарантуе, што вэб-сайт забяспечвае аптымальны вопыт прагляду на любой прыладзе, незалежна ад памеру экрана або раздзялення. Гэта ўключае ў сябе выкарыстанне гнуткіх макетаў, макетаў на аснове сеткі і медыя-запытаў для стварэння сайта, які падладжваецца пад памер экрана, на якім ён праглядаецца. Гэта азначае, што вэб-сайт, распрацаваны з адаптыўным вэб-дызайнам, будзе добра выглядаць і працаваць на настольным кампутары, планшэце або смартфоне.

Іншымі словамі, такія элементы, як выявы, можна наладзіць, а таксама размяшчэнне гэтых элементаў. Вось відэа, якое тлумачыць, што такое адаптыўны дызайн, а таксама чаму ваша кампанія павінна яго ўкараняць. Калі вы ствараеце новы дызайн сайта або распрацоўваеце вэб-прыкладанне, адаптыўны вэб-дызайн з'яўляецца абавязковым, а не варыянтам, улічваючы, што больш за палову ўсяго вэб-трафіку паступае з мабільных прылад, якія маюць розную шырыню і вышыню прагляду.

Адаптыўны дызайн таксама з'яўляецца аптымальным для вэб-дызайнераў, якім не трэба ствараць незалежныя ўражанні, унікальныя ў залежнасці ад прылады або вобласці прагляду. Адаптыўны вэб-дызайн можа быць выкананы з дапамогай CSS.

Адаптыўны дызайн CSS Viewport Queries

Вось прыклад табліцы стыляў, якая рэгулюе памер шрыфта ў залежнасці ад акна прагляду з дапамогай медыя-запыту:

/* 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 браўзэр на ваш сайт. Выберыце Выгляд> Распрацоўшчык> Інструменты распрацоўніка з меню. Гэта загрузіць кучу інструментаў на панэлі або ў новым акне. Націсніце на маленькі значок злева ад радка меню інструментаў распрацоўшчыка, які выглядае як значок мабільнага тэлефона і планшэта. Вы можаце выбраць некаторыя стандартныя прылады і нават змяніць, ці хочаце вы праглядаць старонку гарызантальна ці вертыкальна.

Вы можаце выкарыстоўваць параметры навігацыі зверху, каб змяніць выгляд з альбомнага на партрэтны альбо нават выбраць любую колькасць загадзя запраграмаваных памераў відарыса. Магчыма, вам прыйдзецца перазагрузіць старонку, але гэта самы круты інструмент у свеце для праверкі адаптыўных налад і забеспячэння выдатнага выгляду вашага сайта на ўсіх прыладах!