ynhâld MarketingFideo's foar marketing en ferkeapMarketing InfographicsMobyl- en tabletmarketing

Wat is Responsive Design? (Explainer Video en Infographic)

It hat in desennium duorre foar responsive webûntwerp (RWD) om sûnt mainstream te gean Cameron Adams yntrodusearre earst it konsept yn 2010. It idee wie geniaal - wêrom kinne wy ​​gjin siden ûntwerpe dy't har oanpasse oan 'e viewport fan it apparaat wêrop it wurdt besjoen?

Wat is Responsive Design?

Responsive webûntwerp is in ûntwerpoanpak dy't derfoar soarget dat in webside in optimale besjenûnderfining leveret op elk apparaat, nettsjinsteande de skermgrutte of resolúsje. It giet om it brûken fan fleksibele yndielingen, raster-basearre yndielingen, en mediafragen om in side te meitsjen dy't oanpast oan 'e grutte fan it skerm wêrop it wurdt besjoen. Dit betsjut dat in webside ûntworpen mei responsyf webûntwerp goed sil sjen en funksjonearje op in buroblêd komputer, in tablet of in smartphone.

Mei oare wurden, eleminten lykas ôfbyldings kinne oanpast wurde lykas de yndieling fan dy eleminten. Hjir is in fideo dy't ferklearret wat responsyf ûntwerp is en ek wêrom jo bedriuw it moat ymplementearje. As jo ​​​​in nije side-ûntwerp of webapplikaasje krije ûntwikkele, is responsyf webûntwerp in must, gjin opsje, jûn dat mear as de helte fan alle webferkear komt fan mobile apparaten dy't ferskate viewportbreedtes en hichten hawwe.

Responsyf ûntwerp is ek optimaal foar webûntwerpers, dy't gjin unôfhinklike ûnderfiningen hoege te bouwen dy't unyk binne basearre op it apparaat of viewport. Responsive webûntwerp kin wurde berikt mei help fan CSS.

Responsive Design CSS Viewport Queries

Hjir is in foarbyld fan in stylblêd dat de lettertypegrutte oanpast op basis fan 'e viewport mei in mediaquery:

/* 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;
  }
}

Browsers binne sels bewust fan har grutte en se laden it stylblêd fan boppen nei ûnderen. Troch de jildende stilen te freegjen foar de grutte fan it skerm, kinne jo spesifike styleleminten ynstelle foar elke minimale en maksimale apparaatbreedte. Dit betsjuttet net dat jo ferskate siden moatte ûntwerpe foar elke grutte skerm, jo ​​moatte gewoan de needsaaklike eleminten ferpleatse mei de mediafragen.

Operearje mei in mobile-earste mentaliteit is hjoed de basisline standert. Best-in-class merken tinke net allinich oer oft har side mobylfreonlik is, mar oer de folsleine klantûnderfining.

Lucinda Duncalfe, CEO fan Monetate

Hjir is in infografyk fan Monetearje yllustrearje de potensjele foardielen fan it meitsjen fan ien responsyf ûntwerp foar meardere apparaten:

Responsive webûntwerp Infographic

Is jo side responsyf?

Ien ienfâldige manier om te sjen oft jo side reageart is om jo browserfinster gewoan te groeien of te krimpjen om te sjen oft de eleminten bewege op basis fan de breedte fan 'e browser.

Foar mear krektens, punt dyn Google Chrome browser nei jo side. Útkieze Sjoch> Untwikkelder> Untwikkelders ark út it menu. Dit sil in boskje ark laden yn in paniel of nij finster. Klikje op it lytse ikoan links fan 'e menubalke foar ûntwikkeldersark dat liket op in mobyl- en tablet-ikoan. Jo kinne guon standertapparaten selektearje en sels feroarje oft jo de side horizontaal of fertikaal wolle besjen.

  • chrome developer ark responsive tablet
  • chrome developer ark responsive mobile horizontaal
  • chrome ûntwikkelders ark responsive mobyl
  • chrome ûntwikkelders ark responsyf buroblêd

Jo kinne de navigaasje-opsjes boppe-op brûke om de werjefte fan lânskip nei portret te feroarjen, of sels in oantal foarprogrammeare werjefportgrutte te selektearjen. Jo moatte miskien de side opnij lade, mar it is it coolste ark yn 'e wrâld om jo responsive ynstellingen te kontrolearjen en derfoar te soargjen dat jo side op alle apparaten geweldich sjocht!

Douglas Karr

Douglas Karr is CMO fan OpenINSIGHTS en de oprjochter fan de Martech Zone. Douglas hat holpen tsientallen suksesfolle MarTech startups, hat holpen yn 'e due diligence fan mear as $ 5 miljard yn Martech oanwinsten en ynvestearrings, en bliuwt te helpen bedriuwen by it útfieren en automatisearjen fan harren ferkeap en marketing strategyen. Douglas is in ynternasjonaal erkend digitale transformaasje en MarTech-ekspert en sprekker. Douglas is ek in publisearre skriuwer fan in Dummie's gids en in boek foar bedriuwsliederskip.

Related Articles

Werom nei topknop
Slute

Adblock ûntdutsen

Martech Zone is yn steat om jo dizze ynhâld sûnder kosten te leverjen, om't wy ús side monetearje fia advertinsje-ynkomsten, affiliate keppelings en sponsoring. Wy soene it wurdearje as jo jo advertinsjeblokkerer fuortsmite as jo ús side besjen.