Ghid de web design partea 3/9

Structura – design-ul responsiv- partea 2

Un sistem bun bazat pe grila te ajuta sa aduci structura potrivita site-ului tau, dar nu inseamna ca utilizatorii vor vedea elementele potrivite si vor fi indemnati la actiune asa cum trebuie. Pentru asta, ai nevoie de o ierarhie vizuala. Este esential sa arati vizitatoriilor care elemente sunt importante si care mai putin importante. Acest aspect este important in web design din cauza a trei motive:

• Utilizatorii sunt incredibil de nerabdatori. Ei pot gasi instant ceea ce vor si apoi sa plece, sau poate sa nu gaseasca nimic din ceea ce vor si tot pleaca instant. De aceea, este important ca elementele potrivite sa fie  evidentiate.
• Toata lumea sufera de ceea ce se numeste paralizia alegerii. De exemplu, daca esti intr-un supermarket si vezi ceva interesant ce ti-ar placea, s-ar putea sa te simti putin prea coplesit de alegerea pe care trebuie sa o faci si s-ar putea sa renunti sa mai cumperi, dar produsul se afla la o oferta speciala sau este pus intr-un raft diferit si nu alaturi de alte produse similare si atunci tu esti mai sigur pe tine ca vrei sa il cumperi. Acelasi lucru se intampla si cu site-ul tau. Daca oferi prea multe optiuni unui utilizator, acesta s-ar putea sa se simta coplesit si sa plece. Ai nevoie de o ierarhie pentru a stabili ce este important si ce este mai putin important.
• Trebuie sa iti ghidezi utilizatorii catre optiunile pe care tu vrei sa le aleaga. De exemplu, daca ai un site de donatii, vrei sa evidentiezi donatiile. Daca vinzi un program, vrei sa evidentiezi descarcarea acestuia. Daca oferi servicii, evidentiaza formularul de contact.

.

Teste

Site-urile facute de la 0, prin codare HTML, CSS, PHP si JS imbunatatesc functionalitatea si designul, dar trebuie verificate si testate pentru a fi corespunzatoare navigarii de pe orice dispozitiv, fie mobil sau nu.

Pentru a testa un site daca este responsive, poti folosi unealta lui Matt Kersley, disponibila la adresa https://mattkersley.com/responsive/ unde poti sa vezi exact cum arata site-ul tau pe dispozitive a caror latime este de 240, 320, 480, 768 si 1024 pixeli.

Codul

Pentru orice tip de dispozitiv mobil poti sa scrii cel putin o linie de cod CSS pentru a imbunatati designul. De obicei, aceasta linie de cod CSS, incepe cu specificarea rezolutiei minime sau maxime pentru care un element se modifica. Mai jos sunt cateva example, impreuna cu dispozitivele corespunzatoare. min-width semnifica latimea minima, pe cand max-width latimea maxima a dispozitivului respectiv pentru care un element isi modifica pozitia, marimea sau alte valori.

Tableta asezata vertical

@media (min-width: 481px) and (max-width: 768px)

Telefon asezata  orizontal

@media (min-width: 321px) and (max-width: 480px)

Telefon asezata  vertical

@media (max-width: 320px)

Acum, sub fiecare linie unde este mentionata rezolutia scrii codul CSS intre { }. Ar trebui sa micsorezi si sa repozitionezi elemente astfel incat sa nu se suprapuna si sa aibe sens. Atat continutul, cat si alte elemente trebuie sa fie lizibile. Uneori insa, poate vrei sa schimbi culorile sau alte insusiri care nu tin neaparat de responsive. Poti sa faci si asta, dupa cum urmeaza in exemplul de mai jos

#banner {margin-left:auto; margin-right:auto; width:1000px; }
.widget-text {padding:10px; background-color:#FCFCFC;  }