Mis on responsive disain
Responsive ehk kohanduv disain tähendab kodulehte, mis kohandub automaatselt iga ekraani suurusega: telefonis üks vaade, tahvelarvutis teine, arvutis kolmas.
See ei ole eraldi mobiilileht, vaid üks veebileht, mis end ümber paigutab. Tekst, pildid ja menüü kohanduvad ekraani järgi.
Tänapäeval on kohanduv disain standard. Iga korralik koduleht peab töötama hästi nii telefonis kui ka arvutis.
Miks responsive disain on oluline
Enamik külastajaid avab veebilehti telefonis. Kui leht ei kohandu, kaotate suure osa publikust. Lisaks hindab Google esmajärjekorras lehe mobiiliversiooni.
Kuidas kohanduv disain töötab
Kohanduv leht ei ole joonistatud kindla laiusega. Veerud on määratud osana ekraani laiusest, pildid tõmbuvad kokku koos neid ümbritseva alaga ning CSS-i meediapäringud vahetavad paigutust kindlates murdepunktides. Näiteks kolm kõrvuti asetsevat teenusekasti muutuvad kitsal ekraanil üksteise all olevaks loendiks.
Enamasti kujundatakse kõigepealt mobiilivaade ja alles siis laiemad vaated. Nii jõuab väikesele ekraanile kõige olulisem ning arvutivaade saab lisaruumi, mitte vastupidi.
Näide: restorani menüü telefonis
Restorani kodulehel on menüü tehtud laia tabelina, kus on roa nimi, kirjeldus, allergeenid ja hind. Arvutis näeb see kena välja. Telefonis ei mahu tabel ekraanile, hinnaveerg jääb serva taha ja külaline peab lehte külgsuunas kerima.
Kohanduva lahenduse korral muutub iga rida telefonis eraldi kaardiks: nimi ja hind ülal, kirjeldus all. Laua broneerimise nupp püsib ekraani allservas ja telefoninumbrile vajutades algab kõne.
Levinud vead mobiilivaates
Leht võib tehniliselt kohanduda ja olla telefonis ikkagi ebamugav.
- Nupud ja lingid on nii väikesed või tihedalt koos, et sõrmega tabab valet.
- Osa sisust on mobiilis ära peidetud. Kuna Google indekseerib mobiiliversiooni, ei pruugi puuduv sisu otsingus arvesse minna.
- Hüpikaken katab telefonis kogu ekraani ja sulgemisnuppu ei ole näha.
- Lehte testitakse ainult arvutis brauseri akent kitsamaks tõmmates, mitte päris telefonis.
Kuidas oma kodulehte kontrollida
Avage koduleht oma telefonis ja tehke läbi kogu kliendi teekond: leidke teenus, vaadake hinda, täitke vorm. Proovige nii Androidi kui ka iPhone'iga, sest brauserid käituvad erinevalt.
Arvutis saab Chrome'i arendaja tööriistades valida seadme vaate ja näha lehte eri ekraanilaiustel. PageSpeed Insightsi mobiiliraport näitab lisaks, kas leht on telefonis piisavalt kiire.
Korduma kippuvad küsimused
Mis vahe on kohanduval disainil ja eraldi mobiililehel?
Eraldi mobiilileht on teine veebileht omaette aadressil, mida tuleb eraldi hallata. Kohanduv disain on üks leht ja üks sisu, mis paigutub ümber. Tänapäeval tehakse uued kodulehed kohanduvana.
Kas vana kodulehe saab muuta kohanduvaks?
Mõnikord saab kujundusmalli kohandada, kuid väga vana lehe puhul on redisain sageli mõistlikum, sest uuendamist vajavad korraga nii kood, kiirus kui ka sisu struktuur.
Kas kohanduv disain mõjutab SEO-d?
Jah. Google kasutab lehtede indekseerimisel ja hindamisel mobiiliversiooni. Kui leht on telefonis raskesti kasutatav või osa sisust puudub, mõjutab see positsioone ka arvutiotsingus.