Kaj se je zgodilo

Spletni razvijalci vse bolj opozarjajo na element `<dialog>`, ki je danes standardni gradnik sodobnih spletnih strani. CSS-Tricks je v prispevku Using and Styling the Dialog Element izpostavil, da gre za navidez majhen del spletne arhitekture, ki pa skriva veliko podrobnosti pri uporabi in oblikovanju. Za lastnika slovenskega malega ali srednjega podjetja to pomeni eno stvar: pojavna okna, obvestila in potrditvena sporočila lahko na tvoji strani delujejo bolje, hitreje in bolj dostopno, ne da bi za to nalagal težke dodatke.

V tem članku razložimo, kaj `<dialog>` sploh je, zakaj je pomemben in kaj konkretno prinaša tvojemu podjetju in spletni strani. Ne bomo pisali navodil po korakih, ampak ti pokazali, kje je priložnost in kje tveganje.

Kaj je element dialog in zakaj je pomemben

Vsak od nas je že videl pojavno okno na spletni strani. To je tisto okence, ki se pojavi na sredini zaslona, kadar te stran nekaj vpraša, obvesti ali od tebe želi potrditev. Primeri, ki jih verjetno pozna vsak lastnik podjetja:

  • okno "Ali se strinjaš s piškotki?"
  • prijava na e-novice, ki skoči čez zaslon
  • potrditev "Ali res želiš izbrisati?"
  • galerija slik, ki se odpre čez celoten zaslon
  • košarica ali hitri pregled izdelka, ki zdrsne čez vsebino

Včasih so razvijalci ta okna sestavljali "na roke", z veliko dodatne kode in pogosto s težkimi zunanjimi knjižnicami. Rezultat je bila počasnejša stran, več napak in slaba dostopnost za ljudi, ki uporabljajo tipkovnico ali bralnike zaslona.

Element `<dialog>` je vgrajena rešitev, ki jo brskalnik razume sam. Ker je del standarda, prinaša nekaj stvari brezplačno in samodejno, o čemer se je v preteklosti moralo skrbeti ročno.

Kaj brskalnik naredi namesto tebe

Ko je pojavno okno narejeno pravilno, sodobni brskalnik samodejno poskrbi za:

  • Zatemnitev ozadja, da se uporabnik osredotoči na okno
  • Zaklep pozornosti znotraj okna, tako da tipka Tab ne pobegne v ozadje
  • Zapiranje s tipko Escape, kar uporabniki pričakujejo
  • Boljšo dostopnost za bralnike zaslona in ljudi z omejitvami

To niso tehnične malenkosti. So razlika med profesionalno spletno stranjo in stranjo, ki deluje "domače" in ljudi odbija.

Ozadje: zakaj je to sploh vprašanje

Večina lastnikov podjetij nikoli ne razmišlja o tem, kako je narejeno pojavno okno. In tako naj bo. A prav zato je pomembno, da tvoj izvajalec ve, kaj dela. Slabo narejena pojavna okna so eden najpogostejših vzrokov za slabo uporabniško izkušnjo na slovenskih spletnih straneh.

Pogoste težave, ki jih srečamo pri pregledu obstoječih strani:

  • Pojavno okno se ne da zapreti na mobilnem telefonu, ker gumb za zapiranje ni viden.
  • Okno se odpre, ozadje pa se še vedno premika, kar zmede uporabnika.
  • Okno ni dostopno s tipkovnico, kar je problem za dostopnost in tudi za SEO.
  • Okno je narejeno z odvečno kodo in vtičniki, ki upočasnijo celotno stran.

Prav zato je premik k standardnim rešitvam, kot je `<dialog>`, dobra novica. Manj kode pomeni hitrejšo stran, manj napak in nižje stroške vzdrževanja.

Kaj to pomeni za tvoje podjetje in spletno stran

Poglejmo praktično. Zakaj naj bi lastnika trgovine, storitvenega podjetja ali obrtnika sploh zanimalo, kako je narejeno pojavno okno?

1. Hitrost strani in Google

Google že leta upošteva hitrost nalaganja in stabilnost strani med dejavniki uvrstitve. Vsak odvečni vtičnik za pojavna okna doda težo strani. Če isto stvar narediš s standardnim elementom, ki ga brskalnik že pozna, stran narediš lažjo in hitrejšo. Hitrejša stran pomeni boljšo uvrstitev in več obiskovalcev, ki ne pobegnejo, preden se stran naloži.

Če želiš oceno, kaj bi hitrejša in bolje zgrajena stran pomenila za tvoje podjetje, si lahko okvirni obseg pogledaš prek kalkulatorja.

2. Dostopnost, ki postaja pravna obveznost

Dostopnost spletnih strani ni več zgolj lepa dodana vrednost. Za vse več podjetij v EU postaja zakonska zahteva. Pravilno narejena pojavna okna, ki delujejo s tipkovnico in bralniki zaslona, so ključni del dostopne strani. Element `<dialog>` ti pri tem pomaga, ker veliko dostopnosti prinaša samodejno, medtem ko je bilo to prej treba mukotrpno programirati.

3. Konverzije in zaupanje

