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

Avantajele si dezavantajele unui website de tipul One Page

Site-urile sunt o esentiale pentru orice afacere sau proiect personal. Site-urile de tipul “one page” (o pagina), au devenit foarte populara in ultimii ani. Dar care sunt avantajele si dezavantajele unui astfel de site? Sa [...]

Read More... from Design responsive pentru website-uri

Citeste tot articolul

INOVEO a scris

De ce culorile alese arata diferit in print fata de online

Culorile joaca un rol crucial in definirea identitatii vizuale a unui brand. De la celebrul rosu al Coca-Cola la albastrul vibrant al Facebook, culorile au puterea de a evoca emotii, de a crea recunoastere a [...]

Read More... from Design responsive pentru website-uri

Citeste tot articolul

INOVEO a scris

Optimizarea portofoliului de branduri

Optimizarea unui portofoliu de brand implica gestionarea si organizarea strategica a ofertei de produse ale unei companii pentru a maximiza valoarea globala a marcii si cota de piata. Pentru a optimiza portofoliul de marci pentru [...]

Read More... from Design responsive pentru website-uri

Citeste tot articolul

INOVEO a scris

Portofoliu de produse vs portofoliu de branduri

Portofoliul de produse se refera la gama de produse individuale pe care o companie le ofera intr-un anumit moment. Acesta cuprinde toate produsele sau serviciile pe care le comercializeaza o companie, fie ele similare sau [...]

Read More... from Design responsive pentru website-uri

Citeste tot articolul