Înainte de a pune în practică un layout, trebuie să clarificați câteva aspecte de bază. Astfel, ar trebui să decideți mai întâi tipul de layout dorit. În principiu, există trei posibilități aici.
• Fix
• Flexibil
• Elastic
CSS permite layouturi cu dimensiuni fixe sau flexibile. În cazul layouturilor fixe, de obicei se lucrează cu dimensiuni în pixeli. În schimb, layouturile flexibile se bazează pe valori procentuale. Ambele tipuri de layouturi au avantaje și dezavantaje.
Layouturile fixe sunt folosite în mod obișnuit atunci când graficele sunt utilizate pentru a contura layoutul. (Deși aici există și excepții prin utilizarea de grafică de fundal CSS). Când layouturile necesită poziționare exactă în pixeli a elementelor, se recurge de obicei la poziționarea fixă. În acest tip de layout, de obicei cel puțin lățimea layoutului este stabilite la un număr fix de pixeli. Această lățime vizează de obicei anumite rezoluții de ecran.
Situația este diferită în cazul layouturilor flexibile. Aici nu se specifică o lățime fixă. Layoutul se adaptează lățimii ferestrei browser-ului.
În cazul acestor layouturi, de exemplu, lățimea se specifică în procente. Dacă un utilizator își modifică dimensiunea ferestrei browser-ului, dimensiunile layoutului se modifică și ele.
Datorită proprietăților CSS moderne, există acum și o altă variantă de layout, numită layout responsiv. Aici, layoutul se modifică astfel încât să arate complet diferit pe un telefon inteligent față de un desktop. Aici, pe PSD-Tutorials.de, s-a lucrat, de exemplu, cu un astfel de layout. Atunci când utilizatorul accesează pagina pe un desktop cu o dimensiune "normală" a ferestrei browser-ului, imaginea arată astfel.
Dacă însă, redimensionați fereastra, se schimbă într-adevăr aranjarea elementelor prezente pe site.
Efortul pentru crearea unui layout responsiv este destul de ridicat. În cele din urmă, trebuie să se determine dimensiunea ecranului vizitatorului și apoi să i se prezinte un layout potrivit. Și acest layout potrivit trebuie dezvoltat efectiv pentru diferitele dimensiuni ale ecranelor. Un vizitator care accesează site-ul dvs. cu un monitor mare va primi, de exemplu, un layout cu trei coloane. În schimb, un alt vizitator care accesează site-ul dvs. cu un smartphone va vedea un layout cu o singură coloană.
Avantaje și dezavantaje ale variantelor
Înainte de a implementa un layout, trebuie să decideți care dintre formele de layout menționate doriți să folosiți. Aș dori să vă arăt rapid avantajele și dezavantajele layouturilor fixe.
• Șabloanele de design pot fi implementate cel mai ușor aici
• Dacă vă orientați după rezoluțiile standard, nu există aproape deloc probleme la afișarea site-ului
• Layouturile sunt ușor de înțeles și de transmis. (Acest avantaj vă ajută, desigur, atunci când, ca dezvoltator web, doriți să explicați un layout unui client).
Layouturile fixe au însă și dezavantaje.
• Datorită dimensiunilor fixe, sunt inflexibile și nu se adaptează, de exemplu, la ecrane foarte mici sau mari. Adesea, se pierde mult spațiu.
• Ele sunt supuse unor restricții în ceea ce privește accesibilitatea.
Layouturile flexibile au și ele puncte forte și slabe. Începând cu avantajele.
• Layouturile se adaptează automat la dimensiunea ferestrei browser-ului
• Astfel, vizitatorii pot influența foarte mult modul de afișare al site-ului
Dar există și dezavantaje.
• Ca dezvoltator, este dificil să controlați rezultatele. Așadar, cerințele privind layoutul pot fi implementate doar parțial.
• Conținutul paginilor trebuie ajustat în mod laborios.
• La ecranele mari, pot apărea probleme de afișare a textelor scurte într-un mod "neplăcut", deoarece acestea vor fi adesea afișate doar pe o singură linie. (Pentru aceasta, CSS oferă proprietăți corespunzătoare, cum ar fi min-width).
Un alt tip de layout reprezintă un compromis între layouturile fixe și flexibile. Acesta sunt layouturile elastice. Principalul lor element este unitatea de măsură em. (În ultimul timp, rem devine din ce în ce mai popular. În contrast cu em, rem se orientează mereu la elementul rădăcină, nu, cum este cazul cu em, la elementul părinte).
În aceste layouturi, lățimea și înălțimea sunt flexibile. Designul paginii se redimensionează proporțional cu dimensiunea ferestrei browser-ului. Acest tip de design este cu siguranță cel mai complex în ceea ce privește implementarea practică. Acest lucru se datorează faptului că trebuie să știți foarte precis în avans cum se comportă elementele într-o fereastră browser în schimbare. Layouturile elastice sunt folosite în special pentru site-urile web care oferă multe fotografii și videoclipuri.
Avantajele layouturilor elastice:
• Spațiul disponibil este exploatat optim
• Conținutul este afișat proporțional întotdeauna cât mai mare posibil
Dar desigur, layouturile elastice au și dezavantaje.
• Designul acestor layouturi este foarte complex
• Implementarea este tot mai dificilă
Greul alegerii
Trebuie să decideți deci ce variantă dintre cele menționate doriți să folosiți. Dacă sunteți la începutul dezvoltării HTML/CSS, vă recomand să începeți cu un layout fix. În schimb, cei care au deja cunoștințe avansate în domeniul dezvoltării web ar trebui să lucreze direct cu layouturi responsive. Aici sunteți pe drumul cel bun, indiferent de dispozitivul cu care va fi accesat în cele din urmă site-ul dvs.
