Design adaptiv

Astăzi, tot mai multe gadgeturi câștigă popularitate - smartphone-uri, tablete, "ceasuri inteligente" și alte dispozitive care permit accesul la internet și vizualizarea conținutului site-urilor web. Conform unor estimări, aproape jumătate din traficul de internet este generat de astfel de gadgeturi, cu rezoluții ale ecranului diferite față de cele ale ecranelor computerelor standard.

Această răspândire a gadgeturilor aduce noi oportunități pentru dezvoltarea site-urilor web, atragerea de noi vizitatori, promovarea serviciilor de informare etc. Dar, în același timp, apar și noi probleme.

Problema principală constă în faptul că o pagină web standard va arăta diferit pe diferite dispozitive cu diferite rezoluții ale ecranului. Soluția inițială la această problemă a fost crearea unor versiuni speciale pentru dispozitive mobile.

La începuturile răspândirii telefoanelor mobile, utilizatorii puteau accesa site-uri wap speciale prin protocolul WAP, scrise în wml - un limbaj bazat pe xml, asemănător cu html. De exemplu, o pagină web simplă în acest limbaj de marcare ar putea avea următorul cod:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml" >
<wml>
 <card id="main" title="WapSite">
   <p mode="wrap">Pagina simplă în limbajul WML.</p>
 </card>
</wml>

Cu toate acestea, dezvoltarea capabilităților gadgeturilor a dus la faptul că acum telefoanele mobile oferă mult mai multe posibilități pentru accesul și afișarea conținutului site-urilor, iar în scrierea acestor site-uri se utilizează același HTML5 și CSS3 folosit pentru site-urile obișnuite.

În plus, apariția unei varietăți tot mai mari de dispozitive a dus la necesitatea de a ajusta paginile web nu doar pentru ecranele mici ale smartphone-urilor sau tabletelor, ci și pentru ecranele mari ale televizoarelor cu ecran larg sau ale tabletelor uriașe precum Surface Hub, care de asemenea pot avea acces la internet.

Și pentru a soluționa problema compatibilității paginilor web cu cele mai diverse rezoluții ale celor mai diverse dispozitive a apărut conceptul de design adaptiv. Esența acestuia constă în scalarea adecvată a elementelor paginii web în funcție de lățimea ecranului.

Deși este încă posibil să întâlnim situații în care pentru un site se creează o versiune mobilă separată, adesea cu prefixul m, de exemplu, m.facebook.com, conceptul de design adaptiv devine tot mai comun și dominant.

Testarea designului adaptiv

În dezvoltarea paginilor web adaptative, ne putem confrunta cu dificultăți în testare, deoarece, în general, dezvoltarea se face pe computere obișnuite. Dar, din fericire, multe browsere moderne ne permit să emulăm lansarea unei pagini web pe un dispozitiv cu o anumită lățime a ecranului.

De exemplu, în Google Chrome trebuie să accesezi meniul Instrumente suplimentare -> Instrumente de dezvoltare. După deschiderea panoului de dezvoltare, la începutul meniului panoului poți apăsa pe iconița telefonului mobil, și după aceea poți emula afișarea paginii pe diferite dispozitive - de la telefoane mici la televizoare cu ecran larg:

În acest caz, se afișează pagina web așa cum ar arăta pe un dispozitiv iPhone 12 Pro. Dar, dacă dorești, poți alege un alt dispozitiv, sau chiar să creezi emulația unui dispozitiv nou care nu este în lista integrată.