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:
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.
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!