Vsebina
- Odzivne slike
- Izvedba
- Pogojno in lenobno nalaganje
- Odzivna tipografija
- Medijska vprašanja v JavaScript
- Postopna izboljšava
- Postavitev
- Postavitev mreže CSS
- Končno
Odzivno spletno oblikovanje zveni neverjetno preprosto. Odločite se za prilagodljive mreže za postavitev, uporabite prilagodljive medije (slike, videoposnetki, vstavljeni okviri) in uporabite medijske poizvedbe za posodobitev teh meritev, da boste najbolje uredili vsebino v katerem koli pogledu. V praksi smo se naučili, da v resnici ni tako enostavno. Drobne težave, ki se pojavijo med vsakim projektom, povzročajo, da se praskamo po glavi in občasno celo rezbamo rove za nohte po svojih mizah.
Odkar sem začel kurati glasilo Responsive Design Weekly, sem imel to srečo, da sem se pogovarjal s številnimi člani spletne skupnosti in slišal njihove izkušnje. Želel sem natančno ugotoviti, kaj se je skupnost v resnici želela naučiti, zato sem bralcem poslal anketo. Tu so najboljši rezultati:
- Odzivne slike
- Izboljšanje učinkovitosti
- Odzivna tipografija
- Medijska vprašanja v JavaScript
- Progresivno izboljšanje
- Postavitev
S temi mislimi sem vodil vrsto podcastov, ki so nekatere voditelje panoge prosili za njihove misli. V njihovih odgovorih je bila ena točka soglasna: osredotočite se na to, da osnove pridobite takoj, preden začnete skrbeti za razburljive in napredne tehnike. Če se stvari vrnemo k osnovam, lahko zgradimo robusten vmesnik za vsakogar, ki razporeja funkcije, kadar to omogoča kontekst naprave ali uporabnika.
'Torej ... kaj pa te napredne tehnike?' Slišim, kako sprašujete. Mislim, da jo je najbolje povzel Stephen Hay, ko je rekel: 'Končna tehnika RWD je začeti z uporabo nobenih naprednih tehnik RWD. Začnite s strukturirano vsebino in se potrudite. Točko preloma dodajte samo, ko se dizajn zlomi in vsebina to narekuje in ... to je to. '
V tem članku bom začel z osnovami in dodal plasti zapletenosti, kot to dopušča situacija, da nadgradim te napredne tehnike. Začnimo.
Odzivne slike
Tekoči mediji so bili ključni del RWD, ko ga je prvič definiral Ethan Marcotte. širina: 100%; , največja širina: 100%; deluje še danes, vendar je odzivna pokrajina slik precej bolj zapletena. Z naraščajočim številom velikosti zaslona, gostote slikovnih pik in naprav za podporo hrepenimo po večjem nadzoru.
Tri glavne pomisleke je opredelila skupina skupnosti za odzivne slike (RICG):
- Kilobajt slike, ki jo pošiljamo prek žice
- Fizična velikost slike, ki jo pošiljamo napravam z visoko ločljivostjo
- Obrezovanje slike v obliki umetniške smeri za določeno velikost prikaza
Yoav Weiss je s pomočjo Indiegogo opravil večino dela na implementaciji Blink - Googlovi vilice WebKit in do trenutka, ko boste to prebrali, bo poslan v Chrome in Firefox. Safari 8 bo poslal srcset, vendar je atribut velikosti samo v nočnih gradnjah in slika> še ni implementirana.
S prihodom česar koli novega v naš proces spletnega razvoja je težko začeti. Pojdimo skozi primer korak za korakom.
img! - Razglasite nadomestno sliko za vse brskalnike, ki ne podpirajo slik -> src = "horse-350.webp"! - Navedite vse velikosti slik v srcset. Vključite širino slike z deskriptorjem w, da brskalnik obvestite o širini posamezne slike .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Velikosti obvestijo brskalnik o postavitvi našega spletnega mesta. Tu pravimo, da za vsako okno, ki je 64em in večje, uporabite sliko, ki bo zasedla 70% vidnega polja -> sizes = "(min-width: 64em) 70vw,! - Če okno za ogled ni to velik, potem za vsako okno, ki je večje od 37,5 ema in več, uporabite sliko, ki zavzema 95% vidnega polja -> (najmanjša širina: 37,5 ema) 95vw,! - in če je okno manjše od tega, uporabite slika, ki zavzema 100% vidnega polja -> 100vw "! - vedno ima alt besedilo. -> alt =" Konj "/>
Z vidika uspešnosti ni pomembno, ali v atributu velikosti uporabljate najmanjšo širino ali največjo širino, vendar je pomemben izvorni vrstni red. Brskalnik bo vedno uporabil prvo velikost, ki se ujema.
Upoštevajte tudi, da atribut velikosti težko kodiramo, tako da ga lahko neposredno določimo glede na naš dizajn. To lahko povzroči težave pri premikanju naprej. Če na primer preoblikujete spletno mesto, boste morali znova obiskati vse slike img> ali picture> in znova določiti velikosti. Če uporabljate sistem za upravljanje vsebin, je to mogoče premagati kot del postopka izdelave.
WordPress že ima vtičnik za pomoč. Določa srcset za standardne sorte slik WP in vam omogoča, da razglasite velikosti na osrednjem mestu. Ko je stran ustvarjena iz baze podatkov, zamenja vse omembe na img> in jih nadomesti z oznako slike.
Osnovno
- Pomislite, ali morate res vključiti sliko. Je vsebina slike jedro ali je dekorativna? Ena slika manj bo pomenila hitrejši čas nalaganja
- Z ImageOptim optimizirajte slike, ki jih morate vključiti
- Nastavite glave, ki potečejo za vaše slike na strežniku ali v datoteki .htaccess (glejte podrobnosti pod ‘Performance’)
- PictureFill nudi podporo za polnjenje slik
Napredno
- Lazy naložite svoje slike z vtičnikom jQuery Lazy Load
- Za zaznavanje funkcij uporabite HTMLImageElement.Sizes in HTMLPictureElement.
- Napredni vtičnik PictureFill WP, ki ga najdete na Githubu, vam omogoča določanje vrednosti širine in velikosti slike po meri
Izvedba
Da bi dosegli najhitreje zaznane rezultate na naših straneh, potrebujemo vse HTML in CSS, potrebne za upodobitev zgornjega dela naše strani v prvem odzivu strežnika. Magično število je 14 kb in temelji na največji velikosti okna za zastoje v prvem krožnem času (RTT).
Patrick Hamann, tehnični vodja frontenda pri Guardianu, je s svojo ekipo z mešanico tehnik frontend in backkend uspel prebiti 1000-metrsko pregrado. Pristop Guardiana je zagotoviti, da je zahtevana vsebina - članek - uporabniku dostavljena v najkrajšem možnem času in znotraj čarobne številke 14 kb.
Oglejmo si postopek:
- Uporabnik klikne Googlovo povezavo do novice
- V zbirko podatkov za članek se pošlje ena zahteva za blokiranje. Sorodne zgodbe ali komentarji niso zahtevani
- Naložen je HTML, ki vsebuje kritični CSS
- v glavi>
- Izvede se postopek "rez gorčice" in naložijo se vsi pogojni elementi, ki temeljijo na uporabnikovih funkcijah naprave
- Kakršna koli vsebina, povezana s samim člankom ali njegovo podporo (podobne slike člankov, komentarji člankov itd.), Se lenobno naloži na svoje mesto
Takšna optimizacija kritične poti upodabljanja pomeni, da je head> dolg 222 vrstic. Ključna vsebina, ki jo je uporabnik videl, pa je ob gzipiranju še vedno v začetnem nosilnosti 14 kb. Ta postopek pomaga prebiti tisto oviro upodabljanja 1000 ms.
Pogojno in lenobno nalaganje
Pogojno nalaganje izboljša uporabniško izkušnjo na podlagi funkcije njegove naprave. Orodja, kot je Modernizr, vam omogočajo, da preizkusite te funkcije, vendar se zavedajte, da samo zato, ker brskalnik pravi, da ponuja podporo, to ne pomeni vedno popolne podpore.
Ena od tehnik je zadržati nalaganje nečesa, dokler uporabnik ne pokaže, da namerava uporabiti to funkcijo. To bi veljalo za pogojno. Zadrževanje nalaganja v družabnih ikonah lahko zadržite, dokler se uporabnik ne premakne nad ikono ali se je ne dotakne, ali pa se izognete nalaganju vstavljenega Google Zemljevida v manjših vidnih poljih, kjer bo uporabnik verjetno raje povezal s posebno aplikacijo za preslikavo. Drug pristop je „rezanje gorčice“ - za podrobnosti glejte okvir zgoraj.
Leno nalaganje je opredeljeno kot nekaj, kar nameravate vedno naložiti na stran - slike, ki so del članka, komentarji ali drugi sorodni članki -, vendar uporabniku ni treba, da začne vsebino nalagati.
Osnovno
- Omogočite gzipiranje datotek in nastavite glave poteka za vso statično vsebino (netm.ag/expire-260)
- Uporabite vtičnik Lazy Load jQuery. S tem se slike naložijo, ko se približate vidnemu polju ali po določenem časovnem obdobju
Napredno
- Nastavite hitro ali CloudFlare. Omrežja za dostavo vsebine (CDN) dostavijo vašo statično vsebino uporabnikom hitreje kot vaš lastni strežnik in imajo nekaj brezplačnih stopenj
- Omogočite SPDY za brskalnike, ki podpirajo http2, da izkoristijo funkcije http2, kot so vzporedne http zahteve
- Social Count omogoča pogojno nalaganje vaših družabnih ikon
- Uporaba API-ja za statične zemljevide vam bo omogočila, da izklopite interaktivne Googlove zemljevide za slike. Primer Brada Frosta si oglejte na netm.ag/static-260
- Vzorec Ajax Include bo naložil delčke vsebine bodisi iz atributa data-before, data-after ali data-replace.
Odzivna tipografija
Tipografija je namenjena lažji prebavljivosti vsebine. Odzivna tipografija to razširja, da zagotavlja čitljivost v najrazličnejših napravah in vidnih oknih. Jordan Moore priznava, da je tip ena stvar, za katero ni pripravljen popustiti. Če želite, spustite sliko ali dve, vendar se prepričajte, da imate odličen tip.
Stephen Hay predlaga, da velikost pisave HTML nastavite na 100 odstotkov (beri: samo pustite, kakršna je), ker vsak proizvajalec brskalnika ali naprave pripravi razumljivo berljivo privzeto vrednost za določeno ločljivost ali napravo. Za večino namiznih brskalnikov je to 16 slikovnih pik.
Po drugi strani Moore z enoto REM in velikostjo pisave HTML nastavi minimalno velikost pisave za določene elemente vsebine. Če želite na primer, da je vrstica članka vedno 14 slikovnih pik, jo nastavite kot osnovno velikost pisave v elementu HTML in nastavite .byline {font-size: 1rem;}. Ko spreminjate velikost telesa: velikost pisave: tako, da ustreza pogledu, ne boste vplivali na slog .by-line.
Pomembna je tudi dobra dolžina bralne vrstice - cilj je 45 do 65 znakov. Obstaja zaznamek, s katerim lahko preverite svojo vsebino. Če s svojim dizajnom podpirate več jezikov, se lahko razlikuje tudi dolžina vrstice. Moore predlaga uporabo članka: lang (de) article {max-width: 30em} za odkrivanje morebitnih težav.
Če želite ohraniti navpični ritem, nastavite margin-bottom proti vsebinskim blokom, ul>, ol>, blockquote>, table>, blockquote> in tako naprej, na enako višino vrstice. Če se ritem prekine z uvedbo slik, ga lahko popravite tako, da dodate Baseline.js ali BaselineAlign.js.
Osnovno
- Pisavo temeljite na 100-odstotnem telesu
- Delo v relativnih em enotah
- Robove nastavite na višino črte, da ohranite navpični ritem v svojem oblikovanju
Napredno
- Izboljšajte zmogljivost nalaganja pisave z Enhance.js ali odloženim nalaganjem pisave
- Za semantične naslove uporabite Sass @includes.
- Pogosto moramo uporabiti slog h5 v pripomočku stranske vrstice, ki zahteva oznako h2. Za nadzor velikosti uporabite Bearded’s Typographic Mixins in ostanite semantični s spodnjo kodo:
.sidebar h2 {@include heading-5}
Medijska vprašanja v JavaScript
Odkar lahko prek medijskih poizvedb nadzorujemo postavitev v različnih vidnih poljih, iščemo način, kako to povezati tudi z izvajanjem našega JavaScript-a. Obstaja nekaj načinov, kako sprožiti JavaScript na določenih širinah, višinah in usmeritvah vidnega polja, nekateri pametni ljudje pa so napisali nekaj enostavnih vtičnikov JS, kot sta Enquire.js in Simple State Manager. To lahko celo sami sestavite z uporabo matchMedia. Vendar imate težavo, da morate podvojiti medijske poizvedbe v CSS in JavaScript.
Aaron Gustafson ima prijeten trik, ki pomeni, da vam ni treba upravljati in se ujemati z medijskimi poizvedbami v CSS in JS. Zamisel je prvotno prišla od Jeremyja Keitha in v tem primeru jo je Gustafson v celoti uresničil.
Z uporabo getActiveMQ (netm.ag/media-260) vstavite div # getActiveMQ-watcher na konec elementa telesa in ga skrijete. Nato znotraj CSS nastavite # getActiveMQ-watcher {font-family: break-0;} na prvo predstavnostno poizvedbo, font-family: break-1; drugi, družina pisav: break-2; do tretjega in tako naprej.
Skript s funkcijo watchResize () (netm.ag/resize-260) preveri, ali se je velikost vidnega polja spremenila, in nato prebere aktivno družino pisav. Zdaj lahko to uporabite za priključitev izboljšav JS, kot je dodajanje vmesnika z zavihki v dl>, ko dovoljuje pogled, spreminjanje vedenja svetlobne plošče ali posodobitev postavitve podatkovne tabele. Oglejte si getActiveMQ Codepen na netm.ag/active-260.
Osnovno
- Pozabite na JavaScript za različne prikazovalnike. Uporabnikom zagotovite vsebino in funkcije spletnega mesta tako, da lahko dostopajo do njih v vseh vidnih poljih. Nikoli ne bi smeli rabiti JavaScript
Napredno
- Razširite Gustafsonovo metodo tako, da uporabite Breakup kot vnaprej določen seznam medijskih poizvedb in avtomatizirate ustvarjanje seznama družin pisav za getActiveMQ-watcher
Postopna izboljšava
Pogosta napačna predstava o postopnem izboljševanju je, da ljudje mislijo: "No, ne morem uporabiti te nove funkcije", v resnici pa je ravno nasprotno. Postopna izboljšava pomeni, da lahko funkcijo dostavite, če je podprta samo v enem ali celo v nobenem brskalniku, in sčasoma bodo ljudje dobili boljšo izkušnjo s prihodom novih različic.
Če pogledate osnovno funkcijo katerega koli spletnega mesta, lahko to dostavite kot HTML in strežniško stran opravi vso obdelavo. Plačila, obrazci, všečki, skupna raba, e-pošta, nadzorne plošče - vse je mogoče. Ko je osnovna naloga zgrajena, lahko nanjo postavimo še izjemne tehnologije, saj imamo varnostno mrežo, s katero lahko ujamemo tiste, ki padejo. Večina naprednih pristopov, o katerih smo govorili tukaj, temelji na postopnem izboljševanju.
Postavitev
Prilagodljiva postavitev je sicer preprosta, vendar ima veliko različnih pristopov. Ustvarite preproste postavitve mrež z manj oznakami z uporabo izbirnika: nth-child ().
/ * navedite prvo širino mobilnega omrežja * / .grid-1-4 {float: left; širina: 100%; } / * Ko je okno ogleda vsaj 37,5em, nastavite mrežo na 50% na element * / @media (najmanjša širina: 37,5em) {.grid-1-4 {širina: 50%; } / * Počisti plavajoči vsak drugi element PO prvem. Ta cilja na 3., 5., 7., 9. ... v mreži. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (najmanjša širina: 64em) {.grid-1-4 {širina: 25%; } / * Odstrani prejšnji izbris * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Počisti plovec vsakega 4. elementa PO prvem. Ta cilja na 5., 9. ... v mreži. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Mahnite v slovo pri uporabi položaja in plavanja za vaše postavitve. Čeprav so nam do danes dobro služili, je bila njihova uporaba za postavitev nujen kramp. Zdaj imamo v bloku dva nova otroka, ki bosta pomagala odpraviti vse težave pri postavitvi - Flexbox in Grids.
Flexbox je odličen za posamezne module, ki nadzorujejo postavitev kosov vsebine v vsakem od modulov. Obstajajo postavitve, ki jih poskušamo dostaviti, ki jih je lažje doseči s pomočjo Flexboxa, kar še bolj velja za odzivna spletna mesta. Če želite več informacij o tem, si oglejte vodnik CSS Tricks za Flexbox ali Flexbox Polyfill.
Postavitev mreže CSS
Mreža je bolj za postavitev na makro ravni. Modul postavitve mreže vam ponuja odličen način za opis postavitve v vašem CSS. Čeprav je ta trenutek še v fazi osnutka, priporočam ta članek o postavitvi mreže CSS Rachel Andrew.
Končno
To je le nekaj nasvetov za razširitev vaše odzivne prakse. Ko se lotevate kakršnega koli novega odzivnega dela, stopite korak nazaj in poskrbite, da boste pravilno dobili osnove. Začnite s svojo vsebino, HTML-jem in izboljšanimi izkušnjami z njimi ter ne boste imeli nobenih omejitev, kam lahko vzamete svoje modele.
Ta članek se je prvotno pojavil v številki 260 z dne net magazine.
