Змест маркетынгуВідэа па маркетынгу і продажахМаркетынгавая інфаграфікаМабільны і планшэтны маркетынг

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

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

  • інструменты распрацоўшчыка chrome, адаптыўны планшэт
  • Інструменты распрацоўшчыка chrome адаптыўны мабільны гарызантальны
  • інструменты распрацоўніка chrome адаптыўныя для мабільных прылад
  • інструменты распрацоўшчыка chrome адаптыўны працоўны стол

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

Douglas Karr

Douglas Karr з'яўляецца CMO кампаніі OpenINSIGHTS і заснавальнік ст Martech Zone. Дуглас дапамог дзясяткам паспяховых стартапаў MarTech, аказаў дапамогу ў належнай абачлівасці больш чым на 5 мільярдаў долараў у набыцці і інвестыцыях Martech і працягвае дапамагаць кампаніям у рэалізацыі і аўтаматызацыі іх продажаў і маркетынгавых стратэгій. Дуглас - міжнародна прызнаны эксперт і дакладчык па лічбавай трансфармацыі і MarTech. Дуглас таксама з'яўляецца апублікаваным аўтарам даведніка па манекенах і кнігі па бізнес-кіраўніцтву.

Артыкулы па Тэме

Вярнуцца да пачатку кнопкі
блізка

Выяўлена блакіроўка рэкламы

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