Responsiivne veebidisain

Responsiivne veebidisain on lähenemine, kus üks ja sama koduleht kohandub automaatselt vaataja ekraaniga: telefonis näed ühte veergu, tahvelarvutis kahte, suurel monitoril kolme või rohkemat. Aadress ja HTML-kood jäävad samaks, muutub ainult see, kuidas CSS sisu kuvab. Eraldi mobiiliversiooni ei ole vaja ehitada ega hoida.

Lühidalt sellest, mida responsiivne leht vajab:

Element	Mida see teeb	Peamine vahend
Viewport	Käsib mobiilibrauseril kasutada seadme tegelikku laiust	meta viewport HTML-i päises
Painduv ruudustik	Veerud ja plokid venivad ning murduvad ekraani järgi	protsendid, fr, Flexbox, CSS Grid
Paindlikud pildid	Pilt ei ületa oma konteinerit ega koorma telefoni üle	max-width: 100%, srcset, sizes
Meediapäringud	Muudavad paigutust kohas, kus sisu hakkab katki minema	@media (min-width: …)

Mis see on ja kust termin pärineb

Mozilla arendajadokumentatsiooni järgi ei ole responsiivne veebidisain eraldi tehnoloogia, vaid lähenemine ja hea tava, mis laseb paigutusel kohaneda seadme ekraaniga, olgu see telefon, tahvel, teler või kell.

Termini võttis kasutusele veebidisainer Ethan Marcotte. Ta ütleb ise, et kasutas seda esimest korda 6. aprillil 2010 konverentsil An Event Apart Seattle’is. Tuntuks sai mõiste tema samal aastal veebiajakirjas A List Apart ilmunud artikli kaudu. Marcotte nimetas kolm koostisosa: painduvad ruudustikud, paindlikud pildid ja meediapäringud.

Responsiivset disaini ei tasu segi ajada adaptiivse disainiga. Google’i veebiõppeportaali web.dev järgi kombineerib adaptiivne paigutus meediapäringuid fikseeritud laiusega paigutustega, responsiivne aga meediapäringuid venivate (liquid) paigutustega. Adaptiivne leht hüppab mõne kindla laiuse vahel, responsiivne kohandub sujuvalt iga laiusega.

Miks see Eesti ettevõtjale oluline on

Eesti veebiliikluses on arvuti endiselt tugev. StatCounteri andmetel jagunes liiklus 2026. aasta oktoobris Eestis nii: lauaarvuti 56,63%, mobiil 42,22% ja tahvelarvuti 1,14%. Selle põhjal ei saa ühtegi seadet ignoreerida: kümnest külastajast ligi neli tuleb telefonist ja ülejäänud peamiselt arvutist. Eraldi mobiili- ja arvutiversiooni hoidmise asemel on mõistlik ehitada üks leht, mis töötab mõlemal.

Teine põhjus on otsingumootor. Google kasutab indekseerimiseks ja järjestamiseks lehe mobiiliversiooni, mida uuritakse nutitelefoni robotiga. See on nn mobile-first indexing. Google teatas 31. oktoobril 2023, et üleminek sellele on lõppenud. Google Search Centrali juhendis soovitatakse just responsiivset disaini, sest seda on kõige lihtsam teostada ja hallata. Sama HTML ja sama aadress tähendavad ka seda, et mobiilis ei jää puudu sisust, mis arvutis on olemas.

Kui sul on veel koduleht tegemata, leiad praktilise algusjuhise artiklist kodulehe tegemine. Laiemalt visuaalsest küljest räägib veebidisaini juhend.

Viewport ja mobiilikeskne CSS

Esimene samm on viewporti metasilt lehe päises:

<meta name="viewport" content="width=device-width, initial-scale=1">

Ilma selleta eeldab mobiilibrauser, et leht on umbes 980 pikslit lai, renderdab lehe sellel laiusel ja suumib välja. Siis ei hakka sinu meediapäringud kunagi töötama. Silt width=device-width ütleb brauserile, et kasutada tuleb seadme tegelikku laiust, ja initial-scale=1 määrab algseks suumiks 100%.

