Zakaj CSS container poizvedbe niso to, kar mislite: sodobna pot do res prilagodljivih spletnih strani

Kaj se je zgodilo in zakaj vas zanima

Sodobna spletna tehnologija je dobila zmogljivo orodje, imenovano CSS container poizvedbe (angl. container queries), ki spletnim komponentam omogoča, da se prilagodijo prostoru, ki jim je dejansko na voljo, in ne le velikosti celotnega zaslona. Kljub temu, da to funkcijo danes podpira približno 94 % brskalnikov, jo po podatkih ankete State of CSS uporablja le 41,4 % razvijalcev, čeprav zanjo ve 86 % vprašanih. Revija Smashing Magazine v svojem članku opozarja na še večjo težavo: mnogi, ki container poizvedbe uporabljajo, jih uporabljajo napačno, kot da bi šlo za navadne media poizvedbe.

Za lastnika slovenskega malega ali srednjega podjetja se to morda sliši kot suha tehnična zgodba, a v resnici gre za nekaj zelo oprijemljivega. Gre za to, ali vaša spletna stran deluje brezhibno na vsaki napravi in v vsakem kotičku postavitve, ali pa se vsebina na določenih mestih razleze, prekriva in postane neuporabna. To neposredno vpliva na to, koliko obiskovalcev ostane in koliko jih odide k konkurenci.

Ozadje: kako smo do sedaj gradili prilagodljive strani

Da razumete pomen novosti, moramo najprej razložiti, kako spletne strani sploh vedo, da se morajo prilagoditi različnim zaslonom.

Media poizvedbe gledajo navzven

Že več kot desetletje temelji prilagodljivo oblikovanje (angl. responsive design) na tako imenovanih media poizvedbah. Te delujejo preprosto: brskalnika sprašujejo eno samo vprašanje, kako širok je trenutno zaslon. Če je zaslon širši od določene meje, se postavitev spremeni, na primer iz dveh stolpcev v enega na mobilnem telefonu.

Ta pristop je desetletje dobro služil, a ima eno veliko slabost. Kot slikovito opiše Kevin Powell, priznani strokovnjak za CSS, so media poizvedbe pravzaprav "neumne", ne po zasnovi, ampak zato, ker vedo zelo malo. Poznajo namreč samo velikost celotnega okna brskalnika, ne pa tudi tega, koliko prostora ima dejansko na voljo posamezni element na strani.

Predstavljajte si tipičen primer. Imate elegantno kartico izdelka, ki naj bi se na velikih zaslonih prikazala vodoravno, s sliko ob besedilu. Media poizvedba preveri, da je zaslon širok recimo 1920 slikovnih točk, in ukaže kartici, naj se razporedi vodoravno. Težava nastopi, če ste to kartico postavili v ozek stolpec, ki je širok le 300 slikovnih točk. Media poizvedba tega ne ve in ne zanima je, zato kartico vseeno raztegne vodoravno. Rezultat je popačena vsebina, ki se prekriva, prelije čez rob ali stisne v nečitljivo gmoto.

Container poizvedbe gledajo navznoter

Container poizvedbe rešujejo prav to težavo. Namesto da bi spraševale, kako širok je zaslon, sprašujejo veliko pametnejše vprašanje: koliko prostora imam na voljo na tem konkretnem mestu prav zdaj?

Komponenta se torej ne prilagaja več velikosti celotnega okna, ampak velikosti svojega neposrednega okolja. Ista kartica izdelka bo tako v širokem stolpcu samodejno postala vodoravna, v ozkem stolpcu pa bo ostala navpična in urejena, ne glede na to, kako velik je zaslon. To je natanko takšno vedenje, kot bi ga pričakoval vsak uporabnik, in kar bi si mnogi želeli že leta.

Zakaj je razlika pomembna za vaše podjetje

Morda se sprašujete, zakaj bi vas kot lastnika podjetja sploh zanimalo, katero tehniko oblikovanja uporablja vaš spletni razvijalec. Odgovor je preprost: ta izbira neposredno vpliva na tri stvari, ki odločajo o uspehu vaše spletne strani.

1. Kakovost uporabniške izkušnje

Ko se vsebina na vaši strani lepo prilagodi vsakemu prostoru, obiskovalec dobi občutek urejenosti in profesionalnosti. Popačene kartice, prekrivajoče se besedilo in razlezeni elementi pa vzbujajo občutek zanemarjenosti in nezaupanja. Obiskovalec si v nekaj sekundah ustvari mnenje o vašem podjetju in slaba postavitev na kateri koli napravi lahko to mnenje trajno pokvari.

2. Ponovna uporabnost in hitrejši razvoj

