Introducere în designul web receptiv: pseudo-elemente, interogări media și multe altele

În prezent, site-ul dvs. web va fi vizitat de o mare varietate de dispozitive: desktop-uri cu monitoare mari, laptopuri de dimensiuni medii, tablete, smartphone-uri și multe altele.

Pentru a obține o experiență de utilizator optimă ca inginer front-end, site-ul dvs. ar trebui să își ajusteze aspectul ca răspuns la aceste dispozitive variate (adică, la rezoluțiile și dimensiunile diferite ale ecranului). Procesul de răspuns la forma dispozitivului utilizatorului este denumit (ai ghicit) design web responsive (RWD).

De ce merită timpul să studiezi exemple de design web receptiv și să te concentrezi pe RWD? Unii designeri web, de exemplu, își fac treaba vieții să asigure o experiență de utilizator stabilă în toate browserele, petrecând adesea zile întregi abordând probleme mici cu Internet Explorer.

Aceasta este o abordare prostească.

Mashable a numit 2013 anul designului web responsive. De ce? Peste 30% din traficul lor vine de pe dispozitive mobile. Ei estimează că acest număr ar putea ajunge la 50% până la sfârșitul anului. Pe web, în ​​general, 17,4% din traficul web a venit de la smartphone-uri în 2013. În același timp, utilizarea Internet Explorer, de exemplu, reprezintă doar 12% din tot traficul browserului , în scădere cu aproximativ 4% față de această perioadă anul trecut (conform către W3Schools). Dacă optimizați pentru un anumit browser, mai degrabă decât pentru populația globală de smartphone-uri, vă lipsește pădurea pentru copaci. Și, în unele cazuri, acest lucru poate însemna diferența dintre succes și eșec – designul responsive are implicații pentru ratele de conversie, SEO, ratele de respingere și multe altele.

Abordarea de proiectare web receptivă

Ceea ce este de obicei ignorat despre RWD este că nu este vorba doar despre ajustarea aspectului paginilor dvs. web; în schimb, accentul ar trebui să fie pe adaptarea logică a site-ului dvs. pentru utilizare pe diferite dispozitive. De exemplu: utilizarea mouse-ului nu oferă aceeași experiență de utilizator ca, de exemplu, ecranul tactil. Nu ești de acord? Aspectele dvs. mobile responsive vs. desktop ar trebui să reflecte aceste diferențe.

În același timp, nu doriți să vă rescrieți complet site-ul pentru fiecare dintre zecile de dimensiuni diferite de ecran pe care ar putea fi vizualizat - o astfel de abordare este pur și simplu imposibilă. În schimb, soluția constă în implementarea elementelor flexibile de design responsive care utilizează același cod HTML pentru a se ajusta la dimensiunea ecranului utilizatorului.

Din punct de vedere tehnic, soluția constă în acest tutorial de design responsive: utilizarea interogărilor media CSS, pseudo-elementelor, layout-urilor de grilă set flexibile și a altor instrumente pentru a se ajusta dinamic la o rezoluție dată.

Interogări media în design receptiv

Tipurile media au apărut pentru prima dată în HTML4 și CSS2.1, ceea ce a permis plasarea de CSS separat pentru ecran și imprimare. În acest fel, a fost posibil să se stabilească stiluri separate pentru afișarea computerului unei pagini față de imprimarea acesteia.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

sau

 @media screen { * { background: silver } }

În CSS3, puteți defini stiluri în funcție de lățimea paginii. Deoarece lățimea paginii se corelează cu dimensiunea dispozitivului utilizatorului, această capacitate vă permite astfel să definiți diferite aspecte pentru diferite dispozitive. Notă: interogările media sunt acceptate de toate browserele majore.

Această definiție este posibilă prin setarea proprietăților de bază: max-width , device-width , orientation , and color . Sunt posibile și alte definiții; dar în acest caz, cele mai importante lucruri de reținut sunt rezoluția minimă (lățimea) și setările de orientare (peisaj vs. portret).

Exemplul CSS receptiv de mai jos arată procedura de inițiere a unui anumit fișier CSS în raport cu lățimea paginii. De exemplu, dacă 480px este rezoluția maximă a ecranului dispozitivului curent, atunci se vor aplica stilurile definite în main_1.css.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

De asemenea, putem defini diferite stiluri în cadrul aceleiași foi de stil CSS, astfel încât acestea să fie utilizate numai dacă anumite constrângeri sunt îndeplinite. De exemplu, această porțiune a CSS-ului nostru receptiv ar fi folosită numai dacă dispozitivul actual avea o lățime de peste 480 px:

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

„Zoom inteligent”

