Wat is responsiewe ontwerp? (Explainer Video en Infographic)

Dit neem 'n dekade vir responsiewe webontwerp (RWD) te gaan hoofstroom sedert Cameron Adams die eerste keer bekendgestel die konsep in 2010. Die idee was vernuftig – hoekom kan ons nie werwe ontwerp wat aanpas by die uitsigpoort van die toestel waarop dit bekyk word nie?

Wat is responsiewe ontwerp?

Responsiewe webontwerp is 'n ontwerpbenadering wat verseker dat 'n webwerf 'n optimale kykervaring op enige toestel bied, ongeag die skermgrootte of resolusie. Dit behels die gebruik van buigsame uitlegte, roostergebaseerde uitlegte en medianavrae om 'n webwerf te skep wat aanpas by die grootte van die skerm waarop dit bekyk word. Dit beteken dat 'n webwerf wat ontwerp is met responsiewe webontwerp goed sal lyk en funksioneer op 'n tafelrekenaar, 'n tablet of 'n slimfoon.

Met ander woorde, elemente soos beelde kan aangepas word sowel as die uitleg van daardie elemente. Hier is 'n video wat verduidelik wat responsiewe ontwerp is, asook hoekom jou maatskappy dit moet implementeer. As jy 'n nuwe werfontwerp of webtoepassing ontwikkel, is responsiewe webontwerp 'n moet, nie 'n opsie nie, aangesien meer as die helfte van alle webverkeer van mobiele toestelle af kom wat verskillende uitsigpoortwydtes en -hoogtes het.

Responsiewe ontwerp is ook optimaal vir webontwerpers, wat nie onafhanklike ervarings hoef te bou wat uniek is op grond van die toestel of uitsigpoort nie. Responsiewe webontwerp kan bewerkstellig word met behulp van CSS.

Responsiewe ontwerp CSS Viewport Navrae

Hier is 'n voorbeeld van 'n stylblad wat die lettergrootte aanpas op grond van die viewport met behulp van 'n medianavraag:

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

Blaaiers is selfbewus van hul grootte en hulle laai die stylblad van bo na onder. Deur navraag te doen oor die toepaslike style vir die grootte van die skerm, kan jy spesifieke stileringselemente vir elke minimum en maksimum toestelwydte stel. Dit beteken nie dat jy verskillende werwe vir elke grootte skerm moet ontwerp nie, jy hoef net die nodige elemente te verskuif deur die medianavrae te gebruik.

Om met 'n mobiele eerste mentaliteit te werk, is vandag die standaard. Beste handelsmerke dink nie net daaraan of hul webwerf selfoonvriendelik is nie, maar ook oor die volledige kliënte-ervaring.

Lucinda Duncalfe, uitvoerende hoof van Monetate

Hier is 'n infografiese van Monetate illustreer die potensiële voordele van die skep van een responsiewe ontwerp vir verskeie toestelle:

Is u webwerf responsief?

Een eenvoudige manier om te sien of jou werf reageer, is om net jou blaaiervenster te laat groei of te verklein om te sien of die elemente beweeg op grond van die blaaier se breedte.

Vir meer akkuraatheid, wys jou Google Chrome blaaier na jou webwerf. Kies Bekyk> Ontwikkelaar> Ontwikkelaarhulpmiddels vanaf die spyskaart. Dit sal 'n klomp gereedskap in 'n paneel of nuwe venster laai. Klik op die klein ikoon aan die linkerkant van die Ontwikkelaarnutsgoed-kieslysbalk wat soos 'n selfoon- en tablet-ikoon lyk. Jy kan sekere standaardtoestelle kies en selfs verander of jy die bladsy horisontaal of vertikaal wil bekyk.

U kan die navigasie-opsies bo-op gebruik om die aansig van landskap na portret te verander, of selfs enige aantal voorafgeprogrammeerde aansiggroottes van die aansigpoort kies. U moet dalk die bladsy herlaai, maar dit is die coolste hulpmiddel ter wêreld om u responsiewe instellings te verifieer en te verseker dat u werf op alle toestelle goed lyk!