Kas ir adaptīvs izkārtojums?

Atbilstošs dizains ir pieejams ir pieeja tīmekļa dizainam un izstrādei, kurā vietnes izkārtojums un saturs automātiski pielāgojas ierīces ekrāna izmēram, vai tas būtu galddators, planšetdators vai viedtālrunis. Mērķis ir nodrošināt optimālu attēlojumu un ērtu lietošanu jebkura izšķirtspēja.

Galvenie principi:

Līdzena režģis (Fluid Grid): Izmantot relatīvas mērvienības (procentus, em, rem) vietā fiksētiem pikseļiem, lai noteiktu elementu izmērus.
Līdzīgas bildes (Flexible Images): Attēli mērojas proporcionāli konteineru izmēriem, novēršot to pārsniegšanu.
Mediju vaicājumi (Media Queries): CSS noteikumi, kas ļauj piemērot dažādus stilus atkarībā no ierīces īpašībām, piemēram, ekrāna platuma, orientācijas, izšķirtspējas.

Tipisks piemērs ar mediju vaicājumiem:

/* Galvenie stili */
.container {
    platums: 960px;
    margin: 0 auto;
}

/* Stili mazākiem par 768px ekrāniem */
@media (max-width: 767px) {
    .container {
        platums: 95%;
        padding: 0 10px;
    }
    .column {
        float: none;
        platums: 100%;
    }
}

Praktiskajā testēšanā es pārbaudu:

Izkārtojuma attēlojumu: Nav horizontālas slīdēšanas, bloki ir pareizi izvietoti.
Teksta lasāmību: Fonta izmērs ir ērts visās ierīcēs.
Navigāciju: Mēneis ir pieejams un ērts (piemēram, "burger" menedžments mobilajās ierīcēs).
Funkcionalitāti: Visi interaktīvie elementi (pogas, formas) darbojas pareizi.
Veiktspēju: Ielādes laiks mobilajās ierīcēs. Optimizēt attēlus ar <picture> vai srcset.

Galvenās priekšrocības:

Viena koda bāze visām ierīcēm.
Uzlabo SEO rādītājus (Google dod priekšroku atbilstošiem tīmekļa vietnēm).
Labāka lietotāja pieredze.
Laika un resursu ietaupījums, izveidojot atsevišķas versijas.

Atšķirība no adaptīvā dizaina (Adaptive Design) ir tā, ka pēdējais izmanto fiksētas punktu (breakpoints) vietas dažādu izkārtojumu piemērošanai, kamēr atbilstošais dizains ir gludāks un pielāgojas jebkuram ekrāna izmēram. Šie termini bieži tiek lietoti kā sinonīmi dažādu ierīču izstrādes kontekstā.