Sisu
- Reageerivad pildid
- Performance
- Tingimuslik ja laisk laadimine
- Reageeriv tüpograafia
- Meediumipäringud JavaScriptis
- Järk-järguline täiustamine
- Paigutus
- CSS-võrgu paigutus
- Lõpuks
Tundlik veebidisain kõlab uskumatult lihtsalt. Valige paigutuse jaoks paindlikud ruudustikud, kasutage paindlikke andmekandjaid (pildid, video, iframe) ja rakendage meediumipäringuid nende mõõtude värskendamiseks, et mis tahes vaateavas sisu kõige paremini korraldada. Praktikas oleme teada saanud, et see pole tegelikult nii lihtne. Pisikesed probleemid, mis iga projekti käigus esile kerkivad, hoiavad meid pead kratsimas ja vahel ka töölaual küünekraavisid nikerdamas.
Sellest ajast peale, kui hakkasin reageeriva disaini nädalalehte kureerima, on mul olnud õnne rääkida paljude veebikogukonna liikmetega ja kuulda nende kogemusi. Tahtsin teada saada, mida kogukond tegelikult õppida soovis, ja seepärast levitasin lugejatele küsitlust. Siin on parimad tulemused:
- Reageerivad pildid
- Toimivuse parandamine
- Reageeriv tüpograafia
- Meediumipäringud JavaScriptis
- Progressiivne täiustamine
- Paigutus
Neid teemasid silmas pidades korraldasin mitmeid taskuhäälingusaateid, kus palusin mõnel meie valdkonna liidril nende mõtteid. Nende vastustes oli üks punkt üksmeelne: keskenduge põhitõdede omandamisele kohe, enne kui hakkate muretsema põnevate ja arenenud tehnikate pärast. Võttes asjad tagasi põhitõdede juurde, suudame luua kõigile tugeva liidese, kihistades funktsioonidele, kui seade või kasutaja kontekst seda võimaldab.
'Niisiis ... kuidas on nende arenenud tehnikatega?' Kuulen, et te küsite. Ma arvan, et Stephen Hay võttis selle kõige paremini kokku, kui ta ütles: „Ülim RWD tehnika on alustada sellest, et ei kasutata ühtegi täiustatud RWD tehnikat. Alustage struktureeritud sisust ja looge oma tee üles. Lisage murdepunkt alles siis, kui kujundus puruneb ja sisu dikteerib ja ... see on kõik. ”
Selles artiklis alustan põhitõdedest ja lisan keerukuse kihid vastavalt olukorrale, et neid täiustatud tehnikaid kasutada. Alustame.
Reageerivad pildid
Vedelik meedium oli RWD põhiosa, kui selle määratles esimest korda Ethan Marcotte. laius: 100%; , max-laius: 100%; töötab tänapäevalgi, kuid tundlik pildimaastik on muutunud palju keerulisemaks. Ekraani suuruse, pikslitiheduse ja toetavate seadmete arvu suurenemisega soovime suuremat kontrolli.
Kolm peamist muret määratles Responsive Images Community Group (RICG):
- Üle traadi saadetava pildi kilobaiti suurus
- Suure DPI-seadmega saadetava pildi füüsiline suurus
- Kujutise kärpimine kunstisuuna kujul vastavalt vaateava suurusele
Yoav Weiss on Indiegogo abiga teinud suurema osa tööst Blinki juurutamisega - Google'i kahvliga WebKit ja selle lugemise ajaks saadetakse see Chrome'i ja Firefoxi. Safari 8 saadab srcseti, kuid atribuut suurused on ainult öösiti ja pilt> pole veel rakendatud.
Kui meie veebiarendusprotsessi jõuab midagi uut, võib selle alustamine olla keeruline. Vaatame näite samm-sammult läbi.
img! - Deklareerige varupilt kõigi pilti mitte toetavate brauserite jaoks -> src = "horse-350.webp"! - Deklareerige kõik srcseti pildisuurused. Lisage pildi laius, kasutades kirjeldajat w, et teavitada brauserit iga pildi laiusest. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Suurused teavitavad brauserit meie saidi paigutusest. Siinkohal ütleme kõigi 64emsete ja suuremate vaateavade puhul kasutage pilti, mis hõivab 70% vaateavast -> size = "(min-width: 64em) 70vw,! - Kui vaateakna pole see suur, siis kõigi vaateavade jaoks, mis on 37,5 elemendiga ja suuremad, kasutage pilti, mis hõivab 95% vaateavast -> (min-laius: 37,5em) 95vw,! - ja kui vaateaken on sellest väiksem, siis kasutage pildil, mis hõivab 100% vaateavast -> 100vw "! - on alati alt-tekst. -> alt =" Hobune "/>
Toimivuse seisukohast pole vahet, kas kasutate atribuudi suurused min-width või max-width - kuid lähteteksti järjekord on siiski oluline. Brauser kasutab alati esimest sobivat suurust.
Samuti pidage meeles, et me kodeerime raskesti atribuudi suurused, mis tuleb meie kujunduse järgi otseselt määratleda. See võib põhjustada probleeme edasiliikumisel. Näiteks kui muudate oma saidi ümber, peate uuesti vaatama kõik pildid img> või picture> ja määratlema suurused uuesti. Kui kasutate CMS-i, saab sellest oma koostamisprotsessi osana üle olla.
WordPressil on juba abiks pistikprogramm. See määratleb srcseti WP standardsete pildisortide jaoks ja võimaldab teil deklareerida suurused keskses asukohas. Kui leht andmebaasist genereeritakse, vahetab see kõik img> mainimised välja ja asendab need pildimärgistusega.
Põhiline
- Mõelge, kas peate tõesti pildi lisama. Kas pildi põhisisu on või on see dekoratiivne? Üks pilt vähem tähendab kiiremat laadimisaega
- Optimeerige pildid, mida peate kaasama, kasutades ImageOptimi
- Määrake oma serveris või .htaccess-failis olevate piltide aeguvad päised (vaadake üksikasju jaotises ‘Performance’)
- PictureFill pakub piltide jaoks polüfillide tuge
Täpsem
- Laisk laadige oma pildid jQuery Lazy Load pistikprogrammi abil
- Funktsioonide tuvastamiseks kasutage HTMLImageElement.Sizes ja HTMLPictureElement.
- Githubist leitud täiustatud PictureFill WP pistikprogramm võimaldab teil määratleda kohandatud pildilaiuste ja suuruste väärtused
Performance
Meie lehtede kõige kiiremini tajutava jõudluse saavutamiseks vajame kogu HTML-i ja CSS-i, mis on vajalik lehe ülaosa renderdamiseks serveri esimese vastuse jooksul. See maagiline number on 14 kb ja põhineb maksimaalsel ummikute akna suurusel esimese edasi-tagasi aja (RTT) jooksul.
Guardiani esiotsa tehniline juht Patrick Hamann ja tema meeskond on suutnud murda 1000 ms tõkke, kasutades eesmise ja tagumise tehnika segusid. Guardiani lähenemisviis on tagada, et vajalik sisu - artikkel - toimetatakse kasutajale võimalikult kiiresti ja 14 kB maagilise numbri piires.
Vaatame protsessi:
- Kasutaja klikib uudisloo Google'i lingil
- Artikli andmebaasi saadetakse üks blokeerimistaotlus. Seotud lugusid ega kommentaare pole vaja
- HTML on laaditud, mis sisaldab kriitilist CSS-i
- peas>
- Tehakse protsess „Lõika sinep” ja laaditakse kõik kasutaja seadme omadustel põhinevad tingimuselemendid
- Mis tahes sisu, mis on seotud või toetab artiklit ennast (seotud artiklipildid, artikli kommentaarid ja nii edasi), on laisk oma kohale laaditud
Kriitilise renderdamise tee optimeerimine tähendab, et pea> on 222 rida. Kuid kriitiline sisu, mida kasutaja nägi, kuulub gzipitamisel endiselt 14 kB algsesse kasulikku koormusse. See protsess aitab murda seda 1000 ms renderdamistõket.
Tingimuslik ja laisk laadimine
Tingimuslik laadimine parandab seadme funktsiooni põhjal kasutaja kogemust. Sellised tööriistad nagu Modernizr võimaldavad teil neid funktsioone testida, kuid pidage meeles, et see, et brauser väidab pakkuvat tuge, ei tähenda see alati täielikku tuge.
Üks tehnika seisneb millegi laadimise peatamises seni, kuni kasutaja ilmutab kavatsust seda funktsiooni kasutada. Seda peetaks tingimuslikuks. Sotsiaalsete ikoonide laadimist saate peatada seni, kuni kasutaja viib ikoonide kohale või puudutab neid, või võite vältida iframe'i Google Mapi laadimist väiksematele vaateavadele, kus kasutaja eelistab tõenäoliselt linkimist spetsiaalse kaardistamisrakendusega. Teine lähenemisviis on sinepi lõikamine - selle kohta leiate üksikasju ülaltoodud kastist.
Laisk laadimine on määratletud kui miski, mille kavatsete alati lehele laadida - pildid, mis on osa artiklist, kommentaarid või muud seotud artiklid -, kuid mida ei pea kasutaja jaoks sisu tarbima asumiseks olema.
Põhiline
- Luba failide jaoks gzipimine ja määra kogu staatilise sisu aegumise päised (netm.ag/expire-260)
- Kasutage Lazy Load jQuery pistikprogrammi. See laadib pilte vaateaknale lähenedes või pärast teatud aja möödumist
Täpsem
- Seadistage kiiresti või CloudFlare. Sisuvõrgud (CDN) edastavad teie staatilise sisu kasutajatele kiiremini kui teie enda server ja neil on mõned tasuta tasemed
- Http2-toega brauserite jaoks lubage SPDY, et kasutada ära http2-funktsioone, nagu paralleelsed http-päringud
- Social Count võimaldab teie sotsiaalseid ikoone tingimuslikult laadida
- Staatiliste kaartide API kasutamine võimaldab teil interaktiivse Google Mapsi piltide jaoks välja lülitada. Heitke pilk Brad Frosti näitele aadressil netm.ag/static-260
- Ajaxi kaasamise muster laadib sisulõigud kas atribuudist data-before, data-after või data-aizst
Reageeriv tüpograafia
Tüpograafia seisneb selles, et muuta teie sisu kergesti seeditavaks. Tundlik tüpograafia laiendab seda, et tagada loetavus paljudes seadmetes ja vaateavades. Jordan Moore tunnistab, et tüüp on üks asi, millest ta pole nõus loobuma. Vajadusel visake pilt või kaks, kuid veenduge, et teil oleks suurepärane tüüp.
Stephen Hay soovitab HTML-i fondi suuruseks seada 100 protsenti (loe: jäta see lihtsalt nii, nagu see on), kuna iga brauser või seadme tootja teeb konkreetse eraldusvõime või seadme jaoks mõistlikult loetava vaikeseadme. Enamiku töölauabrauserite jaoks on see 16 pikslit.
Teisalt kasutab Moore teatud sisuelementide minimaalse fondisuuruse määramiseks REM-üksust ja HTML-i fondisuurust. Näiteks kui soovite, et artikli byline oleks alati 14px, siis määrake see HTML-elemendi fondi põhisuuruseks ja määrake .byline {font-size: 1rem;}. Kui laiendate keha: font-size: vaateaknasse sobivaks, ei mõjuta see .by-line stiili.
Samuti on oluline hea lugemisjoone pikkus - võtke ette 45–65 tähemärki. Seal on järjehoidja, mille abil saate oma sisu kontrollida. Kui toetate oma kujundusega mitut keelt, võib ka joone pikkus erineda. Moore soovitab sealsete probleemide kajastamiseks kasutada: lang (de) article {max-width: 30em}.
Vertikaalse rütmi säilitamiseks määrake veerepõhi sisuplokkide, ul>, ol>, blockquote>, table>, blockquote> ja nii edasi samale reakõrgusele. Kui rütm katkestatakse piltide kasutuselevõtuga, saate selle parandada, lisades Baseline.js või BaselineAlign.js.
Põhiline
- Alustage oma font 100-protsendilisele kehale
- Töö suhtelistes em ühikutes
- Kujunduses vertikaalse rütmi säilitamiseks määrake veerised oma joone kõrgusele
Täpsem
- Parandage fondi laadimise jõudlust Enhance.js või edasilükatud fondi laadimisega
- Semantiliste pealkirjade jaoks kasutage rakendust Sass @includes.
- Sageli peame kasutama stiili h5 külgriba vidinas, mis nõuab h2 märgistust. Suuruse kontrollimiseks ja semantiliseks jäämiseks kasutage alltoodud koodi abil Bearded’s Typographic Mixins.
.sidebar h2 {@include title-5}
Meediumipäringud JavaScriptis
Alates sellest, kui me oleme meediumipäringute abil suutnud juhtida paigutust erinevates vaateavades, oleme otsinud viisi, kuidas see ka JavaScripti käitamiseks siduda. Teatud vaateava laiustel, kõrgustel ja suundadel saab JavaScripti käivitada mõnel viisil ja mõned nutikad inimesed on kirjutanud mõned hõlpsasti kasutatavad natiivsed JS-i pistikprogrammid, näiteks Enquire.js ja Simple State Manager. Selle võiksite isegi matchMedia abil ise üles ehitada. Kuid teil on probleem, et peate oma meediumipäringud CSS-is ja JavaScriptis dubleerima.
Aaron Gustafsonil on korralik trikk, mis tähendab, et te ei pea oma CSS-is ja JS-is oma meediumipäringuid haldama ega vastendama. Idee pärines algselt Jeremy Keithilt ja selles näites on Gustafson selle täielikult ellu viinud.
Süstige rakenduse getActiveMQ (netm.ag/media-260) abil kehaelemendi lõppu div # getActiveMQ-watcher ja peitke see. Seejärel määrake CSS-is # getActiveMQ-watcher {font-family: break-0;} esimeseks meediumipäringuks, font-family: break-1; teisele, font-family: break-2; kolmandale ja nii edasi.
Skript kasutab watchResize () (netm.ag/resize-260), et kontrollida, kas vaateava suurus on muutunud, ja loeb seejärel aktiivse fontipere tagasi. Nüüd saate seda kasutada JS-i täiustuste sidumiseks, näiteks vahekaardiga liidese lisamine dl-le> kui vaade võimaldab, valguskasti käitumise muutmine või andmetabeli paigutuse värskendamine. Tutvuge saidiga getActiveMQ Codepen aadressil netm.ag/active-260.
Põhiline
- Unustage JavaScripti erinevate vaateavade jaoks. Pakkuge kasutajatele sisu ja veebisaidi funktsioone nii, et nad saaksid sellele juurde pääseda kõigis vaateavades. Me ei peaks kunagi JavaScripti vajama
Täpsem
- Laiendage Gustafsoni meetodit, kasutades Breakupi meediumipäringute etteantud loendina ja automatiseerides getActiveMQ-watcheri fondiperede loendi loomist
Järk-järguline täiustamine
Üldine väärarusaam progressiivse täiustamise kohta on see, et inimesed arvavad: "Ahjaa, ma ei saa seda uut funktsiooni kasutada", kuid tegelikult on see vastupidi. Progressiivne täiustamine tähendab, et saate funktsiooni edastada, kui seda toetatakse ainult ühes brauseris või isegi mitte üheski brauseris ja aja jooksul saavad inimesed uute versioonide saabudes parema kogemuse.
Kui vaatate mis tahes veebisaidi põhifunktsiooni, saate selle HTML-vormingus edastada ja lasta serveri poolel kogu töötlemise teha. Maksed, vormid, meeldimised, jagamine, e-kirjad, juhtpaneelid - seda kõike saab teha. Kui põhiülesanne on üles ehitatud, saame selle peale panna kihvtid tehnoloogiad, sest meil on turvavõrk, et tabada läbi kukkunud inimesi. Enamik arenenud lähenemisviise, millest oleme siin rääkinud, põhinevad järkjärgulisel täiustamisel.
Paigutus
Paindlikku paigutust on lihtne öelda, kuid sellel on palju erinevaid lähenemisviise. Looge lihtsad ja väiksema märgistusega ruudustiku paigutused, kasutades valijat: n-laps ().
/ * deklareeri ruudustiku esimene mobiililaius * / .grid-1-4 {float: left; laius: 100%; } / * Kui vaateava suurus on vähemalt 37,5em, määrake ruudustik 50% elemendi kohta * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Tühjendage ujuk iga teine element PÄRAST esimest. See on suunatud ruudustiku 3., 5., 7., 9. kohale ... * / .grid-1-4: n-tüüpi (2n + 1) {selge: vasak; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Eemaldage eelmine tühjendus * / .grid-1-4: n-tüüpi (2n + 1) {tühjendage: puudub; } / * Tühjendage ujuk iga 4. elemendi järel pärast esimest. See on suunatud ruudustiku 5., 9. kohale. * / .Grid-1-4: n-tüüpi (4n + 1) {selge: vasak; }}
Hüvasti, kui kasutate paigutuste jaoks positsiooni ja ujukit. Kuigi nad on meid tänaseks hästi teeninud, on nende kasutamine küljenduse jaoks olnud vajalik häkkimine. Nüüd on meil blokis kaks uut last, kes aitavad lahendada kõik meie paigutusega seotud probleemid - Flexbox ja Grids.
Flexbox sobib suurepäraselt üksikute moodulite jaoks, kontrollides sisulõikude paigutust igas moodulis. Seal on paigutusi, mida proovime pakkuda, mida saab Flexboxi abil hõlpsamini saavutada, ja see kehtib veelgi paremini tundlike saitide puhul. Selle kohta leiate lisateavet CSS Tricksi juhendist Flexboxi või Flexbox Polyfilli kohta.
CSS-võrgu paigutus
Ruudustik on mõeldud pigem makrotasandi paigutuse jaoks. Võrgu paigutusmoodul annab teile suurepärase võimaluse kirjeldada oma paigutust oma CSS-is. Kuigi see on praegu veel mustandite staadiumis, soovitan seda artiklit CSS Gridi paigutuse kohta, mille autor Rachel Andrew.
Lõpuks
Need on vaid mõned näpunäited teie tundliku tegevuse laiendamiseks. Uuele reageerivale tööle lähenedes astuge samm tagasi ja veenduge, et saate põhitõed õigeks. Alustage oma sisust, HTML-ist ja kihtidest, mis on neile parema kasutuskogemusega ning disainilahenduste võtmine ei ole piiratud.
See artikkel ilmus algselt väljaande 260 väljaandes netiajakiri.
