Inhalt
- Reaktiounsfäeger Biller
- Leeschtung
- Conditionnel a faul Belaaschtung
- Reaktiounsfäeger Typographie
- Media Ufroen a JavaScript
- Progressiv Verbesserung
- Layout
- CSS Gitter Layout
- Endlech
Responsive Webdesign kléngt onheemlech einfach. Wielt fir flexibel Gitter fir de Layout, benotzt flexibel Medien (Biller, Video, iframes), a passt Medieufroen op fir dës Moossungen z'aktualiséieren fir am beschten Inhalt op all Viewport ze arrangéieren. An der Praxis hu mir geléiert et ass net wierklech sou einfach. Kleng Themen, déi wärend all Projet optauchen, halen eis de Kapp kraazt, an heiansdo och Fangernagel an eise Schreifdicher schneiden.
Zënter datt ech ugefaang hunn de Responsive Design Weekly Newsletter ze curéieren hunn ech glécklech genuch mat ville Membere vun der Webgemeinschaft ze schwätzen an hir Erfahrungen ze héieren. Ech wollt genau erausfannen wat d'Communautéit wierklech wollt léieren, also hunn ech eng Ëmfro un d'Lieser zirkuléiert. Hei sinn d'Top Resultater:
- Reaktiounsfäeger Biller
- Verbesserung vun der Leeschtung
- Reaktiounsfäeger Typographie
- Media Ufroen a JavaScript
- Progressiv Verbesserung
- Layout
Mat dësen Themen am Kapp hunn ech eng Serie vu Podcasts gefuer, déi e puer vun eise Branche Leader froen fir hir Gedanken. An hiren Äntwerte war ee Punkt eestëmmeg: Fokusséiert op d'Grondlage richteg ze kréien ier Dir Iech Suergen iwwer spannend an fortgeschratt Technike mécht. Duerch d'Saachen zréck an d'Grondlagen, kënne mir eng robust Interface fir jiddereen bauen, Schichten op Features wann den Apparat oder de Kontext vum Benotzer et erlaabt.
'Also ... wat iwwer dës fortgeschratt Techniken?' Ech héieren Iech froen. Ech mengen de Stephen Hay huet et am beschten zesummegefaasst wéi hie sot: 'Déi ultimativ RWD Technik ass fir unzefänken mat keng fortgeschratt RWD Techniken. Start mat strukturéiertem Inhalt a baut Äre Wee erop. Füügt nëmmen e Breakpoint bäi wann den Design brécht an den Inhalt et diktéiert an ... dat ass et. '
An dësem Artikel fänken ech mat de Basics un a füügt Schichten u Komplexitéit bäi wéi d'Situatioun et erlaabt, op déi fortgeschratt Techniken opzebauen. Loosst eis ufänken.
Reaktiounsfäeger Biller
Flësseg Medie war e wichtege Bestanddeel vun der RWD wéi se fir d'éischt vum Ethan Marcotte definéiert gouf. Breet: 100%; , Max-Breet: 100%; funktionnéiert nach ëmmer haut, awer d'reaktiounsfäeg Bildlandschaft ass vill méi komplizéiert ginn. Mat ëmmer méi Unzuel u Bildschirmgréissten, Pixel Dicht an Apparater fir ze ënnerstëtzen wëlle mer méi grouss Kontroll.
Déi dräi Haaptsuergen goufen vun der Responsive Images Community Group (RICG) definéiert:
- D'Kilobytegréisst vum Bild déi mir iwwer den Drot schécken
- Déi kierperlech Gréisst vum Bild déi mir op héich DPI Geräter schécken
- D'Bildkultur a Form vu Konschtrichtung fir déi besonnesch Gréisst vum Viewport
De Yoav Weiss, mat Hëllef vum Indiegogo, huet d'Majoritéit vun der Aarbecht iwwer d'Blink-Implementatioun gemaach - Google's Gabel vu WebKit, a wéi Dir dëst liest, gëtt se a Chrome a Firefox verschéckt. Safari 8 verschéckt srcset, awer d'Gréisst Attribut ass nëmmen an Nuets baut a Bild> ass nach net implementéiert.
Mat der Arrivée vun allem Neies an eisem Webentwécklungsprozess kann et schwéier sinn ze starten. Loosst eis duerch e Beispill Schrëtt fir Schrëtt lafen.
img! - Erkläert de Fallback Bild fir all net bild ënnerstëtzend Browser -> src = "Päerd-350.webp"! - Erkläert all d'Bildgréissten am srcset. Gitt d'Bildbreedung mat der w Descriptor fir de Browser vun der Breet vun all Bild z'informéieren. -> srcset = "Päerd-350.webp 350w, Päerd-500.webp 500w, Päerd-1024.webp 1024w, Päerd.webp 2000w "! - Gréissten informéieren de Browser iwwer eise Site Layout. Hei soe mir fir all Viewport deen 64ems a méi grouss ass, benotzt e Bild dat 70% vum Viewport besetzt -> Gréissten = "(min Breet: 64em) 70vw,! - Wann de Viewport net dat ass grouss, da fir all Viewport deen 37.5ems a méi grouss ass, benotzt e Bild dat 95% vum Viewport besetzt -> (min Breet: 37.5em) 95vw,! - a wann de Viewport méi kleng ass wéi dat, da benotzt e Bild dat 100% vum Viewport besetzt -> 100vw "! - ëmmer Alt Text hunn. -> alt =" E Päerd "/>
Aus Performance Siicht ass et egal ob Dir Min-Breet oder Max-Breet am Gréissten Attribut benotzt - awer d'Quelluerdnung ass wichteg. De Browser benotzt ëmmer déi éischt passende Gréisst.
Denkt och drun datt mir d'Gréisst Attribut haart kodéiere fir direkt géint eisen Design ze definéieren. Dëst kann Themen bewegen, déi no vir réckelen. Zum Beispill, wann Dir Äre Site nei designt, musst Dir all d'img> oder d'Fotoen> iwwerschaffen an d'Gréissten nei definéieren. Wann Dir e CMS benotzt, kann dëst als Deel vun Ärem Bauprozess iwwerwonne ginn.
WordPress huet schonn e Plugin fir ze hëllefen. Et definéiert de srcset op WP Standard Bildvarianten an erlaabt Iech Gréissten an enger zentraler Plaz z'erklären. Wann d'Säit aus der Datebank generéiert gëtt, wiesselt se all ernimmt op img> aus an ersetzt se duerch d'Bildmarkéierung.
Basis
- Denkt drun ob Dir wierklech e Bild maache musst. Ass den Image Kär Inhalt, oder ass et dekorativ? Ee manner Bild bedeit eng méi séier Laaschtzäit
- Optiméiert d'Biller déi Dir maache musst mat ImageOptim abegraff
- Setzt ofgelaf Header fir Är Biller op Ärem Server oder .htaccess Datei (kuck Detailer ënner 'Performance')
- PictureFill bitt polyfill Ënnerstëtzung fir Biller
Fortgeschratt
- Lazy lued Är Biller mat jQuery's Lazy Load Plugin
- Benotzt HTMLImageElement.Sizes an HTMLPictureElement fir Feature Detektioun.
- De fortgeschrattene PictureFill WP Plugin, fonnt op Github, erlaabt Iech personaliséiert Bildbreet a Gréisstewäerter ze definéieren
Leeschtung
Fir déi schnellst erkannt Leeschtung op eise Säiten ze kréien, brauche mir all HTML an CSS fir den Top Deel vun eiser Säit an der éischter Äntwert vum Server ze maachen. Déi magesch Zuel ass 14kb a baséiert op der maximaler Staufenstergréisst an der éischter Rondreeszäit (RTT).
De Patrick Hamann, frontend technesche Lead beim Guardian, a säin Team hunn et fäerdeg bruecht déi 1000ms Barrière ze briechen mat enger Mëschung aus Frontend an Backend Techniken. D'Approche vum Guardian ass den erfuerderlechen Inhalt ze garantéieren - den Artikel - gëtt sou séier wéi méiglech an de Benotzer geliwwert a bannent der 14kb magescher Zuel.
Loosst eis de Prozess kucken:
- Benotzer klickt op e Google Link op eng Neiegkeet
- Eng eenzeg Blockéierungsufro gëtt an d'Datebank fir den Artikel geschéckt. Keng relatéiert Geschichten oder Kommentarer gi gefrot
- Den HTML gëtt gelueden mat kriteschen CSS
- am Kapp>
- E 'Schnëtt de Moschter' Prozess gëtt ënnerholl an all bedingt Elementer baséierend op dem Apparat seng Funktioune vum Benotzer gi gelueden
- All Inhalt am Zesummenhang mat oder ënnerstëtzt den Artikel selwer (bezunn Artikelbiller, Artikelkommentaren asw.) Sinn liddereg op d'Plaz gelueden
Optimiséieren de kritesche Rendering Wee sou heescht de Kapp> ass 222 Zeilen laang. Wéi och ëmmer, de kriteschen Inhalt deen de Benotzer koum gesinn ass ëmmer nach an der 14kb initial Notzlaascht wann gzippt. Et ass dëse Prozess deen hëlleft déi 1000ms Rendering Barrière ze briechen.
Conditionnel a faul Belaaschtung
Conditionnel Belaaschtung verbessert d'Erfahrung vum Benotzer op Basis vun hirem Apparat Feature. Tools wéi Modernizr erlaaben Iech fir dës Features ze testen, awer bewosst datt just well e Browser seet datt hien Ënnerstëtzung bitt, dat heescht net ëmmer voll Ënnerstëtzung.
Eng Technik ass et ofzelueden eppes ze luede bis de Benotzer d'Intent weist dës Feature ze benotzen. Dëst wier als bedingt ugesinn. Dir kënnt d'Belaaschtung an de sozialen Icons ofhalen, bis de Benotzer iwwer d'Ikonen hänkt oder beréiert, oder Dir kënnt vermeiden datt en iframe Google Map op méi kleng Viewports luede gëtt, wou de Benotzer méiglecherweis léiwer mat enger spezieller Mapping-Uwendung verbënnt. Eng aner Approche ass "de Moschter ze schneiden" - kuckt de Boxout hei uewen fir Detailer doriwwer.
Lazy Loading gëtt definéiert als eppes wat Dir ëmmer wëlles hutt op der Säit ze lueden - Biller déi en Deel vum Artikel sinn, Kommentaren oder aner ähnlech Artikelen - awer déi net brauchen do ze sinn fir de Benotzer den Inhalt ze konsuméieren.
Basis
- Aktivéiert gzipping fir Dateien a set expire header fir all statesch Inhalt (netm.ag/expire-260)
- Benotzt de Lazy Load jQuery Plugin. Dëst lued Biller wann Dir an de Viewport kënnt, oder no enger gewëssen Zäit
Fortgeschratt
- Setzt séier op oder CloudFlare. Content Delivery Networks (CDNs) liwweren Äre stateschen Inhalt u Benotzer méi séier wéi Ären eegene Server, an hunn e puer gratis Tiers
- Aktivéiert SPDY fir http2 aktivéiert Browser fir vun http2 Funktiounen ze profitéieren wéi parallel http Ufroen
- Social Count erlaabt eng bedingend Luede vun Äre sozialen Icons
- Mat der Static Maps API kënnt Dir Interaktive Google Maps fir Biller wiesselen. Huelt e Bléck op dem Brad Frost säi Beispill op netm.ag/static-260
- Ajax Include Muster lued Inhaltsstécker entweder vun engem Daten-vir, Daten-no oder Daten Ersatzattributt
Reaktiounsfäeger Typographie
Typographie ass iwwer Ären Inhalt einfach ze verdauen. Reaktiounsfäeger Typographie verlängert dëst fir d'Liesbarkeet iwwer eng grouss Varietéit vun Apparater a Viewports ze garantéieren. De Jordan Moore gëtt zou, datt deen Typ eng Saach ass, op déi hien net bereet ass ze goen. Drop e Bild oder zwee wann Dir braucht, awer gitt sécher datt Dir e super Typ hutt.
De Stephen Hay proposéiert d'HTL Schrëftgréisst op 100 Prozent ze setzen (liesen: loosst et just wéi et ass) well all Browser oder Apparathersteller mécht e vernünftbar liesbare Standard fir eng bestëmmt Resolutioun oder Apparat. Fir déi meescht Desktop Browser ass dëst 16px.
Op der anerer Säit benotzt Moore d'REM Eenheet an HTML Schrëftgréisst fir eng Mindest Schrëftgréisst fir verschidden Inhaltselementer ze setzen. Zum Beispill, wann Dir d'Bilinn vun engem Artikel ëmmer 14px wëllt, da setzt dat als Basis Schrëftgréisst op der HTML Element a setzt .byline {Schrëftgréisst: 1rem;}. Wéi Dir de Kierper skaléiert: Schrëftgréisst: fir de Viewport ze passen, wäert Dir den .by-Line Stil net beaflossen.
Eng gutt Lieslinnlängt ass och wichteg - zielt fir 45 bis 65 Zeechen. Et gëtt e Bookmarklet deen Dir benotzt fir Ären Inhalt ze kontrolléieren. Wann Dir verschidde Sprooche mat Ärem Design ënnerstëtzt, da kann d'Linnlängt och variéieren. De Moore proposéiert: lang (de) Artikel {max-width: 30em} ze benotzen fir eventuell Themen do ofzedecken.
Fir de vertikale Rhythmus z'erhalen, setzt Margin-Bottom géint Inhaltsblocken, ul>, ol>, blockquote>, Dësch>, blockquote> a sou weider, op d'selwecht wéi Är Linnshéicht. Wann de Rhythmus mat der Aféierung vu Biller ënnerbrach gëtt, kënnt Dir e fixen andeems Dir Baseline.js oder BaselineAlign.js bäifüügt.
Basis
- Baséiert Är Schrëft op 100 Prozent Kierper
- Schafft a relativen em Eenheeten
- Setzt Är Margen op Är Linnhéicht fir de vertikale Rhythmus an Ärem Design ze halen
Fortgeschratt
- Verbessert d'Performance Luede Performance mat Enhance.js oder deferred Schrëft Luede
- Benotzt Sass @ enthält fir semantesch Iwwerschrëften.
- Oft musse mir den h5 Stil an engem Sidebar Widget benotzen deen h2 Markup erfuerdert. Benotzt Bearded's Typographesch Mixins fir d'Gréisst ze kontrolléieren a bleift semantesch mam Code hei ënnen:
.sidebar h2 {@include heading-5}
Media Ufroen a JavaScript
Zënter datt mir de Layout iwwer verschidde Viewporten duerch Medienufroen kontrolléieren konnten, hu mir e Wee gesicht fir dat ze verbannen an och eise JavaScript ze bedreiwen. Et ginn e puer Weeër fir JavaScript op gewësse Viewport Breet, Héichten an Orientéierungen ze feieren, an e puer schlau Leit hunn e puer einfach benotzbar JS Plugins wéi Enquire.js an Simple State Manager geschriwwen. Dir kënnt dëst och selwer mat MatchMedia bauen. Wéi och ëmmer, Dir hutt d'Fro datt Dir Är Medienufroen an Ärem CSS a JavaScript duplizéiere musst.
Den Aaron Gustafson huet e propperen Trick dat heescht datt Dir Är Medienufroen an Ärem CSS an Ärem JS net verwalte musst a matenee passen. D'Iddi koum ursprénglech vum Jeremy Keith an an dësem Beispill huet de Gustafson et zu enger voller Ëmsetzung bruecht.
Benotzt getActiveMQ (netm.ag/media-260), sprëtzen div # getActiveMQ-Iwwerwaacher um Enn vum Kierperelement a verstoppt et. Dann innerhalb vum CSS Set # getActiveMQ-watcher {font-family: break-0;} zu der éischter Medie-Ufro, font-family: break-1; op déi zweet, Schrëftfamill: Break-2; zum drëtten a sou weider.
De Skript benotzt watchResize () (netm.ag/resize-260) fir ze kontrolléieren ob d'Gréisst vum Viewport geännert huet, a liest dann déi aktiv Schrëftfamill zréck. Elo kënnt Dir dëst benotze fir JS Verbesserungen ze hänken, wéi eng Tabblech-Interface op eng dl> bäizefügen, wann de Viewport et erlaabt, d'Behuele vun enger Lightbox z'änneren, oder de Layout vun enger Datetabell aktualiséiert. Kuckt d'getActiveMQ Codepen op netm.ag/active-260.
Basis
- Vergiesst JavaScript fir verschidde Viewports. Gitt Inhalter a Websäitfunktiounen un d'Benotzer op eng Manéier wéi se op all Viewports zougänglech sinn. Mir sollten ni JavaScript brauchen
Fortgeschratt
- Verlängert dem Gustafson seng Method andeems Dir Breakup als virdefinéiert Lëscht vu Medieufroen benotzt an d'Schafe vun der Lëscht vu Schrëftfamillje fir getActiveMQ-watcher automatiséiert
Progressiv Verbesserung
E gemeinsame Mëssverständnis iwwer progressiv Verbesserung ass datt d'Leit denken, 'Oh well ech kann dës nei Feature net benotzen', awer wierklech, et ass de Géigendeel. Progressiv Verbesserung heescht datt Dir eng Feature liwwere kënnt wann se nëmmen an engem oder souguer kee Browser ënnerstëtzt gëtt, a mat der Zäit kréien d'Leit eng besser Erfahrung wéi nei Versiounen ukommen.
Wann Dir d'Kärfunktioun vun enger Websäit kuckt, kënnt Dir dat als HTML liwweren an d'Server Säit all d'Veraarbechtung maachen. Paiementer, Formulairen, Likes, Sharing, E-Mailen, Dashboards - et kann alles gemaach ginn. Wann d'Basisaufgab gebaut ass, kënne mir déi fantastesch Technologien drop leeën, well mir hunn e Sécherheetsnetz fir déi ze fänken déi falen. Déi meescht vun de fortgeschrattenen Approchen, iwwer déi mir hei geschwat hunn, baséieren op progressiver Verbesserung.
Layout
Flexibel Layout ass einfach ze soen, awer et huet vill verschidde Approchen. Erstellt einfache Gitter Layouten mat manner Markup mat: nth-child () Selector.
/ * deklaréiert déi mobil éischt Breet fir de Gitter * / .grid-1-4 {float: lénks; Breet: 100%; } / * Wann de Viewport op d'mannst 37,5em ass, da setzt de Gitter op 50% pro Element * / @media (min Breet: 37.5em) {.grid-1-4 {Breet: 50%; } / * Läscht de Float all zweet Element NO DAT éischt. Dëst viséiert den 3., 5., 7., 9. ... am Gitter. * / .Grid-1-4: nth-of-type (2n + 1) {kloer: lénks; }} @media (min Breet: 64em) {.grid-1-4 {Breet: 25%; } / * Ewechzehuelen der viregter kloer * / .grid-1-4: nth-of-type (2n + 1) {kloer: none; } / * Läscht de Float all 4. Element NO Éischten. Dëst viséiert de 5., 9. ... am Gitter. * / .Grid-1-4: nth-of-type (4n + 1) {kloer: lénks; }}
Welle Äddi fir d'Positioun ze benotzen a schwëmmt fir Är Layouten. Wärend si eis bis haut gutt zerwéiert hunn, war hire Gebrauch fir de Layout en néidegen Hack. Mir hunn elo zwee nei Kanner am Block, déi hëllefe fir all eis Layoutschwieregkeeten ze fixéieren - Flexbox a Grids.
Flexbox ass super fir eenzel Moduler, déi de Layout vun Inhaltsstécker an all de Moduler kontrolléieren. Et gi Layouten déi mir versichen ze liwweren déi méi einfach mat Flexbox erreecht kënne ginn, an dëst ass nach méi richteg mat reaktiounsfäege Site. Fir méi iwwer dëst, kuckt CSS Tricks 'Guide fir Flexbox oder de Flexbox Polyfill.
CSS Gitter Layout
Grid ass méi fir de Makroniveau Layout. De Grid Layout Modul gëtt Iech e super Wee fir Ären Layout an Ärem CSS ze beschreiwen. Wann et de Moment nach an der Entworfstadium ass, empfeelen ech dësen Artikel iwwer de CSS Grid Layout vum Rachel Andrew.
Endlech
Dëst sinn nëmmen e puer Tipps fir Är reaktiounsfäeg Praxis ze verlängeren. Wann Dir op eng nei reaktiounsfäeg Aarbecht kënnt, maacht e Schrëtt zréck a gitt sécher datt Dir d'Grondlage richteg kritt. Fänkt mat Ärem Inhalt un, HTML a Schicht verbessert Experienzen op hinnen an et gëtt keng Limit fir wou Dir Är Designs kënnt huelen.
Dësen Artikel ass ursprénglech an der Emissioun 260 vun Netz Magazin.
