Turinys
- Reaguojantys vaizdai
- Spektaklis
- Sąlyginis ir tingus pakrovimas
- Reaguojanti tipografija
- Medijos užklausos „JavaScript“
- Laipsniškas tobulinimas
- Išdėstymas
- CSS tinklelio išdėstymas
- Pagaliau
Interaktyvus interneto dizainas skamba nepaprastai paprastai. Pasirinkite išdėstymo lankstias tinklelius, naudokite lanksčias laikmenas (vaizdus, vaizdo įrašus, „iframe“) ir pritaikykite medijos užklausas, kad atnaujintumėte šiuos matavimus, kad geriausiai sutvarkytumėte bet kurios peržiūros srities turinį. Praktiškai sužinojome, kad tai nėra taip lengva. Maži klausimai, iškylantys kiekvieno projekto metu, priverčia mus krapštyti galvas ir kartais net ant stalo rašyti nagų tranšėjas.
Nuo tada, kai pradėjau kuruoti „Responsive Design Weekly“ naujienlaiškį, man pasisekė kalbėti su daugeliu interneto bendruomenės narių ir išgirsti jų patirtį. Norėjau sužinoti, ką bendruomenė iš tikrųjų norėjo išmokti, todėl išplatinau apklausą skaitytojams. Čia pateikiami geriausi rezultatai:
- Reaguojantys vaizdai
- Našumo gerinimas
- Reaguojanti tipografija
- Medijos užklausos „JavaScript“
- Pažangus tobulinimas
- Išdėstymas
Atsižvelgdamas į šias temas, vykdžiau tinklalaidžių seriją, kurioje paprašiau kai kurių mūsų pramonės lyderių minčių. Jų atsakymuose vienas punktas buvo vieningas: sutelkti dėmesį į pagrindų gavimą iškart prieš pradedant jaudintis dėl įdomių ir pažangių metodų. Grąžindami dalykus į pagrindus, galime sukurti patikimą sąsają visiems, susitelkdami į funkcijas, kai tai leidžia įrenginio ar vartotojo kontekstas.
‘Taigi ... o kaip yra su šiomis pažangiomis technikomis?’ Girdžiu, kaip klausiate. Manau, kad Stephenas Hayas tai apibendrino geriausiai sakydamas: „Svarbiausia RWD technika yra pradėti nuo nenaudojant jokių pažangių RWD technikų. Pradėkite nuo struktūrizuoto turinio ir kurkite savo kelią. Pridėkite lūžio tašką tik tada, kai dizainas sulūžta, o turinys jį nurodo ir ... viskas. “
Šiame straipsnyje aš pradėsiu nuo pagrindų ir pridėsiu sudėtingumo sluoksnių, kiek tai leidžia situacija, kad galėčiau sukurti tas pažangias technikas. Pradėkime.
Reaguojantys vaizdai
Skystoji terpė buvo pagrindinė RWD dalis, kai ją pirmą kartą apibrėžė Ethanas Marcotte'as. plotis: 100%; , maks. plotis: 100%; vis dar veikia šiandien, tačiau reaguojantis vaizdo peizažas tapo daug sudėtingesnis. Trūkstant didesnio ekrano dydžių, pikselių tankio ir palaikančių įrenginių skaičiaus, norime didesnio valdymo.
Tris pagrindinius rūpesčius apibrėžė Responsive Images Community Group (RICG):
- Kilobaito dydžio vaizdas, kurį siunčiame per laidą
- Fizinis vaizdo dydis, kurį siunčiame į aukštos DPI įrenginius
- Vaizdas apkarpomas meno krypties forma tam tikram peržiūros srities dydžiui
Yoav Weiss, padedamas „Indiegogo“, atliko didžiąją dalį „Blink“ diegimo darbų - „Google“ šakutės „WebKit“, ir kol jūs tai skaitote, jis bus pristatytas „Chrome“ ir „Firefox“. „Safari 8“ pristatys „srcset“, tačiau dydžių atributas yra tik kuriamas kas vakarą, o paveikslėlis> dar neįdiegtas.
Gavę ką nors naujo mūsų interneto kūrimo procese, gali būti sunku pradėti. Paleiskite pavyzdį žingsnis po žingsnio.
img! - Paskelbkite atsarginį vaizdą visoms naršyklėms, kurios nepalaiko paveikslėlių -> src = "horse-350.webp"! - Deklaruokite visus paveikslėlių dydžius „srcset“. Įtraukite vaizdo plotį naudodami „w“ deskriptorių, kad naršyklė informuotų apie kiekvieno vaizdo plotį. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Dydžiai informuoja naršyklę apie mūsų svetainės išdėstymą. Čia sakome, kad bet kuriam 64ems ir didesnei peržiūros sričiai naudokite vaizdą, kuris užims 70% peržiūros srities -> dydžiai = "(min-plotis: 64em) 70vw,! - Jei ne peržiūros sritis didelis, tada bet kuriai 37,5 elemento ir didesnei peržiūros sričiai naudokite vaizdą, kuris užima 95% peržiūros srities -> (min-plotis: 37,5em) 95vw,! - ir jei peržiūros sritis yra mažesnė, tada naudokite vaizdas, užimantis 100% peržiūros srities -> 100vw "! - Visada turi alt tekstą .--> alt =" Arklis "/>
Našumo požiūriu nesvarbu, ar dydžių atribute naudojate min-width, ar max-width, tačiau šaltinio tvarka yra svarbi. Naršyklėje visada bus naudojamas pirmasis atitikimo dydis.
Taip pat atminkite, kad mes sunkiai koduojame dydžių atributą, kurį reikia tiesiogiai apibrėžti pagal mūsų dizainą. Tai gali sukelti problemų judėjimą į priekį. Pvz., Jei pertvarkysite savo svetainę, turėsite iš naujo peržiūrėti visus „img>“ arba „picture> s“ ir iš naujo apibrėžti dydžius. Jei naudojate TVS, tai galite įveikti kaip savo kūrimo proceso dalį.
„WordPress“ jau turi papildinį, kuris padės. Tai apibrėžia srcset WP standartinėse atvaizdų atmainose ir leidžia deklaruoti dydžius centrinėje vietoje. Kai puslapis sugeneruojamas iš duomenų bazės, jis pakeičia visus „img>“ paminėjimus ir pakeičia juos paveikslėlio žymėjimu.
Pagrindinis
- Pagalvokite, ar tikrai turite įtraukti vaizdą. Ar vaizdas yra pagrindinis turinys, ar jis dekoratyvus? Vienas mažiau vaizdų reiškia greitesnį įkėlimo laiką
- Optimizuokite vaizdus, kuriuos turite įtraukti naudodami „ImageOptim“
- Nustatykite galiojimo pabaigos antraštes savo atvaizdams savo serveryje arba .htaccess faile (išsamią informaciją žr. Skyrelyje „Našumas“)
- „PictureFill“ teikia nuotraukų užpildymo palaikymą
Išplėstinė
- Tinginys įkelkite vaizdus naudodamas „jQuery“ „Lazy Load“ papildinį
- Naudokite HTMLImageElement.Sizes ir HTMLPictureElement funkcijoms aptikti.
- Išplėstinis „PictureFill WP“ papildinys, rastas „Github“, leis apibrėžti pasirinktinius vaizdo pločio ir dydžio dydžius
Spektaklis
Kad mūsų puslapiai veiktų kuo greičiau, mums reikia viso HTML ir CSS, reikalingo viršutinei mūsų puslapio daliai pateikti per pirmąjį serverio atsakymą. Šis stebuklingas skaičius yra 14 KB ir pagrįstas didžiausiu perkrovos lango dydžiu per pirmąjį pirmyn ir atgal laiką (RTT).
Patrickas Hamannas, „Guardian“ priekinis techninis lyderis, ir jo komanda sugebėjo įveikti 1000 ms barjerą naudodami priekinės ir galinės technikos derinį. „Guardian“ požiūris yra užtikrinti, kad reikalingas turinys - straipsnis - būtų pristatytas vartotojui kuo greičiau ir neperžengiant 14 KB magijos numerio.
Pažvelkime į procesą:
- Vartotojas spustelėja „Google“ nuorodą į naujienų istoriją
- Į straipsnio duomenų bazę siunčiama viena blokavimo užklausa. Nereikia jokių susijusių istorijų ar komentarų
- HTML yra įkeltas su kritine CSS
- galvoje>
- Vykdomas procesas „Iškirpti garstyčias“ ir įkeliami visi sąlyginiai elementai, pagrįsti vartotojo įrenginio funkcijomis
- Bet koks turinys, susijęs ar palaikantis patį straipsnį (susiję straipsnio vaizdai, straipsnio komentarai ir pan.), Yra tingus
Tokiu būdu optimizavus kritinį atvaizdavimo kelią, galvutė> yra 222 eilučių. Tačiau kritinis turinys, kurį vartotojas pamatė, vis tiek patenka į 14 kb pradinę naudingąją apkrovą, kai gaunamas gzip. Šis procesas padeda panaikinti tą 1000 ms pateikimo barjerą.
Sąlyginis ir tingus pakrovimas
Sąlyginis įkėlimas pagerina vartotojo patirtį, atsižvelgiant į jo įrenginio funkciją. Tokie įrankiai, kaip „Modernizr“, leidžia išbandyti šias funkcijas, tačiau atminkite, kad vien dėl to, kad naršyklė siūlo palaikymą, tai ne visada reiškia visišką palaikymą.
Vienas iš būdų yra sulaikyti ką nors įkėlimą, kol vartotojas parodys ketinimą naudoti šią funkciją. Tai būtų laikoma sąlygine. Galite atidėti socialinių piktogramų įkėlimą, kol vartotojas užveda pelės žymeklį ant jų arba paliečia jas, arba galite išvengti „iframe“ „Google“ žemėlapio įkėlimo į mažesnes peržiūros sritis, kuriose vartotojas greičiausiai norėtų susieti su specialia žemėlapių programa. Kitas būdas yra „Ištraukti garstyčias“ - išsamesnės informacijos apie tai žr. Aukščiau pateiktame laukelyje.
Tingi apkrova apibrėžiama kaip tai, ką visada ketinate įkelti į puslapį - vaizdai, kurie yra straipsnio dalis, komentarai ar kiti susiję straipsniai - tačiau jų nereikia būti, kad vartotojas galėtų pradėti vartoti turinį.
Pagrindinis
- Įjunkite failų „gzip“ ir nustatykite viso statinio turinio galiojimo pabaigos antraštes (netm.ag/expire-260)
- Naudokite „Lazy Load jQuery“ papildinį. Tai įkelia vaizdus artėjant prie peržiūros srities arba praėjus tam tikram laikotarpiui
Išplėstinė
- Nustatykite „Fastly“ arba „CloudFlare“. Turinio pristatymo tinklai (CDN) teikia jūsų statinį turinį vartotojams greičiau nei jūsų pačių serveris ir turi keletą nemokamų lygių
- Įjunkite SPDY naršyklėms, kuriose įgalinta „http2“, kad galėtumėte pasinaudoti „http2“ funkcijomis, pvz., Lygiagrečiomis „http“ užklausomis
- „Social Count“ leidžia sąlyginai įkelti jūsų socialines piktogramas
- Naudodami „Static Maps“ API galėsite išjungti interaktyvius „Google“ žemėlapius vaizdams. Pažvelkite į Brado Frosto pavyzdį adresu netm.ag/static-260
- „Ajax Include Pattern“ įkels turinio fragmentus iš „data-before“, „data-after“ arba „data-pakeisti“ atributo
Reaguojanti tipografija
Tipografija yra tai, kad jūsų turinys būtų lengvai virškinamas. Reaguojanti tipografija tai išplečia, kad būtų užtikrintas skaitomumas įvairiuose įrenginiuose ir peržiūros languose. Jordanas Moore'as pripažįsta, kad tipas yra vienas dalykas, kurio jis nenori nusileisti. Jei reikia, numeskite vaizdą ar du, bet įsitikinkite, kad turite puikų tipą.
Stephenas Hay'as siūlo nustatyti 100 procentų HTML šrifto dydį (skaitykite: tiesiog palikite jį tokį, koks yra), nes kiekviena naršyklė ar įrenginio gamintojas nustato pagrįstai įskaitomą numatytąją reikšmę tam tikrai raiškai ar įrenginiui. Daugumai stalinių kompiuterių naršyklių tai yra 16 taškų.
Kita vertus, Moore'as naudoja REM vienetą ir HTML šrifto dydį, kad nustatytų minimalų tam tikrų turinio elementų šrifto dydį. Pvz., Jei norite, kad straipsnio byline visada būtų 14 taškų, tada nustatykite tai kaip pagrindinį HTML elemento šrifto dydį ir nustatykite .byline {font-size: 1rem;}. Kai keičiate kūną: font-size: kad atitiktų peržiūros sritį, jūs neturėsite įtakos .by-line stiliui.
Taip pat svarbu geras skaitymo eilutės ilgis - siekite 45–65 simbolių. Yra žyma, kurią galite naudoti savo turiniui patikrinti. Jei savo dizainu palaikote kelias kalbas, linijos ilgis taip pat gali skirtis. Moore'as siūlo naudoti: lang (de) article {max-width: 30em}, kad pašalintų visas problemas.
Norėdami išlaikyti vertikalų ritmą, nustatykite krašto apačią prieš turinio blokus, ul>, ol>, blockquote>, table>, blockquote> ir pan., Tokiu pačiu dydžiu, koks yra jūsų linijos aukštis. Jei ritmas nutrūksta įvedant vaizdus, galite jį ištaisyti pridėdami „Baseline.js“ arba „BaselineAlign.js“.
Pagrindinis
- Remkitės šriftu pagal 100 proc. Turinį
- Darbas santykiniais em vienetais
- Nustatykite savo paraštes pagal savo linijos aukštį, kad išlaikytumėte vertikalų ritmą
Išplėstinė
- Pagerinkite šrifto našumą naudodami „Enhance.js“ arba atidėdami šrifto įkėlimą
- Semantinėms antraštėms naudokite „Sass @includes“.
- Dažnai turime naudoti „h5“ stilių šoninės juostos valdiklyje, kuriam reikalingas „h2“ žymėjimas. Naudokite „Bearded’s Typographic Mixins“, kad valdytumėte dydį ir liktumėte prasmingi naudodami žemiau pateiktą kodą:
.sidebar h2 {@įtraukti antraštę-5}
Medijos užklausos „JavaScript“
Nuo to laiko, kai per žiniasklaidos užklausas sugebėjome valdyti išdėstymą įvairiuose vaizdų portuose, ieškojome būdų, kaip tai susieti ir su „JavaScript“ paleidimu. Yra keli būdai, kaip suaktyvinti „JavaScript“ tam tikrose peržiūros srities pločiuose, aukščiuose ir orientacijose, o kai kurie protingi žmonės parašė keletą lengvai naudojamų vietinių JS papildinių, tokių kaip „Enquire.js“ ir „Simple State Manager“. Jūs netgi galite tai sukurti patys naudodami „matchMedia“. Tačiau kyla problema, kad turite dubliuoti medijos užklausas savo CSS ir „JavaScript“.
Aaronas Gustafsonas turi dailų triuką, kuris reiškia, kad jums nereikia valdyti ir atitikti savo žiniasklaidos užklausų savo CSS ir JS. Idėja iš pradžių kilo Jeremy Keithui ir šiame pavyzdyje Gustafsonas ją visiškai įgyvendino.
Naudodami „getActiveMQ“ (netm.ag/media-260) kūno elemento gale įšvirkškite div # getActiveMQ-watcher ir paslėpkite. Tada CSS nustatykite # getActiveMQ-watcher {font-family: break-0;} į pirmąją medijos užklausą, font-family: break-1; į antrą, font-family: break-2; į trečią ir pan.
Scenarijus naudoja „watchResize“ () (netm.ag/resize-260), kad patikrintų, ar pasikeitė peržiūros srities dydis, ir tada nuskaito aktyvią šriftų grupę. Dabar galite tai naudoti norėdami prijungti JS patobulinimus, pvz., Pridėti skirtukų sąsają prie dl>, kai leidžia peržiūros sritis, pakeisti „lightbox“ elgesį arba atnaujinti duomenų lentelės išdėstymą. Peržiūrėkite „getActiveMQ Codepen“ adresu netm.ag/active-260.
Pagrindinis
- Pamirškite apie „JavaScript“ skirtingiems peržiūros langams. Pateikite turinį ir svetainės funkcijas vartotojams taip, kad jie galėtų prieiti prie jų visuose peržiūros languose. Mums niekada nereikės „JavaScript“
Išplėstinė
- Išplėskite Gustafsono metodą naudodami „Breakup“ kaip iš anksto nustatytą medijos užklausų sąrašą ir automatizuodami „getActiveMQ-watcher“ šriftų šeimų sąrašo kūrimą
Laipsniškas tobulinimas
Dažnas neteisingas supratimas apie laipsnišką tobulinimą yra tas, kad žmonės galvoja: „Na, aš negaliu naudoti šios naujos funkcijos“, bet iš tikrųjų yra priešingai. Progresyvus patobulinimas reiškia, kad galite pristatyti funkciją, jei ji palaikoma tik vienoje naršyklėje arba net joje nėra, o laikui bėgant žmonės gaus geresnę patirtį, kai atsiras naujų versijų.
Pažvelgę į pagrindinę bet kurios svetainės funkciją, galite ją pateikti kaip HTML ir nurodyti, kad serverio pusė atliktų visą apdorojimą. Mokėjimai, formos, „Patinka“, bendrinimas, el. Laiškai, informacijos suvestinės - visa tai galima padaryti. Sukūrę pagrindinę užduotį, mes galime ant to susidėti nuostabias technologijas, nes mes turime apsauginį tinklą, kad galėtume sugauti iškritusius. Dauguma pažangių metodų, apie kuriuos čia kalbėjome, yra pagrįsti laipsnišku tobulinimu.
Išdėstymas
Lankstus išdėstymą pasakyti paprasta, tačiau jis turi daug skirtingų būdų. Sukurkite paprastus tinklelio išdėstymus su mažesniu žymėjimu naudodami selektorių: n-child ().
/ * paskelbti pirmąjį mobiliojo tinklo plotį * / .grid-1-4 {float: left; plotis: 100%; } / * Kai peržiūros sritis yra bent 37,5em, tada nustatykite tinklelį į 50% elementui * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Išvalykite plūdę kas antras elementas PO pirmojo. Tai nukreipta į 3, 5, 7, 9 vietą ... tinklelyje. * / .Grid-1-4: n-asis tipo (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {plotis: 25%; } / * Pašalinkite ankstesnį išvalymą * / .grid-1-4: n-asis tipo (2n + 1) {clear: none; } / * Išvalykite plūdurą kas 4 elementas PO pirmojo. Tai nukreipta į 5-ą, 9-ą ... tinklelyje. * / .Grid-1-4: n-asis tipo (4n + 1) {aiškus: kairysis; }}
Atsisveikinkite su padėties ir plūdės naudojimu savo maketams. Nors jie iki šiol mums gerai tarnavo, jų naudojimas maketavimui buvo būtinas įsilaužimas. Dabar mes turime du naujus vaikus, kurie padės išspręsti visas mūsų išdėstymo problemas - „Flexbox“ ir „Grid“.
„Flexbox“ puikiai tinka atskiriems moduliams, valdant kiekvieno modulio turinio dalių išdėstymą. Yra išdėstymų, kuriuos bandome pateikti, kuriuos lengviau pasiekti naudojant „Flexbox“, ir tai dar labiau pasakytina apie reaguojančias svetaines. Norėdami sužinoti daugiau apie tai, peržiūrėkite CSS gudrybių vadovą „Flexbox“ arba „Flexbox Polyfill“.
CSS tinklelio išdėstymas
Tinklelis labiau skirtas makrokomandų išdėstymui. Tinklelio išdėstymo modulis suteikia jums puikų būdą apibūdinti išdėstymą savo CSS. Nors šiuo metu jis vis dar yra juodraštyje, rekomenduoju šį straipsnį apie CSS tinklelio maketą, kurį pateikė Rachel Andrew.
Pagaliau
Tai tik keli patarimai, kaip išplėsti jūsų reagavimo praktiką. Artėjant bet kuriam naujam reaguojančiam darbui, žengkite žingsnį atgal ir įsitikinkite, kad teisingai mokate pagrindus. Pradėkite nuo turinio, HTML ir patobulintos sluoksnių patirties, o jūsų dizainui nebus jokių apribojimų.
Šis straipsnis iš pradžių pasirodė 260 leidime tinklinis žurnalas.