Teine samm on mobile-first-lähenemine. Kirjuta põhistiilid kitsa ekraani jaoks ja lisa laiemate ekraanide jaoks min-width päringud. MDN kirjeldab seda nii: mobiilis on lihtne üheveeruline paigutus ja mitmeveeruline paigutus lisatakse siis, kui laiust jätkub.

Näide kolmest kaardist:

• põhistiil: kaardid on üksteise all (üks veerg);
• @media (min-width: 40em): kaardid kahes veerus (40 em on vaikimisi 16-pikslise kirjasuurusega 640 pikslit);
• @media (min-width: 64em): kaardid kolmes veerus (1024 pikslit).

Need arvud on näide, mitte reegel. Nii MDN kui ka web.dev soovitavad valida murdepunkti (breakpoint) kohas, kus sisu ise hakkab katki minema, näiteks kui tekstirida jääb liiga kitsaks või veerg liiga laiaks, mitte konkreetse telefonimudeli järgi. MDN soovitab väljendada murdepunkte suhteliste ühikutega (näiteks em), mitte seadme pikslites.

Meediapäringuid ei ole alati vaja. MDN märgib, et Flexbox ja CSS Grid loovad paindliku paigutuse ka ilma nendeta: Flexbox laseb elementidel kasvada ja kahaneda, Grid jagab vaba ruumi fr-ühikutega. Meediapäring tuleb mängu siis, kui paigutus peab muutuma, näiteks kui külgriba viiakse sisu alla.

Painduv kirjasuurus

Pealkirja kirjasuurust saab siduda ekraani laiusega funktsiooniga clamp(minimaalne, eelistatud, maksimaalne). Näiteks font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem) annab 320 piksli laiusel 24 pikslit ja 1280 piksli laiusel 48 pikslit; vahepeal kasvab suurus sujuvalt. Kitsamal ekraanil jääb suurus 24 piksli juurde ja laiemal 48 piksli juurde, nii et pealkiri ei muutu ei liiga väikeseks ega liiga suureks. Hoia eelistatud väärtuses rem-osa, et kasutaja brauseri kirjasuuruse seade jääks mõjuma. MDN-i ligipääsetavuse märkuse järgi peaks maksimum olema vähemalt kaks korda suurem kui minimaalne väärtus, et tekst oleks suumitav 200%-ni.

Pildid

Piltide failisuurus mõjutab laadimisaega otseselt, nii et siin on sageli kõige suurem võit.

• Laiuse piiramine. Lihtsaim reegel on img { max-width: 100%; height: auto; }, mis hoiab pildi konteineri sees.
• srcset ja sizes. srcset loetleb pildi eri suurused ja sizes ütleb brauserile, kui laiaks pilt lehel renderdatakse. Brauser valib siis sobiva faili. Kui kasutad srcset-is laiuse kirjeldajaid (näiteks 800w), lisa ka sizes.
• picture. Kui telefonis tahad hoopis teistsuguse väljalõikega pilti, kasuta picture-elementi source-lastega. Sees peab alati olema tavaline img.
• loading="lazy". Lehe alumiste piltide laadimine lükkub edasi, kuni need on vaateväljale lähenemas. Kui kasutad picture-elementi, pane loading sisemisele img-ile, mitte picture-ile. Lehe ülaosas olevat peamist pilti ära lükka edasi, sest see mõjutab lehe laadimisaega.
• width ja height. Lisa need atribuudid kõigile piltidele. Brauser arvutab nende põhjal kuvasuhte ja jätab ruumi enne pildi laadimist. Muidu hüppab tekst pildi saabudes alla ja see kasvatab Cumulative Layout Shifti (CLS) näitajat.

