Sadržaj
- Odzivne slike
- Izvođenje
- Uvjetno i lijeno opterećenje
- Odzivna tipografija
- Upiti za medije u JavaScript-u
- Progresivno poboljšanje
- Izgled
- Izgled CSS mreže
- Konačno
Responzivni web dizajn zvuči nevjerojatno jednostavno. Odlučite se za fleksibilne rešetke za raspored, upotrijebite fleksibilne medije (slike, videozapise, okvire okvira) i primijenite medijske upite za ažuriranje ovih mjerenja kako biste najbolje posložili sadržaj na bilo kojem prozoru. U praksi smo naučili da to zapravo i nije tako lako. Sitni problemi koji se pojave tijekom svakog projekta natjeraju nas da se češkamo po glavi, a povremeno čak i urezujemo rovove za nokte na radnim stolovima.
Otkad sam počeo kustos biltena Responsive Design Weekly, imao sam sreću razgovarati s mnogim članovima web zajednice i čuti njihova iskustva. Željela sam otkriti što je ta zajednica doista htjela naučiti, pa sam čitateljima poslala anketu. Evo najboljih rezultata:
- Odzivne slike
- Poboljšanje performansi
- Odzivna tipografija
- Upiti za medije u JavaScript-u
- Progresivno poboljšanje
- Izgled
Imajući te teme na umu, pokrenuo sam niz podcasta pitajući neke od naših čelnika industrije za njihova razmišljanja. U njihovim odgovorima jedna je točka bila jednoglasna: usredotočite se na dobivanje osnova prije nego što se počnete brinuti o uzbudljivim i naprednim tehnikama. Vraćajući stvari osnovama, u stanju smo izgraditi robusno sučelje za svakoga, slojevito raspoređujući značajke kada to dopušta uređaj ili korisnički kontekst.
‘Pa ... što je s ovim naprednim tehnikama?’ Čujem kako pitate. Mislim da ga je Stephen Hay najbolje sažeo kad je rekao: 'Krajnja RWD tehnika je započeti ne korištenjem naprednih RWD tehnika. Započnite sa strukturiranim sadržajem i izgradite svoj put prema gore. Točku prijeloma dodajte samo kad se dizajn prelomi i sadržaj to nalaže i ... to je to. '
U ovom članku započet ću s osnovama i dodati slojeve složenosti kako situacija dopušta, nadovezujući se na te napredne tehnike. Započnimo.
Odzivne slike
Tekući mediji bili su ključni dio RWD-a kada ga je prvi puta definirao Ethan Marcotte. širina: 100%; , maksimalna širina: 100%; i danas funkcionira, ali responzivni pejzaž slike postao je puno kompliciraniji. Sa sve većim brojem veličina zaslona, gustoće piksela i uređaja za podršku, žudimo za većom kontrolom.
Tri glavne zabrinutosti definirala je Skupina za odgovorne slike (RICG):
- Veličina slike u kilobajtu koju šaljemo preko žice
- Fizička veličina slike koju šaljemo na uređaje s visokim DPI
- Izrezivanje slike u obliku umjetničkog smjera za određenu veličinu prozora
Yoav Weiss, uz pomoć Indiegogoa, odradio je većinu posla na implementaciji Blink-a - Googleove vilice WebKit-a, a dok ovo budete čitali, bit će isporučen u Chromeu i Firefoxu. Safari 8 isporučit će srcset, međutim atribut veličina samo je za noćne izrade, a slika> još nije implementirana.
Dolaskom bilo čega novog u naš proces web razvoja može biti teško započeti. Krenimo kroz primjer korak po korak.
img! - Proglasite rezervnu sliku za sve preglednike koji ne podržavaju slike -> src = "horse-350.webp"! - U srcset-u prijavite sve veličine slika. Uključite širinu slike pomoću deskriptora w kako biste obavijestili preglednik o širini svake slike .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Veličine obavještavaju preglednik o izgledu naše web stranice. Ovdje kažemo za bilo koji prikaz koji je veći od 64 ema, upotrijebite sliku koja će zauzimati 70% vidnog polja -> veličine = "(min-width: 64em) 70vw,! - Ako prikaz nije to veliko, tada za bilo koji prikazni prozor koji je veći od 37,5 ema upotrijebite sliku koja zauzima 95% vidnog polja -> (min-širina: 37,5 em) 95 vw,! - a ako je viši prikaz manji od toga, upotrijebite slika koja zauzima 100% okvira za prikaz -> 100vw "! - uvijek ima alt tekst .--> alt =" Konj "/>
S gledišta izvedbe nije važno koristite li min-širinu ili maksimalnu širinu u atributu veličine - ali je bitan redoslijed izvora. Preglednik će uvijek koristiti prvu odgovarajuću veličinu.
Također, imajte na umu da teško kodiramo atribut veličine da bismo ga izravno definirali u odnosu na naš dizajn. To može uzrokovati probleme s pomicanjem naprijed. Na primjer, ako redizajnirate web mjesto, morat ćete ponovo posjetiti sve slike img> ili picture> s i redefinirati veličine. Ako koristite CMS, to se može prevladati kao dio vašeg procesa gradnje.
WordPress već ima dodatak za pomoć. Definira srcset na WP standardnim vrstama slika i omogućuje vam deklariranje veličina na središnjem mjestu. Kada se stranica generira iz baze podataka, ona zamijeni bilo kakva spominjanja na img> i zamjenjuje ih markiranjem slike.
Osnovni, temeljni
- Razmislite trebate li zaista uključiti sliku. Je li sadržaj jezgre slike ili je dekorativan? Jedna slika manje značit će brže vrijeme učitavanja
- Optimizirajte slike koje trebate uključiti pomoću programa ImageOptim
- Postavite zaglavlja isteka za slike na vašem poslužitelju ili .htaccess datoteci (pogledajte detalje pod "Izvedba")
- PictureFill pruža podršku za polifil slike
Napredna
- Lijeno učitajte slike pomoću jQuery-jevog dodatka Lazy Load
- Za otkrivanje značajki koristite HTMLImageElement.Sizes i HTMLPictureElement.
- Napredni dodatak PictureFill WP, koji se nalazi na Githubu, omogućit će vam definiranje vrijednosti prilagođenih širina i veličina slike
Izvođenje
Da bismo postigli najbrže uočene performanse na našim stranicama, trebaju nam svi HTML i CSS potrebni za generiranje gornjeg dijela naše stranice u prvom odgovoru poslužitelja. Taj magični broj je 14 kb i temelji se na maksimalnoj veličini prozora zagušenja unutar prvog povratnog vremena (RTT).
Patrick Hamann, tehnički voditelj fronta u Guardianu, i njegov tim uspjeli su probiti prepreku od 1000 ms koristeći mješavinu frontend i backkend tehnika. Pristup Guardiana je osigurati da se potrebni sadržaj - članak - dostavi korisniku što je brže moguće i unutar magičnog broja od 14 kb.
Pogledajmo postupak:
- Korisnik klikne Googleovu vezu do vijesti
- Pojedinačni zahtjev za blokiranje šalje se u bazu podataka za članak. Ne traže se povezane priče ili komentari
- Učitava se HTML koji sadrži kritični CSS
- u glavi>
- Poduzima se postupak "reži senf" i učitavaju se svi uvjetni elementi koji se temelje na značajkama korisnikovog uređaja
- Sav sadržaj koji se odnosi na sam članak ili ga podržava (srodne slike članaka, komentari članaka i tako dalje) lijeno se postavlja na svoje mjesto
Ovakva optimizacija kritičnog puta prikazivanja znači da je glava> duga 222 retka. Međutim, kritični sadržaj koji je korisnik došao vidjeti i dalje se nalazi unutar početne nosivosti od 14 kb kada se gzipira. Taj postupak pomaže u probijanju te prepreke prikazivanja od 1000 ms.
Uvjetno i lijeno opterećenje
Uvjetno učitavanje poboljšava korisničko iskustvo na temelju značajke njegovog uređaja. Alati poput Modernizra omogućuju vam testiranje ovih značajki, ali imajte na umu da samo zato što preglednik kaže da nudi podršku, to ne znači uvijek i potpunu podršku.
Jedna od tehnika je zadržavanje učitavanja nečega dok korisnik ne pokaže namjeru koristiti tu značajku. To bi se smatralo uvjetnim. Možete zaustaviti učitavanje u društvenim ikonama dok korisnik ne zadrži pokazivač miša ili ne dodirne ikone, ili možete izbjeći učitavanje iframe Google Map-a u manje okvire prikaza u kojima će korisnik radije povezati posebnu aplikaciju za mapiranje. Drugi je pristup "rezati senf" - za detalje pogledajte okvir gore.
Lijeno učitavanje definira se kao nešto što uvijek namjeravate učitati na stranici - slike koje su dio članka, komentari ili drugi povezani članci - ali što ne mora biti tu da bi korisnik počeo trošiti sadržaj.
Osnovni, temeljni
- Omogućite gzipiranje datoteka i postavite zaglavlja isteka za sav statički sadržaj (netm.ag/expire-260)
- Upotrijebite dodatak Lazy Load jQuery. Ovo učitava slike kada se približavate vidokrugu ili nakon određenog vremenskog razdoblja
Napredna
- Postavite brzo ili CloudFlare. Mreže za isporuku sadržaja (CDN) isporučuju vaš statični sadržaj korisnicima brže od vašeg poslužitelja i imaju nekoliko besplatnih slojeva
- Omogućite SPDY za preglednike s omogućenom http2 da iskoriste http2 značajke poput paralelnih http zahtjeva
- Social Count omogućuje uvjetno učitavanje vaših društvenih ikona
- Korištenje API-ja za statičke karte omogućit će vam da isključite interaktivne Google karte za slike. Primjer Brada Frosta pogledajte na netm.ag/static-260
- Ajax Include Pattern učitat će isječke sadržaja iz atributa prije podataka, podataka nakon ili zamjene podataka
Odzivna tipografija
Tipografija je usmjerena na to da vaš sadržaj bude lako probavljiv. Responzivna tipografija ovo proširuje kako bi osigurala čitljivost na širokom spektru uređaja i okvira za prikaz. Jordan Moore priznaje da je tip jedna stvar na koju nije voljan popustiti. Ako trebate, ispustite sliku ili dvije, ali pripazite da imate odličan tip.
Stephen Hay predlaže da se veličina HTML fonta postavi na 100 posto (čitajte: samo ga ostavite onakvim kakav jest) jer svaki proizvođač preglednika ili uređaja daje razumljivo čitljiv zadani prikaz za određenu rezoluciju ili uređaj. Za većinu stolnih preglednika ovo je 16 piksela.
S druge strane, Moore koristi REM jedinicu i HTML veličinu fonta za postavljanje minimalne veličine fonta za određene elemente sadržaja. Na primjer, ako želite da redak članka uvijek bude 14 piksela, postavite ga kao osnovnu veličinu fonta na HTML elementu i postavite .byline {font-size: 1rem;}. Dok skalirate body: font-size: kako bi odgovarao pogledu, nećete utjecati na stil .by-line.
Važna je i dobra duljina retka za čitanje - ciljajte na 45 do 65 znakova. Postoji knjižna knjižica pomoću koje možete provjeriti svoj sadržaj. Ako svojim dizajnom podržavate više jezika, duljina retka također može varirati. Moore predlaže upotrebu članka: lang (de) article {max-width: 30em} za pokrivanje svih problema.
Da biste održali vertikalni ritam, postavite margin-bottom prema blokovima sadržaja, ul>, ol>, blockquote>, table>, blockquote> i tako dalje, na istu visinu linije. Ako se ritam prekine uvođenjem slika, možete ga popraviti dodavanjem Baseline.js ili BaselineAlign.js.
Osnovni, temeljni
- Temeljite svoj font na 100-postotnom tijelu
- Rad u relativnim em jedinicama
- Postavite margine na visinu linije kako biste održali vertikalni ritam u dizajnu
Napredna
- Poboljšajte izvedbu učitavanja fontova pomoću Enhance.js ili odgođenog učitavanja fontova
- Upotrijebite Sass @includes za semantička zaglavlja.
- Često trebamo koristiti stil h5 u widgetu bočne trake koji zahtijeva oznaku h2. Upotrijebite Bearded’s Typographic Mixins za kontrolu veličine i ostanite semantični sa donjim kodom:
.sidebar h2 {@uključi naslov-5}
Upiti za medije u JavaScript-u
Otkako smo putem medijskih upita mogli kontrolirati izgled u raznim prikazima, tražimo način da to povežemo i sa pokretanjem našeg JavaScript-a. Postoji nekoliko načina za aktiviranje JavaScript-a na određenim širinama, visinama i orijentacijama vidnog polja, a neki pametni ljudi napisali su neke jednostavne JS dodatke poput Enquire.js i Simple State Manager. Možete to čak i sami izgraditi pomoću matchMedia. Međutim, imate problem s kojim trebate duplicirati svoje medijske upite u CSS-u i JavaScript-u.
Aaron Gustafson ima uredan trik koji znači da ne morate upravljati i podudarati svoje medijske upite u CSS-u i JS-u. Ideja je izvorno potekla od Jeremyja Keitha i u ovom primjeru Gustafson ju je u potpunosti implementirao.
Koristeći getActiveMQ (netm.ag/media-260), ubrizgajte div # getActiveMQ-watcher na kraj elementa tijela i sakrijte ga. Zatim unutar CSS-a postavite # getActiveMQ-watcher {font-family: break-0;} na prvi medijski upit, font-family: break-1; drugoj, obitelj fontova: break-2; na treće i tako dalje.
Skripta koristi watchResize () (netm.ag/resize-260) da provjeri je li se veličina okvira za prikaz promijenila, a zatim čita aktivnu obitelj fontova. Sada to možete koristiti za priključivanje JS poboljšanja poput dodavanja sučelja s karticama u dl> kada to omogućuje prikaz, promjena ponašanja lightboxa ili ažuriranje izgleda tablice podataka. Pogledajte getActiveMQ Codepen na netm.ag/active-260.
Osnovni, temeljni
- Zaboravite na JavaScript za različite okvire prikaza. Pružite korisnicima sadržaj i funkcije web mjesta na način da im mogu pristupiti u svim okvirima prikaza. JavaScript nam nikada ne bi trebao
Napredna
- Proširite Gustafsonovu metodu korištenjem Razbijanja kao unaprijed definiranog popisa medijskih upita i automatiziranjem stvaranja popisa porodica fontova za getActiveMQ-watcher
Progresivno poboljšanje
Uobičajena zabluda o progresivnom poboljšanju jest da ljudi misle: 'Ma, ne mogu se koristiti ovom novom značajkom', ali zapravo, upravo je suprotno. Progresivno poboljšanje znači da značajku možete isporučiti ako je podržana samo u jednom ili čak bez preglednika, a s vremenom će ljudi dobivati sve bolji doživljaj kad nove verzije stignu.
Ako pogledate osnovnu funkciju bilo kojeg web mjesta, možete ga isporučiti u obliku HTML-a i neka poslužitelj izvrši svu obradu. Plaćanja, obrasci, sviđanja, dijeljenje, e-pošta, nadzorne ploče - sve se to može učiniti. Jednom kad se izgradi osnovni zadatak, možemo na to složiti sjajne tehnologije, jer imamo sigurnosnu mrežu koja će uhvatiti one koji propadnu. Većina naprednih pristupa o kojima smo ovdje govorili temelje se na progresivnim poboljšanjima.
Izgled
Jednostavno je reći fleksibilan raspored, ali on ima mnogo različitih pristupa. Stvorite jednostavne rasporede mreže s manje oznaka pomoću selektora: nth-child ().
/ * proglasite prvu širinu mobilnog uređaja za mrežu * / .grid-1-4 {float: left; širina: 100%; } / * Kada je okvir za prikaz najmanje 37,5em, tada postavite mrežu na 50% po elementu * / @media (min-širina: 37,5em) {.grid-1-4 {širina: 50%; } / * Očistite plutajući svaki drugi element NAKON prvog. Ovo cilja 3., 5., 7., 9. ... u mreži. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (min-širina: 64em) {.grid-1-4 {širina: 25%; } / * Ukloni prethodno brisanje * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Očistite plutajući svaki 4. element NAKON prvog. Ovo cilja 5., 9. ... u mreži. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Mahnite zbogom korištenju položaja i plutanja za svoje izglede. Iako su nam do danas dobro poslužili, njihova upotreba za izgled bila je neophodan hak. Sada u bloku imamo dvoje nove djece koja će vam pomoći popraviti sve probleme s izgledom - Flexbox i rešetke.
Flexbox je izvrstan za pojedinačne module, kontrolirajući raspored sadržaja unutar svakog od modula. Postoje izgledi koje pokušavamo isporučiti, a koji se mogu lakše postići pomoću Flexboxa, a to je još istinitije s responzivnim web lokacijama. Više o tome potražite u vodiču CSS trikova za Flexbox ili Flexbox Polyfill.
Izgled CSS mreže
Mreža je više za raspored na makro razini. Modul Grid layout pruža vam izvrstan način za opis izgleda u vašem CSS-u. Iako je trenutno još u fazi izrade, preporučujem ovaj članak o rasporedu CSS mreže, Rachel Andrew.
Konačno
Ovo je samo nekoliko savjeta za proširivanje vaše responzivne prakse. Približavajući se bilo kojem novom responzivnom poslu, napravite korak unatrag i pobrinite se da pravilno napravite osnove. Započnite sa poboljšanim sadržajem, HTML-om i poboljšanim slojevima i neće biti ograničenja na mjesta na koja možete odnijeti svoje dizajne.
Ovaj se članak izvorno pojavio u broju 260 od neto magazin.
