X'inhu Disinn Responsive? (Video Spjegatur u Infografika)

Għadda għaxar snin disinn tal-web li jirrispondi (RWD) li jmorru mainstream peress Cameron Adams introduċa għall-ewwel darba il-kunċett fl-2010. L-idea kienet inġenjuża – għaliex ma nistgħux niddisinjaw siti li jadattaw għall-viewport tal-apparat li qed tara fuqu?

X'inhu Disinn Responsive?

Id-disinn tal-web li jirrispondu huwa approċċ ta’ disinn li jiżgura li websajt tipprovdi l-aħjar esperjenza ta’ wiri fuq kwalunkwe apparat, irrispettivament mid-daqs jew ir-riżoluzzjoni tal-iskrin. Jinvolvi l-użu ta' layouts flessibbli, layouts ibbażati fuq grid, u mistoqsijiet tal-midja biex jinħoloq sit li jaġġusta għad-daqs tal-iskrin li jkun qed jaraha. Dan ifisser li websajt iddisinjata b'disinn tal-web li jirrispondu se tidher u tiffunzjona tajjeb fuq kompjuter desktop, tablet, jew smartphone.

Fi kliem ieħor, elementi bħall-immaġini jistgħu jiġu aġġustati kif ukoll it-tqassim ta 'dawk l-elementi. Hawn video li jispjega x'inhu d-disinn responsive kif ukoll għaliex il-kumpanija tiegħek għandha tkun qed timplimentah. Jekk qed tiżviluppa disinn ġdid ta' sit jew applikazzjoni tal-web, id-disinn tal-web li jirreaġixxi huwa indispensabbli, mhux għażla, peress li aktar minn nofs it-traffiku kollu tal-web ġej minn apparati mobbli li għandhom wisa' u għoli ta' viewport li jvarjaw.

Disinn responsive huwa wkoll ottimali għal disinjaturi tal-web, li m'għandhomx għalfejn jibnu esperjenzi indipendenti li huma uniċi bbażati fuq l-apparat jew viewport. Disinn tal-web li jirrispondu jista 'jitwettaq bl-użu CSS.

Mistoqsijiet ta' Viewport CSS ta' Disinn li Jirrispondi

Hawn eżempju ta 'stylesheet li qed taġġusta d-daqs tat-tipa bbażat fuq il-viewport billi tuża mistoqsija tal-midja:

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

Il-browsers huma konxji tad-daqs tagħhom u jgħabbu l-stylesheet minn fuq għal isfel. Billi tistaqsi l-istili applikabbli għad-daqs tal-iskrin, tista 'tissettja elementi tal-grafika speċifiċi għal kull wisa' minimu u massimu tal-apparat. Dan ma jfissirx li għandek tiddisinja siti differenti għal kull skrin ta 'daqs, għandek bżonn biss li taqleb l-elementi meħtieġa billi tuża l-mistoqsijiet tal-midja.

Li topera b'mentalità mobbli-ewwel huwa l-istandard bażi llum. Marki tal-aqwa fil-klassi qed jaħsbu mhux biss dwar jekk is-sit tagħhom huwiex faċli għall-mowbajl iżda dwar l-esperjenza sħiħa tal-klijent.

Lucinda Duncalfe, CEO ta' Monetate

Hawn infografika minn Monetate li juri l-benefiċċji potenzjali tal-ħolqien ta' disinn wieħed li jirrispondu għal apparati multipli:

Is-Sit Tiegħek Jirrispondi?

Mod wieħed sempliċi biex tara jekk is-sit tiegħek jirrispondix huwa li tkabbar jew tiċkien it-tieqa tal-browser tiegħek biex tara jekk l-elementi jiċċaqilqux ibbażati fuq il-wisa 'tal-browser.

Għal aktar preċiżjoni, punt tiegħek Google Chrome browser għas-sit tiegħek. Agħżel View> Developer> Developer Tools mill-menu. Dan se jgħabbi mazz ta 'għodod f'pannell jew tieqa ġdida. Ikklikkja fuq l-ikona żgħira fuq ix-xellug tal-bar tal-menu tal-Għodod tal-Iżviluppatur li tidher qisha ikona tal-mowbajl u tat-tablet. Tista 'tagħżel xi apparati standard u anke tibdel jekk tixtieqx tara l-paġna orizzontalment jew vertikalment.

Tista 'tuża l-għażliet tan-navigazzjoni' l fuq biex tibdel il-veduta minn pajsaġġ għal ritratt, jew saħansitra tagħżel kwalunkwe numru ta 'daqsijiet ta' veduta pprogrammati minn qabel. Jista 'jkun li jkollok terġa' tgħabbi l-paġna, imma hija l-iktar għodda friska fid-dinja biex tivverifika l-issettjar tar-rispons tiegħek u tiżgura li s-sit tiegħek jidher tajjeb fuq l-apparati kollha!