Šta je adaptivna verzija stranice?

Responsiv dizajn je pristup u razvoju veb stranica gde se dizajn i sadržaj stranice automatski prilagođavaju veličini ekrana uređaja korisnika (desktop, tablet, pametni telefon).

Osnovni principi:

• Fleksibilne mreže (Fluid Grids): Korišćenje procenata ili drugih relativnih jedinica za određivanje dimenzija elemenata umesto fiksnih piksela.
• Fleksibilne slike (Flexible Images): Proporcionalno skaliranje slika tako da ne izlaze iz okvira.
• Media Queries: CSS pravila koja omogućavaju primenu različitih stilova u zavisnosti od karakteristika uređaja, kao što su širina ekrana, visina, orijentacija i rezolucija.

Primer korišćenja media query u CSS:

/* Opšti stilovi za sve uređaje */
body {
    font-size: 16px;
}

/* Stilovi za ekrane do 768px širine (npr. tableti i mobilni telefoni) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Primer promene rasporeda navigacije */
        display: flex;
        flex-direction: column;
    }
}

/* Stilovi za ekrane do 480px širine (npr. mobilni telefoni) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Slike zauzimaju punu širinu kontejnera */
        max-width: 100%;
        height: auto;
    }
}

Cilj responzivnog dizajna je da obezbedi udobno korišćenje sajta na bilo kom uređaju bez potrebe za pravljenjem posebnih verzija stranica.

Testiranje responzivne verzije uključuje proveru:

• Ispravnog prikaza elemenata na različitim rezolucijama.
• Lakote navigacije i interakcije.
• Nedostatka horizontalnog skrolovanja.
• Čitljivosti teksta.
• Performansi učitavanja stranice.