Ghidul profesionistului pentru designul web receptiv

Conţinut

• Imagini receptive
• Performanţă
• Încărcare condiționată și leneșă
• Tipografie receptivă
• Interogări media în JavaScript
• Îmbunătățire progresivă
• Aspect
• Aspectul grilei CSS
• In cele din urma

Designul web receptiv sună incredibil de simplu. Optează pentru grile flexibile pentru aspect, folosește suporturi flexibile (imagini, videoclipuri, iframe) și aplică interogări media pentru a actualiza aceste măsurători pentru a aranja cel mai bine conținutul pe orice fereastră. În practică, am învățat că nu este chiar atât de ușor. Problemele minuscule care apar în timpul fiecărui proiect ne fac să ne zgâriem în cap și, ocazional, să cioplim șanțuri de unghii pe birou.

De când am început să organizez buletinul informativ Responsive Design Weekly, am avut norocul să vorbesc cu mulți membri ai comunității web și să le aud experiențele. Am vrut să aflu exact ce dorea într-adevăr comunitatea să învețe, așa că am distribuit un sondaj cititorilor. Iată rezultatele de top:

1. Imagini receptive
2. Îmbunătățirea performanței
3. Tipografie receptivă
4. Interogări media în JavaScript
5. Îmbunătățire progresivă
6. Aspect

Având în vedere aceste subiecte, am rulat o serie de podcast-uri care le cereau unora dintre liderii noștri din industrie gândurile lor. În răspunsurile lor, un punct a fost unanim: concentrarea asupra obținerii elementelor de bază înainte de a începe să vă faceți griji cu privire la tehnicile interesante și avansate. Prin readucerea lucrurilor la elementele de bază, suntem capabili să construim o interfață robustă pentru toată lumea, acoperind funcționalități atunci când contextul dispozitivului sau al utilizatorului permite acest lucru.

„Deci ... ce zici de aceste tehnici avansate?” Te aud întrebând. Cred că Stephen Hay a rezumat cel mai bine atunci când a spus: „Tehnica RWD finală este de a începe prin a nu utiliza tehnici RWD avansate. Începeți cu conținut structurat și construiți-vă drumul. Adăugați un punct de întrerupere numai atunci când designul se rupe și conținutul o dictează și ... atât. ”

În acest articol, voi începe cu elementele de bază și voi adăuga straturi de complexitate pe măsură ce situația o permite, pentru a se completa aceste tehnici avansate. Să începem.

Imagini receptive

Mediul fluid a fost o parte esențială a RWD atunci când a fost definit pentru prima dată de Ethan Marcotte. lățime: 100%; , lățime maximă: 100%; funcționează și astăzi, dar peisajul de imagine receptiv a devenit mult mai complicat. Cu un număr tot mai mare de dimensiuni ale ecranului, densitatea pixelilor și dispozitive care acceptă, dorim un control mai mare.

Cele trei preocupări principale au fost definite de Responsive Images Community Group (RICG):

1. Dimensiunea kilobyte a imaginii pe care o trimitem prin fir
2. Dimensiunea fizică a imaginii pe care o trimitem către dispozitive DPI mari
3. Imaginea decupează sub formă de direcție artistică pentru dimensiunea particulară a ferestrei

Yoav Weiss, cu ajutorul Indiegogo, a realizat majoritatea lucrărilor la implementarea Blink - furculița Google a WebKit și, până când citiți acest lucru, va fi livrat în Chrome și Firefox. Safari 8 va livra srcset, cu toate acestea atributul de dimensiuni este doar în versiunile de noapte și imaginea> nu este încă implementată.

Odată cu sosirea a ceva nou în procesul nostru de dezvoltare web, poate fi dificil să începeți. Să parcurgem un exemplu pas cu pas.

img! - Declarați imaginea alternativă pentru toate browserele care nu acceptă imagini -> src = "horse-350.webp"! - Declarați toate dimensiunile imaginii în srcset. Includeți lățimea imaginii folosind descriptorul w pentru a informa browserul despre lățimea fiecărei imagini .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Dimensiunile informează browserul despre aspectul site-ului nostru. Aici spunem că pentru orice fereastră de dimensiune 64 sau mai mare, utilizați o imagine care va ocupa 70% din fereastra -> mărimi = "(min-lățime: 64 em) 70vw,! - Dacă fereastra nu este aceea mare, atunci pentru orice fereastră de dimensiuni de 37,5em sau mai mare, utilizați o imagine care ocupă 95% din fereastra de vizualizare -> (lățime minimă: 37,5em) 95vw,! - și dacă fereastra de vizualizare este mai mică decât aceasta, utilizați o imagine care ocupă 100% din fereastra de vizualizare -> 100vw "! - are întotdeauna text alternativ .--> alt =" Un cal "/>