Container poizvedbe omogočajo gradnjo pravih komponent, torej samostojnih gradnikov, ki delujejo pravilno kjer koli jih postavite. To pomeni, da lahko isto kartico, isti seznam ali isti obrazec uporabite na domači strani, v stranski vrstici in v podnožju, ne da bi se pokvarila. Za vaše podjetje to na dolgi rok pomeni cenejše vzdrževanje in hitrejše dodajanje novih vsebin, saj razvijalcu ni treba vsakega elementa ročno prilagajati vsaki postavitvi posebej.

3. Boljša uvrstitev v iskalnikih

Google pri razvrščanju spletnih strani upošteva uporabniško izkušnjo in stabilnost postavitve. Elementi, ki poskakujejo, se prekrivajo ali povzročajo nenadne premike vsebine, znižujejo oceno strani. Sodobno grajena stran, ki se pravilno prilagaja na vsaki napravi, torej ne prinaša le zadovoljnejših obiskovalcev, ampak tudi boljšo vidnost v rezultatih iskanja.

Najpogostejša napaka: container poizvedbe niso media poizvedbe

Glavno sporočilo članka je preprosto in pomembno. Ker container poizvedbe na prvi pogled izgledajo skoraj enako kot media poizvedbe, mnogi napačno domnevajo, da služijo istemu namenu in delujejo enako. To ni res. Media poizvedbe so mišljene za spreminjanje celotne postavitve strani, container poizvedbe pa za prilagajanje posameznih komponent glede na njihovo dejansko okolje.

Napačna uporaba pomeni, da podjetje sicer plača za sodobno tehnologijo, a ne dobi njenih prednosti, saj so komponente še vedno vezane na velikost zaslona namesto na svoj resnični prostor. Prav zato je pri izbiri partnerja za izdelavo spletne strani ključno, da ta res razume, kako sodobne tehnike delujejo, in ne le, da jih zna napisati.

Kaj to pomeni v praksi

Če razmišljate o novi spletni strani ali prenovi obstoječe, je vredno preveriti nekaj stvari:

• Ali se vaša vsebina pravilno prikazuje ne le na mobilniku in računalniku, ampak tudi v vseh vmesnih velikostih in v različnih delih strani?
• Ali so gradniki vaše strani zasnovani kot ponovno uporabne komponente ali kot enkratni elementi, ki jih je treba za vsako novo postavitev znova prilagajati?
• Ali vaša stran uporablja sodobne tehnike, ki jih danes podpira velika večina brskalnikov, ali temelji na zastarelem pristopu?

V Carpolabu spletne strani gradimo tako, da so pripravljene na resnično življenje, torej na vsebino, ki raste, na različne naprave in na postavitve, ki se s časom spreminjajo. Sodobne tehnike, kot so container poizvedbe, uporabljamo tam, kjer prinesejo dejansko vrednost, in ne le zato, ker so nove. Če želite oceno, kaj bi takšna spletna stran pomenila za vaše podjetje, si lahko hitro pogledate okvirni obseg prek našega kalkulatorja.

Pogosta vprašanja

Ali moram obstoječo spletno stran takoj prenoviti zaradi container poizvedb?

Ne nujno. Če vaša stran deluje dobro na vseh napravah in nima težav s popačeno vsebino, ni razloga za hitenje. Container poizvedbe pa je smiselno upoštevati ob naslednji večji prenovi ali pri gradnji nove strani, saj bodo dolgoročno olajšale vzdrževanje in izboljšale prilagodljivost. Če niste prepričani, v kakšnem stanju je vaša stran, se lahko z nami dogovorite za pregled prek kontakta.

Ali container poizvedbe delujejo na starejših brskalnikih?

Podpora je danes zelo dobra in znaša približno 94 % vseh brskalnikov, kar je za večino slovenskih podjetij popolnoma zadostno. Za tisto majhno manjšino uporabnikov s starejšimi brskalniki dobro zasnovana stran vedno predvidi tudi rezervno vedenje, tako da vsebina ostane uporabna, čeprav morda brez najnaprednejših prilagoditev.

Kako vem, ali moj razvijalec uporablja pravi pristop?

Ključni pokazatelj je, kako se vaša stran obnaša, ko isto vsebino postavite v različne dele postavitve, na primer v širok in ozek stolpec. Če se komponente povsod prilagodijo pravilno in urejeno, je pristop verjetno sodoben. Če se pokvarijo takoj, ko jih premaknete drugam, gre pogosto za stari način razmišljanja. Za neodvisno mnenje se lahko obrnete na strokovnjaka.

Zaključek

Container poizvedbe niso zgolj še ena tehnična novost. So korak k spletnim stranem, ki so resnično prilagodljive in vzdržne. Kot poudarja tudi vir, so media poizvedbe imele svoje meje in prav te meje sedaj zapolnjuje nova tehnika. Za vaše podjetje to pomeni priložnost: spletna stran, ki deluje brezhibno povsod, gradi zaupanje, obdrži obiskovalce in se bolje uvršča v iskalnikih. Vprašanje ni več, ali je vredno graditi sodobno, ampak ali si lahko privoščite, da tega ne storite.