Unsa ang Responsive Design? (Pasabut sa Video ug Infographic)

responsive nga laraw sa web

Gikuha kini usa ka dekada alang sa responsive nga laraw sa web (RWD) nga moadto mainstream sukad Si Cameron Adams unang gipaila ang konsepto. Malantip ang ideya - ngano nga dili man kita makaplano sa mga site nga ipahiangay sa viewport sa aparato nga gitan-aw niini?

Unsa ang Responsive Design?

Ang tumutubag nga laraw sa web (RWD) usa ka pamaagi sa pagdesenyo sa web nga gitumong sa paghimo og mga site aron mahatagan usa ka labing kaayo nga kasinatian sa pagtan-aw - dali nga pagbasa ug pag-navigate nga adunay usa ka minimum nga pag-usab, pag-pan, ug pag-scroll sa tibuuk nga mga aparato (gikan sa mga mobile phone hangtod sa desktop computer monitor). Ang usa ka site nga gidisenyo uban ang RWD nagpahiangay sa layout sa pagtan-aw sa palibot pinaagi sa paggamit sa fluid, proporsyon-based nga mga grids, mga laraw nga mga imahe, ug mga pangutana sa media sa CSS3, usa ka extension sa lagda @media.

Wikipedia

Sa ato pa, ang mga elemento sama sa mga imahe mahimo’g ipahiangay ingon man ang paghan-ay sa mga elemento. Ania ang usa ka video nga nagpatin-aw kung unsa ang responsive nga disenyo ingon man kung ngano nga ipatuman kini sa imong kompanya. Bag-ohay lang giayo namon ang DK New Media site nga mahimong responsive ug karon nagtrabaho Martech Zone sa pagbuhat sa mao usab!

Ang pamaagi sa paghimo sa usa ka responsive nga site medyo nakakapoy tungod kay kinahanglan nimo nga adunay usa ka hierarchy sa imong mga istilo nga giorganisar pinahiuyon sa kadako sa viewport.

Nahibal-an sa mga browser ang ilang kadako, busa gikarga nila ang styleheet gikan sa taas hangtod sa ubos, nga gipangutana ang mga naaplikar nga estilo alang sa gidak-on sa screen. Dili kini gipasabut nga kinahanglan nimo nga magdisenyo lainlaing mga styleheet alang sa matag screen sa gidak-on, kinahanglan nimo nga ibalhin ang mga kinahanglanon nga elemento.

Ang pagpadagan sa usa ka panguna-una nga mentalidad sa batakan mao ang sukaranan nga sukaranan karon. Ang labing maayo nga klase nga mga tatak naghunahuna dili lang kung ang ilang site mahigalaon sa mobile apan bahin sa bug-os nga kasinatian sa kostumer.

Lucinda Duncalfe, Monetate CEO

Ania ang usa ka infographic gikan sa Monetate nga naghulagway sa mga potensyal nga kaayohan sa pagmugna usa ka responsive nga laraw alang sa daghang mga aparato:

Responsive Web Design Infographic

Kung gusto nimo nga makit-an ang usa ka mosanong nga site sa paglihok, itudlo ang imong Google Chrome browser (Nagtuo ako nga ang Firefox adunay parehas nga bahin) sa DK New Media. Karon pilia Pagtan-aw> Developer> Mga Himan sa Developer gikan sa menu. Mag-load kini usa ka hugpong nga gamit sa ilawom sa browser. Pag-klik sa gamay nga mobile icon sa wala nga bahin sa menu bar sa Mga Tool sa Developer.

responsive-testing-chrome

Mahimo nimong gamiton ang mga kapilian sa nabigasyon sa taas aron mabag-o ang panan-aw gikan sa talan-awon ngadto sa hulagway, o bisan pagpili sa bisan unsang ihap sa mga giandam nga gidak-on sa viewport. Mahimo nimo nga i-reload ang panid, apan kini ang labing cool nga gamit sa kalibutan alang sa pagpanghimatuud sa imong mga setting nga gitubag ug masiguro nga ang imong site nindot tan-awon sa tanan nga mga aparato!

3 Comments

  1. 1
  2. 2

    Daghang salamat Douglas alang sa maayo nga gipatin-aw nga artikulo. Kinahanglan ako nga mouyon niini bisan pa sa sulud sa sulud sa mga butang. Alang sa kadaghanan sa mga site nga gihimo namon nga usa ka responsive nga layout dili igo. Kinahanglan namon ang sulud nga sulud. Apan alang sa labi ka sukaranan nga mga website sigurado kami nga gamiton ang maayo nimong dokumentado nga artikulo kung giunsa kini pagdumala!

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.