Creare site responsive

Creare site responsive și optimizare pagini pentru traficul de pe dispozitivele mobile.Lăsând la o parte informațiile existente sau mai puțin actualizate, un site responsive nu este un alt site. La începutul internetului pe mobil, da, se direcționa vizitatorul spre versiunea mobila a site-ului. Astăzi, același site se „vede” bine și pe laptop și pe tabletă. Pentru a fi așa, un site este găndit „mobile first” cum se spune „pe-afară”. Pe măsură ce dimensiunea ecranului crește, se ajustează designul pentru a putea oferi aceeași experiență în utilizare. Informațiile nu sunt trunchiate și nici alterate în vreun fel. Calitatea imaginilor este la fel de bună și se păstrează proporțiile. Pentru a obține acest rezultat, se îmbină mai multe concepte din domeniu. Test

Creare site responsive folosind media queries

Cotele prestabilite ale celor mai întălnite dimensiuni de ecran sau media queries. În momentul când browserul afișează pagina pe un anumit ecran, ia în considerare instrucțiunile de afișare pentru acea dimensiune. De asemenea, poate face diferența între orientări- portret sau peisaj. Mai exact, recunoaște un ecran de Iphone  cu dimensiunile de 375/ 812 pixeli și respectă proporțiile definite.

Creare site responsive folosind expresii procentuale

Dimensionarea elementelor din pagină procentual. Renunțarea la stabilirea lățimii unui element în pixeli va oferi mai multă libertate în realizarea unui design responsive. Se poate spune acum că un element va ocupa 33% din ecran pentru a i se acorda o treime. Elementul respectiv se va adapta dimensiunii ecranului în acest fel. O grilă va fi de ajutor în realizarea de layout-uri împărțind dimensiunea ecranului la un număr de coloane, de obicei 12.

Unități de măsură raportate la dimensiunea ecranului

Pentru exprimarea de dimensiuni se pot folosi și „noile unități de măsură responsive”. Vom putea exprima dimensiunea unui text în „vw” sau „viewport width”. Practic 1vw = 1% din lățimea unui ecran și vom fi siguri că mărimea fontului va fi mereu raportată la dimensiunea ecranului respectiv.