Ghid de web design partea 2/9

Structura – design-ul responsiv- partea 1

Din nefericire, crearea unei grile pentru un site nu este la fel de usoara ca pentru o revista sau un ziar unde stii exact dimensiunile fiecarei coloane. Pentru internet, nu este cazul. Paginile web pot fi vizitate de persoane care folosesc telefonul, tableta, calculatorul cu un monitor foarte mare sau doar un laptop. Aceeasi problema apare si cand navigatorul (browserul) de internet are marimi diferite ale ferestrei de pe care se vizioneaza site-ul. Prin urmare, nu stii niciodata cat de mare ar trebui sa fie grila ta incat sa fie vizibila si clara pentru orice tip de dispozitiv. Grila trebuie sa se adapteze pentru orice dimensiune si acest lucru introduce design-ul responsiv. Cu un numar tot mai mare de vizitatori de pe telefoanele mobile, este un lucru bun sa faci site-ul sa fie pregatit pentru accesarea sa de pe orice dispozitiv. Crearea unui site responsiv poate fi o provocare daca nu stii ce sa faci si cum sa faci. Pentru inceput, ar fi indicat sa folosesti % in loc de px, em sau alta unitate de masura atunci cand vine vorba de marimea unui element, marime pe care o definesti in CSS. A doua idee, ar fi sa folosesti un constructor cum este Elementor, care te lasa sa modifici pentru trei rezolutii diferite modul cum se afiseaza site-ul. Iar a trebuia idee este sa testezi pe cat mai multe dispozitive, rezolutii si navigatoare de internet site-ul tau. Ca o grila sa fie responsive, trebuie sa fie corect facuta. Puteti apela la noi prin pagina Web Design. Grila trebuie sa fie flexibila cand vine vorba de diferite marimi de ecran si prin urmare coloanele sa fie mai putin largi atunci cand se face un zoom in sau cand se foloseste un dispozitiv cu ecran mic, dar si numarul de coloane trebuie sa fie schimbat, impreuna cu pozitia elementelor care nu mai sunt asezate unul langa altul, ci unul sub altul definind chiar o singura coloana in loc de doua, trei, patru sau mai multe. In acelasi timp, acelasi site trebuie sa se largeasca daca navigarea pe el se face de pe un dispozitiv cu rezolutie mare. Acest lucru poate fi dificil, daca faci design-ul de la 0 folosind Ilustrator sau Photoshop, unde dimensiunile trebuie trecute clar si nu poti folosi % din marimea ecranului utilizatorului. De asemenea, vei fi nevoit sa faci aceeasi element grafic de mai multe ori, la diferite marimi si sa testezi pentru cel putin trei marimi de ecran cum arata ele. De aceea, foarte multa a inceput sa faca site-urile direct, folosind un constructor de pagini sau o platforma de management a continutului cum ar fi WordPress. Se castiga foarte mult timp. Altii insa folosesc o generatie noua de unelte cum ar fi Macaw.

Design-ul responsive este greu de invatat, mai ales atunci cand trebuie sa stii relatiile dintre grile. O regula buna este sa incepi design-ul pentru un ecran de dimensiuni reduse si apoi sa incepi design-ul pentru un ecran de dimensiuni medii, urcand mai departe la cel de dimensiuni mari. De obicei, daca incepi sa lucrezi la un design pentru laptop sau chiar pentru un dispozitiv cu un ecran si mai mare, te poti lovi de mai multe probleme cand incerci sa il faci sa arate corect si bine pentru un ecran mai mic. Trebuie sa intelegi cum functioneaza design-ul responsive si cum ar trebui sa arate astfel incat tu sa il adaptezi in timp ce il maresti la o scara mai mare. Sunt diverse unelte online care te lasa sa verifici design-ul pentru mai multe sisteme de operare, navigatoare, dispozitive si rezolutii. Pentru versiunea dedicata tabletelor, structura trebuie sa se adapteze astfel incat elementele sa se repozitioneze si sa isi micsoreze dimensiunile, pe cand, pentru telefoane, trebuie sa se repozitioneze si mai mult si sa se micsoreze si mai mult.  Trebuie sa te gandesti care ar fi punctele  de spargere (break points) in care un design pentru tableta se modifica in design pentru telefoane mobile. Care ar fi exact dimensiune de unde se incepe tranzitia de la tableta la telefoane. Elementor are implicit aceste dimensiuni care sunt: 1025px punctul de spargere pentru design-ul dedicat tabletei si 768px pentru telefon.