Cynnwys MarchnataFideos Marchnata a GwerthuInfograffeg MarchnataMarchnata Symudol a Thabledi

Beth yw Dylunio Ymatebol? (Fideo Esboniadol a Infograffig)

Mae wedi cymryd degawd am dylunio gwe ymatebol (RWD) i fynd yn brif ffrwd ers hynny Cameron Adams a gyflwynwyd gyntaf y cysyniad yn 2010. Roedd y syniad yn ddyfeisgar – pam na allwn ni ddylunio safleoedd sy'n addasu i borthladd y ddyfais y mae'n cael ei gweld arno?

Beth yw Dylunio Ymatebol?

Mae dylunio gwe ymatebol yn ddull dylunio sy'n sicrhau bod gwefan yn darparu'r profiad gwylio gorau posibl ar unrhyw ddyfais, waeth beth fo maint neu gydraniad y sgrin. Mae'n cynnwys defnyddio cynlluniau hyblyg, gosodiadau grid, ac ymholiadau cyfryngau i greu gwefan sy'n addasu i faint y sgrin y mae'n cael ei gwylio arni. Mae hyn yn golygu y bydd gwefan a ddyluniwyd gyda dyluniad gwe ymatebol yn edrych ac yn gweithio'n dda ar gyfrifiadur bwrdd gwaith, llechen, neu ffôn clyfar.

Mewn geiriau eraill, gellir addasu elfennau fel delweddau yn ogystal â chynllun yr elfennau hynny. Dyma fideo sy'n esbonio beth yw dyluniad ymatebol yn ogystal â pham y dylai eich cwmni fod yn ei weithredu. Os ydych chi'n cael dyluniad gwefan newydd neu raglen we wedi'i datblygu, mae dylunio gwe ymatebol yn hanfodol, nid yn opsiwn, o ystyried bod dros hanner yr holl draffig gwe yn dod o ddyfeisiau symudol sydd â lled ac uchder amrywiol olygfannau.

Mae dylunio ymatebol hefyd yn optimaidd ar gyfer dylunwyr gwe, nad oes rhaid iddynt adeiladu profiadau annibynnol sy'n unigryw yn seiliedig ar y ddyfais neu'r olygfan. Gellir cyflawni dylunio gwe ymatebol gan ddefnyddio CSS.

Dylunio Ymatebol Ymholiadau Viewport CSS

Dyma enghraifft o ddalen arddull sy'n addasu maint y ffont yn seiliedig ar yr olygfan gan ddefnyddio ymholiad cyfryngau:

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

Mae porwyr yn hunanymwybodol o'u maint ac maent yn llwytho'r ddalen arddull o'r top i'r gwaelod. Trwy gwestiynu'r arddulliau cymwys ar gyfer maint y sgrin, gallwch osod elfennau steilio penodol ar gyfer pob lled dyfais lleiaf ac uchaf. Nid yw hyn yn golygu bod yn rhaid i chi ddylunio gwefannau gwahanol ar gyfer pob sgrin maint, does ond angen i chi symud yr elfennau angenrheidiol gan ddefnyddio'r ymholiadau cyfryngau.

Gweithredu gyda meddylfryd symudol yn gyntaf yw'r safon sylfaenol heddiw. Mae'r brandiau gorau yn y dosbarth yn meddwl nid yn unig a yw eu gwefan yn gyfeillgar i ffonau symudol ond am brofiad llawn y cwsmer.

Lucinda Duncalfe, Prif Swyddog Gweithredol Monetate

Dyma ffeithlun o Monetate sy'n dangos manteision posibl creu un dyluniad ymatebol ar gyfer dyfeisiau lluosog:

Infograffeg Dylunio Gwe Ymatebol

A yw Eich Gwefan yn Ymatebol?

Un ffordd syml o weld a yw'ch gwefan yn ymatebol yw tyfu neu grebachu ffenestr eich porwr i weld a yw'r elfennau'n symud yn seiliedig ar led y porwr.

Am fwy o gywirdeb, pwyntiwch eich Google Chrome porwr i'ch gwefan. Dewiswch Gweld> Datblygwr> Offer Datblygwr o'r ddewislen. Bydd hyn yn llwytho criw o offer mewn panel neu ffenestr newydd. Cliciwch ar yr eicon bach i'r chwith o'r bar dewislen Developer Tools sy'n edrych fel eicon ffôn symudol a llechen. Gallwch ddewis rhai dyfeisiau safonol a hyd yn oed newid a ydych am weld y dudalen yn llorweddol neu'n fertigol.

  • offer datblygwr chrome tabled ymatebol
  • offer datblygwr chrome ymatebol symudol llorweddol
  • offer datblygwr chrome ymatebol symudol
  • offer datblygwr chrome bwrdd gwaith ymatebol

Gallwch ddefnyddio'r opsiynau llywio i fyny i'r brig i newid yr olygfa o dirwedd i bortread, neu hyd yn oed ddewis unrhyw nifer o feintiau gwylio rhag-raglennu. Efallai y bydd yn rhaid i chi ail-lwytho'r dudalen, ond dyma'r offeryn coolest yn y byd ar gyfer gwirio'ch gosodiadau ymatebol a sicrhau bod eich gwefan yn edrych yn wych ar bob dyfais!

Douglas Karr

Douglas Karr yn CMO o AGOREDION a sylfaenydd y Martech Zone. Mae Douglas wedi helpu dwsinau o fusnesau newydd llwyddiannus MarTech, wedi cynorthwyo gyda diwydrwydd dyladwy o dros $5 bil mewn caffaeliadau a buddsoddiadau Martech, ac yn parhau i gynorthwyo cwmnïau i weithredu ac awtomeiddio eu strategaethau gwerthu a marchnata. Mae Douglas yn arbenigwr trawsnewid digidol ac yn siaradwr MarTech a gydnabyddir yn rhyngwladol. Mae Douglas hefyd yn awdur cyhoeddedig canllaw Dummie a llyfr arweinyddiaeth busnes.

Erthyglau Perthnasol

Yn ôl i'r brig botwm
Cau

Adblock Wedi'i Ganfod

Martech Zone yn gallu darparu'r cynnwys hwn i chi heb unrhyw gost oherwydd ein bod yn rhoi arian i'n gwefan trwy refeniw hysbysebu, dolenni cyswllt, a nawdd. Byddem yn gwerthfawrogi petaech yn cael gwared ar eich rhwystrwr hysbysebion wrth i chi edrych ar ein gwefan.