Browserele mobile folosesc așa-numitul „zoom inteligent” pentru a oferi utilizatorilor o experiență de lectură „superioară”. Practic, zoomul inteligent este folosit pentru a reduce proporțional dimensiunea paginii. Acest lucru se poate manifesta în două moduri: (1) zoom inițiat de utilizator (de exemplu, atingerea de două ori pe ecranul unui iPhone pentru a mări pe site-ul web curent) și (2) afișarea inițială a unei versiuni mărite a unei pagini web pe sarcină.

Având în vedere că putem folosi interogări media receptive pentru a rezolva oricare dintre problemele la care ar putea fi vizat zoom-ul inteligent, este adesea de dorit (sau chiar necesar) să dezactivați zoomul și să vă asigurați că conținutul paginii dvs. umple întotdeauna browserul:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Setând initial-scale la 1, controlăm nivelul de zoom inițial al paginii (adică cantitatea de zoom la încărcarea paginii). Dacă v-ați proiectat pagina web pentru a fi receptivă, atunci aspectul dvs. fluid și dinamic ar trebui să umple ecranul smartphone-ului într-un mod inteligent, fără a necesita nici un zoom inițial.

În plus, putem dezactiva complet zoomul cu user-scalable=false .

Lățimi de pagină

Să presupunem că doriți să furnizați trei aspecte de pagină diferite: unul pentru desktop-uri, unul pentru tablete (sau laptopuri) și unul pentru smartphone-uri. Ce dimensiuni de pagină ar trebui să vizați ca decupaje (de exemplu, 480 px)?

Din păcate, nu există un standard definit pentru lățimea paginii de vizat, dar sunt adesea folosite următoarele exemple de valori receptive:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Cu toate acestea, există o serie de definiții diferite ale lățimii. De exemplu, 320 și mai sus are cinci incremente implicite de interogare media CSS3: 480, 600, 768, 992 și 1382 px. Alături de exemplul dat în acest tutorial de dezvoltare web responsive, aș putea enumera cel puțin alte zece abordări.

Cu oricare dintre aceste seturi rezonabile de incremente, puteți viza majoritatea dispozitivelor. În practică, de obicei, nu este nevoie să se ocupe separat de toate exemplele de lățimi ale paginilor menționate mai sus - șapte rezoluții diferite sunt probabil exagerate. Din experiența mea, 320px, 768px și 1200px sunt cele mai frecvent utilizate; aceste trei valori ar trebui să fie suficiente pentru a viza telefoanele inteligente, tabletele/laptopurile și, respectiv, desktop-urile.

Psuedo-Elemente

Pe baza interogărilor media receptive din exemplul anterior, este posibil să doriți să afișați sau să ascundeți anumite informații în mod programat, în funcție de dimensiunea dispozitivului utilizatorului. Din fericire, acest lucru poate fi realizat și cu CSS pur, așa cum este subliniat în tutorialul de mai jos.

Pentru început, ascunderea unor elemente ( display: none; ) poate fi o soluție excelentă atunci când vine vorba de reducerea numărului de elemente de pe ecran pentru aspectul unui smartphone, unde aproape întotdeauna există spațiu insuficient.

Dar, dincolo de asta, poți fi creativ și cu pseudo-elemente CSS (selectori), de exemplu, :before și :after . Notă: încă o dată, pseudo-elementele sunt acceptate de toate browserele majore.

Pseudo-elementele sunt folosite pentru a aplica stiluri specifice unor anumite porțiuni ale unui element HTML sau pentru a selecta un anumit subset de elemente. De exemplu, pseudo-elementul :first-line vă permite să definiți stiluri doar pe prima linie a unui anumit selector (de exemplu, p:first-line se va aplica la prima linie a tuturor p -urilor). În mod similar, pseudo-elementul a:visited vă va permite să definiți stiluri a toate fișierele cu linkuri vizitate anterior de utilizator. În mod clar, acestea pot fi utile.

Iată un exemplu simplu de design receptiv în care creăm trei aspecte diferite pentru un buton de conectare, câte unul pentru desktop, tabletă și smartphone. Pe smartphone, vom avea o pictogramă singură, în timp ce tableta va avea aceeași pictogramă însoțită de „Nume utilizator”. În cele din urmă, pentru desktop, vom adăuga și un scurt mesaj de instrucțiuni („Inserați numele de utilizator”).

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

Folosind doar pseudoelementele :before și :after , realizăm următoarele:

Pentru mai multe despre magia pseudo-elementelor, Chris Coyier are un articol bun despre CSS-Tricks.

Deci, de unde ar trebui să încep?

În acest tutorial, am stabilit câteva dintre elementele de bază ale designului web receptiv (adică, interogări media și pseudo-elemente) și am prezentat câteva exemple pentru fiecare. Unde mergem de aici?

