Responsīvais
tīmekļa dizains —
tehniskā analīze
Kā ekrānu daudzveidība ietekmē izkārtojuma lēmumus un kādi risinājumi darbojas dažādos tīkla apstākļos visā Latvijā.
Saderības izplatība pēc ierīces tipa
Latvijas mājaslapu lietotāju sadalījums rāda, ka mobilās ierīces veido vairāk nekā pusi no visiem apmeklējumiem, taču izkārtojuma kļūdas tiek konstatētas neproporcionāli bieži tieši planšetdatoros.
-
Viedtālruņi58%
-
Galddatori31%
-
Planšetdatori11%
Vidējais ielādes laiks mobilajos tīklos reģionālajos centros ārpus Rīgas
Minimālais ekrāna platums, ko joprojām izmanto aktīvā auditora daļa
Dominējošais izkārtojuma rīks mūsdienu responsīvos projektos
Funkcija plūstošai tipogrāfijai bez atsevišķiem media queries
Kādi jautājumi tiek aplūkoti
Šie raksti nav pārskats — tie analizē konkrētus tehniskos scenārijus, kur standarta pieeja nedarbojas un kāpēc.
Izkārtojums bez fiksētiem platumiem
Kāpēc px vērtības izkārtojumos rada problēmas un kā pāriet uz relatīvām mērvienībām praksē.
Attēli un video dažādos savienojumos
srcset un sizes atribūtu izmantošana, lai ietaupītu joslas platumu zema ātruma tīklos.
Tipogrāfija mainīgos ekrānos
clamp() lietošana un kad viewport vienības rada pieejamības problēmas lietotājiem ar palielinātu fontu.
Navigācija mazos ekrānos
Izvēlnes struktūra, kas darbojas bez JavaScript un nepārklāj saturu 320px platumā.
Responsivitāte nav tikai media queries
Lielākā daļa izstrādātāju raksta media queries kā pēdējo soli. Tā ir fundamentāla kļūda — breakpointi ir simptoma risinājums, nevis slimības.
Media queries ierobežojumi
Breakpointi tiek noteikti pēc populāriem ekrāna izmēriem, bet ekrānu izmēru diapazona platums pieaug katru gadu. Projekts, kas 2021. gadā izskatījās labi uz 360px un 1920px, šodien var salūzt uz 412px vai ultraplata monitora.
Labāka pieeja ir komponentu līmeņa izkārtojums — katrs bloks pats kontrolē savu uzvedību, nevis paļaujas uz globāliem lūzuma punktiem. CSS container queries to atrisina, bet to atbalsts vecākās ierīcēs Latvijā vēl nav pilnīgs.
Breakpoints ir kompromiss starp dizainera kontroli un ekrānu daudzveidību. Jo mazāk to izmanto, jo noturīgāks ir izkārtojums.
Grid un Flexbox — ne alternātīvas, bet papildinājumi
Flexbox strādā ar vienu asi. Grid — ar divām. Izmantot Flexbox divdimensiju izkārtojumam nozīmē ieviest papildu wrapperus, kas pasliktina HTML semantiku un palielina DOM dziļumu.
Reālos projektos Grid definē lapas struktūru, Flexbox kārto komponentu iekšējo saturu. Šī lomu sadale samazina CSS apjomu un padara izkārtojumu prognozējamāku.
Attēlu ielāde reģionālajos tīklos
Ārpus Rīgas LTE pārklājums nav vienmērīgs. loading="lazy" un WebP formāts samazina datu patēriņu, bet bez pareizi konfigurēta srcset tālrunis lejupielādē pilna izmēra attēlu pat tad, kad CSS to parāda 80px platumā.
Pieskārienu mērķu izmērs
WCAG 2.5.5 nosaka minimālo pieskāriena mērķa izmēru 44×44px. Daudzas navigācijas izvēlnes mobilajos skatos izmanto 32px vai mazāk, kas rada kļūdainus klikšķus un pasliktina lietošanas ērtumu īpaši vecāka gadagājuma lietotājiem.
Biežākās kļūdas praksē
Viewport meta taga neesamība, fiksēti augstumi elementi ar dinamisku saturu, un overflow:hidden uz galvenā konteinera ir trīs problēmas, kuras parādās vairāk nekā pusē pārbaudīto Latvijas uzņēmumu vietņu. Katra no tām ir novēršama bez dizaina izmaiņām.