Din punct de vedere al performanței, nu contează dacă utilizați lățimea minimă sau lățimea maximă în atributul dimensiuni - dar ordinea sursă contează. Browserul va folosi întotdeauna prima dimensiune potrivită.

De asemenea, nu uitați că codificăm greu atributul de dimensiuni pentru a fi definit direct în raport cu designul nostru. Acest lucru poate cauza probleme înaintând. De exemplu, dacă vă reproiectați site-ul, va trebui să revizitați toate imaginile> sau imaginile> și să redefiniți dimensiunile. Dacă utilizați un CMS, acest lucru poate fi depășit ca parte a procesului de construire.

WordPress are deja un plugin pentru a vă ajuta. Acesta definește srcset pe soiurile de imagine standard WP și vă permite să declarați dimensiunile într-o locație centrală. Când pagina este generată din baza de date, ea schimbă orice mențiuni de pe img> și le înlocuiește cu marcarea imaginii.

De bază

• Gândiți-vă dacă trebuie cu adevărat să includeți o imagine. Este conținutul de bază al imaginii sau este decorativ? O imagine mai mică va însemna un timp de încărcare mai rapid
• Optimizați imaginile pe care trebuie să le includeți folosind ImageOptim
• Setați antetele expirate pentru imaginile dvs. de pe server sau din fișierul .htaccess (consultați detaliile din „Performanță”)
• PictureFill oferă suport pentru polimplare pentru imagini

Avansat

• Lazy încarcă imaginile folosind pluginul Lazy Load al jQuery
• Utilizați HTMLImageElement.Sizes și HTMLPictureElement pentru detectarea caracteristicilor.
• Pluginul avansat PictureFill WP, găsit pe Github, vă va permite să definiți lățimile și valorile dimensiunilor imaginii personalizate

Performanţă

Pentru a obține cea mai rapidă performanță percepută pe paginile noastre, avem nevoie de toate codurile HTML și CSS necesare pentru a reda partea de sus a paginii noastre în primul răspuns de la server. Numărul magic este de 14 KB și se bazează pe dimensiunea maximă a ferestrei de congestionare din primul timp dus-întors (RTT).

Patrick Hamann, conducător tehnic frontend la Guardian, și echipa sa au reușit să spargă bariera de 1000 ms folosind un amestec de tehnici frontend și backend. Abordarea The Guardian este de a asigura conținutul necesar - articolul - este livrat utilizatorului cât mai repede posibil și în limita numărului magic de 14 KB.

Să analizăm procesul:

1. Utilizatorul face clic pe un link Google către o știre
2. O singură cerere de blocare este trimisă în baza de date pentru articol. Nu sunt solicitate povești sau comentarii conexe
3. HTML este încărcat conținând CSS critice
4. în cap>
5. Se efectuează un proces „Tăiați muștarul” și se încarcă orice elemente condiționale bazate pe caracteristicile dispozitivului utilizatorului
6. Orice conținut legat de sau care susține articolul în sine (imagini de articole aferente, comentarii despre articole și așa mai departe) este leneș încărcat în loc

Optimizarea căii critice de redare astfel înseamnă că capul are 222 de linii. Cu toate acestea, conținutul critic pe care utilizatorul a ajuns să îl vadă încă se încadrează în sarcina utilă inițială de 14 kb atunci când este gzip. Acest proces vă ajută să spargeți bariera de redare de 1000 ms.

Încărcare condiționată și leneșă

Încărcarea condiționată îmbunătățește experiența utilizatorului pe baza funcției dispozitivului său. Instrumente precum Modernizr vă permit să testați aceste funcții, dar rețineți că doar pentru că un browser spune că oferă asistență, asta nu înseamnă întotdeauna suport complet.

O tehnică este de a opri încărcarea ceva până când utilizatorul arată intenția de a utiliza acea caracteristică. Acest lucru ar fi considerat condiționat. Puteți opri încărcarea în pictogramele sociale până când utilizatorul trece peste sau atinge pictogramele sau puteți evita încărcarea unui iframe Google Map pe ferestre de dimensiuni mai mici, în care utilizatorul preferă să se conecteze la o aplicație dedicată de mapare. O altă abordare este „Tăiați muștarul” - consultați caseta de mai sus pentru detalii despre acest lucru.

Încărcarea leneșă este definită ca ceva pe care intenționați să îl încărcați întotdeauna pe pagină - imagini care fac parte din articol, comentarii sau alte articole conexe - dar care nu trebuie să fie acolo pentru ca utilizatorul să înceapă să consume conținutul.

