Edukia MarketingMarketin eta salmenten bideoakMarketin InfografiaMugikorren eta Tableten Marketina

Zer da Responsive Design? (Azalpen bideoa eta infografia)

Hamarkada bat behar izan da web diseinu sentikorra (RWD) mainstream joan geroztik Cameron Adamsek aurkeztu zuen lehen aldiz kontzeptua 2010ean. Ideia burutsua izan zen. Zergatik ezin ditugu diseinatu ikusten ari den gailuaren ikusmirara egokitzen diren guneak?

Zer da Responsive Design?

Web-diseinu sentikorra diseinu-ikuspegi bat da, webguneak edozein gailutan ikusteko esperientzia optimoa eskaintzen duela ziurtatzen duena, pantailaren tamaina edo bereizmena edozein dela ere. Diseinu malguak, sarean oinarritutako diseinuak eta multimedia-kontsultak erabiltzea dakar ikusten ari den pantailaren tamainara egokitzen den gune bat sortzeko. Horrek esan nahi du responsive web diseinuarekin diseinatutako webguneak ondo itxura eta funtzionatuko duela mahaigaineko ordenagailu batean, tablet batean edo smartphone batean.

Beste era batera esanda, irudiak bezalako elementuak doi daitezke, baita elementu horien diseinua ere. Hona hemen responsive diseinua zer den azaltzen duen bideo bat, baita zure enpresak zergatik inplementatu behar duen. Gune-diseinu edo web-aplikazio berri bat garatzen ari bazara, web-diseinu sentikorra ezinbestekoa da, ez aukera bat, izan ere, web trafikoaren erdia baino gehiago bistaratze-zabalera eta altuera desberdinak dituzten gailu mugikorretatik datorrela.

Diseinu erreaktiboa ere ezin hobea da web diseinatzaileentzat, ez baitute gailuaren edo ikuspegiaren arabera bereziak diren esperientzia independenteak eraiki beharrik. Web diseinu sentikorra erabiliz lor daiteke CSS.

Responsive Design CSS Viewport Kontsultak

Hona hemen estilo-orri baten adibide bat, letra-tamaina bistaratuan oinarrituta doitzen ari dena multimedia-kontsulta erabiliz:

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

Arakatzaileak beren tamainaz jabetzen dira eta estilo orria goitik behera kargatzen dute. Pantailaren tamainari dagozkion estiloak kontsultatuz, estilo-elementu espezifikoak ezar ditzakezu gailuaren gutxieneko eta gehieneko zabalera bakoitzerako. Horrek ez du esan nahi tamaina bakoitzerako gune desberdinak diseinatu behar dituzunik, beharrezkoak diren elementuak mugitu besterik ez dituzu egin behar multimedia kontsultak erabiliz.

Mugikorreko lehen mentalitatearekin lan egitea da gaur egungo oinarrizko estandarra. Kategoriako marka onenak ez dira soilik beren webgunea mugikorretarako egokia den ala ez bezeroaren esperientzia osoaz pentsatzen ari.

Lucinda Duncalfe, Monetate zuzendari nagusia

Hemen duzue infografia Monetate Diseinu sentikor bat gailu anitzetarako sortzearen onura potentzialak irudikatuz:

Web Diseinu Infografikoa

Zure webgunea erantzunkorra al da?

Zure webgunea sentikorra den ikusteko modu erraz bat arakatzailearen leihoa haztea edo txikitzea da, elementuak arakatzailearen zabaleraren arabera mugitzen diren ikusteko.

Zehaztasun gehiago lortzeko, apuntatu zure google Chrome nabigatzailea zure webgunera. Hautatu Ikusi> Garatzailea> Garatzaile tresnak menutik. Honek tresna mordoa kargatuko ditu panel edo leiho berri batean. Egin klik mugikorren eta tabletaren ikono baten itxura duen Garatzaile-tresnak menu-barraren ezkerreko ikono txikian. Gailu estandar batzuk hauta ditzakezu eta orria horizontalki edo bertikalki ikusi nahi duzun ere alda dezakezu.

  • chrome garatzaileen tresnak erantzuteko tableta
  • chrome garatzaileen tresnak responsive mobile horizontal
  • chrome garatzaileen tresnak mugikor erreaktiboak
  • chrome garatzaileen tresnak mahaigain sentikorra

Goiko nabigazio aukerak erabil ditzakezu ikuspegia paisaiatik erretratura aldatzeko, edo baita aurrez programatutako aurrealdeko tamaina kopurua ere. Baliteke orria berriro kargatu behar izatea, baina munduko tresnarik coolena da zure sentikorraren ezarpenak egiaztatzeko eta zure guneak gailu guztietan itxura bikaina duela ziurtatzeko!

Douglas Karr

Douglas Karr -ren CMO da OpenINSIGHTS eta ren sortzailea Martech Zone. Douglasek MarTech startup arrakastatsu batzuei lagundu die, Martech-en erosketetan eta inbertsioetan 5 milioi dolar baino gehiagoko diligentzian lagundu du eta enpresei laguntzen jarraitzen du salmenta eta marketin estrategiak ezartzen eta automatizatzen. Douglas nazioartean ezaguna den eraldaketa digitala eta MarTech aditua eta hizlaria da. Douglas Dummie's gidaren eta negozioen lidergoaren liburu baten egilea ere bada.

Gaiarekin lotutako artikuluak

Itzuli gora botoia
Itxi

Adblokea hauteman da

Martech Zone eduki hau kosturik gabe eskaintzeko gai da, gure webgunea iragarkien diru-sarreren, kideen esteken eta babesen bidez dirua irabazten dugulako. Eskertuko genuke gure gunea ikusten duzun bitartean iragarkien blokeatzailea kentzea.