Google’i Core Web Vitalsi head väärtused on: suurima sisuelemendi kuvamise aeg (LCP) kuni 2,5 sekundit, interaktsiooni reageerimisaeg (INP) kuni 200 millisekundit ja CLS kuni 0,1. Neid hinnatakse 75. protsentiili järgi. Pildid mõjutavad otse LCP-d ja CLS-i, mistõttu loeb iga kilobait. Kui leht on aeglane, vaata ka juhendit lehe kiiruse optimeerimine.

Ligipääsetavus väikesel ekraanil

Responsiivne leht ei ole automaatselt kasutatav. WCAG 2.2 sisaldab mõõdetavaid nõudeid, mis puudutavad just väikest ekraani:

• Puuteala. AA-tasemel peab klõpsatav element olema vähemalt 24 × 24 CSS-pikslit (erandid on olemas, näiteks piisav vahe naaberelementidega). AAA-tasemel on soovituslik suurus 44 × 44 CSS-pikslit. Menüülingid ja nupud ei tohi olla sõrmele liiga väikesed.
• Teksti suurendamine. Tekst peab olema suurendatav kuni 200%-ni ilma sisu või funktsioonide kadumiseta. WCAG ei määra minimaalset kirjasuurust, nii et see jääb disaineri otsustada, aga suurendamine peab töötama.
• Reflow. Püstiselt kerivas sisus peab 320 CSS-piksli laiusel (see on töölaua 1280 piksli laiune aken 400% suumiga) olema võimalik lugeda ilma kahesuunalise kerimiseta. Erand on sisu, mille tähendus nõuab kahemõõtmelist paigutust, näiteks tabelid.

Ligipääsetavuse huvides ära keela metasildis suumimist.

Kuidas testida

1. Ava leht Chrome’is, vajuta F12 ja lülita sisse seadmerežiim (Device Mode). Vali Responsive ja lohista vaateakna käepidemeid või sisesta laius käsitsi.
2. Lülita menüüst More options > Show media queries sisse murdepunktide kuvamine vaateakna kohal.
3. Kitsenda vaateakent 320 pikslini ja kontrolli, et ei ilmuks horisontaalset kerimisriba.
4. Suumi brauseris lehte 200%-ni ja 400%-ni, et kontrollida teksti suurendamist.
5. Kontrolli lõpuks päris telefonis. Chrome märgib ise, et emulaator ei jäljenda kõiki erinevusi API-des, CSS-i toes ja mobiilibrauseri käitumises.

Kui tahad lehe tervist üldisemalt hinnata, aitab sind kodulehe analüüs.

Levinumad vead

• Viewporti silt puudub. Telefon näitab pisikeseks kokku surutud töölauaversiooni.
• Murdepunktid on valitud seadmete järgi. Uus telefon on teise laiusega ja paigutus läheb katki. Vali murdepunkt sisu järgi.
• Mobiilis peidetakse sisu. Google kasutab indekseerimisel mobiiliversiooni, seega peab mobiili HTML-is olema kogu sisu, mida tahad leitavaks teha: tekst, pildid, alt-tekstid, struktureeritud andmed ja lingid.
• Pildid on liiga suured. Telefon laeb 2000 piksli laiuse foto, mida kuvatakse 360 piksli laiuselt. Kasuta srcset-i.
• Liiga väikesed nupud ja lingid. Vaata puuteala nõudeid ülal.
• Kirjasuurus on fikseeritud pikslites. Kasuta rem-i, et brauseri seaded jääksid mõjuma.

Responsiivne disain ja ehitaja valik

Kui ehitad lehe valmislahendusega, näiteks WordPressi teemaga, ei pea sa neid reegleid ise kirjutama, aga pead valitud teema ära testima. Ava demoleht telefonis ja kitsa brauseriaknaga ning kontrolli menüüd, vorme ja pilte. Vaata ka juhendit WordPressiga kodulehe tegemiseks ja seda, kuidas kodulehe optimeerimine toetab otsingutulemusi.