De bază

• Activați gzipping pentru fișiere și setați antetele expiră pentru tot conținutul static (netm.ag/expire-260)
• Utilizați pluginul Lazy Load jQuery. Aceasta încarcă imagini atunci când vă apropiați de fereastră sau după o anumită perioadă de timp

Avansat

• Configurați Fastly sau CloudFlare. Rețelele de livrare a conținutului (CDN) livrează conținutul static utilizatorilor mai repede decât propriul server și au câteva niveluri gratuite
• Activați SPDY pentru browserele compatibile cu http2 pentru a profita de funcțiile http2, cum ar fi cererile http paralele
• Social Count permite încărcarea condiționată a pictogramelor dvs. sociale
• Utilizarea API-ului Static Maps vă va permite să schimbați hărțile interactive Google pentru imagini. Aruncați o privire la exemplul lui Brad Frost la netm.ag/static-260
• Ajax Include Pattern va încărca fragmente de conținut fie dintr-un atribut data-before, data-after sau data-replace

Tipografie receptivă

Tipografia este despre simplificarea digerării conținutului. Tipografia receptivă extinde acest lucru pentru a asigura lizibilitatea pe o gamă largă de dispozitive și ferestre de vizualizare. Jordan Moore recunoaște că acest tip este un lucru pe care nu este dispus să se miște. Aruncați o imagine sau două, dacă aveți nevoie, dar asigurați-vă că aveți un tip excelent.

Stephen Hay sugerează setarea dimensiunii fontului HTML la 100% (citiți: lăsați-o așa cum este), deoarece fiecare browser sau producător de dispozitive face o setare implicită lizibilă pentru o anumită rezoluție sau dispozitiv. Pentru majoritatea browserelor desktop aceasta este de 16 px.

Pe de altă parte, Moore folosește unitatea REM și dimensiunea fontului HTML pentru a seta o dimensiune minimă a fontului pentru anumite elemente de conținut. De exemplu, dacă doriți ca linia secundară a unui articol să fie întotdeauna de 14 px, atunci setați-o ca dimensiune de bază a fontului pe elementul HTML și setați .byline {font-size: 1rem;}. Pe măsură ce scalați corpul: font-size: pentru a se potrivi cu ecranul, nu veți avea impact asupra stilului .by-line.

O lungime bună a liniei de citire este, de asemenea, importantă - vizați 45-65 de caractere. Există un marcaj pe care îl puteți utiliza pentru a vă verifica conținutul. Dacă acceptați mai multe limbi cu designul dvs., atunci lungimea liniei poate varia, de asemenea. Moore sugerează utilizarea: lang (de) articol {max-width: 30em} pentru a acoperi orice problemă de acolo.

Pentru a menține ritmul vertical, setați marginea de jos împotriva blocurilor de conținut, ul>, ol>, blockquote>, table>, blockquote> și așa mai departe, la fel ca înălțimea liniei. Dacă ritmul este întrerupt cu introducerea imaginilor, îl puteți remedia adăugând Baseline.js sau BaselineAlign.js.

De bază

• Bazează-ți fontul pe un corp de 100%
• Lucrați în unități relative
• Setați marginile la înălțimea liniei pentru a menține ritmul vertical în design

Avansat

• Îmbunătățiți performanța de încărcare a fontului cu Enhance.js sau încărcarea diferită a fontului
• Utilizați Sass @include pentru titluri semantice.
• Adesea trebuie să folosim stilul h5 într-un widget al barei laterale care necesită marcaj h2. Utilizați Mixded Typographic Mixins pentru a controla dimensiunea și a rămâne semantic cu codul de mai jos:

.sidebar h2 {@include rubrica-5}

Interogări media în JavaScript

De când am reușit să controlăm aspectul într-o varietate de porturi de vizualizare prin interogări media, am căutat o modalitate de a lega acest lucru și în executarea JavaScript-ului nostru. Există câteva modalități de a declanșa JavaScript pe anumite lățimi, înălțimi și orientări ale ferestrei, iar unii oameni inteligenți au scris niște pluginuri JS native ușor de utilizat, precum Enquire.js și Simple State Manager. Puteți chiar să construiți acest lucru singur folosind matchMedia. Cu toate acestea, aveți problema că trebuie să copiați interogările dvs. media în CSS și JavaScript.

Aaron Gustafson are un truc elegant, care înseamnă că nu trebuie să gestionați și să potriviți interogările dvs. media din CSS și JS. Ideea a venit inițial de la Jeremy Keith și, în acest exemplu, Gustafson a dus-o la o implementare completă.

