Sisältö
- Reagoivat kuvat
- Esitys
- Ehdollinen ja laiska lastaus
- Reagoiva typografia
- Mediakyselyt JavaScriptissä
- Asteittainen parannus
- Layout
- CSS-ruudukon asettelu
- Lopuksi
Reagoiva verkkosivujen suunnittelu kuulostaa uskomattoman yksinkertaiselta. Valitse asettelulle joustavat ruudukot, käytä joustavaa tallennusvälinettä (kuvat, video, iframe-kehykset) ja päivitä nämä mittaukset mediakyselyjen avulla järjestämäänksesi minkä tahansa näkymän sisällön parhaiten. Käytännössä olemme oppineet, että se ei todellakaan ole niin helppoa. Pienet ongelmat, jotka nousevat esiin jokaisen projektin aikana, saavat meidät raapimaan päämme ja toisinaan jopa veistämään kynsien kaivantoja työpöydällemme.
Siitä lähtien, kun aloin kuratoida Responsive Design Weekly -uutiskirjettä, olen ollut onni puhua monien verkkoyhteisön jäsenten kanssa ja kuulla heidän kokemuksensa. Halusin selvittää tarkalleen, mitä yhteisö todella halusi oppia, joten levitin kyselyn lukijoille. Tässä ovat parhaat tulokset:
- Reagoivat kuvat
- Suorituskyvyn parantaminen
- Reagoiva typografia
- Mediakyselyt JavaScriptissä
- Progressiivinen parannus
- Layout
Nämä aiheet mielessä ajoin sarjan podcasteja, joissa kysyin joiltakin alan johtajilta ajatuksia. Vastauksissaan yksi kohta oli yksimielinen: keskity perusasioiden saamiseen juuri ennen kuin aloitat huolehtimisen jännittävistä ja edistyneistä tekniikoista. Palauttamalla asiat takaisin perusasioihin voimme rakentaa vankan käyttöliittymän kaikille, kerrostamalla ominaisuuksia, kun laitteen tai käyttäjän asiayhteys sallii.
”Joten ... entä nämä edistyneet tekniikat?” Kuulen sinun kysyvän. Luulen, että Stephen Hay teki sen parhaiten, kun hän sanoi: ”Perimmäinen RWD-tekniikka on aloittaa olemalla käyttämättä edistyneitä RWD-tekniikoita. Aloita strukturoidusta sisällöstä ja rakenna tienne ylöspäin. Lisää katkaisupiste vasta, kun muotoilu rikkoutuu ja sisältö sanelee sen ja ... siinä kaikki. '
Tässä artikkelissa aloitan perusasioista ja lisätään kerroksia monimutkaisuuteen tilanteen mukaan, jotta voin rakentaa näitä edistyneitä tekniikoita. Aloitetaan.
Reagoivat kuvat
Nestemäinen väliaine oli keskeinen osa RWD: tä, kun Ethan Marcotte määritteli sen ensimmäisen kerran. leveys: 100%; , enimmäisleveys: 100%; toimii edelleen tänään, mutta reagoiva kuvamaisema on muuttunut paljon monimutkaisemmaksi. Näytön koon, pikselitiheyden ja tukevien laitteiden määrän kasvaessa haluamme paremman hallinnan.
Responsive Images Community Group (RICG) määritteli kolme päähuolenaihetta:
- Langan kautta lähetettävän kuvan kilotavuinen koko
- Suuren DPI-laitteen lähetettävän kuvan fyysinen koko
- Kuvan rajaus taidesuuntaisena näkymän tietyn koon mukaan
Yoav Weiss on tehnyt Indiegogon avustuksella suurimman osan Blink-toteutuksen työstä - Googlen WebKitin haarukka, ja siihen mennessä, kun luet tätä, se toimitetaan Chromessa ja Firefoxissa. Safari 8 toimittaa srcsetin, mutta koko-attribuutti on vain iltaisin ja kuvaa> ei ole vielä otettu käyttöön.
Verkkokehitysprosessissamme on jotain uutta, joten aloittaminen voi olla vaikeaa. Käytään läpi esimerkki vaihe vaiheelta.
img! - Ilmoita varakuva kaikille muille kuin kuvaa tukeville selaimille -> src = "horse-350.webp"! - Ilmoita kaikki kuvakoot srcsetissä. Sisällytä kuvan leveys w-kuvaimen avulla ilmoittaaksesi selaimelle kunkin kuvan leveydestä. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Koot ilmoittavat selaimelle sivustomme ulkoasun. Tässä sanotaan kaikille 64ems ja sitä suuremmille näkymille, jos käytät kuvaa, joka vie 70% näkymästä -> koot = "(min-width: 64em) 70vw,! - Jos näkymä ei ole se iso, käytä minkä tahansa 37.5em ja sitä suuremman näkymän kohdalla kuvaa, joka on 95% näkymästä -> (min-leveys: 37.5em) 95vw,! - ja jos näkymä on pienempi, käytä sitten kuvassa, joka vie 100% näkymästä -> 100vw "! - on aina alt-teksti. -> alt =" Hevonen "/>
Suorituskyvyn kannalta ei ole väliä, käytätkö koko-attribuutissa min-width tai max-width - mutta lähdejärjestyksellä on merkitystä. Selain käyttää aina ensimmäistä vastaavaa kokoa.
Muista myös, että koodaamme koon attribuutin, joka määritetään suoraan suunnittelumme kanssa. Tämä voi aiheuttaa ongelmia eteenpäin. Jos esimerkiksi suunnittelet sivustoasi uudelleen, sinun on tarkasteltava kaikkia img> - tai picture> - kuvia ja määriteltävä uudestaan koot. Jos käytät CMS: ää, tämä voidaan voittaa osana rakennusprosessiasi.
WordPressillä on jo laajennus apua. Se määrittelee srcsetin WP-vakiokuvakuvioille ja antaa sinun ilmoittaa koot keskeisessä paikassa. Kun sivu luodaan tietokannasta, se vaihtaa kaikki maininnat img>: ssä ja korvaa ne kuvamerkinnöillä.
Perus
- Mieti, onko sinun todella sisällytettävä kuva. Onko kuvan ydinsisältö vai onko se koristeellista? Yksi vähemmän kuvaa tarkoittaa nopeampaa latausaikaa
- Optimoi sisällyttämäsi kuvat ImageOptimin avulla
- Aseta palvelimellesi tai .htaccess-tiedostollesi olevien kuvien vanhentuvat otsikot (katso yksityiskohdat kohdasta Suorituskyky)
- PictureFill tarjoaa polyfill-tuen kuville
Pitkälle kehittynyt
- Lazy lataa kuvasi jQueryn Lazy Load -laajennuksella
- Käytä HTMLImageElement.Sizes ja HTMLPictureElement ominaisuuksien tunnistamiseen.
- Githubista löytynyt edistynyt PictureFill WP -laajennus antaa sinun määrittää mukautetut kuvan leveydet ja koot
Esitys
Jotta saisimme nopeimman havaitun suorituskyvyn sivuillamme, tarvitsemme kaikki HTML: n ja CSS: n, joita tarvitaan sivun yläosan hahmontamiseen palvelimen ensimmäisen vastauksen sisällä. Tämä maaginen numero on 14 kt ja perustuu korkeimpaan ruuhkaikkunan kokoon ensimmäisen edestakaisen ajan (RTT) aikana.
Guardianin frontendin tekninen johtaja Patrick Hamann ja hänen tiiminsä ovat onnistuneet rikkomaan 1000 ms: n esteen yhdistämällä frontendin ja backendin tekniikoita. Guardianin tavoitteena on varmistaa, että vaadittu sisältö - artikkeli - toimitetaan käyttäjälle mahdollisimman nopeasti ja 14 kt: n taianumeron sisällä.
Katsotaanpa prosessia:
- Käyttäjä napsauttaa Google-linkkiä uutiseen
- Artikkelin tietokantaan lähetetään yksi estopyyntö. Aiheeseen liittyviä tarinoita tai kommentteja ei vaadita
- HTML on ladattu, joka sisältää kriittisen CSS: n
- päähän>
- ”Sinapin leikkaus” -prosessi suoritetaan ja kaikki käyttäjän laitteen ominaisuuksiin perustuvat ehdolliset elementit ladataan
- Kaikki itse artikkeliin liittyvä tai sitä tukeva sisältö (aiheeseen liittyvät artikkelikuvat, artikkelikommentit ja niin edelleen) ladataan paikoilleen
Kriittisen renderointipolun optimointi tällä tavoin tarkoittaa, että pää> on 222 riviä. Kriittinen sisältö, jonka käyttäjä näki, kuuluu kuitenkin 14 kt: n alkuperäiseen hyötykuormaan gzip-muodossa. Tämä prosessi auttaa murtamaan 1000 ms: n renderöinnin esteen.
Ehdollinen ja laiska lastaus
Ehdollinen lataus parantaa käyttäjän kokemusta laitteen ominaisuuden perusteella. Modernizrin kaltaisten työkalujen avulla voit testata näitä ominaisuuksia, mutta muista, että vain koska selain sanoo tarjoavansa tukea, se ei aina tarkoita täydellistä tukea.
Yksi tekniikka on lykätä jotain lataamista, kunnes käyttäjä osoittaa aikovansa käyttää kyseistä ominaisuutta. Tätä pidettäisiin ehdollisena. Voit keskeyttää sosiaalisten kuvakkeiden lataamista, kunnes käyttäjä vie hiiren kuvakkeiden päälle tai koskettaa niitä. Voit myös välttää iframe-kehyksen Google Mapin lataamista pienempiin näkymiin, joissa käyttäjä todennäköisesti mieluummin linkittää omistettuun kartoitussovellukseen. Toinen lähestymistapa on ”leikata sinappi” - katso lisätietoja yllä olevasta laatikosta.
Laiska lataus määritellään sellaiseksi, jonka aiot aina ladata sivulle - kuvat, jotka ovat osa artikkelia, kommentteja tai muita aiheeseen liittyviä artikkeleita - mutta joiden ei tarvitse olla paikalla, jotta käyttäjä voi alkaa kuluttaa sisältöä.
Perus
- Ota tiedostojen gzip-tiedosto käyttöön ja aseta vanhentumisotsikot koko staattiselle sisällölle (netm.ag/expire-260)
- Käytä Lazy Load jQuery -laajennusta. Tämä lataa kuvia lähestyttäessä näkymää tai tietyn ajan kuluttua
Pitkälle kehittynyt
- Asenna nopeasti tai CloudFlare. Sisältöverkot (CDN) toimittavat staattisen sisällön käyttäjille nopeammin kuin oma palvelimesi, ja niillä on joitain ilmaisia tasoja
- Ota SPDY käyttöön http2-yhteensopiville selaimille, jotta voit hyödyntää http2-ominaisuuksia, kuten rinnakkaisia http-pyyntöjä
- Sosiaalinen laskenta mahdollistaa sosiaalisten kuvakkeiden ehdollisen lataamisen
- Static Maps -sovellusliittymän avulla voit vaihtaa interaktiiviset Google-kartat kuville. Katsokaa Brad Frostin esimerkkiä osoitteessa netm.ag/static-260
- Ajax Sisällytä malli lataa sisältöpätkät joko data-before, data-after tai data-substitute -attribuutista
Reagoiva typografia
Typografian tarkoituksena on tehdä sisällöstäsi helposti sulava. Reagoiva typografia laajentaa tätä varmistamaan luettavuuden useissa eri laitteissa ja näkymissä. Jordan Moore myöntää, että tyyppi on yksi asia, josta hän ei ole halukas siirtymään. Pudota kuva tai kaksi, jos tarvitset, mutta varmista, että sinulla on hyvä tyyppi.
Stephen Hay ehdottaa HTML-kirjasinkoon asettamista 100 prosentiksi (lue: jätä se vain sellaisenaan), koska kukin selain tai laitevalmistaja asettaa kohtuullisen luettavan oletusarvon tietylle tarkkuudelle tai laitteelle. Useimmissa työpöydän selaimissa tämä on 16 kuvapistettä.
Toisaalta Moore käyttää REM-yksikköä ja HTML-fonttikokoa asettamaan minimifonttikoon tietyille sisältöelementeille. Esimerkiksi, jos haluat artikkelin viivan olevan aina 14 kuvapistettä, aseta se HTML-elementin peruskirjasinkoolle ja aseta .byline {font-size: 1rem;}. Skaalatessasi body: font-size: -näkymää sopivaksi et vaikuta .by-line -tyyliin.
Hyvä lukulinjan pituus on myös tärkeä - tähtää 45-65 merkkiin. On kirjanmerkki, jonka avulla voit tarkistaa sisältösi. Jos tuet suunnittelussa useita kieliä, myös viivan pituus voi vaihdella. Moore ehdottaa, että: lang (de) article {max-width: 30em} käytetään kattamaan siellä olevat ongelmat.
Pystysuoran rytmin ylläpitämiseksi aseta marginaalin alaosa sisältölohkoihin, ul>, ol>, blockquote>, table>, blockquote> ja niin edelleen, samaan linjaan kuin korkeus. Jos rytmi keskeytyy kuvien käyttöönotolla, voit korjata sen lisäämällä Baseline.js tai BaselineAlign.js.
Perus
- Perustaa kirjasimesi 100 prosentin runkoon
- Työskentele suhteellisissa yksiköissä
- Aseta marginaalit viivan korkeudelle, jotta pystyt säilyttämään pystysuunnassa rytmin
Pitkälle kehittynyt
- Paranna fonttien lataustehoa Enhance.js: llä tai lykätyllä fonttien latauksella
- Käytä semanttisia otsikoita Sass @includes.
- Usein meidän on käytettävä h5-tyyliä sivupalkin widgetissä, joka vaatii h2-merkinnän. Käytä Beardedin typografisia sekoituksia hallita kokoa ja pysyä semanttisena alla olevan koodin avulla:
.sidebar h2 {@ sisällytä otsikko-5}
Mediakyselyt JavaScriptissä
Siitä lähtien, kun olemme pystyneet hallitsemaan asettelua useissa näkymissä mediakyselyjen avulla, olemme etsineet tapaa yhdistää se myös JavaScriptin käyttämiseen. On olemassa muutamia tapoja käynnistää JavaScripti tietyillä näkymän leveydillä, korkeuksilla ja suunnilla, ja jotkut älykkäät ihmiset ovat kirjoittaneet joitain helppokäyttöisiä natiivimaisia JS-laajennuksia, kuten Enquire.js ja Simple State Manager. Voit jopa rakentaa tämän itse matchMedian avulla. Sinulla on kuitenkin ongelma, että sinun on kopioitava mediakyselysi CSS: ään ja JavaScriptiin.
Aaron Gustafsonilla on siisti temppu, mikä tarkoittaa, että sinun ei tarvitse hallita ja sovittaa CSS: n ja JS: n mediahakuja. Idea tuli alun perin Jeremy Keithiltä, ja tässä esimerkissä Gustafson on vienyt sen täysimääräisesti.
Käytä getActiveMQ: ta (netm.ag/media-260) pistämällä div # getActiveMQ-watcher runko-osan loppuun ja piilottamalla se. Sitten määritä CSS: ssä # getActiveMQ-watcher {font-family: break-0;} ensimmäiseen media kyselyyn, font-family: break-1; toiseen, font-family: break-2; kolmanteen ja niin edelleen.
Komentosarja käyttää watchResize () (netm.ag/resize-260) -toimintoa tarkistaakseen, onko näkymän koko muuttunut, ja lukee sitten aktiivisen fonttiperheen. Nyt voit käyttää tätä kytkeäksesi JS-parannuksia, kuten lisäämällä välilehdillä varustetun käyttöliittymän dl: hen>, kun näkymäikkuna sallii, muuttamalla valolaatikon käyttäytymistä tai päivittämällä tietotaulukon asettelua. Tutustu getActiveMQ Codepen -sivustoon osoitteessa netm.ag/active-260.
Perus
- Unohda JavaScript eri näkymille. Tarjoa käyttäjille sisältöä ja verkkosivustojen toimintoja tavalla, jolla he voivat käyttää sitä kaikissa näkymissä. Meidän ei pitäisi koskaan tarvita JavaScriptiä
Pitkälle kehittynyt
- Laajenna Gustafsonin menetelmää käyttämällä Breakupia ennalta määritettynä mediakyselyjen luettelona ja automatisoimalla getActiveMQ-watcherin kirjasinperheiden luettelon luominen
Asteittainen parannus
Yleinen väärinkäsitys progressiivisesta parannuksesta on, että ihmiset ajattelevat: "No, en voi käyttää tätä uutta ominaisuutta", mutta todellakin, se on päinvastoin. Progressiivinen parannus tarkoittaa, että voit toimittaa ominaisuuden, jos sitä tuetaan vain yhdessä selaimessa tai jopa ei selaimissa, ja ajan myötä ihmiset saavat paremman kokemuksen uusien versioiden saapuessa.
Jos tarkastelet minkä tahansa verkkosivuston ydintoimintoa, voit toimittaa sen HTML-muodossa ja pyytää palvelinpuolta suorittamaan kaiken käsittelyn. Maksut, lomakkeet, tykkäykset, jakaminen, sähköpostit, hallintapaneelit - kaikki voidaan tehdä. Kun perustehtävä on rakennettu, voimme kerrosta mahtavat tekniikat sen päälle, koska meillä on turvaverkko tarttumaan kaatuneisiin. Suurin osa edistyneistä lähestymistavoista, joista olemme puhuneet, perustuvat asteittaiseen parantamiseen.
Layout
Joustava asettelu on helppo sanoa, mutta sillä on monia erilaisia lähestymistapoja. Luo yksinkertaisia ruudukkoasetteluja, joissa on vähemmän merkintöjä, käyttämällä: nth-child () valitsinta.
/ * ilmoita mobiilin ensimmäinen leveys ruudukolle * / .grid-1-4 {float: left; leveys: 100%; } / * Kun näkymä on vähintään 37,5em, aseta ruudukoksi 50% elementtiä kohden * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Tyhjennä kellu joka toinen elementti ensimmäisen JÄLKEEN. Tämä kohdistaa ruudukon 3., 5., 7., 9. sijalle. * / .Grid-1-4: n-tyypin tyyppi (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {leveys: 25%; } / * Poista edellinen tyhjennetty * / .grid-1-4: n-tyypin tyyppi (2n + 1) {tyhjennä: ei mitään; } / * Tyhjennä kellu joka 4. elementti ensimmäisen jälkeen. Tämä kohdistuu ruudukon 5., 9. sijalle. * / .Grid-1-4: n-tyypin tyyppi (4n + 1) {clear: left; }}
Heittäkää hyvästit sijainnin ja kellukkeen käytöstä asetteluissanne. Vaikka he ovat palvelleet meitä hyvin tähän mennessä, niiden käyttö ulkoasussa on ollut välttämätön hakkerointi. Meillä on nyt kaksi uutta lasta, jotka auttavat korjaamaan kaikki asetteluongelmamme - Flexbox ja Grids.
Flexbox on loistava yksittäisille moduuleille, sillä se hallitsee kunkin moduulin sisältökappaleiden asettelua. Yritämme toimittaa asetteluja, jotka voidaan saavuttaa helpommin Flexboxilla, ja tämä on entistä totta reagoivien sivustojen kohdalla. Lisätietoja tästä on CSS-temppujen Flexbox- tai Flexbox Polyfill -oppaassa.
CSS-ruudukon asettelu
Ruudukko on enemmän makrotason asettelua varten. Ruudukkoasettelumoduuli antaa sinulle loistavan tavan kuvata asettelua CSS: ssä. Vaikka se on vielä luonnosvaiheessa tällä hetkellä, suosittelen tätä artikkelia CSS Grid -asettelusta, jonka on kirjoittanut Rachel Andrew.
Lopuksi
Nämä ovat vain muutamia vinkkejä reagoivan käytännön laajentamiseksi. Kun lähestyt uutta reagointityötä, ota askel taaksepäin ja varmista, että saat perusasiat oikein. Aloita sisällöstäsi, HTML: stä ja kerrosten paremmista kokemuksista, eikä malleillesi ole rajoituksia.
Tämä artikkeli ilmestyi alun perin julkaisussa 260 nettilehti.
