Če ste domači z koncepti web designa, potem že poznate osnove uporabe CSS. CSS sprites nam omogoča uporabo ene same grafike, v katero je vključenih več slik razporejenih v mrežo. Na spletni strani pa se prikazuje le željen del te datoteke. Tako potrebujemo le en HTTP zahtevek in celotna grafika spletnega mesta nam je takoj na voljo.

Uporaba XHTML in CSS v grafiki

 

 

 

 

 

 

 

 

Ta tehnika je zelo uporabna, ko imamo pred seboj dizajn bodoče spletne strani, katerega navigacija pa vsebuje slike, piktograme ali netipične fonte, ki jih uporabniki spletnega mesta nimajo nameščenih na svojih računalnikih.
Včasih smo to rešili enostavno tako, da smo celotno grafiko razrezali na več manjših slik katere smo umestili v stran. Nato smo dodali povezave in stvar je bila rešena. Danes pa je to popolnoma nesprejemljivo. Spodaj je opisanih nekaj težav s katerimi se srečamo, v kolikor ne upoštevamo W3C standardov pri izdelavi netekstovne oz. grafične navigacije.

  • Iskalniki in screen readerji ne znajo prebrati teksta v sliki, kar posledično pomeni težavo v rengiranju strani kot tudi v sami dostopnosti strani slepim in slabovidnim uporabnikom.
  • Večja poraba pasovne širine, kar je še posebno kočljiva stvar, v kolikor ima stran veliko obiska.
  • Daljše nalaganje spletnega mesta.

Uporabi slikovne navigacije se je načeloma dobro izogibati, čeprav lahko z pametno rabo CSS stvar naredimo povsem dostopno in uporabno. V prvem primeru lahko vidite osnovno rešitev, v drugem pa nadgradnjo in implementacijo sprites grafike.

 

Prijava na ART blog

S klikom na gumb “pošlji” se strinjate s hrambo svojih podatkov v naši podatkovni bazi in komuniciranje prek navedenega kontakta.
Več o tem si lahko preberete v politiki o zasebnosti.

🎁 Želite 10 % popust?

Vemo, da je vaš čas dragocen, vseeno pa ... Ker želimo bodočim naročnikom ponuditi karseda dobro storitev, vas vljudno prosimo za nekaj sekund časa. Tisti, ki se boste opogumili, boste seveda nagrajeni. V zameno za nekaj trenutkov vaše pozornosti vam podarimo enkratni 10 % popust na našo storitev!

Kje ste naš našli? *
Ste našli informacije, ki jih potrebujete? *
Od 1-4 kako bi ocenili uporabniško izkušnjo z našo spletno stranjo? *

S klikom na gumb za pošiljanje obrazca se strinjate s hrambo svojih podatkov v naši podatkovni bazi in komuniciranje prek navedenega kontakta. Več o tem si lahko preberete v politiki o zasebnosti.