Folosind getActiveMQ (netm.ag/media-260), injectați div # getActiveMQ-watcher la capătul elementului corp și ascundeți-l. Apoi, în CSS setați # getActiveMQ-watcher {font-family: break-0;} la prima interogare media, font-family: break-1; la a doua, font-family: break-2; la al treilea și așa mai departe.

Scriptul folosește watchResize () (netm.ag/resize-260) pentru a verifica dacă dimensiunea ferestrei a fost modificată și apoi citește din nou familia de fonturi activă. Acum puteți utiliza acest lucru pentru a conecta îmbunătățiri JS, cum ar fi adăugarea unei interfețe cu file la un dl> atunci când fereastra permite, schimbarea comportamentului unei casete lightbox sau actualizarea aspectului unui tabel de date. Verificați getActiveMQ Codepen la netm.ag/active-260.

De bază

• Uitați de JavaScript pentru diferite porturi de vizualizare. Furnizați conținut și funcții de site-uri web utilizatorilor într-un mod în care aceștia pot să-l acceseze în toate porturile de vizualizare. Nu ar trebui să avem nevoie niciodată de JavaScript

Avansat

• Extindeți metoda lui Gustafson utilizând Breakup ca listă predefinită de interogări media și automatizând crearea listei de familii de fonturi pentru getActiveMQ-watcher

Îmbunătățire progresivă

O concepție greșită obișnuită despre îmbunătățirea progresivă este că oamenii cred: „Ei bine, nu pot folosi această funcție nouă”, dar într-adevăr, este opusul. Îmbunătățirea progresivă înseamnă că puteți furniza o caracteristică dacă este acceptată doar într-unul sau chiar în niciun browser și, în timp, oamenii vor avea o experiență mai bună odată cu sosirea noilor versiuni.

Dacă vă uitați la funcția de bază a oricărui site web, îl puteți livra în format HTML și puteți solicita ca partea serverului să efectueze toate procesările. Plăți, formulare, aprecieri, partajare, e-mailuri, tablouri de bord - totul se poate face. Odată ce sarcina de bază este construită, putem strânge tehnologiile extraordinare, deoarece avem o plasă de siguranță pentru a le prinde pe cele care cad. Majoritatea abordărilor avansate despre care am vorbit aici se bazează pe îmbunătățirea progresivă.

Aspect

Aspectul flexibil este simplu de spus, dar are multe abordări diferite. Creați planuri simple de grilă cu mai puține marcaje utilizând: nth-child () selector.

/ * declarați prima lățime mobilă pentru grilă * / .grid-1-4 {float: left; lățime: 100%; } / * Când fereastra este de cel puțin 37,5em, atunci setați grila la 50% per element * / @media (min-width: 37,5em) {.grid-1-4 {width: 50%; } / * Ștergeți plutitorul în fiecare al doilea element DUPĂ primul. Aceasta vizează a 3-a, a 5-a, a 7-a, a 9-a ... din grilă. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Eliminați ștergerea anterioară * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Ștergeți plutitorul la fiecare al patrulea element DUPĂ primul. Aceasta vizează a 5-a, a 9-a ... din grilă. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}

La revedere la utilizarea poziției și plutirea pentru aspectele dvs. Deși ne-au servit bine până în prezent, utilizarea lor pentru aspect a fost un hack necesar. Acum avem doi copii noi care vor ajuta la rezolvarea tuturor problemelor noastre legate de aspect - Flexbox și Grids.

Flexbox este excelent pentru module individuale, controlând aspectul conținutului din fiecare dintre module. Există aspecte pe care încercăm să le livrăm, care pot fi realizate mai ușor folosind Flexbox, iar acest lucru este cu atât mai adevărat cu site-urile responsive. Pentru mai multe informații, consultați ghidul CSS Tricks pentru Flexbox sau Flexbox Polyfill.

Aspectul grilei CSS

Grila este mai mult pentru aspectul la nivel macro. Modulul de aspect Grid vă oferă o modalitate excelentă de a descrie aspectul dvs. în CSS. În timp ce se află încă în etapa de proiectare, vă recomand acest articol despre aspectul grilei CSS de Rachel Andrew.

In cele din urma

Acestea sunt doar câteva sfaturi pentru a vă extinde practica receptivă. Când abordați orice lucrare nouă receptivă, faceți un pas înapoi și asigurați-vă că obțineți elementele de bază corecte. Începeți cu conținutul, HTML-ul și experiențele îmbunătățite ale stratului și nu veți avea nicio limită în ceea ce privește locul în care vă puteți duce desenele.

Acest articol a apărut inițial în numărul 260 din revista net.