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.