Kaj se je zgodilo

Brskalnika Chrome in Edge sta z različico 149 dobila polno podporo za tako imenovane CSS gap decorations, torej okrasitve razmakov med elementi. Po poročanju CSS-Tricks lahko odslej razvijalci zelo preprosto in z veliko nadzora oblikujejo prazne prostore (razmake) med elementi v postavitvah, kot so mreže in stolpci. To zveni kot majhna tehnična podrobnost, a v resnici gre za funkcijo, ki bo dolgoročno izboljšala videz mnogih spletnih strani, tudi tvoje.

Če imaš spletno stran, na kateri se pojavljajo seznami izdelkov, kartice storitev, galerije ali cenovne tabele, potem se te novosti tičejo prav teh delov. V nadaljevanju pojasnimo, kaj so gap decorations v resnici, zakaj so pomembne in kaj konkretno pomenijo za slovensko malo ali srednje podjetje.

Kaj sploh so razmaki (gaps) in zakaj so bili problem

Sodobne spletne strani so praviloma zgrajene z razporeditvenima sistemoma CSS Grid (mreža) in Flexbox (prilagodljiva postavitev). Oba omogočata, da elemente razporediš v vrstice in stolpce, med njimi pa ustvariš enakomerne prazne prostore. Ta prazen prostor med elementi se imenuje gap, torej razmak.

Do zdaj so bili ti razmaki zgolj prazen prostor. Če si želel med stolpci ali vrsticami dodati na primer tanko sivo ločilno črto, kot jo poznaš iz časopisov ali dobro urejenih preglednic, si moral razvijalec uporabiti razne trike. Med najpogostejšimi so bili:

  • dodajanje robov (border) posameznim elementom, kar pogosto povzroči podvojene ali manjkajoče črte na robovih;
  • vstavljanje dodatnih praznih elementov, ki služijo zgolj kot črta;
  • uporaba senc ali ozadij, ki simulirajo ločnico.

Vsi ti pristopi so delovali, a so bili krhki. Ko se je postavitev prilagajala mobilnim napravam, so se črte pogosto lomile, podvajale ali izginile. Rezultat je bila spletna stran, ki je na namizju izgledala urejeno, na telefonu pa razmetano.

Kaj prinaša nova funkcija

Z gap decorations lahko razvijalec zdaj neposredno pove brskalniku: med temi stolpci in vrsticami naj bo takšna in takšna črta. Brskalnik sam poskrbi, da se črte prikažejo le tam, kjer morajo, in da se ob spremembi postavitve pravilno prilagodijo. To pomeni manj kode, manj napak in bolj zanesljiv videz na vseh napravah.

Preprosto povedano: tisto, za kar je bilo prej potrebnega veliko ročnega dela in previdnosti, je zdaj vgrajeno v sam brskalnik.

Ozadje in kontekst: zakaj so takšne novosti pomembne

Splet se razvija po korakih. Vsaka nova funkcija v brskalnikih, kot je ta, na prvi pogled izgleda kot podrobnost za razvijalce. A ravno seštevek takšnih izboljšav loči spletno stran, ki deluje sodobno in premišljeno, od tiste, ki izgleda kot da je nastala pred desetimi leti.

Pomembno je razumeti tudi časovnico. Ko brskalnik dobi novo funkcijo, to ne pomeni, da jo lahko takoj brezskrbno uporabljaš na spletni strani, ki jo obiskujejo vse vrste uporabnikov. Zakaj?

  • Nova funkcija je najprej podprta le v najnovejših različicah določenih brskalnikov (v tem primeru Chrome in Edge od različice 149).
  • Nekateri obiskovalci uporabljajo starejše brskalnike ali druge brskalnike, kjer funkcija še ni na voljo.
  • Zato je treba poskrbeti za tako imenovano postopno izboljšavo (progressive enhancement), kar pomeni, da stran deluje dobro tudi tam, kjer nove funkcije ni, uporabniki z novejšimi brskalniki pa vidijo lepšo različico.

Prav tu se pokaže razlika med hitro sestavljeno spletno stranjo in tisto, ki je narejena premišljeno.

Kaj to pomeni za tvoje podjetje in tvojo spletno stran

Zdaj se verjetno sprašuješ, kaj vse to pomeni zate kot lastnika podjetja, ki ni razvijalec. Odgovor je: bolj, kot si morda misliš.

1. Bolj urejen videz brez dodatnega dela vzdrževanja

Če ima tvoja spletna stran razdelke s karticami, na primer pregled storitev, ekipa, cenovni paketi ali blog, potem ločilne črte in okrasitve razmakov pomembno vplivajo na to, kako "prebavljiva" je stran. Urejene ločnice pomagajo obiskovalcu, da hitreje razume, kaj sodi skupaj in kaj je ločeno. To ni estetska muha, ampak vpliva na to, ali obiskovalec ostane in poišče kontakt ali pa odide.

