Nilalaman
- Mga tumutugong imahe
- Pagganap
- Kundisyon at tamad na pagkarga
- Tumutugon palalimbagan
- Mga query sa media sa JavaScript
- Progresibong pagpapahusay
- Layout
- Layout ng grid ng CSS
- Sa wakas
Tumutugon simpleng disenyo ng web na hindi kapani-paniwala simple. Mag-opt para sa mga kakayahang umangkop na grids para sa layout, gumamit ng kakayahang umangkop na media (mga larawan, video, iframes), at maglapat ng mga query sa media upang mai-update ang mga pagsukat na ito upang pinakamahusay na ayusin ang nilalaman sa anumang viewport. Sa pagsasanay natutunan natin na hindi ito ganoong kadali. Ang mga maliliit na isyu na lumalaki sa bawat proyekto ay nagpapanatili sa amin ng gasgas, at paminsan-minsan kahit na ang pag-ukit ng mga trintsera ng kuko sa aming mga mesa.
Mula nang magsimula akong mag-curate ng Responsive Design Lingguhang newsletter Ako ay pinalad na makausap ang maraming mga miyembro ng komunidad sa web at marinig ang kanilang mga karanasan. Nais kong malaman nang eksakto kung ano talaga ang nais malaman ng komunidad, kaya't nagpalipat-lipat ako ng isang survey sa mga mambabasa. Narito ang nangungunang mga resulta:
- Mga tumutugong imahe
- Pagpapabuti ng pagganap
- Tumutugon palalimbagan
- Mga query sa media sa JavaScript
- Progresibong Pagpapahusay
- Layout
Sa pagiisip ng mga paksang iyon, nagpatakbo ako ng isang serye ng mga podcast na humihiling sa ilan sa aming mga pinuno ng industriya para sa kanilang mga saloobin. Sa kanilang mga tugon, isang punto ay nagkakaisa: magtuon sa pagkuha ng mga pangunahing kaalaman bago ka magsimula mag-alala tungkol sa kapanapanabik at advanced na mga diskarte. Sa pamamagitan ng pagbabalik ng mga bagay sa mga pangunahing kaalaman, nagagawa naming bumuo ng isang matatag na interface para sa lahat, paglalagay ng mga tampok kapag pinapayagan ang konteksto ng aparato o gumagamit.
’Kaya ... paano ang mga advanced na diskarteng ito?’ Naririnig kong nagtanong ka. Sa palagay ko binuo ito ni Stephen Hay nang pinakamainam nang sinabi niya: 'Ang panghuli na pamamaraan ng RWD ay upang magsimula sa pamamagitan ng hindi paggamit ng anumang mga advanced na diskarte sa RWD. Magsimula sa nakaayos na nilalaman at buuin ang iyong paraan. Magdagdag lamang ng isang breakpoint kapag nasira ang disenyo at idinikta ito ng nilalaman at ... iyan lang. '
Sa artikulong ito, magsisimula ako sa mga pangunahing kaalaman at magdagdag ng mga layer ng pagiging kumplikado ayon sa pinapayagan ng sitwasyon, upang makabuo sa mga advanced na diskarteng iyon. Magsimula na tayo.
Mga tumutugong imahe
Ang fluid media ay isang pangunahing bahagi ng RWD nang ito ay unang natukoy ni Ethan Marcotte. lapad: 100%; , max-width: 100%; gumagana pa rin ngayon, ngunit ang tumutugon na tanawin ng imahe ay naging mas kumplikado. Sa pagtaas ng bilang ng mga laki ng screen, density ng pixel at mga aparato upang suportahan na hinahangad namin ang mas malawak na kontrol.
Ang tatlong pangunahing alalahanin ay tinukoy ng Responsive Images Community Group (RICG):
- Ang laki ng kilobyte ng imahe na ipinapadala namin sa wire
- Ang laki ng pisikal na imahe na ipinapadala namin sa mga mataas na aparato ng DPI
- Ang pag-crop ng imahe sa anyo ng direksyon ng sining para sa partikular na laki ng viewport
Ang Yoav Weiss, sa tulong mula sa Indiegogo, ay nagawa ang karamihan ng gawain sa pagpapatupad ng Blink - fork ng WebKit ng Google, at sa oras na basahin mo ito ay ipapadala na ito sa Chrome at Firefox. Ipapadala ng Safari 8 ang srcset, subalit ang mga katangian ng laki ay nasa nightly builds lamang at ang larawan> ay hindi pa naipatupad.
Sa pagdating ng anumang bago sa aming proseso sa pag-unlad ng web, maaaring maging mahirap na magsimula. Patakbuhin natin ang isang halimbawa nang sunud-sunod.
img! - Ipahayag ang fallback na imahe para sa lahat ng mga hindi sumusuporta sa larawan na mga browser -> src = "horse-350.webp"! - Ipahayag ang lahat ng mga laki ng imahe sa srcset. Isama ang lapad ng imahe gamit ang w deskriptor upang ipaalam sa browser ang lapad ng bawat imahe .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Ipinaalam sa mga laki ang browser ng aming layout ng site. Sinasabi namin dito para sa anumang viewport na 64ems at mas malaki, gumamit ng isang imahe na sakupin ang 70% ng viewport -> mga laki = "(min-lapad: 64em) 70vw,! - Kung ang viewport ay hindi iyan malaki, pagkatapos ay para sa anumang viewport na 37.5ems at mas malaki, gumamit ng isang imahe na sumasakop sa 95% ng viewport -> (min-width: 37.5em) 95vw,! - at kung ang viewport ay mas maliit kaysa doon, pagkatapos ay gamitin ang isang imahe na sumasakop sa 100% ng viewport -> 100vw "! - palaging may alt text .--> alt =" Isang kabayo "/>
Mula sa isang pananaw sa pagganap hindi mahalaga kung gumagamit ka ng min-lapad o max-lapad sa katangian ng mga laki - ngunit mahalaga ang pagkakasunud-sunod ng pinagmulan. Palaging gagamitin ng browser ang unang laki ng pagtutugma.
Gayundin, tandaan na aming hard-coding ang mga katangian ng mga laki upang direktang matukoy laban sa aming disenyo. Maaari itong maging sanhi ng mga isyung sumusulong. Halimbawa, kung muling idisenyo mo ang iyong site, kakailanganin mong bisitahin muli ang lahat ng mga img> o larawan> at muling tukuyin ang mga laki. Kung gumagamit ka ng isang CMS, maaari itong mapagtagumpayan bilang bahagi ng iyong proseso ng pagbuo.
Ang WordPress ay mayroon nang plugin na makakatulong. Tinutukoy nito ang srcset sa karaniwang pamantayan ng imahe ng WP at pinapayagan kang ideklara ang mga laki sa isang sentral na lokasyon. Kapag nabuo ang pahina mula sa database, nagpapalit ito ng anumang mga nabanggit sa img> at pinalitan ang mga ito ng markup ng larawan.
Batayan
- Pag-isipan kung talagang kailangan mong magsama ng isang imahe. Ang nilalaman ba ng pangunahing imahe, o pandekorasyon ba ito? Ang isang mas kaunting imahe ay nangangahulugang isang mas mabilis na oras ng pag-load
- I-optimize ang mga imaheng kailangan mong isama gamit ang ImageOptim
- Itakda ang mga expire na header para sa iyong mga imahe sa iyong server o .htaccess file (tingnan ang mga detalye sa ilalim ng 'Pagganap')
- Nagbibigay ang PictureFill ng suporta sa polyfill para sa mga larawan
Advanced
- Tamad na i-load ang iyong mga imahe gamit ang Lazy Load plugin ng jQuery
- Gumamit ng HTMLImageElement.Size at HTMLPictureElement para sa pagtuklas ng tampok.
- Ang advanced na plugin ng PictureFill WP, na matatagpuan sa Github, ay magbibigay-daan sa iyo upang tukuyin ang mga pasadyang mga lapad ng imahe at mga halaga ng laki
Pagganap
Upang makuha ang pinakamabilis na pinaghihinalaang pagganap sa aming mga pahina, kailangan namin ang lahat ng kinakailangang HTML at CSS upang maibigay ang tuktok na bahagi ng aming pahina sa loob ng unang tugon mula sa server. Ang magic number na iyon ay 14kb at batay sa maximum na sukat ng window ng kasikipan sa loob ng unang oras ng pag-ikot (RTT).
Si Patrick Hamann, ang nangunguna sa teknikal na lead sa Guardian, at ang kanyang koponan ay nagawang masira ang hadlang ng 1000ms gamit ang isang halo ng mga diskarte sa frontend at backend. Ang diskarte ng Guardian ay upang matiyak ang kinakailangang nilalaman - ang artikulo - naihatid sa gumagamit nang mabilis hangga't maaari at sa loob ng 14kb magic number.
Tingnan natin ang proseso:
- Nag-click ang gumagamit sa isang link ng Google sa isang kuwento
- Ang isang solong paghiling sa pag-block ay ipinadala sa database para sa artikulo. Walang hinihiling na mga nauugnay na kwento o komento
- Ang HTML ay na-load na naglalaman ng Kritikal na CSS
- sa ulo>
- Ang isang proseso na 'Gupitin ang mustasa' ay isinasagawa at ang anumang mga kondisyong elemento batay sa mga tampok ng aparato ng gumagamit ay na-load
- Anumang nilalaman na nauugnay sa o sumusuporta sa mismong artikulo (kaugnay na mga imahe ng artikulo, mga komento sa artikulo at iba pa) ay tamad na nai-load sa lugar
Ang pag-optimize ng kritikal na landas sa pag-render tulad nito ay nangangahulugang ang ulo> ay 222 linya ang haba. Gayunpaman, ang kritikal na nilalaman na nakita ng gumagamit ay nagmumula pa rin sa loob ng 14kb paunang kargamento kapag naka-gzip. Ang prosesong ito ang makakatulong na masira ang hadlang sa pag-render ng 1000ms.
Kundisyon at tamad na pagkarga
Pinapabuti ng kondisyon na pag-load ang karanasan ng gumagamit batay sa tampok ng kanilang aparato. Pinapayagan ka ng mga tool tulad ng Modernizr na subukan ang mga tampok na ito, ngunit magkaroon ng kamalayan na dahil lang sa sinabi ng isang browser na nag-aalok ito ng suporta, hindi iyon palaging nangangahulugang buong suporta.
Ang isang pamamaraan ay upang ihinto ang paglo-load ng isang bagay hanggang sa ipakita ng gumagamit ang hangarin na gamitin ang tampok na iyon. Ito ay maituturing na may kondisyon. Maaari mong pigilan ang paglo-load sa mga social icon hanggang sa mag-hovers ang user o hawakan ang mga icon, o maiiwasan mong mag-load ng isang iframe Google Map sa mas maliit na mga viewport kung saan mas gusto ng gumagamit na mag-link sa isang nakatuong aplikasyon sa pagmamapa. Ang isa pang diskarte ay ang 'Gupitin ang mustasa' - tingnan ang boxout sa itaas para sa mga detalye tungkol dito.
Ang tamad na paglo-load ay tinukoy bilang isang bagay na palagi mong balak na mai-load sa pahina - mga imahe na bahagi ng artikulo, mga komento o iba pang nauugnay na mga artikulo - ngunit hindi iyon kailangang nandiyan para masimulan ng gumagamit ang nilalaman.
Batayan
- Paganahin ang gzipping para sa mga file at itakda ang mga expire na header para sa lahat ng static na nilalaman (netm.ag/expire-260)
- Gamitin ang Lazy Load jQuery plugin. Naglo-load ito ng mga imahe kapag papalapit sa viewport, o pagkatapos ng isang tiyak na tagal ng panahon
Advanced
- Mabilis na pag-set up o CloudFlare. Ang mga network ng paghahatid ng nilalaman (CDNs) ay naghahatid ng iyong static na nilalaman sa mga gumagamit nang mas mabilis kaysa sa iyong sariling server, at mayroong ilang mga libreng antas
- Paganahin ang SPDY para sa mga browser na pinagana ng http2 upang samantalahin ang mga tampok na http2 tulad ng mga kahilingang kahilingan sa http
- Pinapayagan ng Social Count ang kondisyon na paglo-load ng iyong mga social icon
- Ang paggamit ng Static Maps API ay magbibigay-daan sa iyo upang mailipat ang mga interactive na mapa ng Google para sa mga imahe. Tingnan ang halimbawa ni Brad Frost sa netm.ag/static-260
- Maglo-load ang pattern ng Ajax na Isasama ang mga snippet ng nilalaman mula sa alinman sa isang data-before, data-after o pagpapalit ng data
Tumutugon palalimbagan
Ang typography ay tungkol sa pagpapadali ng iyong nilalaman. Ang mga tumutugong palalimbagan ay nagpapalawak nito upang matiyak na madaling mabasa sa iba't ibang mga aparato at viewports. Inamin ni Jordan Moore na ang uri ay isang bagay na hindi niya nais na kumilos. Mag-drop ng isang imahe o dalawa kung kailangan mo, ngunit tiyaking mayroon kang mahusay na uri.
Iminungkahi ni Stephen Hay na itakda ang laki ng font ng HTML sa 100 porsyento (basahin: iwanan lamang ito bilang ito) dahil ang bawat browser o tagagawa ng aparato ay gumagawa ng isang nabasang default na nababasa para sa isang partikular na resolusyon o aparato. Para sa karamihan sa mga browser ng desktop ito ay 16px.
Sa kabilang banda, ginagamit ni Moore ang unit ng REM at laki ng font ng HTML upang magtakda ng isang minimum na laki ng font para sa ilang mga elemento ng nilalaman. Halimbawa, kung nais mo ang byline ng isang artikulo na laging 14px, pagkatapos ay itakda iyon bilang batayang font-size sa elemento ng HTML at itakda ang .byline {font-size: 1rem;}. Habang sinusukat mo ang katawan: laki ng font: upang umangkop sa viewport hindi mo maaapektuhan ang .by-line style.
Mahalaga rin ang isang mahusay na haba ng linya ng pagbasa - hangarin ang 45 hanggang 65 na mga character. Mayroong isang bookmarklet na maaari mong gamitin upang suriin ang iyong nilalaman. Kung sumusuporta ka sa maramihang mga wika sa iyong disenyo, ang haba ng linya ay maaaring mag-iba rin. Iminumungkahi ni Moore ang paggamit ng: lang (de) artikulo {max-width: 30em} upang masakop ang anumang mga isyu doon.
Upang mapanatili ang patayong ritmo, itakda ang margin-ilalim laban sa mga bloke ng nilalaman, ul>, ol>, blockquote>, talahanayan>, blockquote> at iba pa, sa kapareho ng iyong taas sa linya. Kung ang ritmo ay nagambala sa pagpapakilala ng mga imahe maaari mo itong ayusin sa pamamagitan ng pagdaragdag ng Baseline.js o BaselineAlign.js.
Batayan
- Ibase ang iyong font sa 100 porsyento na katawan
- Magtrabaho sa mga kamag-anak na yunit
- Itakda ang iyong mga margin sa taas ng iyong linya upang mapanatili ang patayong ritmo sa iyong disenyo
Advanced
- Pagbutihin ang pagganap ng paglo-load ng font gamit ang Enhance.js o ipinagpaliban na paglo-load ng font
- Gumamit ng Sass @includes para sa mga heading ng semantiko.
- Kadalasan kailangan naming gamitin ang h5 style sa isang sidebar widget na nangangailangan ng h2 markup. Gumamit ng Mga Karaniwang Mixins ng Bearded upang makontrol ang laki at manatiling semantiko gamit ang code sa ibaba:
.sidebar h2 {@kasama ang heading-5}
Mga query sa media sa JavaScript
Mula pa nang makontrol namin ang layout sa iba't ibang mga viewport sa pamamagitan ng mga query sa media, naghahanap kami ng isang paraan upang maiugnay din iyon sa aming JavaScript. Mayroong ilang mga paraan upang maputok ang JavaScript sa ilang tiyak na mga lapad ng viewport, taas at oryentasyon, at ang ilang mga matalinong tao ay nagsulat ng ilang madaling gamiting mga katutubong plugin ng JS tulad ng Enquire.js at Simple State Manager. Maaari mo ring buuin ito sa iyong sarili gamit ang matchMedia. Gayunpaman, mayroon kang isyu na kailangan mo upang madoble ang iyong mga query sa media sa iyong CSS at JavaScript.
Si Aaron Gustafson ay may maayos na trick na nangangahulugang hindi mo kailangang pamahalaan at itugma ang iyong mga query sa media sa iyong CSS at sa iyong JS. Ang ideya ay nagmula sa Jeremy Keith at sa halimbawang ito Gustafson ay kinuha ito sa isang buong pagpapatupad.
Gamit ang getActiveMQ (netm.ag/media-260), mag-iniksyon ng div # getActiveMQ-watcher sa dulo ng elemento ng katawan at itago ito. Pagkatapos sa loob ng set ng CSS na # getActiveMQ-watcher {font-family: break-0;} sa unang query sa media, font-family: break-1; sa pangalawa, font-family: break-2; sa pangatlo at iba pa.
Gumagamit ang script ng watchResize () (netm.ag/resize-260) upang suriin upang makita kung ang laki ng viewport ay nagbago, at pagkatapos ay basahin muli ang aktibong font-family. Ngayon ay maaari mo itong gamitin upang mai-hook ang mga pagpapahusay ng JS tulad ng pagdaragdag ng isang naka-tab na interface sa isang dl> kapag pinapayagan ng viewport, binabago ang pag-uugali ng isang lightbox, o ina-update ang layout ng isang data table. Suriin ang getActiveMQ Codepen sa netm.ag/active-260.
Batayan
- Kalimutan ang tungkol sa JavaScript para sa iba't ibang mga viewport. Magbigay ng nilalaman at mga pagpapaandar ng website sa mga gumagamit sa paraang ma-access nila ito sa lahat ng viewports. Hindi na namin kailangan ang JavaScript
Advanced
- Palawakin ang pamamaraan ni Gustafson sa pamamagitan ng paggamit ng Breakup bilang isang paunang natukoy na listahan ng mga query sa media at awtomatiko ang paglikha ng listahan ng mga pamilya ng font para sa getActiveMQ-watcher
Progresibong pagpapahusay
Ang isang karaniwang maling kuru-kuro tungkol sa progresibong pagpapahusay ay ang pag-iisip ng mga tao, 'Naku hindi ko magagamit ang bagong tampok na ito', ngunit talaga, kabaligtaran ito. Nangangahulugan ang progresibong pagpapahusay na maaari kang makapaghatid ng isang tampok kung sinusuportahan lamang ito sa isa o kahit na walang mga browser, at sa paglaon ng panahon ang mga tao ay makakakuha ng isang mas mahusay na karanasan sa pagdating ng mga bagong bersyon.
Kung titingnan mo ang pangunahing pag-andar ng anumang website, maihahatid mo iyon bilang HTML at gawin ng panig ng server ang lahat ng pagproseso. Mga pagbabayad, form, Gusto, pagbabahagi, email, dashboard - lahat ay magagawa. Kapag naitayo ang pangunahing gawain maaari nating mai-layer ang mga kahanga-hangang teknolohiya sa itaas nito, dahil mayroon kaming isang safety net upang mahuli ang mga nahuhulog. Karamihan sa mga advanced na diskarte na napag-usapan natin dito ay batay sa progresibong pagpapahusay.
Layout
Ang kakayahang umangkop na layout ay simpleng sasabihin, ngunit mayroon itong maraming iba't ibang mga diskarte. Lumikha ng mga simpleng layout ng grid na may mas kaunting markup sa pamamagitan ng paggamit ng: nth-child () selector.
/ * ideklara ang mobile na unang lapad para sa grid * / .grid-1-4 {float: left; lapad: 100%; } / * Kapag ang viewport ay hindi bababa sa 37.5em pagkatapos ay itakda ang grid sa 50% bawat elemento * / @media (min-width: 37.5em) {.grid-1-4 {lapad: 50%; } / * I-clear ang float bawat pangalawang elemento MATAPOS ang una. Target nito ang ika-3, ika-5, ika-7, ika-9 ... sa grid. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {lapad: 25%; } / * Alisin ang dating malinaw * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * I-clear ang float bawat ika-4 na elemento MATAPOS ang una. Target nito ang ika-5, ika-9 ... sa grid. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Wave paalam sa paggamit ng posisyon at lumutang para sa iyong mga layout. Habang hinatid nila kami ng maayos hanggang ngayon, ang kanilang paggamit para sa layout ay isang kinakailangang hack. Nakakuha na kami ngayon ng dalawang bagong bata sa bloke na makakatulong na ayusin ang lahat ng aming mga paghihirap sa layout - Flexbox at Grids.
Ang Flexbox ay mahusay para sa mga indibidwal na module, pagkontrol sa layout ng mga piraso ng nilalaman sa loob ng bawat isa sa mga module. May mga layout na sinusubukan naming maihatid na maaaring mas madaling makamit gamit ang Flexbox, at ito ay mas totoo sa mga tumutugong site. Para sa higit pa tungkol dito, tingnan ang gabay ng CSS Tricks sa Flexbox o sa Flexbox Polyfill.
Layout ng grid ng CSS
Higit pa ang Grid para sa layout ng antas ng macro. Binibigyan ka ng module ng layout ng Grid ng isang mahusay na paraan upang ilarawan ang iyong layout sa loob ng iyong CSS. Habang nasa draft stage pa rin ito sa ngayon, inirerekumenda ko ang artikulong ito sa layout ng CSS Grid ni Rachel Andrew.
Sa wakas
Ito ay ilan lamang sa mga tip upang mapalawak ang iyong tumutugong kasanayan. Kapag papalapit sa anumang bagong gawaing tumutugon, kumuha ng isang hakbang pabalik at tiyakin na tama ang nakuha mong mga pangunahing kaalaman. Magsimula sa iyong nilalaman, HTML at layer na pinahusay na mga karanasan sa kanila at walang magiging limitasyon kung saan mo madadala ang iyong mga disenyo.
Ang artikulong ito ay orihinal na lumitaw sa isyu 260 ng magazine sa net.
