Mis on kohanduv disain?

Kohanduv disain on veebidisaini ja arenduse lähenemisviis, mille puhul veebisaidi paigutus ja sisu automaatselt kohanduvad seadme ekraanisuurusega, olgu selleks lauaarvuti, tahvelarvuti või nutitelefon. Eesmärk on tagada optimaalne kuvamine ja kasutusmugavus kõigis resolutsioonides.

Põhiprintsiibid:

• Voolav võrk (Fluid Grid): Kasutada suhtelisi mõõtühikuid (protsendid, em, rem) fikseeritud pikslite asemel elementide suuruse määramiseks.
• Voolavad pildid (Flexible Images): Pildid skaleeruvad proportsionaalselt konteineri suurusega, vältides nende väljapääsu.
• Meedia päringud (Media Queries): CSS reeglid, mis võimaldavad rakendada erinevaid stiile sõltuvalt seadme omadustest, nagu ekraani laius, orientatsioon, resolutsioon.

Tüüpiline näide meedia päringute kasutamisest:

/* Põhistiilid */
.container {
    laius: 960px;
    margin: 0 auto;
}

/* Stilid väiksematele kui 768px ekraanidele */
@media (max-width: 767px) {
    .container {
        laius: 95%;
        padding: 0 10px;
    }
    .column {
        float: none;
        laius: 100%;
    }
}

Praktikas kontrollin ma:

1. Paigutuse kuvamine: Kas pole horisontaalset kerimist, kas plokid on õigesti paigutatud.
2. Teksti loetavus: Fonti suurus peaks olema mugav kõigis seadmetes.
3. Navigatsioon: Menüü peaks olema ligipääsetav ja mugav (näiteks "hamburger" menüü mobiilseadmetes).
4. Funktsionaalsus: Kõik interaktiivsed elemendid (nupud, vormid) peaksid töötama korrektselt.
5. Jõudlus: Laadimisaeg mobiilseadmetes. Piltide optimeerimine kasutades <picture> või srcset.

Põhieelised:

• Üks koodibaas kõigile seadmetele.
• SEO näitajate parandamine (Google eelistab kohanduvaid saite).
• Parem kasutajakogemus.
• Aja ja ressursside kokkuhoid, luues eraldi versioone.

Erinevus adaptivse disaini (Adaptive Design) ja kohanduva disaini vahel seisneb selles, et viimane kasutab fikseeritud punktide (breakpoints) kasutamist erinevate paigutuste rakendamiseks, samas kui kohanduv disain sujuvamalt kohandub mis tahes ekraanisuurusega. Need terminid kasutatakse sageli sünonüümidena erinevate seadmete arenduse kontekstis.