Kontenta MerkatumadoVidbendoj pri Merkatado kaj VendadoMerkatada InfografioMobile kaj Tablojda Merkatado

Kio estas Respondema Dezajno? (Klariga Vidbendo kaj Infografio)

Ĝi daŭris jardekon por respondema reteja desegno (RWD) iri ĉefa ekde Cameron Adams unue prezentis la koncepto en 2010. La ideo estis sprita – kial ni ne povas desegni retejojn, kiuj adaptiĝas al la vidpunkto de la aparato, sur kiu ĝi estas rigardata?

Kio estas Respondema Dezajno?

Respondema retejo-dezajno estas dezajna aliro, kiu certigas, ke retejo provizas optimuman spektadon en iu ajn aparato, sendepende de la ekrana grandeco aŭ rezolucio. Ĝi implikas uzi flekseblajn aranĝojn, krad-bazitajn aranĝojn kaj amaskomunikilajn demandojn por krei retejon, kiu ĝustigas al la grandeco de la ekrano, sur kiu ĝi estas rigardata. Ĉi tio signifas, ke retejo desegnita kun respondema retejo-dezajno aspektos kaj funkcios bone sur labortabla komputilo, tablojdo aŭ inteligenta telefono.

Alivorte, elementoj kiel bildoj povas esti ĝustigitaj same kiel la aranĝo de tiuj elementoj. Jen video, kiu klarigas, kio estas respondema dezajno kaj kial via kompanio devus efektivigi ĝin. Se vi ricevas novan retejo-dezajnon aŭ retan aplikaĵon evoluigita, respondema retejo-dezajno estas nepra, ne elekto, ĉar pli ol duono de la tuta retejo-trafiko venas de porteblaj aparatoj, kiuj havas diversajn larĝojn kaj altecojn de vidpunkto.

Respondema dezajno ankaŭ estas optimuma por retaj projektistoj, kiuj ne devas konstrui sendependajn spertojn, kiuj estas unikaj surbaze de la aparato aŭ vidpunkto. Respondema retejo-dezajno povas esti plenumita uzante CSS.

Respondema Dezajno CSS Viewport Demandoj

Jen ekzemplo de stilfolio, kiu ĝustigas la tiparon surbaze de la vidfenestro per amaskomunikila demando:

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

Retumiloj estas memkonsciaj pri sia grandeco kaj ili ŝarĝas la stilfolion de supre ĝis malsupre. Pridemandante la aplikeblajn stilojn por la grandeco de la ekrano, vi povas agordi specifajn stilajn elementojn por ĉiu minimuma kaj maksimuma aparato-larĝo. Ĉi tio ne signifas, ke vi devas desegni malsamajn retejojn por ĉiu grandeco ekrano, vi nur bezonas ŝanĝi la necesajn elementojn uzante la amaskomunikilajn demandojn.

Funkcii kun poŝtelefona pensmaniero estas la bazlinia normo hodiaŭ. Plej bonkvalitaj markoj pensas ne nur pri ĉu ilia retejo estas portebla, sed pri la plena klienta sperto.

Lucinda Duncalfe, CEO de Monetate

Jen infografio de Moneti ilustrante la eblajn avantaĝojn de kreado de unu respondema dezajno por pluraj aparatoj:

Respondema Reteja Projekta Infografio

Ĉu Via Retejo Respondema?

Unu simpla maniero por vidi ĉu via retejo estas respondema estas nur kreski aŭ malgrandigi vian retumilon por vidi ĉu la elementoj moviĝas laŭ la larĝo de la retumilo.

Por pli da precizeco, indiku vian Google Chrome retumilo al via retejo. Elektu Vido> Ellaboranto> Iloj por ellaborantoj el la menuo. Ĉi tio ŝargos amason da iloj en panelo aŭ nova fenestro. Alklaku la malgrandan ikonon maldekstre de la menubreto de Programiloj, kiu aspektas kiel ikono de poŝtelefono kaj tablojdo. Vi povas elekti iujn normajn aparatojn kaj eĉ ŝanĝi ĉu vi volas vidi la paĝon horizontale aŭ vertikale.

  • chrome programisto iloj respondema tablojdo
  • chrome programisto iloj respondema movebla horizontala
  • Chrome-programiloj respondemaj poŝtelefonoj
  • Chrome-programiloj respondema labortablo

Vi povas uzi la navigajn opciojn supre por ŝanĝi la vidon de pejzaĝo al portreto, aŭ eĉ elekti iun ajn nombron da antaŭprogramitaj vidigaj grandecoj. Eble vi devos reŝargi la paĝon, sed ĝi estas la plej mojosa ilo en la mondo por kontroli viajn respondemajn agordojn kaj certigi, ke via retejo aspektas bonega sur ĉiuj aparatoj!

Douglas Karr

Douglas Karr estas CMO de OpenINSIGHTS kaj la fondinto de la Martech Zone. Douglas helpis dekduojn da sukcesaj MarTech-noventreprenoj, helpis en la konvena diligento de pli ol $ 5 miliardoj en Martech-akiroj kaj investoj, kaj daŭre helpas firmaojn en efektivigado kaj aŭtomatigo de siaj vendaj kaj merkatigstrategioj. Douglas estas internacie agnoskita cifereca transformo kaj MarTech-eksperto kaj parolanto. Douglas ankaŭ estas publikigita verkinto de la gvidisto de Dummie kaj komerca gvidadlibro.

rilataj Artikoloj

Reen al la supra butono
Fermi

Adbloko Detektita

Martech Zone kapablas provizi al vi ĉi tiun enhavon senkoste ĉar ni monetigas nian retejon per reklamaj enspezoj, filiaj ligiloj kaj sponsorado. Ni dankus se vi forigus vian reklamblokilon dum vi rigardas nian retejon.