Scris de Marius Chiriac

Design responsive pentru website-uri

O data cu aparitia primelor smartphone-uri, design-ul site-urilor s-a schimbat radical.

Unul din cele mai folosite buzzword-uri cand vine vorba de crearea de website-uri este „responsive”. El reprezinta o metoda sau filozofie de dezvoltare a site-urilor unde se doreste adaptarea content-ului si design-ului in functie de dispozitivul pe care este vizualizat. A devenit o necesitate acum cand suntem inconjurati de o multitudine de diverse dispozitive care au marimi si modalitati de interactionare complet diferite.

Programatorii de frontend au mai multe metode in care pot obtine rezultatul dorit si de cele mai multe ori se foloseste o combinatie adaptata pentru necesitatile fiecarui site:

1. Media Queries in CSS. Ele sunt comenzi scrise in CSS ce indica unui browser ce parte din cod sa fie incarca in functie de tipul si dimensiunea ecranelor. Codul de mai jos va indica browser-ului ca este necesar ca dimensiunea ecranului sa fie mai mica de 800 pixeli pentru a fi folosit:

@media screen and (max-width:800px){
.text{ font-size: 14px; }
}

2. Grid Layout in CSS. Este o serie de comenzi care creaza un sistem de layout de tip grid. iti permite sa aranjezi elementele din site in coloane si randuri ce pot fi rearanjate in functie de pozitie, marime si layer. Spre deosebire de Flexbox care aranjeaza elementele pe o singura directie (fie pe rand, fie pe coloana), Grid poate aranja elementele pe doua directii controland randurile si coloanele.

3. Unitati de lungime relative: em, rem, ex, ch, vw, vh, vmin, vmax, %. Aceste unitati de lungime iti vor permite sa crezi website-uri perfect scalabile si poti sa le combini cu unitati absolute (precum px) folosind functia calc(). Le poti folosi la orice element ce doresti sa fie redimensionat in functie de alt element din site sau de dispozitivul folosit.

Unul din preferatele mele metode de dezvoltare a unui website responsive este sa scalez textul in functie de latimea browser-ului cu un cod CSS ce imi permite sa dau o dimensiune minima la care se adauga o dimensiune relativa precum:

.text{
font-size: calc(10px + .6vw);
}

4. Viewport meta tag. Pe dispozitivele mobile precum cele facute de Apple, fara adaugarea acestui tag in head-ul unui website, site-urile se vor scala intr-um mod tipic ecranelor monitoarelor de desktop ceea ce conduce la poze si texte foarte mici, in mare parte datorita faptului ca rezolutiile unui ecran sunt prea mari. Acest tag iti va permite sa controlezi modul in care elementele din site se vor scala.

Toate website-urile create de mine la INOVEO folosesc un design responsive si consider design-urile complicate drept un challenge.

Mai multe articole

INOVEO a scris

Importanta designului sustenabil in branding

Daca toata lumea vorbeste despre sustenabilitate, nu putem sa nu vorbim si noi, din perspectiva brandingului. Constientizarea ecologica a fost dintotdeauna o tendinta in crestere. Acum, mai mult ca niciodata, brandurile se afla sub presiunea [...]

Citeste tot articolul from Design responsive pentru website-uri

Citeste tot articolul

INOVEO a scris

Fonturile sans serif „ciudate”: Trendul anului 2024

Evolutia si schimbarile tendintelor de la un sezon la altul sunt cele mai pregnante atunci cand vine vorba de design. In ceea de priveste designul grafic, printre altele, anul acesta ne aduce in prim-plan o [...]

Citeste tot articolul from Design responsive pentru website-uri

Citeste tot articolul

INOVEO a scris

Cat de complex trebuie sa fie website-ul tau?

Este clar ca website-urile devin din ce in ce mai mari si complexe si de vina sunt atat programatorii, cat si clientii. Programatorii vor sa arate ca pot face lucuri complicate, iar clientii vor website-uri [...]

Citeste tot articolul from Design responsive pentru website-uri

Citeste tot articolul

INOVEO a scris

INOVEO raspunde intrebarilor Anuarului ZF Branduri Romanesti 2024

Care e reteta pentru crearea unui brand? De cat timp ai nevoie ca sa il construiesti? Cat costa? De unde incepi si unde termini? Care sunt ingredientele-cheie? De ce te poti lipsi, de ce nu? [...]

Citeste tot articolul from Design responsive pentru website-uri

Citeste tot articolul