Responsiivne veebidisain: praktiline juhend
Responsiivsus ei tähenda seda, et leht mahub kitsale ekraanile. See tähendab, et leht on igal laiusel kasutatav — mis on rangem nõue ja tähendab mõnikord erinevat sisujärjestust, mitte ainult kitsamaid veerge.
See juhend katab praktilised otsused: murdepunktid, paigutus, pildid, puutesihtmärgid ja testimine.
Alusta kitsalt#
Kitsas ekraan on rangem piirang. Kui see töötab seal, on prioriteedid paigas.
- Kujunda kõigepealt kitsaim vaade ja otsusta, mis on tegelikult vajalik.
- Järjesta sisu tähtsuse järgi — mobiilis on see lugemisjärjekord.
- Lisa laiust ja lase paigutusel hingata, mitte lisa uusi elemente.
- Lisa murdepunkt siis, kui paigutus katki läheb, mitte konkreetse seadme järgi.
- Kontrolli, et sisu järjekord on loogiline ka ilma stiilita.
- Testi päris seadmel, mitte brauseriakna kitsendamisel.
Murdepunktid tuleb valida sisu, mitte seadmemudelite järgi. Seadmete nimekirjad vananevad; sisu piirid ei vanane.
Paindlik paigutus#
Kaasaegne CSS lahendab enamiku responsiivsusest ilma murdepunktideta.
| Tehnika | Milleks | Märkus |
|---|---|---|
| Flexbox | Ühemõõtmelised read ja veerud | Sobib navigatsioonile ja kaartidele |
| Grid | Kahemõõtmeline paigutus | Sobib lehe põhistruktuurile |
| clamp() | Sujuv tüpograafia | Väldib astmelisi hüppeid |
| minmax() ja auto-fit | Ise kohanduv ruudustik | Sageli asendab murdepunkti |
| Konteineri päringud | Komponendipõhine kohandumine | Sobib korduvatele komponentidele |
| Loogilised omadused | Toetab paremalt vasakule keeli | Vajalik mitmekeelses lehes |
auto-fit koos minmax-iga asendab tüüpilise kaardiruudustiku kolm murdepunkti ühe reaga CSS-i.
Pildid ja meedia#
Pildid on peaaegu alati suurim osa lehe kaalust ja responsiivsuse suurim praktiline probleem.
- Kasuta srcset ja sizes, et brauser valiks õige suuruse.
- Määra laius ja kõrgus, et vältida paigutuse hüppamist laadimisel.
- Kasuta kaasaegseid formaate — WebP või AVIF — koos varuvariandiga.
- Laadi ekraanist väljas olevad pildid laisalt, kuid mitte esimest suurt pilti.
- Kärbi kitsal ekraanil, kui lai kompositsioon kaotab mõtte.
- Videod: ära lase automaatselt mängida heliga ja arvesta mobiilse andmesidega.
- Ikoonid SVG-na, mitte pildifailidena — need skaleeruvad ilma kaaluta.
Puude ja testimine#
Enamik responsiivsuse vigu ei ole paigutuses vaid interaktsioonis.
| Punkt | Nõue | Miks |
|---|---|---|
| Puutesihtmärk | Vähemalt 44 pikslit | Sõrm ei ole hiirekursor |
| Sihtmärkide vahe | Piisav, et mitte eksida | Kõrvuti lingid on tüütud |
| Hõljumine | Ei tohi olla ainus viis | Puutel hõljumist ei ole |
| Vormid | Õige klaviatuuritüüp väljal | Vähendab sisestusvigu |
| Fikseeritud elemendid | Ei tohi katta sisu | Mobiilis on ekraan väike |
| Testimine | Päris seadmed | Emulaator ei näita jõudlust |
Testi vähemalt ühe vana ja aeglase telefoniga. Uus telefon peidab jõudlusprobleemid, mida enamik külastajaid päriselt kogeb.
Korduma kippuvad küsimused
Mitu murdepunkti on vaja?
Nii palju, kui sisu nõuab — tavaliselt kaks kuni neli. Ära vali neid seadmemudelite järgi, sest see nimekiri vananeb igal aastal. Vaata, kus paigutus katki läheb, ja lisa murdepunkt sinna. Kaasaegse CSS-iga saab paljud juhud lahendada ilma murdepunktideta üldse.
Kas eraldi mobiilileht on parem?
Ei, praktiliselt mitte kunagi. Eraldi mobiiliversioon tähendab kahte lehte, mida hooldada, kahte sisuallikat ja pidevat riski, et need lähevad lahku. Responsiivne leht ühel URL-il on lihtsam hooldada ja väldib kanoonilisuse ning ümbersuunamiste probleeme.
Kuidas testida ilma paljude seadmeteta?
Brauseri seadmerežiim katab paigutuse, kuid mitte jõudlust ega puutetundlikkust. Hangi vähemalt üks päris telefon, eelistatavalt vanem ja odavam mudel, ja testi sellega enne igat avaldamist. Ülejäänu jaoks piisab brauseri tööriistadest ja aeglase võrgu simuleerimisest.
Kas mobiil on tähtsam kui lauaarvuti?
See sõltub sinu andmetest, mitte üldisest statistikast. Enamikul avalikel lehtedel on mobiilne liiklus ülekaalus, kuid B2B teenustel ja sisemistel tööriistadel on sageli vastupidi. Vaata analüütikat ja kujunda selle järgi — üldine reegel võib sinu puhul eksida.
responsiivne veebidisainmobiilisõbralik veebilehtmurdepunktid csscss gridresponsiivsed pildidmobiilne kasutajakogemus
