Web design responsive
Inainte de a invata cum sa iti faci pagina de web sa fie responsive, este util sa trecem rapid in revista definitia web designului responsive. De la englezescul RWD (Responsive Web Design), este o metoda de design web care cauta sa creeze pagini optimizate pentru a fi vizualizate pe diverse dispozitive (nu doar monitorul computerului desktop, ci si telefoane mobile si tablete.
In prezent, majoritatea dintre noi avem un smart phone, un telefon mobil care are multe aplicatii si care “prinde Net”. Asadar, putem intra pe aproape orice pagina web si naviga de pe aparatul nostru portabil. Cu toate acestea, ne incearca un sentiment usor de frustrare cand descoperim ca am dat peste un site care nu este navigabil de pe mobil sau tableta.
Pentru ca un site sa fie adaptat la monitoarele si specificatiile anumitor dispozitive, trebuie ca site-ul sa implementeze anumite masuri speciale de design. Acestea includ modificarea marimii textului, scrolling, butoanele, asezarea in pagina web, imaginile redimensionabile si flexibile.
Se folosesc media queries pentru a putea implementa diverse stiluri de CSS in functie de dimensiunea si specificatiile dispozitivului mobil prin care navigam pe Net.
De asemenea, paginile optimizate pentru diverse aparate trebuie sa includa un element de meta viewport la inceputul documentului. Acesta ofera browserului informatii cu privire la dimensiunile si scara paginii. De asemenea, se implementeaza scroll pe verticala, nu pe orizontala (acesta din urma fiind incomod si obositor).
In fine, punctele de intrerupere in pagina trebuie totodata sa fie determinate de continutul paginii web.
Un ultim punct asupra caruia ne aplecam sunt sabloanele de web design responsive care in prezent se incadreaza intr-una din urmatoarele categorii: column drop, layout shifter, tiny tweaks, fluid sioff-canvas. Acestea au fost create de Luke Wroblewski si stau la baza unei pagini responsive.
Toate acestea si mai mult puteti invata alaturi de Eweb Infopro!
Comments
Tags: Web design responsive