Z novo funkcijo je takšen urejen videz enostavnejši za izvedbo in bolj zanesljiv na dolgi rok, kar pomeni manj tveganja, da se ob prihodnjih posodobitvah nekaj polomi.

2. Boljša izkušnja na mobilnih napravah

Večina slovenskih obiskovalcev spletnih strani danes prihaja s telefonov. Prav na mobilnih napravah so se stari triki za ločilne črte najpogosteje lomili. Ker gap decorations brskalniku prepustijo skrb za pravilen prikaz ob spremembi postavitve, se tovrstne napake zmanjšajo. Bolj dosleden videz na telefonu pa neposredno vpliva na zaupanje in na to, ali te obiskovalec dojame kot resno podjetje.

3. Manj kode pomeni hitrejšo in bolj vzdržljivo stran

Vsak trik, ki so ga razvijalci uporabljali za simulacijo ločilnih črt, je pomenil dodatno kodo, včasih tudi dodatne prazne elemente v strani. Manj kode praviloma pomeni hitrejše nalaganje in manj možnosti za napake. Hitrost spletne strani pa je eden od dejavnikov, ki vplivajo tudi na uvrstitev v Googlovem iskalniku.

Če te zanima, kaj bi celovita prenova ali izdelava sodobne spletne strani pomenila za tvoje podjetje, si lahko okvirno ceno ogledaš v našem kalkulatorju.

Konkretni nasveti za lastnike podjetij

Ni ti treba razumeti kode, da lahko sprejemaš dobre odločitve glede spletne strani. Tukaj je nekaj usmeritev:

  • Ne zahtevaj najnovejših trikov za vsako ceno. Ključno vprašanje ni "ali uporabljate najnovejšo funkcijo", ampak "ali stran deluje brezhibno na vseh napravah in v vseh brskalnikih". Dober studio bo nove funkcije uporabil premišljeno, kot izboljšavo, ne pa kot obvezo.
  • Preveri, kako izgleda tvoja stran na telefonu. Vzemi svoj telefon in poglej razdelke s karticami in seznami. Ali so ločnice in razmaki urejeni ali pa je videti natrpano in neurejeno? To je pogosto prvi znak, da postavitev ni bila narejena premišljeno.
  • Razmisli o dolgoročnem vzdrževanju. Spletna stran ni enkraten projekt, ampak nekaj, kar se posodablja. Bolj ko je koda čista in v skladu s sodobnimi standardi, ceneje in hitreje je stran vzdrževati.
  • Ne loti se popravkov sam po naključnih navodilih z interneta. Videz mreže in razmakov je tesno povezan s celotno postavitvijo strani. En sam nepremišljen poseg lahko polomi videz na določenih napravah, ne da bi to sploh opazil.

Kje pri tem pomaga Carpolab

V Carpolabu spremljamo takšne novosti v brskalnikih prav zato, da jih znamo pravilno uporabiti tam, kjer prinesejo vrednost, in se izogniti tveganjem tam, kjer bi lahko škodovale izkušnji obiskovalcev. Nova funkcija, kot so gap decorations, je odličen primer: uporabimo jo kot izboljšavo za sodobne brskalnike, hkrati pa poskrbimo, da tvoja stran ostane brezhibna tudi tam, kjer funkcija še ni podprta.

Cilj ni "uporabiti najnovejšo stvar", ampak zgraditi spletno stran, ki izgleda urejeno, se hitro nalaga in dobro deluje na vseh napravah, danes in čez nekaj let. Če želiš, da tvojo obstoječo stran pregledamo ali da skupaj načrtujemo novo, nas kontaktiraj in pogovorimo se o tvojih ciljih.

Pogosta vprašanja (FAQ)

Ali moram zdaj takoj posodobiti svojo spletno stran?

Ne. Gre za novo funkcijo, ki jo je smiselno vgraditi ob naslednji prenovi ali nadgradnji, kot premišljeno izboljšavo. Ni razloga za paniko, prav tako pa ne za to, da bi obstoječo stran na hitro predelovali samo zaradi ene funkcije. Bolj pomembno je celostno stanje strani, njena hitrost in izkušnja na mobilnih napravah.

Ali bo funkcija delovala pri vseh mojih obiskovalcih?

Zaenkrat je polna podpora na voljo v Chromu in Edgeu od različice 149 naprej. To pomeni, da obiskovalci z novejšimi brskalniki lahko vidijo izboljšan videz, drugi pa ne. Zato je ključno, da je stran narejena po načelu postopne izboljšave, torej da lepo deluje povsod, izboljšave pa se prikažejo tam, kjer so podprte.

Ali takšne tehnične podrobnosti sploh vplivajo na moje stranke?

Da, čeprav posredno. Stranke ne razmišljajo o razmakih in ločilnih črtah, zaznajo pa, ali je stran videti urejena, profesionalna in ali jo je lahko brati. Urejen videz gradi zaupanje, zaupanje pa vodi do povpraševanj in nakupov. Ravno zato je vredno takšne detajle prepustiti nekomu, ki jih zna postaviti pravilno.

Vir: CSS-Tricks