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