Saturs
- Reaģējoši attēli
- Izrāde
- Nosacīta un slinka iekraušana
- Reaģējoša tipogrāfija
- Multivides vaicājumi JavaScript
- Pakāpeniska uzlabošana
- Izkārtojums
- CSS režģa izkārtojums
- Visbeidzot
Reaģējošais tīmekļa dizains izklausās neticami vienkārši. Izkārtojumam izvēlieties elastīgus režģus, izmantojiet elastīgus datu nesējus (attēlus, video, iframes) un lietojiet multivides vaicājumus, lai atjauninātu šos mērījumus, lai vislabāk sakārtotu saturu jebkurā skatu portā. Praksē mēs esam iemācījušies, ka patiesībā tas nav tik vienkārši. Sīkas problēmas, kas rodas katra projekta laikā, liek mums saskrāpēt galvas un reizēm pat izrotāt naglu tranšejas uz mūsu rakstāmgalda.
Kopš sāku kurēt Reaģējošā dizaina nedēļas biļetenu, man ir paveicies runāt ar daudziem tīmekļa kopienas locekļiem un dzirdēt viņu pieredzi. Es gribēju uzzināt, ko tieši kopiena patiesībā gribēja iemācīties, tāpēc izplatīju aptauju lasītājiem. Šeit ir labākie rezultāti:
- Reaģējoši attēli
- Veiktspējas uzlabošana
- Reaģējoša tipogrāfija
- Multivides vaicājumi JavaScript
- Pakāpeniska uzlabošana
- Izkārtojums
Paturot prātā šīs tēmas, es vadīju virkni Podcast apraides, lūdzot dažu mūsu nozares līderu domas. Viņu atbildēs viens punkts bija vienprātīgs: pievērsieties pamatinformācijas iegūšanai tieši pirms sākat uztraukties par aizraujošām un progresīvām metodēm. Atgriežot lietas pamatos, mēs varam izveidot stabilu saskarni ikvienam, slāņojot funkcijas, kad to atļauj ierīces vai lietotāja konteksts.
‘Tātad ... kā ir ar šīm uzlabotajām metodēm?’ Es dzirdu, kā jūs jautājat. Es domāju, ka Stīvens Hejs to vislabāk rezumēja, sakot: “Galvenais RWD paņēmiens ir sākt, neizmantojot nevienu progresīvu RWD tehniku. Sāciet ar strukturētu saturu un izveidojiet savu ceļu uz augšu. Pievienojiet pārtraukuma punktu tikai tad, kad dizains saplīst un saturs to diktē, un ... tas ir viss. ”
Šajā rakstā es sākšu ar pamatiem un pievienošu sarežģītības slāņus, cik situācija to atļauj, lai izveidotu šīs modernās metodes. Sāksim.
Reaģējoši attēli
Šķidrie materiāli bija galvenā RWD sastāvdaļa, kad to pirmo reizi definēja Ītans Markots. platums: 100%; , maksimālais platums: 100%; joprojām darbojas šodien, bet atsaucīgā attēla ainava ir kļuvusi daudz sarežģītāka. Arvien vairāk ekrāna izmēru, pikseļu blīvuma un atbalstāmo ierīču skaita mēs vēlamies lielāku kontroli.
Trīs galvenās problēmas definēja Responsīvo attēlu kopienas grupa (RICG):
- Attēla kilobaitu lielums, kuru mēs nosūtām pa vadu
- Attēla fiziskais izmērs, ko mēs sūtām uz ierīcēm ar augstu DPI
- Attēla apgriešana mākslas virziena veidā konkrētam skata loga izmēram
Yoav Weiss ar Indiegogo palīdzību ir paveicis lielāko darbu pie Blink ieviešanas - Google WebKit dakšas, un līdz brīdim, kad jūs to lasīsit, tas tiks piegādāts pārlūkā Chrome un Firefox. Pārlūkprogramma Safari 8 piegādās srcset, taču lielumu atribūts ir tikai veidots katru nakti, un attēls> vēl nav ieviests.
Līdz ar visa jauna atnākšanu mūsu tīmekļa izstrādes procesā var būt grūti sākt darbu. Izskatīsim piemēru soli pa solim.
img! - Deklarēt rezerves attēlu visām pārlūkprogrammām, kas neatbalsta attēlu -> src = "horse-350.webp"! - Deklarējiet visus attēla izmērus srcset. Iekļaujiet attēla platumu, izmantojot w deskriptoru, lai informētu pārlūku par katra attēla platumu. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Izmēri informē pārlūkprogrammu par mūsu vietnes izkārtojumu. Šeit mēs sakām jebkuram skatu punktam, kas ir 64ems un lielāks, izmantojiet attēlu, kas aizņems 70% skata loga -> size = "(min-width: 64em) 70vw,! - Ja skata ports nav tāds liels, tad jebkuram skatu portam, kura izmērs ir 37,5 elementi un lielāks, izmantojiet attēlu, kas aizņem 95% skata loga -> (min-width: 37.5em) 95vw,! - un, ja skata punkts ir mazāks par to, izmantojiet attēlam, kas aizņem 100% skata loga -> 100vw "! - vienmēr ir jābūt alt tekstam .--> alt =" Zirgs "/>
No veiktspējas viedokļa nav nozīmes, vai lieluma atribūtā izmantojat min-width vai max-width, taču avota secībai ir nozīme. Pārlūkprogramma vienmēr izmantos pirmo atbilstošo izmēru.
Atcerieties arī, ka mēs grūti kodējam izmēru atribūtu, kas tieši jānosaka pret mūsu dizainu. Tas var radīt problēmas virzīties uz priekšu. Piemēram, ja jūs pārveidojat savu vietni, jums būs atkārtoti jāpārskata visi img> vai picture> s un jādefinē izmēri. Ja izmantojat CMS, to var pārvarēt kā daļu no jūsu veidošanas procesa.
WordPress jau ir spraudnis, kas palīdzēs. Tas definē srcset par WP standarta attēlu šķirnēm un ļauj deklarēt izmērus centrālā vietā. Kad lapa tiek ģenerēta no datu bāzes, tā maina visus pieminējumus vietnē img> un aizstāj tos ar attēla marķējumu.
Pamata
- Padomājiet, vai jums tiešām ir jāiekļauj attēls. Vai attēla pamats saturs ir dekoratīvs? Viens attēls mazāk nozīmē ātrāku ielādes laiku
- Izmantojot ImageOptim, optimizējiet nepieciešamos attēlus
- Iestatiet derīguma termiņa galvenes attēliem serverī vai .htaccess failā (sīkāku informāciju skatiet sadaļā “Veiktspēja”).
- PictureFill nodrošina attēlu daudzfunkcionālu aizpildīšanu
Papildu
- Slinks ielādējiet savus attēlus, izmantojot jQuery spraudni Lazy Load
- Funkciju noteikšanai izmantojiet HTMLImageElement.Sizes un HTMLPictureElement.
- Uzlabotais PictureFill WP spraudnis, kas atrodams vietnē Github, ļaus jums noteikt pielāgotas attēla platuma un izmēra vērtības
Izrāde
Lai panāktu visātrāko uztveramo veiktspēju mūsu lapās, mums ir nepieciešams viss HTML un CSS, kas nepieciešams lapas augšdaļas atveidošanai pirmās atbildes laikā no servera. Šis burvju skaitlis ir 14 KB, un tas ir balstīts uz maksimālo sastrēgumu loga lielumu pirmajā turp un atpakaļ reisā (RTT).
Patrick Hamann, Guardian tehniskais līderis frontendā, un viņa komandai ir izdevies pārvarēt 1000ms barjeru, izmantojot frontend un backend tehnikas sajaukumu. Guardian pieeja ir nodrošināt, lai nepieciešamais saturs - raksts - tiktu piegādāts lietotājam pēc iespējas ātrāk un 14 KB burvju numura ietvaros.
Apskatīsim procesu:
- Lietotājs noklikšķina uz Google saites uz ziņu sižetu
- Raksta datu bāzei tiek nosūtīts viens bloķēšanas pieprasījums. Nekādi saistīti stāsti vai komentāri nav nepieciešami
- HTML tiek ielādēts ar kritisko CSS
- galvā>
- Tiek veikts process “Iegrieziet sinepes” un tiek ielādēti visi nosacītie elementi, kuru pamatā ir lietotāja ierīces funkcijas
- Jebkurš saturs, kas saistīts ar pašu rakstu vai atbalsta to (saistītie raksta attēli, rakstu komentāri un tā tālāk), ir slinks
Šāda kritiskā renderēšanas ceļa optimizēšana nozīmē, ka galva> ir 222 rindas gara. Tomēr kritiskais saturs, ko lietotājs redzēja, joprojām ietilpst 14 KB sākotnējā lietderīgajā slodzē, kad tiek lejupielādēts gzip. Šis process palīdz pārvarēt 1000 ms atveidošanas barjeru.
Nosacīta un slinka iekraušana
Nosacīta ielāde uzlabo lietotāja pieredzi, pamatojoties uz viņa ierīces funkciju. Tādi rīki kā Modernizr ļauj pārbaudīt šīs funkcijas, taču ņemiet vērā, ka tas ne vienmēr nozīmē pilnīgu atbalstu tikai tāpēc, ka pārlūks saka, ka tas piedāvā atbalstu.
Viena no metodēm ir apturēt kaut ko ielādēšanu, līdz lietotājs parāda nodomu izmantot šo funkciju. Tas tiktu uzskatīts par nosacītu. Jūs varat aizkavēt ielādi sociālajās ikonās, līdz lietotājs novieto kursoru virs tām vai pieskaras tām, vai arī jūs varētu izvairīties no Google kartes iframe ielādes mazākos skatu logos, kur lietotājs, visticamāk, dod priekšroku saistīšanai ar īpašu kartēšanas programmu. Vēl viena pieeja ir ‘sagriezt sinepes’ - sīkāku informāciju skatiet iepriekš sniegtajā lodziņā.
Slinks ielāde tiek definēta kā kaut kas, ko jūs vienmēr plānojat ielādēt lapā - attēli, kas ir raksta daļa, komentāri vai citi saistīti raksti, bet kuriem nav jābūt, lai lietotājs varētu sākt patērēt saturu.
Pamata
- Iespējojiet failiem gzipping un iestatiet derīguma termiņa galvenes visam statiskajam saturam (netm.ag/expire-260)
- Izmantojiet spraudni Lazy Load jQuery. Tas ielādē attēlus, tuvojoties skata punktam vai pēc noteikta laika perioda
Papildu
- Uzstādiet Fastly vai CloudFlare. Satura piegādes tīkli (CDN) piegādā jūsu statisko saturu lietotājiem ātrāk nekā jūsu pašu serveris, un tiem ir daži bezmaksas līmeņi
- Iespējojiet SPDY pārlūkiem, kuros iespējota http2, lai izmantotu http2 iespējas, piemēram, paralēlos http pieprasījumus
- Social Count ļauj nosacīti ielādēt jūsu sociālās ikonas
- Static Maps API izmantošana ļaus izslēgt interaktīvās Google kartes attēliem. Apskatiet Breda Frosta piemēru vietnē netm.ag/static-260
- Ajax Iekļaut modelis ielādēs satura fragmentus no atribūta data-before, data-after vai data-aizstāt
Reaģējoša tipogrāfija
Tipogrāfija ir domāta tam, lai jūsu saturs būtu viegli sagremojams. Reaģējošā tipogrāfija to paplašina, lai nodrošinātu lasāmību dažādās ierīcēs un skatu portos. Džordans Mūrs atzīst, ka tips ir viena lieta, ar kuru viņš nevēlas piekāpties. Ja nepieciešams, nometiet attēlu vai divus, taču pārliecinieties, vai jums ir lielisks tips.
Stefans Hejs iesaka iestatīt HTML fonta lielumu uz 100 procentiem (lasīt: vienkārši atstājiet to tādu, kāds tas ir), jo katrs pārlūks vai ierīces ražotājs nosaka saprātīgi nolasāmu noklusējumu konkrētai izšķirtspējai vai ierīcei. Lielākajai daļai darbvirsmas pārlūkprogrammu tas ir 16 pikseļi.
No otras puses, Mūrs izmanto REM vienību un HTML fonta lielumu, lai noteiktu minimālo fonta lielumu noteiktiem satura elementiem. Piemēram, ja vēlaties, lai raksta byline vienmēr būtu 14 pikseļi, iestatiet to kā HTML elementa pamata fonta lielumu un iestatiet .byline {font-size: 1rem;}. Mērogojot ķermeni: font-size: lai tas atbilstu skata punktam, tas neietekmēs .by-line stilu.
Svarīgs ir arī labs lasīšanas līnijas garums - mērķis ir 45 līdz 65 rakstzīmes. Ir grāmatzīme, kuru varat izmantot sava satura pārbaudei. Ja ar savu dizainu atbalstāt vairākas valodas, arī līnijas garums var atšķirties. Mūrs iesaka izmantot: lang (de) article {max-width: 30em}, lai nosegtu visus jautājumus.
Lai saglabātu vertikālu ritmu, iestatiet margin-bottom pret satura blokiem, ul>, ol>, blockquote>, table>, blockquote> un tā tālāk, līdzīgi kā jūsu līnijas augstums. Ja ritms tiek pārtraukts, ieviešot attēlus, to var labot, pievienojot Baseline.js vai BaselineAlign.js.
Pamata
- Pamatojiet savu fontu uz 100% ķermeņa
- Darbs relatīvajās vienībās
- Iestatiet piemales uz līnijas augstumu, lai saglabātu vertikālu ritmu jūsu dizainā
Papildu
- Uzlabojiet fontu ielādes veiktspēju, izmantojot Enhance.js vai atliktu fontu ielādi
- Semantiskajiem virsrakstiem izmantojiet Sass @includes.
- Bieži vien mums ir jāizmanto stils h5 sānjoslas logrīkā, kuram nepieciešams h2 marķējums. Izmantojiet Bearded’s Typographic Mixins, lai kontrolētu izmēru un paliktu semantisks, izmantojot šādu kodu:
.sidebar h2 {@iekļaut virsrakstu-5}
Multivides vaicājumi JavaScript
Kopš mēs esam spējuši kontrolēt izkārtojumu dažādos skatu portos, izmantojot multivides vaicājumus, mēs esam meklējuši veidu, kā to sasaistīt arī ar mūsu JavaScript darbību. Ir daži veidi, kā aktivizēt JavaScript uz noteiktiem skatu platumiem, augstumiem un orientācijām, un daži gudri cilvēki ir uzrakstījuši dažus viegli lietojamus vietējos JS spraudņus, piemēram, Enquire.js un Simple State Manager. Jūs pat varētu to izveidot pats, izmantojot matchMedia. Tomēr jums ir problēma, ka jums ir nepieciešams dublēt multivides vaicājumus CSS un JavaScript.
Āronam Gustafsonam ir veikls triks, kas nozīmē, ka jums nav jāpārvalda un jāatbilst multivides vaicājumiem CSS un JS. Ideja sākotnēji radās Džeremijam Kītam, un šajā piemērā Gustafsons to ir pilnībā īstenojis.
Izmantojot getActiveMQ (netm.ag/media-260), ķermeņa elementa beigās injicējiet div # getActiveMQ-watcher un paslēpiet to. Tad CSS ietvaros iestatiet # getActiveMQ-watcher {font-family: break-0;} pirmajam multivides vaicājumam, font-family: break-1; uz otro, font-family: break-2; uz trešo un tā tālāk.
Skripts izmanto watchResize () (netm.ag/resize-260), lai pārbaudītu, vai ir mainījies skata loga lielums, un pēc tam nolasa aktīvo fontu saimi. Tagad jūs varat to izmantot, lai piesaistītu JS uzlabojumus, piemēram, ar ciļņu saskarnes pievienošanu dl>, kad to ļauj skata ports, mainīt gaismas kastes darbību vai atjaunināt datu tabulas izkārtojumu. Pārbaudiet getActiveMQ Codepen vietnē netm.ag/active-260.
Pamata
- Aizmirstiet par JavaScript dažādiem skatu laukiem. Nodrošiniet lietotājiem saturu un vietņu funkcijas tādā veidā, lai viņi varētu tiem piekļūt visos skatu punktos. Mums nekad nevajadzēs JavaScript
Papildu
- Paplašiniet Gustafsona metodi, izmantojot sadalījumu kā iepriekš noteiktu multivides vaicājumu sarakstu un automatizējot getActiveMQ-watcher fontu saimes saraksta izveidi
Pakāpeniska uzlabošana
Izplatīts nepareizs priekšstats par pakāpenisku uzlabošanu ir tāds, ka cilvēki domā: “Nu, es nevaru izmantot šo jauno funkciju”, bet patiesībā tas ir tieši otrādi. Progresīvā uzlabošana nozīmē, ka jūs varat piegādāt funkciju, ja tā tiek atbalstīta tikai vienā pārlūkprogrammā vai pat nav nevienas pārlūkprogrammas, un laika gaitā cilvēki saņems labāku pieredzi, kad tiks piegādātas jaunas versijas.
Ja paskatās uz jebkuras vietnes pamatfunkciju, varat to piegādāt kā HTML un servera pusē veikt visu apstrādi. Maksājumi, veidlapas, Patīk, kopīgošana, e-pasts, informācijas paneļi - to visu var izdarīt. Kad pamatuzdevums ir izveidots, mēs varam tam pāri slāņot lieliskās tehnoloģijas, jo mums ir drošības tīkls, lai noķertu tos, kuri krīt cauri. Lielākā daļa uzlaboto pieeju, par kurām mēs šeit runājām, balstās uz pakāpenisku uzlabošanu.
Izkārtojums
Elastīgu izkārtojumu ir vienkārši pateikt, taču tam ir daudz dažādu pieeju. Izveidojiet vienkāršus režģa izkārtojumus ar mazāku marķējumu, izmantojot selektoru: n-child ().
/ * deklarēt tīkla mobilā tīkla pirmo platumu * / .grid-1-4 {float: left; platums: 100%; } / * Kad skata loga vērtība ir vismaz 37,5em, iestatiet režģi uz 50% uz elementu * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Notīriet pludiņu katru otro elementu PĒC pirmā. Šī mērķauditorija ir režģa 3., 5., 7., 9. vieta. * / .Grid-1-4: n-veida tips (2n + 1) {skaidrs: pa kreisi; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Noņemiet iepriekšējo notīrīšanu * / .grid-1-4: n-of-type (2n + 1) {clear: none; } / * Notīriet pludiņu pēc katra pirmā elementa. Šis mērķis ir režģa 5., 9. vieta. * / .Grid-1-4: n-veida tips (4n + 1) {skaidrs: pa kreisi; }}
Pamodieties ardievas, izmantojot izvietojumu un pozīciju. Lai gan līdz šim viņi mums ir labi kalpojuši, to izmantošana maketēšanai ir bijis nepieciešams kapāt. Tagad blokā ir divi jauni bērni, kas palīdzēs novērst visas mūsu izkārtojuma problēmas - Flexbox un Grids.
Flexbox ir lieliski piemērots atsevišķiem moduļiem, kontrolējot satura gabalu izkārtojumu katrā no moduļiem. Ir izkārtojumi, kurus mēs cenšamies nodrošināt, kurus var vieglāk sasniegt, izmantojot Flexbox, un tas vēl jo vairāk attiecas uz atsaucīgām vietnēm. Lai uzzinātu vairāk par to, skatiet CSS triku rokasgrāmatu par Flexbox vai Flexbox Polyfill.
CSS režģa izkārtojums
Režģis vairāk paredzēts makro līmeņa izkārtojumam. Režģa izkārtojuma modulis sniedz lielisku veidu, kā aprakstīt izkārtojumu CSS. Lai gan tas vēl ir melnraksta stadijā, es iesaku šo rakstu par CSS režģa izkārtojumu, ko izstrādājusi Reičela Endrjū.
Visbeidzot
Šie ir tikai daži padomi, lai paplašinātu jūsu atsaucīgo praksi. Tuvojoties jebkuram jaunam atsaucīgam darbam, speriet soli atpakaļ un pārliecinieties, ka pamatinformācija ir pareiza. Sāciet ar savu saturu, HTML un uzlabotu slāņu pieredzi, un dizaina izveide nebūs ierobežota.
Šis raksts sākotnēji tika parādīts 260. Izdevumā net žurnāls.
