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

спагадны дызайн

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

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

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

Вікіпедыя

Іншымі словамі, такія элементы, як выявы, можна рэгуляваць, а таксама макет гэтых элементаў. Вось відэа, якое тлумачыць, што такое адаптыўны дызайн, а таксама чаму ваша кампанія павінна яго ўкараняць. Нядаўна мы перапрацавалі DK New Media сайт будзе рэагаваць і зараз працуе над Martech Zone зрабіць тое ж самае!

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

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

На сённяшні дзень базавым стандартам з'яўляецца праца з ментальнасцю, звязанай з мабільнай сувяззю. Лепшыя ў сваім класе брэнды думаюць не толькі пра тое, ці зручны іх сайт для мабільных прылад, але і пра поўны кліенцкі досвед.

Люсінда Данкальф, генеральны дырэктар Monetate

Вось інфаграфіка ад Monetate, якая ілюструе патэнцыйныя перавагі стварэння аднаго адаптыўнага дызайну для некалькіх прылад:

Спагадны інфаграфічны вэб-дызайн

Калі вы хочаце ўбачыць спагадны сайт у дзеянні, накіруйце Google Chrome браўзэр (я лічу, што Firefox мае тую ж функцыю) для DK New Media, зараз абярыце Выгляд> Распрацоўшчык> Інструменты распрацоўніка з меню. Гэта загрузіць кучу інструментаў у ніжняй частцы браўзэра. Націсніце на невялікі значок мабільнага тэлефона ў левай частцы радка меню Інструменты распрацоўшчыка.

спагадны тэст-хром

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

3 Каментары

  1. 1
  2. 2

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

    • 3

      Я думаю, ты абсалютна маеш рацыю, Аарон. Недастаткова проста змяніць памер і перамясціць рэчы ... нам сапраўды трэба таксама эфектыўна выкарыстоўваць змест.

Што вы думаеце?

Гэты сайт выкарыстоўвае Akismet для барацьбы са спамам. Даведайцеся, як дадзеныя апрацоўваюцца каментар.