мазмун 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 бир нече түзмөктөр үчүн бир жооп дизайнын түзүүнүн мүмкүн болуучу артыкчылыктарын көрсөтүү:

Жооптуу веб -дизайн инфографикасы

Сиздин сайт жооп береби?

Сайтыңыздын жооп берер-келбесин билүүнүн бир жөнөкөй жолу - бул элементтер браузердин кеңдигине жараша жылганын көрүү үчүн браузериңиздин терезесин жөн эле чоңойтуу же кичирейтүү.

Тактык үчүн, өзүңүздү көрсөтүңүз Google Chrome сиздин сайтка браузер. Тандоо Көрүү> Иштеп чыгуучу> Иштеп чыгуучунун куралдары менюдан. Бул панелге же жаңы терезеге бир топ куралдарды жүктөйт. Иштеп чыгуучунун куралдары меню тилкесинин сол жагындагы мобилдик жана планшеттин сөлөкөтүнө окшош кичинекей сөлөкөтүн чыкылдатыңыз. Сиз кээ бир стандарттуу түзмөктөрдү тандап, ал тургай, баракты горизонталдуу же вертикалдуу көрүүнү кааласаңыз да өзгөртө аласыз.

  • Chrome иштеп чыгуучу куралдары жооп берүүчү планшет
  • Chrome иштеп чыгуучу куралдары жооп берүүчү мобилдик горизонталдуу
  • Chrome иштеп чыгуучу куралдары жооп берүүчү мобилдик
  • Chrome иштеп чыгуучу куралдары жооп берүүчү иш тактасы

Көрүнүштү пейзаждан портретке өзгөртүү үчүн навигациянын параметрлерин колдонсоңуз болот, же алдын ала программаланган көрүү аянтынын каалаган көлөмүн тандасаңыз болот. Сиз баракчаны кайрадан жүктөп алышыңыз керек болушу мүмкүн, бирок бул сиздин жөндөөлөрүңүздү текшерип, сайтыңыз бардык түзмөктөрдө сонун көрүнүп тургандыгын камсыз кылган дүйнөдөгү эң сонун курал!

Douglas Karr

Douglas Karr CMO болуп саналат OpenINSIGHTS жана негиздөөчүсү Martech Zone. Дуглас ондогон ийгиликтүү MarTech стартаптарына жардам берди, Martech сатып алууларына жана инвестицияларына 5 миллиард доллардан ашык каражатты текшерүүгө жардам берди жана компанияларга сатуу жана маркетинг стратегияларын ишке ашырууда жана автоматташтырууда жардам берүүнү улантууда. Дуглас эл аралык деңгээлде таанылган санариптик трансформация жана MarTech эксперти жана спикери. Дуглас ошондой эле Dummie's guide жана бизнес лидерлик китебинин басылып чыккан автору.

Тектеш макалалар

Артка жогорку баскычы
жакын

Adblock аныкталды

Martech Zone Бул мазмунду сизге эч кандай акы төлөбөй бере алат, анткени биз сайтыбызды жарнамадан түшкөн киреше, өнөктөштүк шилтемелер жана демөөрчүлүк аркылуу акча табабыз. Биздин сайтты көрүп жатканыңызда жарнама блокаторуңузду алып салсаңыз, биз ыраазыбыз.