Pojavno okno je pogosto točka, kjer obiskovalec postane stranka. Prijava na e-novice, potrditev naročila, zahteva za ponudbo. Če okno deluje gladko, se hitro odpre in zapre ter deluje enako na računalniku in telefonu, uporabnik začuti, da je stran urejena in vredna zaupanja. Če okno zatika, se ne zapre ali skrije vsebino, uporabnik odide. Vsak izgubljen uporabnik je izgubljena priložnost.

4. Nižji stroški vzdrževanja

Manj zunanjih vtičnikov pomeni manj stvari, ki se lahko pokvarijo ob posodobitvah. To je posebej pomembno pri straneh na sistemih, kjer vtičniki radi trkajo drug ob drugega. Čim bolj stran temelji na standardnih, vgrajenih rešitvah, tem manj klicev "nekaj ne dela" boš imel čez leto ali dve.

Konkretni nasveti in posledice

Ni ti treba postati razvijalec, da bi znal presoditi, ali so pojavna okna na tvoji strani narejena dobro. Tukaj je nekaj stvari, ki jih lahko sam preveriš ali zahtevaš od izvajalca.

Preizkusi svojo stran sam

  1. Odpri katerokoli pojavno okno na svoji strani.
  2. Poskusi ga zapreti s tipko Escape. Ali deluje?
  3. Poskusi se premikati s tipko Tab. Ali pozornost ostane znotraj okna ali pobegne v ozadje?
  4. Ponovi vse to na mobilnem telefonu. Ali je gumb za zapiranje viden in dovolj velik za prst?

Če kaj od tega ne deluje, imaš priložnost za izboljšavo, ki neposredno vpliva na tvoje stranke.

Kaj zahtevati od izvajalca

  • Pojavna okna naj temeljijo na standardnih spletnih rešitvah, ne na težkih zunanjih vtičnikih, kjer to ni potrebno.
  • Vsako okno mora biti dostopno s tipkovnico in delovati na vseh napravah.
  • Ozadje se mora zatemniti in ustaviti, ko je okno odprto.
  • Oblikovanje okna mora biti usklajeno s tvojo blagovno znamko, ne generično.

Kje je past

Element `<dialog>` je močno orodje, a ga je treba znati pravilno oblikovati in nastaviti. CSS-Tricks je v svojem prispevku posebej poudaril, da je pri uporabi in oblikovanju tega elementa veliko podrobnosti in odtenkov. To pomeni, da lahko slabo izveden `<dialog>` prinese enake težave kot stari načini. Ključ ni v tem, katero tehnologijo uporabiš, ampak kako skrbno je izvedena.

Prav tukaj se izplača sodelovati z nekom, ki te podrobnosti pozna. Če želiš, da tvoja pojavna okna in celotna stran delujejo brezhibno na vsaki napravi, se lahko obrneš na nas in skupaj pogledamo, kje so priložnosti.

Kako k temu pristopa Carpolab

V Carpolabu strani gradimo tako, da so hitre, dostopne in vzdržljive. To pomeni, da uporabljamo standardne, vgrajene spletne rešitve povsod, kjer to prinese hitrejšo in stabilnejšo stran, namesto da nalagamo težke dodatke za vsako malenkost. Pojavna okna so odličen primer: če jih naredimo pravilno, tvoja stran deluje bolje na vseh napravah, se hitreje naloži in ne odbija obiskovalcev.

Cilj ni tehnična dovršenost zaradi tehnike. Cilj je, da tvoja stran prinaša več povpraševanj, naročil in zaupanja, obenem pa te stane manj vzdrževanja skozi leta.

Pogosta vprašanja (FAQ)

Moram za pojavna okna na svoji strani plačati poseben vtičnik?

Ne nujno. Sodobni brskalniki podpirajo vgrajene rešitve za pojavna okna, ki delujejo brez težkih zunanjih dodatkov. To pogosto pomeni hitrejšo stran in nižje stroške vzdrževanja. Ali je vtičnik smiseln, je odvisno od tvojih konkretnih potreb, a ni več samoumeven.

Kako vem, ali so moja pojavna okna dostopna?

Najlažji hitri test je, da poskušaš okno zapreti s tipko Escape in se po njem premikaš s tipko Tab. Če pozornost pobegne v ozadje ali okna ne moreš zapreti brez miške, dostopnost verjetno ni urejena. Za temeljit pregled je najbolje, da stran oceni izvajalec.

Ali slaba pojavna okna res vplivajo na uvrstitev na Googlu?

Posredno da. Google upošteva hitrost in stabilnost strani ter uporabniško izkušnjo. Težka, počasna in moteča pojavna okna slabšajo te dejavnike, kar lahko vpliva na uvrstitev in predvsem na to, ali obiskovalci ostanejo ali odidejo.

Zaključek

Element `<dialog>` je dober primer, kako navidez majhna tehnična izbira vpliva na hitrost, dostopnost in ugled tvoje spletne strani. Za lastnika podjetja ni pomembno, da poznaš kodo, ampak da veš, da so tudi pojavna okna del tega, ali tvoja stran deluje profesionalno ali ne. Če želiš, da tvoja spletna stran deluje gladko na vsaki napravi in prinaša več strank, smo v Carpolabu tu, da to uredimo pravilno.

Vir: CSS-Tricks