Primul pas pe care ar trebui să-l faceți este să organizați toate elementele paginii dvs. web în diferite dimensiuni de ecran.

Aruncă o privire la versiunea desktop a aspectului prezentat mai sus. În acest caz, conținutul din stânga (dreptunghiul verde) ar putea servi ca un fel de meniu principal. Dar atunci când dispozitivele cu rezoluție mai mică sunt în uz (de exemplu, o tabletă sau un smartphone), ar putea avea sens ca acest meniu principal să fie afișat în lățime completă. Cu interogări media, puteți implementa acest comportament după cum urmează:

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Din păcate, această abordare de bază este adesea insuficientă, deoarece front-end-ul tău crește în complicații. Deoarece organizarea conținutului unui site diferă adesea semnificativ între versiunile mobile și desktop, experiența utilizatorului depinde în cele din urmă de utilizarea nu numai a CSS-ului receptiv, ci și a HTML și JavaScript.

Atunci când se determină layout-uri receptive pentru diferite dispozitive, mai multe elemente cheie sunt importante. Spre deosebire de versiunile desktop în care avem suficient spațiu pentru conținut, dezvoltarea smartphone-urilor este mai solicitantă. Mai mult ca niciodată, este necesar să se grupeze conținuturi specifice și să se definească ierarhic importanța părților individuale.

Diversele utilizări ale conținutului dvs. sunt, de asemenea, importante. De exemplu, atunci când utilizatorul dvs. are un mouse, poate seta cursorul deasupra anumitor elemente pentru a obține mai multe informații, astfel încât dvs. (în calitate de dezvoltator web) puteți lăsa unele informații de colectat în acest fel - dar aceasta nu va fi cazul în care utilizatorul dvs. este pe un smartphone.

În plus, dacă lăsați butoane pe site-ul dvs. care apoi se redau pe smartphone-uri ca fiind mai mici decât un deget obișnuit, veți crea incertitudine în utilizarea și senzația site-ului dvs. Observați că în imaginea de mai sus, vizualizarea web standard (din stânga) face unele elemente complet inutilizabile atunci când sunt vizualizate pe un dispozitiv mai mic.

Un astfel de comportament va crește, de asemenea, șansele ca utilizatorul dvs. să facă o eroare, încetinind experiența acestuia. În practică, acest lucru se poate manifesta prin scăderea vizualizărilor de pagină, mai puține vânzări și mai puțină implicare generală.

Alte elemente de design responsive

Când folosiți interogări media, trebuie să aveți în vedere comportamentul tuturor elementelor paginii, nu doar al celor care sunt vizate, în special atunci când utilizați grile fluide, caz în care (spre deosebire de dimensiunile fixe) pagina va fi complet completată la orice dată. moment, crescând și micșorând proporțional dimensiunea conținutului. Deoarece lățimile sunt setate în procente, elementele grafice (de exemplu, imaginile) pot fi distorsionate și deformate într-un aspect atât de fluid. Pentru imagini, o soluție este următoarea:

 img { max-width: 100% }

Alte elemente ar trebui tratate în mod similar. De exemplu, o soluție excelentă pentru pictograme în RWD este utilizarea IconFonts.

Câteva cuvinte despre sistemele cu rețea fluidă

Când discutăm despre procesul de adaptare completă a designului, ne uităm adesea la experiența optimă de vizionare (din perspectiva utilizatorului). O astfel de discuție ar trebui să includă utilizarea maximă facilitată, importanța elementului (pe baza regiunilor vizibile ale paginii), lectura facilitată și navigarea intuitivă. Dintre aceste categorii, una dintre cele mai importante componente este ajustarea lățimii conținutului . De exemplu, așa-numitele sisteme de rețea fluidă au elemente setate, adică elemente bazate pe lățimi relative ca procente din întreaga pagină. În acest fel, toate elementele din sistemul de web design responsive se adaptează automat cu dimensiunea paginii.

Deși aceste sisteme de rețea fluidă sunt strâns legate de ceea ce am discutat aici, ele sunt într-adevăr o entitate complet separată care ar necesita un tutorial suplimentar pentru a fi discutat în detaliu. Prin urmare, voi menționa doar câteva cadre majore care suportă un astfel de comportament: Bootstrap, Unsemantic și Brackets.

Concluzie

Până de curând, optimizarea site-ului web era un termen rezervat exclusiv pentru personalizarea funcționalității pe baza diferitelor browsere web. Pe lângă lupta inevitabilă cu diferite standarde de browser cu care ne confruntăm astăzi, acest termen presupune acum adaptarea la dispozitive și dimensiunile ecranului cu design web receptiv. Pentru a o tăia pe web modern, site-ul dvs. trebuie să știe nu numai cine îl vede, ci și cum .