Adaptīvais web dizains: praktisks ceļvedis
Adaptivitāte nenozīmē, ka lapa ietilpst šaurā ekrānā. Tā nozīmē, ka lapa ir lietojama katrā platumā — kas ir stingrāka prasība un dažreiz nozīmē citu satura secību, ne tikai šaurākas kolonnas.
Šis ceļvedis aptver praktiskos lēmumus: pārtraukuma punktus, izkārtojumu, attēlus, skāriena mērķus un testēšanu.
Sāc no šaurā#
Šaurs ekrāns ir stingrāks ierobežojums. Ja tur strādā, prioritātes ir sakārtotas.
- Vispirms dizainē šaurāko skatu un izlem, kas tiešām ir vajadzīgs.
- Sakārto saturu pēc svarīguma — mobilajā tā ir lasīšanas secība.
- Pievieno platumu un ļauj izkārtojumam elpot, nevis pievieno jaunus elementus.
- Pievieno pārtraukuma punktu tad, kad izkārtojums lūst, nevis pēc konkrētas ierīces.
- Pārbaudi, ka satura secība ir loģiska arī bez stiliem.
- Testē uz īstas ierīces, nevis sašaurinot pārlūka logu.
Pārtraukuma punkti jāizvēlas pēc satura, nevis pēc ierīču modeļiem. Ierīču saraksti noveco; satura robežas nenoveco.
Elastīgs izkārtojums#
Mūsdienu CSS atrisina lielāko daļu adaptivitātes bez pārtraukuma punktiem.
| Tehnika | Kam | Piezīme |
|---|---|---|
| Flexbox | Viendimensijas rindas un kolonnas | Der navigācijai un kartītēm |
| Grid | Divdimensiju izkārtojums | Der lapas pamatstruktūrai |
| clamp() | Plūstoša tipogrāfija | Novērš pakāpienveida lēcienus |
| minmax() un auto-fit | Pašpielāgojošs režģis | Bieži aizvieto pārtraukuma punktu |
| Konteinera vaicājumi | Komponentu pielāgošanās | Der atkārtotiem komponentiem |
| Loģiskās īpašības | Atbalsta no labās uz kreiso | Vajadzīgs vairākvalodu lapā |
auto-fit kopā ar minmax aizvieto tipiskā kartīšu režģa trīs pārtraukuma punktus ar vienu CSS rindu.
Attēli un mediji#
Attēli gandrīz vienmēr ir lielākā lapas svara daļa un adaptivitātes lielākā praktiskā problēma.
- Lieto srcset un sizes, lai pārlūks izvēlas pareizo izmēru.
- Norādi platumu un augstumu, lai izvairītos no izkārtojuma lēkāšanas.
- Lieto mūsdienu formātus — WebP vai AVIF — ar rezerves variantu.
- Ielādē attēlus ārpus ekrāna slinki, bet ne pirmo lielo attēlu.
- Apgriez šaurā ekrānā, ja plata kompozīcija zaudē jēgu.
- Video: neatskaņo automātiski ar skaņu un rēķinies ar mobilajiem datiem.
- Ikonas kā SVG, nevis attēlu faili — tās mērogojas bez svara.
Skāriens un testēšana#
Lielākā daļa adaptivitātes kļūdu nav izkārtojumā, bet mijiedarbībā.
| Punkts | Prasība | Kāpēc |
|---|---|---|
| Skāriena mērķis | Vismaz 44 pikseļi | Pirksts nav peles kursors |
| Atstarpe starp mērķiem | Pietiekama, lai nekļūdītos | Blakus esošas saites kaitina |
| Uzvirzīšana | Nedrīkst būt vienīgais veids | Uz skāriena nav uzvirzīšanas |
| Formas | Pareizs tastatūras tips laukā | Samazina ievades kļūdas |
| Fiksēti elementi | Nedrīkst aizsegt saturu | Mobilajā ekrāns ir mazs |
| Testēšana | Īstas ierīces | Emulators nerāda veiktspēju |
Testē vismaz ar vienu vecu un lēnu telefonu. Jauns telefons slēpj veiktspējas problēmas, ko lielākā daļa apmeklētāju tiešām piedzīvo.
Biežāk uzdotie jautājumi
Cik pārtraukuma punktu vajag?
Tik, cik prasa saturs — parasti divi līdz četri. Neizvēlies tos pēc ierīču modeļiem, jo tas saraksts noveco katru gadu. Skaties, kur izkārtojums lūst, un pievieno punktu tur. Ar mūsdienu CSS daudzus gadījumus var atrisināt vispār bez pārtraukuma punktiem.
Vai atsevišķa mobilā lapa ir labāka?
Nē, praktiski nekad. Atsevišķa mobilā versija nozīmē divas lapas, ko uzturēt, divus satura avotus un pastāvīgu risku, ka tie atšķiras. Adaptīva lapa uz viena URL ir vieglāk uzturama un novērš kanoniskuma un pāradresāciju problēmas.
Kā testēt bez daudzām ierīcēm?
Pārlūka ierīču režīms aptver izkārtojumu, bet ne veiktspēju un ne skārienjutību. Iegādājies vismaz vienu īstu telefonu, vēlams vecāku un lētāku modeli, un testē ar to pirms katras palaišanas. Pārējam pietiek ar pārlūka rīkiem un lēna tīkla simulāciju.
Vai mobilais ir svarīgāks par datoru?
Tas atkarīgs no taviem datiem, ne no vispārējas statistikas. Vairumā publisko lapu mobilais apmeklējums dominē, bet B2B pakalpojumiem un iekšējiem rīkiem bieži ir otrādi. Skaties analītiku un dizainē pēc tās — vispārējs noteikums tavā gadījumā var kļūdīties.
adaptīvais dizainsmobilajam draudzīga mājaslapacss pārtraukuma punkticss gridadaptīvi attēlimobilā lietotāja pieredze
