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

Dochita Zenoveiov a scris

Touchpoints Workshop

Brandingul nu e doar numele si logo-ul. Este si despre touchpointuri. Saptamana trecuta un prospect mi-a dezvaluit ca s-a intalnit cu noi doar pentru ca un fost client de-al nostru a insistat sa ne cunoasca, [...]

Citeste tot articolul from Design responsive pentru website-uri

Citeste tot articolul

Dochita Zenoveiov a scris

Nume evocativ

Cum isi construiesc asiaticii strategia de #naming. Cum isi aleg numele. Sa luam exemplul Samsung. E un nume descriptiv, evocativ sau abstract? Lee Byung-chull, fondatorul Samsung, a urmat cursurile Universitatii Waseda din Tokyo, Japonia, dar [...]

Citeste tot articolul from Design responsive pentru website-uri

Citeste tot articolul

Dochita Zenoveiov a scris

Customer Journey Workshop

Acesta se refera la toate interactiunile si etapele prin care trece un client in timp ce interactioneaza cu un brand. Customer Journey-ul include toate punctele de contact si canalele prin care un client vine in [...]

Citeste tot articolul from Design responsive pentru website-uri

Citeste tot articolul

Dochita Zenoveiov a scris

Customer experience

Saptamana trecuta m-a rugat un partener sa fac un workshop de brand cu echipa sa si cred ca a sosit momentul sa vorbesc despre workshopurile pe care le facem pentru ca sunt diverse, au obiective [...]

Citeste tot articolul from Design responsive pentru website-uri

Citeste tot articolul