Përmbajtje
- Imazhe të përgjegjshme
- Performanca
- Ngarkimi i kushtëzuar dhe dembel
- Tipografia e përgjegjshme
- Pyetjet e medias në JavaScript
- Përmirësimi progresiv
- Paraqitja
- Paraqitja e rrjetit CSS
- Më në fund
Dizajni i përgjegjshëm i internetit tingëllon tepër i thjeshtë. Zgjedhni rrjete fleksibël për paraqitjen, përdorni media fleksibël (imazhe, video, iframe) dhe aplikoni pyetje mediatike për të azhurnuar këto matje për të rregulluar sa më mirë përmbajtjen në çdo portë shikimi. Në praktikë ne kemi mësuar se nuk është në të vërtetë kaq e lehtë. Çështje të vogla që shfaqen gjatë çdo projekti na mbajnë të kruajmë kokën, dhe herë pas here edhe të gdhendim llogore thonjsh në tavolinat tona.
Që kur fillova të kuroj gazetën Weekly Design Responsive, unë kam pasur fatin të flas me shumë anëtarë të komunitetit të internetit dhe të dëgjoj përvojat e tyre. Doja të zbuloja saktësisht se çfarë dëshironte të mësonte me të vërtetë komuniteti, prandaj shpërndava një studim te lexuesit. Këtu janë rezultatet kryesore:
- Imazhe të përgjegjshme
- Përmirësimi i performancës
- Tipografia e përgjegjshme
- Pyetjet e medias në JavaScript
- Përmirësimi Progresiv
- Paraqitja
Me këto tema në mendje, unë drejtova një seri podcastësh duke kërkuar disa nga udhëheqësit tanë të industrisë për mendimet e tyre. Në përgjigjet e tyre, një pikë ishte unanime: përqendrohuni në rregullimin e bazave para se të filloni të shqetësoheni për teknikat emocionuese dhe të përparuara. Duke i kthyer gjërat përsëri në gjërat themelore, ne jemi në gjendje të ndërtojmë një ndërfaqe të fuqishme për të gjithë, duke i shtresuar në veçoritë kur pajisja ose konteksti i përdoruesit lejon.
'Pra ... po në lidhje me këto teknika të përparuara?' Unë dëgjoj të pyesni. Unë mendoj se Stephen Hay e përmblodhi më së miri kur tha: ’Teknika përfundimtare e RWD është të fillosh duke mos përdorur ndonjë teknikë të përparuar të RWD. Filloni me përmbajtje të strukturuar dhe ndërtoni rrugën tuaj lart. Shtoni një pikë pushimi vetëm kur prishet dizenjimi dhe përmbajtja e dikton atë dhe ... kaq. '
Në këtë artikull, unë do të filloj me bazat dhe do të shtoj shtresa kompleksiteti siç lejon situata, për të ndërtuar ato teknika të përparuara. Le të fillojmë.
Imazhe të përgjegjshme
Media e lëngshme ishte një pjesë kryesore e RWD kur u përcaktua për herë të parë nga Ethan Marcotte. gjerësia: 100%; , gjerësia maksimale: 100%; funksionon edhe sot, por peizazhi i imazhit të përgjegjshëm është bërë shumë më i komplikuar. Me rritjen e numrit të madhësive të ekranit, dendësisë së pikselëve dhe pajisjeve për të mbështetur ne dëshirojmë kontroll më të madh.
Tre shqetësimet kryesore janë përcaktuar nga Grupi i Komunitetit të Imazheve Responsive (RICG):
- Madhësia kilobyte e imazhit që po dërgojmë mbi tel
- Madhësia fizike e imazhit që po u dërgojmë pajisjeve me DPI të larta
- Prerja e imazhit në formën e drejtimit artistik për madhësinë e veçantë të pamjes
Yoav Weiss, me ndihmën e Indiegogo, ka bërë pjesën më të madhe të punës në zbatimin e Blink - pirunin e Google të WebKit, dhe deri sa ta lexoni këtë do të dërgohet në Chrome dhe Firefox. Safari 8 do të dërgojë srcset, megjithatë atributi i madhësive është vetëm në ndërtime natën dhe figura> nuk është zbatuar ende.
Me ardhjen e çdo gjëje të re në procesin tonë të zhvillimit të internetit, mund të jetë e vështirë të fillohet. Le të ndjekim një shembull hap pas hapi.
img! - Shpalleni imazhin kthyes për të gjithë shfletuesit që nuk mbështesin fotografi -> src = "kal-350.webp"! - Shpalleni të gjitha madhësitë e imazheve në srcset. Përfshini gjerësinë e figurës duke përdorur përshkruesin w për të informuar shfletuesin për gjerësinë e secilës figurë .--> srcset = "kali-350.webp 350w, kali-500.webp 500w, kali-1024.webp 1024w, kali.webp 2000w "! - Madhësitë informojnë shfletuesin për paraqitjen e faqes tonë. Këtu po themi për çdo pikëpamje që është 64em dhe më e madhe, përdorni një imazh që do të zërë 70% të pamjes -> madhësive = "(min-width: 64em) 70vw,! - Nëse pamja nuk është ajo e madhe, atëherë për çdo pikëpamje që është 37.5 sekonda dhe më e madhe, përdorni një imazh që zë 95% të shikimit -> (me gjerësi min: 37.5em) 95vw,! - dhe nëse porta e shikimit është më e vogël se ajo, atëherë përdorni një imazh që zë 100% të pamjes së shikimit -> 100vw "! - gjithnjë keni tekst alt .--> alt =" Një kal "/>
Nga pikëpamja e performancës nuk ka rëndësi nëse përdorni gjerësi min ose gjerësi maksimale në atributin e madhësive - por renditja e burimit ka rëndësi. Shfletuesi gjithmonë do të përdorë madhësinë e parë të përputhjes.
Gjithashtu, mos harroni se ne jemi duke koduar në mënyrë të vështirë atributin e madhësive për t'u përcaktuar drejtpërdrejt në krahasim me modelin tonë. Kjo mund të shkaktojë që çështjet të ecin përpara. Për shembull, nëse ridizenjoni sitin tuaj, do të duhet të rishikoni të gjitha img> ose fotografi> dhe të ripërcaktoni madhësitë. Nëse jeni duke përdorur një CMS, kjo mund të kapërcehet si pjesë e procesit tuaj të ndërtimit.
WordPress tashmë ka një shtesë për t'ju ndihmuar. Ai përcakton srcset në varietetet standarde të imazheve WP dhe ju lejon të deklaroni madhësitë në një vend qendror. Kur faqja gjenerohet nga baza e të dhënave, ajo shkëmben çdo përmendje në img> dhe i zëvendëson ato me shënimin e figurës.
Bazë
- Mendoni nëse vërtet keni nevojë të përfshini një imazh. A është përmbajtja thelbësore e imazhit, apo është dekorative? Një imazh më pak do të thotë një kohë më e shpejtë ngarkese
- Optimizoni imazhet që duhet të përfshini duke përdorur ImageOptim
- Vendosni kokat e skaduara për imazhet tuaja në serverin tuaj ose skedarin .htaccess (shih detajet në "Performanca")
- PictureFill siguron mbështetje polifill për fotografi
Avancuar
- Lazy ngarkoni imazhet tuaja duke përdorur shtojcën Lazy Load të jQuery
- Përdorni HTMLImageElement.Sizes dhe HTMLPictureElement për zbulimin e tipareve.
- Shtojca e avancuar PictureFill WP, e gjetur në Github, do t'ju lejojë të përcaktoni vlerat e personalizuara të gjerësisë dhe madhësive
Performanca
Për të marrë performancën më të shpejtë të perceptuar në faqet tona, na duhen të gjitha HTML dhe CSS të kërkuara për të dhënë pjesën e sipërme të faqes tonë brenda përgjigjes së parë nga serveri. Ky numër magjik është 14kb dhe bazohet në madhësinë maksimale të dritares së kongjestionit brenda kohës së parë të vajtjes (RTT).
Patrick Hamann, udhëheqësi teknik i Guardian, dhe ekipi i tij kanë arritur të thyejnë pengesën 1000ms duke përdorur një përzierje të teknikave frontend dhe backend. Qasja e Guardian është që të sigurojë përmbajtjen e kërkuar - artikullin - t'i dorëzohet përdoruesit sa më shpejt që të jetë e mundur dhe brenda numrit magjik prej 14 kb.
Le të shohim procesin:
- Përdoruesit klikojnë në një lidhje Google për një histori të lajmeve
- Një kërkesë e vetme bllokimi i dërgohet bazës së të dhënave për artikullin. Nuk kërkohen histori ose komente të lidhura
- HTML është ngarkuar që përmban CSS kritike
- në kokë>
- Ndërmerret një proces ‘Pritini mustardën’ dhe ngarkohen çdo element i kushtëzuar i bazuar në tiparet e pajisjes së përdoruesit
- Çdo përmbajtje që lidhet ose mbështet vetë artikullin (imazhet e artikujve të lidhur, komentet e artikujve dhe kështu me radhë) janë të plogështa të vendosura në vend
Optimizimi i rrugës kritike të pasqyrimit si kjo do të thotë se koka> është e gjatë 222 rreshta. Sidoqoftë, përmbajtja kritike që përdoruesi erdhi për të parë ende vjen brenda ngarkesës fillestare prej 14 kb kur gzipped. Thisshtë ky proces që ndihmon në thyerjen e barrierës së pasqyrimit 1000ms.
Ngarkimi i kushtëzuar dhe dembel
Ngarkimi me kusht përmirëson përvojën e përdoruesit bazuar në tiparin e pajisjes së tij. Mjete si Modernizr ju lejojnë të provoni për këto karakteristika, por kini kujdes se vetëm sepse një shfletues thotë se ofron mbështetje, kjo nuk do të thotë gjithmonë mbështetje e plotë.
Një teknikë është të ndalosh ngarkimin e diçkaje derisa përdoruesi të tregojë qëllimin për ta përdorur atë veçori. Kjo do të konsiderohej e kushtëzuar. Ju mund të mbani të ngarkuar në ikonat sociale derisa përdoruesi të rri pezull ose të prekë ikonat, ose mund të shmangni ngarkimin e një Harta Google iframe në pikëpamjet më të vogla ku përdoruesi ka gjasa të preferojë lidhjen me një aplikacion të veçantë të hartës. Një qasje tjetër është të ‘Prerë mustardën’ - shih kutinë më sipër për detaje mbi këtë.
Ngarkimi dembel përcaktohet si diçka që gjithmonë keni ndërmend ta ngarkoni në faqe - imazhe që janë pjesë e artikullit, komente ose artikuj të tjerë të lidhur - por që nuk ka nevojë të jenë aty që përdoruesi të fillojë të konsumojë përmbajtjen.
Bazë
- Aktivizoni gzipping për skedarët dhe caktoni kokat e skadimit për të gjithë përmbajtjen statike (netm.ag/ Expire-260)
- Përdorni shtojcën Lazy Load jQuery. Kjo ngarkon imazhe kur afroheni te porta e shikimit, ose pas një periudhe të caktuar kohe
Avancuar
- Konfiguroni shpejt ose CloudFlare. Rrjetet e shpërndarjes së përmbajtjes (CDN) u japin përdoruesve përmbajtjen tuaj statike më shpejt se serveri juaj dhe kanë disa nivele falas
- Aktivizoni SPDY për shfletuesit e aktivizuar me http2 për të përfituar nga tiparet http2 si kërkesa paralele http
- Social Count lejon ngarkimin e kushtëzuar të ikonave tuaja sociale
- Përdorimi i API-së së Hartave Statike do t'ju lejojë të ndërroni Hartat Interaktive të Google për imazhe. Shikoni shembullin e Brad Frost në netm.ag/static-260
- Modeli i Përfshirë Ajax do të ngarkojë fragmente të përmbajtjes ose nga një atribut i të dhënave para, pas të dhënave ose zëvendësimit të të dhënave
Tipografia e përgjegjshme
Tipografia ka të bëjë që përmbajtja juaj të tretet lehtë. Tipografia e përgjegjshme e shtrin këtë për të siguruar lexueshmëri në një larmi të gjerë pajisjesh dhe pikëpamjesh. Jordan Moore pranon se lloji është një gjë për të cilën ai nuk është i gatshëm të lëkundet. Hidhni një ose dy imazhe nëse keni nevojë, por sigurohuni që të keni tip të shkëlqyeshëm.
Stephen Hay sugjeron vendosjen e madhësisë së shkronjave HTML në 100 përqind (lexo: thjesht lëre ashtu siç është) sepse secili shfletues ose prodhues i pajisjes bën një parazgjedhje të lexueshme në mënyrë të arsyeshme për një rezolucion ose pajisje të veçantë. Për shumicën e shfletuesve desktop kjo është 16px.
Nga ana tjetër, Moore përdor njësinë REM dhe madhësinë e shkronjave HTML për të vendosur një madhësi minimale të shkronjave për elemente të caktuara të përmbajtjes. Për shembull, nëse doni që rreshtimi i një artikulli të jetë gjithmonë 14px, atëherë vendoseni atë si madhësinë e shkronjës bazë në elementin HTML dhe vendosni .byline {font-size: 1rem;}. Ndërsa shkallëzoni trupin: madhësia e shkronjave: për t'iu përshtatur pamjes nuk do të ndikoni në stilin .nga linja.
Një gjatësi e mirë e linjës së leximit është gjithashtu e rëndësishme - synoni për 45 deri në 65 karaktere. Ka një bookmarklet që mund të përdorni për të kontrolluar përmbajtjen tuaj. Nëse jeni duke mbështetur shumë gjuhë me modelin tuaj, atëherë gjatësia e linjës mund të ndryshojë gjithashtu. Moore sugjeron të përdorni: artikullin lang (de) {max-width: 30em} për të mbuluar çështjet atje.
Për të ruajtur ritmin vertikal, vendoseni margin-bottom kundrejt blloqeve të përmbajtjes, ul>, ol>, blockquote>, table>, blockquote> etj., Në të njëjtën gjë me lartësinë tuaj të vijës. Nëse ritmi ndërpritet me prezantimin e imazheve, mund ta rregulloni duke shtuar Baseline.js ose BaselineAlign.js.
Bazë
- Bazoni fontin tuaj në trupin 100 për qind
- Puna në njësitë relative em
- Vendosni kufijtë tuaj në lartësinë tuaj të linjës për të ruajtur ritmin vertikal në modelin tuaj
Avancuar
- Përmirësoni performancën e ngarkimit të shkronjave me Enhance.js ose ngarkimin e shkronjave të shtyra
- Përdorni Sass @ përfshin për tituj semantikë.
- Shpesh ne kemi nevojë të përdorim stilin h5 në një widget të shiritave anësorë që kërkon shënjimin e h2. Përdorni Mixins tipografike të Bearded për të kontrolluar madhësinë dhe të mbeteni semantik me kodin e mëposhtëm:
shiriti anësor h2 {@ përfshij kreun-5}
Pyetjet e medias në JavaScript
Që kur kemi qenë në gjendje të kontrollojmë paraqitjen në një shumëllojshmëri pikëpamjesh përmes pyetjeve mediatike, ne kemi kërkuar një mënyrë për ta lidhur atë në drejtimin e JavaScript-it tonë gjithashtu. Ka disa mënyra për të ndezur JavaScript në gjerësi, lartësi dhe orientime të caktuara të pamjes së shikimit, dhe disa njerëz të zgjuar kanë shkruar disa shtojca vendase të përdorimit të lehtë për tu përdorur si Enquire.js dhe Simple State Manager. Këtë mund ta ndërtoni edhe vetë duke përdorur matchMedia. Sidoqoftë, keni problemin që ju duhet të kopjoni pyetjet tuaja të medias në CSS dhe JavaScript.
Aaron Gustafson ka një mashtrim të hollësishëm që do të thotë se nuk keni pse të menaxhoni dhe të përputhni pyetjet tuaja të medias në CSS dhe JS tuaj. Ideja fillimisht erdhi nga Jeremy Keith dhe në këtë shembull Gustafson e ka çuar atë në një zbatim të plotë.
Duke përdorur getActiveMQ (netm.ag/media-260), injekto div # getActiveMQ-vëzhgues në fund të elementit të trupit dhe fshije atë. Pastaj brenda CSS vendosur # getActiveMQ-watcher {font-family: break-0;} në pyetjen e parë mediatike, font-family: break-1; tek e dyta, familja e shkronjave: pushim-2; tek i treti e kështu me radhë.
Skenari përdor watchResize () (netm.ag/resize-260) për të parë nëse ka ndryshuar madhësia e pamjes dhe më pas lexon përsëri familjen aktive të shkronjave. Tani mund ta përdorni këtë për të fiksuar përmirësimet e JS si shtimi i një ndërfaqe me skedarë në një dl> kur lejon porta e shikimit, ndryshimi i sjelljes së një kuti të lehtë, ose azhurnimi i paraqitjes së një tabele të të dhënave. Shikoni kodin getActiveMQ në netm.ag/active-260.
Bazë
- Harrojeni JavaScript për pikëpamje të ndryshme. Siguroni përmbajtje dhe funksione të faqes në internet për përdoruesit në një mënyrë që ata të mund të kenë atë në të gjitha pikëpamjet e shikimit. Asnjëherë nuk duhet të kemi nevojë për JavaScript
Avancuar
- Zgjasni metodën e Gustafson duke përdorur Breakup si një listë të paracaktuar të pyetjeve mediatike dhe duke automatizuar krijimin e listës së familjeve të shkronjave për getActiveMQ-watcher
Përmirësimi progresiv
Një keqkuptim i zakonshëm në lidhje me përmirësimin progresiv është që njerëzit mendojnë: 'Oh mirë nuk mund ta përdor këtë tipar të ri', por në të vërtetë, është e kundërta. Përmirësimi progresiv do të thotë që ju të mund të jepni një veçori nëse mbështetet vetëm në një ose edhe pa shfletues, dhe me kalimin e kohës njerëzit do të marrin një përvojë më të mirë kur mbërrijnë versionet e reja.
Nëse shikoni në funksionin kryesor të çdo faqe në internet, mund ta jepni atë si HTML dhe nga ana e serverit të bëjë të gjithë përpunimin. Pagesat, formularët, pëlqimet, ndarja, postat elektronike, pultet - të gjitha mund të bëhen. Sapo të ndërtohet detyra themelore, atëherë mund të shtresojmë teknologjitë mbresëlënëse, sepse kemi një rrjet sigurie për të kapur ato që bien. Shumica e qasjeve të përparuara për të cilat kemi biseduar këtu bazohen në përmirësimin progresiv.
Paraqitja
Paraqitja fleksibël është e thjeshtë për t’u thënë, por ka qasje të ndryshme. Krijoni shtrirje të thjeshta në rrjet me më pak shënjues duke përdorur: zgjedhësin nth-child ().
/ * deklaroni gjerësinë e parë të lëvizshme për rrjetin * / .grid-1-4 {noton: majtas; gjerësia: 100%; } / * Kur pikëpamja është të paktën 37.5em atëherë vendos rrjetin në 50% për element * / @media (gjerësia min: 37.5em) {.grid-1-4 {gjerësia: 50%; } / * Pastroni notimin çdo element të dytë PAS të parit. Kjo synon të 3-të, të 5-të, të 7-të, të 9-të ... në rrjet. * / .Grid-1-4: n-i i tipit (2n + 1) {qartë: majtas; }} @media (gjerësia min: 64em) {.grid-1-4 {gjerësia: 25%; } / * Hiq pastrimin e mëparshëm * / .grid-1-4: n-i-tipit (2n + 1) {qartë: asnjë; } / * Pastroni noton çdo element të 4-të PAS të parit. Kjo synon të 5-të, të 9-të ... në rrjet. * / .Grid-1-4: n-i-tipit (4n + 1) {qartë: majtas; }}
Valë lamtumirë për të përdorur pozicionin dhe noton për faqosjet tuaja. Ndërsa ata na kanë shërbyer mirë deri më sot, përdorimi i tyre për paraqitjen ka qenë një sulm i domosdoshëm. Tani kemi dy fëmijë të rinj në bllok që do të ndihmojnë në rregullimin e të gjitha problemeve tona të paraqitjes - Flexbox dhe Grids.
Flexbox është i shkëlqyeshëm për module individuale, duke kontrolluar paraqitjen e pjesëve të përmbajtjes brenda secilit prej moduleve. Ka skema që ne përpiqemi të ofrojmë dhe që mund të arrihen më lehtë duke përdorur Flexbox, dhe kjo është edhe më e vërtetë me faqet e përgjegjshme. Për më shumë në lidhje me këtë, shikoni udhëzuesin e CSS Tricks për Flexbox ose Flexbox Polyfill.
Paraqitja e rrjetit CSS
Rrjeti është më shumë për paraqitjen e nivelit makro. Moduli i paraqitjes në rrjet ju jep një mënyrë të shkëlqyeshme për të përshkruar paraqitjen tuaj brenda CSS-së tuaj. Ndërsa është ende në fazën e draftit për momentin, unë e rekomandoj këtë artikull mbi paraqitjen e Rrjetit CSS nga Rachel Andrew.
Më në fund
Këto janë vetëm disa këshilla për të zgjeruar praktikën tuaj të përgjegjshme. Kur i afroheni ndonjë pune të re me përgjegjësi, bëni një hap mbrapa dhe sigurohuni që t'i merrni bazat e duhura. Filloni me përmbajtjen tuaj, HTML dhe përvojat e përmirësuara të shtresave mbi ta dhe nuk do të ketë asnjë kufi se ku mund të merrni dizajnet tuaja.
Ky artikull fillimisht u shfaq në numrin 260 të revistë neto.
