Efni.
- Móttækilegar myndir
- Frammistaða
- Skilyrt og latur hleðsla
- Móttækileg leturfræði
- Fjölmiðlafyrirspurnir í JavaScript
- Framsóknarbæting
- Skipulag
- Útlit CSS rist
- Loksins
Móttækileg vefsíðuhönnun hljómar ótrúlega einfalt. Veldu sveigjanleg rist fyrir útlitið, notaðu sveigjanlegan miðil (myndir, myndskeið, iframes) og notaðu fjölmiðlafyrirspurnir til að uppfæra þessar mælingar til að raða efni best á hvaða sjónarhorn sem er. Í reynd höfum við lært að það er í raun ekki svo auðvelt. Örlítil mál sem koma upp við hvert verkefni halda okkur að klóra okkur í hausnum og stundum jafnvel að rista fingurgöngurnar á skrifborðunum.
Síðan ég hóf umsjón með fréttabréfi Responsive Design Weekly hef ég verið svo heppin að tala við marga meðlimi vefsamfélagsins og heyra reynslu þeirra. Ég vildi komast að því nákvæmlega hvað samfélagið vildi raunverulega læra, svo ég dreifði könnun til lesenda. Hér eru helstu niðurstöðurnar:
- Móttækilegar myndir
- Að bæta árangur
- Móttækileg leturfræði
- Fjölmiðlafyrirspurnir í JavaScript
- Framsóknarbætur
- Skipulag
Með þessi efni í huga hljóp ég röð podcasta þar sem ég spurði nokkra leiðtoga iðnaðarins um hugsanir sínar. Í svörum þeirra var eitt atriði samhljóða: einbeittu þér að því að fá grunnatriðin rétt áður en þú byrjar að hafa áhyggjur af spennandi og háþróaðri tækni. Með því að taka hlutina aftur í grunnatriðin erum við fær um að byggja upp öflugt viðmót fyrir alla og leggja lögun á eiginleika þegar tækið eða samhengi notandans leyfir.
’Svo ... hvað með þessar háþróuðu aðferðir?’ Ég heyri þig spyrja. Ég held að Stephen Hay hafi dregið það saman best þegar hann sagði: ‘The ultimate RWD technique is to start off with not use any advanced RWD techniques. Byrjaðu með skipulagt efni og byggðu þig upp. Bættu aðeins við brotpunkti þegar hönnunin brotnar og efnið segir til um það og ... það er það. ’
Í þessari grein mun ég byrja á grunnatriðunum og bæta við flækjustigi eins og ástandið leyfir, til að byggja upp þessar háþróuðu aðferðir. Byrjum.
Móttækilegar myndir
Vökvamiðlar voru lykilþáttur RWD þegar það var fyrst skilgreint af Ethan Marcotte. breidd: 100%; , hámarksbreidd: 100%; virkar enn í dag, en móttækilegt myndlandslag er orðið miklu flóknara. Með vaxandi fjölda skjástærða, pixlaþéttleika og tækjum til að styðja, þráum við meiri stjórn.
Þrjár helstu áhyggjur voru skilgreindar af Responsive Images Community Group (RICG):
- Kilobyte stærð myndarinnar sem við erum að senda yfir vírinn
- Líkamleg stærð myndarinnar sem við erum að senda í há DPI tæki
- Myndin er uppskera í formi stefnu fyrir sérstaka stærð útsýnisins
Yoav Weiss, með hjálp Indiegogo, hefur unnið meirihluta vinnu við útfærsluna á Blink - gaffli Google WebKit og þegar þú lest þetta verður hún send í Chrome og Firefox. Safari 8 mun senda srcset, þó að stærðareiginleikinn sé aðeins í næturgerð og mynd> er ekki enn útfærð.
Með tilkomu einhvers nýs í þróunarferli okkar á vefnum getur verið erfitt að byrja. Við skulum renna í gegnum dæmi skref fyrir skref.
img! - Tilkynntu bakmynd fyrir alla vafra sem ekki styðja mynd -> src = "hestur-350.webp"! - Tilgreindu allar myndastærðir í srcset. Láttu myndbreiddina fylgja með w lýsingunni til að upplýsa vafrann um breidd hverrar myndar. -> srcset = "hestur-350.webp 350w, hestur-500.webp 500w, hestur-1024.webp 1024w, hestur.webp 2000w "! - Stærðir upplýsa vafrann um uppsetningu síðunnar okkar. Hér erum við að segja fyrir hvaða útsýni sem er 64ems og stærra, notaðu mynd sem mun taka 70% af útsýnisstaðnum -> stærðir = "(mín. Breidd: 64em) 70vw,! - Ef útsýnisstaðurinn er ekki það stórt, þá notaðu mynd sem tekur 95% af útsýnispottinum fyrir alla útsýnisstaði sem eru 37,5 em og stærri -> (mín breidd: 37,5 em) 95 vw,! - og ef útsýnisstaðurinn er minni en það, notaðu mynd sem tekur 100% af útsýninu -> 100vw "! - alltaf með alt texta. -> alt =" Hestur "/>
Frá frammistöðu sjónarhóli skiptir ekki máli hvort þú notir lágmarksbreidd eða hámarksbreidd í stærðareiginleikanum - en upprunaröðin skiptir máli. Vafrinn notar alltaf fyrstu samsvarandi stærð.
Mundu líka að við erum að erfiða erfðaskrána stærðareiginleikann til að skilgreina beint miðað við hönnun okkar. Þetta getur valdið því að mál þróist áfram. Til dæmis, ef þú endurhannar síðuna þína þarftu að fara yfir allar img> eða myndir> og endurskilgreina stærðirnar. Ef þú ert að nota CMS er hægt að vinna bug á þessu sem hluti af byggingarferlinu.
WordPress er þegar með viðbót til að hjálpa. Það skilgreinir srcset á WP venjulegum myndafbrigðum og gerir þér kleift að lýsa stærðum á miðlægum stað. Þegar síðan er búin til úr gagnagrunninum, skiptir hún út öllum getnum á img> og kemur þeim í stað myndamerkingarinnar.
Basic
- Hugsaðu um hvort þú þarft virkilega að láta mynd fylgja með. Er myndin kjarnainnihald, eða er það skrautlegt? Ein mynd færri þýðir hraðari hleðslutíma
- Fínstilltu myndirnar sem þú þarft að hafa með því að nota ImageOptim
- Settu útrunnin haus fyrir myndirnar þínar á netþjóninum þínum eða .htaccess skránni (sjá upplýsingar undir ‘Performance’)
- PictureFill veitir fjölfyllingarstuðning fyrir myndir
Lengra komnir
- Latur hlaða myndirnar þínar með jQuery’s Lazy Load viðbótinni
- Notaðu HTMLImageElement.Sizes og HTMLPictureElement til að greina eiginleika.
- Ítarlega PictureFill WP viðbótin, sem er að finna á Github, gerir þér kleift að skilgreina sérsniðnar myndbreiddir og stærðargildi
Frammistaða
Til að ná sem bestum árangri á síðunum okkar, þurfum við alla HTML og CSS sem þarf til að gera efsta hluta síðunnar innan fyrstu svörunar frá þjóninum. Þessi töfratala er 14kb og byggist á hámarksstærð gluggastigs innan fyrsta hringtíma (RTT).
Patrick Hamann, forsprakki tæknilegs forystu hjá Guardian, og lið hans hefur tekist að brjóta 1000ms múrinn með blöndu af framhlið og afturendatækni. Aðferð Guardian er að tryggja nauðsynlegt efni - greinina - er afhent notandanum eins fljótt og auðið er og innan 14kb töfranúmersins.
Við skulum skoða ferlið:
- Notandi smellir á Google hlekk til fréttar
- Ein beiðni um sljór er send í gagnagrunninn vegna greinarinnar. Ekki er óskað eftir neinum tengdum sögum eða athugasemdum
- HTML er hlaðið sem inniheldur Critical CSS
- í höfðinu>
- Farið er í „Skerið sinnep“ og allir skilyrtir þættir byggðir á tækjatækjum notandans hlaðnir
- Öllu efni sem tengist eða styður greinina sjálfa (tengdar greinarmyndir, athugasemdir við greinar og svo framvegis) er latur hlaðinn á sinn stað
Að hagræða mikilvægu flutningsleiðinni eins og þetta þýðir að höfuðið> er 222 línur að lengd. Hins vegar er mikilvæga efnið sem notandinn kom til að sjá enn innan 14kb upphafsálagsins þegar hann var gislaður. Það er þetta ferli sem hjálpar til við að rjúfa 1000 milljón flutningsþröskuldinn.
Skilyrt og latur hleðsla
Skilyrt hleðsla bætir upplifun notandans út frá eiginleika tækisins. Verkfæri eins og Modernizr gera þér kleift að prófa þessa eiginleika, en vertu meðvitaður um að bara vegna þess að vafri segir að hann bjóði stuðning, þá þýðir það ekki alltaf fullan stuðning.
Ein tækni er að halda áfram að hlaða eitthvað þar til notandinn sýnir áform um að nota þann eiginleika. Þetta yrði talið skilyrt. Þú getur haldið áfram að hlaða í félagslegu táknunum þar til notandinn svífur yfir eða snertir táknin, eða þú gætir forðast að hlaða iframe Google Map í minni útsýnisport þar sem líklegt er að notandinn vilji frekar tengja við sérstakt kortlagningarforrit. Önnur aðferð er að „skera sinnepið“ - sjáðu rammann hér að ofan til að fá frekari upplýsingar um þetta.
Latur hleðsla er skilgreind sem eitthvað sem þú ætlar alltaf að hlaða á síðuna - myndir sem eru hluti af greininni, athugasemdir eða aðrar tengdar greinar - en sem þarf ekki að vera til staðar fyrir notandann til að byrja að neyta efnisins.
Basic
- Virkja gzipping fyrir skrár og stilla útrunnið haus fyrir allt kyrrstætt efni (netm.ag/expire-260)
- Notaðu viðbótina Lazy Load jQuery. Þetta hleður inn myndum þegar nálgast er útsýnisstaðinn eða eftir ákveðinn tíma
Lengra komnir
- Settu upp hratt eða CloudFlare. Efnisafhendingarnet (CDN) skila stöðugu efni þínu til notenda hraðar en þinn eigin netþjónn og hafa nokkur ókeypis stig
- Kveiktu á SPDY fyrir vafra sem virka fyrir http2 til að nýta sér http2 eiginleika eins og samhliða http beiðnir
- Félagslegur fjöldi gerir ráð fyrir skilyrtu hleðslu á félagslegu táknunum þínum
- Notkun Static Maps API mun gera þér kleift að slökkva á gagnvirkum Google kortum fyrir myndir. Skoðaðu dæmi Brad Frost á netm.ag/static-260
- Ajax Include Pattern mun hlaða innihaldsbrotum frá annað hvort gögnum áður, gögnum eftir eða gögnum skipta um eiginleika
Móttækileg leturfræði
Leturgerð snýst um að gera innihald þitt auðmeltanlegt. Móttækileg leturfræði framlengir þetta til að tryggja læsileika yfir fjölbreytt úrval tækja og útsýnisporta. Jordan Moore viðurkennir að þessi tegund sé eitt sem hann sé ekki tilbúinn að víkja fyrir. Slepptu mynd eða tveimur ef þú þarft, en vertu viss um að þú hafir frábæra gerð.
Stephen Hay leggur til að HTML leturstærðin sé stillt á 100 prósent (lesið: látið það bara vera eins og það er) vegna þess að hver vafri eða framleiðandi tækjanna gerir tiltölulega læsilegt sjálfgefið fyrir ákveðna upplausn eða tæki. Fyrir flesta skjáborðsvafra er þetta 16 pixlar.
Á hinn bóginn notar Moore REM eininguna og HTML leturstærð til að stilla lágmarks leturstærð fyrir ákveðna efnisþætti. Til dæmis, ef þú vilt að undirlínur greinar verði alltaf 14 pixlar, stilltu það sem grunn leturstærð á HTML frumefninu og stilltu .byline {leturstærð: 1rem;}. Þegar þú mælir líkama: leturstærð: til að passa við útsýnisstaðinn hefurðu ekki áhrif á .by-line stílinn.
Góð lestrarlínulengd er einnig mikilvæg - miðaðu við 45 til 65 stafi. Það er bókamerki sem þú getur notað til að kanna efni þitt. Ef þú styður mörg tungumál með hönnun þinni, þá getur línulengdin einnig verið breytileg. Moore leggur til að nota: lang (de) grein {max-width: 30em} til að fjalla um öll mál þar.
Til að viðhalda lóðréttum hrynjandi skaltu stilla spássíubotn á móti innihaldsblokkum, ul>, ol>, blockquote>, table>, blockquote> og svo framvegis, í sömu línuhæð. Ef takturinn er rofinn með kynningu á myndum gætirðu lagað það með því að bæta við Baseline.js eða BaselineAlign.js.
Basic
- Byggðu leturgerð þína á 100 prósent líkama
- Vinna í hlutfallslegum em einingum
- Stilltu spássíurnar á línuhæðina til að viðhalda lóðréttum takti í hönnun þinni
Lengra komnir
- Bættu árangur hleðslu leturgerða með Enhance.js eða frestaðri hleðslu leturgerðar
- Notaðu Sass @includes fyrir merkingar fyrirsagnir.
- Oft þurfum við að nota h5 stílinn í hliðarstikugræju sem krefst h2 álagningar. Notaðu Typographic Mixins til að stjórna stærðinni og haltu áfram merkingarfræði með kóðanum hér að neðan:
.sidebar h2 {@include heading-5}
Fjölmiðlafyrirspurnir í JavaScript
Allt frá því að við höfum getað stjórnað skipulagi á ýmsum útsýnisportum í gegnum fyrirspurnir frá fjölmiðlum höfum við verið að leita að leið til að binda það við að keyra JavaScript líka. Það eru nokkrar leiðir til að hleypa JavaScript af á ákveðnum breiddum, hæðum og stefnum í útsýnispottinum og sumir snjallir hafa skrifað nokkur innfædd JS viðbætur eins og Enquire.js og Simple State Manager. Þú gætir jafnvel smíðað þetta sjálfur með því að nota matchMedia. Hins vegar hefurðu vandamálið að þú þarft að afrita fjölmiðlafyrirspurnir þínar í CSS og JavaScript.
Aaron Gustafson hefur sniðugt bragð sem þýðir að þú þarft ekki að stjórna og passa fjölmiðlafyrirspurnir þínar í CSS og JS. Hugmyndin kom upphaflega frá Jeremy Keith og í þessu dæmi hefur Gustafson tekið hana að fullri útfærslu.
Notaðu getActiveMQ (netm.ag/media-260), sprautaðu div # getActiveMQ-áhorfanda í lok líkamans og fela það. Síðan innan CSS setja # getActiveMQ-áhorfandi {font-family: break-0;} við fyrstu fyrirspurn fjölmiðla, font-family: break-1; til annarrar, letur-fjölskylda: brot-2; til þess þriðja og svo framvegis.
Handritið notar watchResize () (netm.ag/resize-260) til að athuga hvort stærð útsýnisstaðarins hafi breyst og les síðan aftur upp virka leturfjölskylduna. Núna geturðu notað þetta til að krækja í JS aukahluti eins og að bæta flipa viðmóti við dl> þegar útsýnisglugginn leyfir, breyta hegðun ljósakassa eða uppfæra skipulag gagnatöflu. Skoðaðu getActiveMQ Codepen á netm.ag/active-260.
Basic
- Gleymdu JavaScript fyrir mismunandi útsýni. Veita notendum innihald og vefsíðuaðgerðir á þann hátt að þeir geti nálgast það í öllum útsýnisstöðum. Við ættum aldrei að þurfa JavaScript
Lengra komnir
- Framlengdu aðferð Gustafson með því að nota Breakup sem fyrirfram skilgreindan lista yfir fjölmiðlafyrirspurnir og gera sjálfvirkan gerð listans yfir leturfjölskyldur fyrir getActiveMQ-áhorfandi
Framsóknarbæting
Algengur misskilningur um framsækna aukningu er að fólk hugsar: „Jæja, ég get ekki notað þennan nýja eiginleika“, en í raun er það hið gagnstæða. Framsækin aukning þýðir að þú getur skilað eiginleikum ef hann er aðeins studdur í einum eða jafnvel engum vöfrum og með tímanum fær fólk betri upplifun þegar nýjar útgáfur berast.
Ef þú skoðar kjarnastarfsemi hverrar vefsíðu geturðu skilað því sem HTML og látið netþjónahliðina vinna alla vinnslu. Greiðslur, eyðublöð, Líkar, deilir, tölvupóstur, mælaborð - allt er hægt að gera. Þegar grunnverkefnið er byggt getum við lagað ógnvekjandi tækni ofan á það vegna þess að við höfum öryggisnet til að ná þeim sem falla í gegnum. Flestar þróuðu aðferðirnar sem við höfum talað um hér eru byggðar á framsækinni aukningu.
Skipulag
Sveigjanlegt skipulag er einfalt að segja, en það hefur margar mismunandi aðferðir. Búðu til einfaldar netmyndir með minna álagningu með því að nota: nth-child () val.
/ * lýstu farsíma fyrstu breidd fyrir ristina * / .grid-1-4 {fljóta: vinstri; breidd: 100%; } / * Þegar útsýnisstaðurinn er að minnsta kosti 37,5em, stilltu þá ristina á 50% á þátt * / @media (mín. Breidd: 37,5em) {.grid-1-4 {breidd: 50%; } / * Hreinsaðu flotið annað hvert atriði EFTIR það fyrsta. Þetta miðar við 3., 5., 7., 9. ... í ristinni. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @ media (mín breidd: 64em) {.grid-1-4 {breidd: 25%; } / * Fjarlægðu fyrri hreinsa * / .grid-1-4: nth-af-gerð (2n + 1) {clear: none; } / * Hreinsaðu flotið hvert 4. atriði EFTIR það fyrsta. Þetta miðar við 5., 9. ... í ristinni. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Veifa bless við að nota stöðu og fljóta fyrir skipulag þitt. Þó að þeir hafi þjónað okkur vel hingað til hefur notkun þeirra á skipulag verið nauðsynlegt hakk. Við höfum núna fengið tvö ný börn á reitinn sem munu hjálpa til við að laga öll skipulagsvandræði okkar - Flexbox og Grids.
Flexbox er frábært fyrir einstaka einingar og stýrir uppsetningu á efnishlutum innan hvers eininganna. Það eru skipulag sem við reynum að skila sem auðveldara er að ná með Flexbox, og það er enn réttara með viðbragðs síður. Fyrir frekari upplýsingar um þetta, skoðaðu leiðbeiningar CSS Tricks um Flexbox eða Flexbox Polyfill.
Útlit CSS rist
Tafla er meira fyrir skipulag þjóðhagsstigs. Grid skipulagseiningin gefur þér frábæra leið til að lýsa skipulagi þínu innan CSS. Þó að það sé enn í drögunum um þessar mundir, mæli ég með þessari grein um CSS Grid skipulag eftir Rachel Andrew.
Loksins
Þetta eru aðeins nokkur ráð til að auka viðbrögð við æfingum þínum. Þegar þú nálgast einhverja nýja móttækilega vinnu skaltu stíga skref til baka og tryggja að grunnatriðin séu rétt. Byrjaðu á innihaldinu þínu, HTML og lagaðu betri reynslu af þeim og það eru engin takmörk fyrir því hvar þú getur tekið hönnunina þína.
Þessi grein birtist upphaflega í 260. tölublaði net tímarit.
