fbpx
Izdelava spletnih strani

7 nasvetov za izboljšanje responsive spletnih predlog

Ob zavedanju, kako hitro raste uporaba spleta preko mobilnih naprav, je ključno, da je vaša spletna stran pripravljena na sprejem obiskovalcev, ki do nje dostopajo preko široke palete najrazličnejših mobilnih naprav z različnimi zaslonskimi resolucijami.

Tukaj pride v igro t.i. ˝responsive design˝ (odzivno oblikovanje), ki vam lahko reši marsikatero nevšečnost. Kljub temu pa je pri odzivnem oblikovanju, tako kot pri vsakem oblikovanju spletnih vsebin, pomembno, da se držite osnovnih načel in primerov dobre prakse in s tem zagotovite tako funkcionalnost in fleksibilnost kot tudi privlačnost vaše spletne strani.

1. Uporabniki mobilnega interneta si zaslužijo enako kvaliteto brskanja

Prvo in najpomembnejše načelo oblikovanja odzivnih spletnih strani, ki se ga mora upoštevati, je zagotavljanje dostopnosti strani vsem uporabnikom, neglede na vrsto naprave, ki jo uporabljajo.

To pomeni, da se izgled strani in vizualna struktura učinkovito spreminja brez ustvarjanja posebno prilagojene vsebine ali izločanja/omejevanja nekaterih funkcij za uporabnike naprav z različnimi zaslonskimi resolucijami. Zagotovite, da bo uporabnik, ki dostopa preko mobilnika, imel nič manj kvaliteto izkušnjo prebiranja vaše spletne strani kot uporabnik, ki je do nje prišel z uporabo osebnega računalnika ali tablice.

Vse mora biti fleksibilno – poskrbite, da se bodo vse slike, vsebinska okna in ostale komponente tekoče in avtomatsko prilagajale na spreminjanje zaslonske resolucije naprave, preko katere se do strani dostopa. Rezultat vašega dela naj bo avtomatsko prilegajoča se spletna stran.

2. Oblikujte spletno stran z mislijo na odzivnost

Pri oblikovanju strani je pomembno razumevanje, da obstajajo nekatere postavitve multimedijskih vsebin, ki so primernejše za odzivno oblikovanje, druge postavitve pa se na spreminjanje velikosti zaslona prilagajajo težje.

Poskrbite, da boste pri pisanju in oblikovanju spletne strani uporabili karseda enostavne HTML kode in postavitve vsebin, kot so ˝navigacija˝ in ˝meni˝, z uporabo postavk HTML5 in doctype-a ter enostavnih postavitev vsebin pri osnovnem izgledu.

Izognite se uporabi prekompleksnih div-ov, nepotrebnih fiksnih postavitev in razkošnih Javascript ali Flash elementov. Vse to bo oteževalo prilagajanje celotne spletne strani in kvarilo končen izgled.

3. Bodite pozorni na točke preloma strani

Resolucije so definirane s širokim izborom prelomnih točk, vendar se nekatere velikosti pojavljajo pogosteje in jim je vredno posvetiti pozornost. Te so:

  • 480px (ponavadi prisotna pri manjših zaslonskih resolucijah starejših mobilnikov)
  • 768px (idealna za večje pametne telefone in manjše tablične računalnike)
  • 768px (uporabno za vse večje naprave, od večjih tablic do osebnih računalnikov)
  • 320px (namenjena manjšim, nizkoresolucijskim telefonom)
  • 1024px (širokozaslonska resolucija namenjena namizjem osebnih računalnikov)

Po potrebi lahko uporabite še naslednji dve:

To so ključne prelomne točke, ki se uporabljajo za aktualne naprave za brskanje po spletu. Osredotočite se predvsem na prve tri, kot seveda na celozaslonsko resolucijo, ki je večja od 1024px.

4. Naredite vaše slike fleksibilne

Z enostavnim oblikovanjem lahko naredite fleksibilne tudi slike, ki se prikazujejo na vaši spletni strani. Najlažja pot do tega je uporaba spreminjanja oblike, ki bo s prilagajanjem na resolucijo spremenila širino slike.

Obstaja več načinov, kako to dosežete. Ena izmed najlažjih metod je pripomoček imenovan ˝Adaptive Images˝ (prilagajajoče slike). Vedite, da bo pravilno ožanje slik vaše spletne strani učinkovito predvsem za mobilne uporabnike, saj se bo zmanjšal čas nalaganja in poskrbljeno bo za hitro in nemoteno brskanje.

Prav tako bi lahko uporabili različne točke preloma in shranili nastavitve različnih velikosti slik za različne zaslonske resolucije, vendar se lahko pojavi problem pri zmogljivosti internetne povezave uporabnika. Učinkovitost slednjega je omejena z dejstvom, da morajo vaši uporabniki uporabljati zmogljivo napravo in širokopasovni internet.

Dovolite skrčenje elementov in vsebine na strani

Uporabite program, kot je GZIP, ki bo skčil vsebinske vire vaše spletne strani in poskrbel za lažji prenos preko spleta. S tem bo znižano število bajtov strani ali elementa, ki bodo poslani na napravo, in brez skrbi bodo vaše vsebine prejemali tudi uporabniki s počasnejšo internetno povezavo.

Uporabo lahko pospešite še dodatno z odstranjevanjem neuporabljenih prostorov (white space) in neujemajočih prelomov. S tem boste znižali velikost datotek in poskrbeli za njihov hitrejši prenos.

5. Znebite se nebistvenih vsebin

V želji narediti vašo stran resnično mabilnim uporabnikom prijazno, se preprosto zavedajte pomembnega dejstva: nekaterim vsebinam preprosto ni namenjeno, da se prikazujejo na zaslonih z nizko resolucijo.

Če se takšni elementi pojavljajo na vaši strani, se jih bodisi znebite popolnoma, ali pa jih pri odzivnem oblikovanju ne vključujte za prikaz. To lahko naredite z dodajanjem .not_mobile končnice posameznim elementom, za katere želite, da bodo izvzeti iz prikazovanja spletne strani ali podstrani na mobilnih napravah.

6. Zapomnite si najpomembnejše

Zgoraj naštete so samo nekateri načini, ki so se izkazali za zelo uporabne – nekateri vam bodo ustrezali bolj, drugi manj.

Zapomnite si, da je pri odzivnem oblikovanju ključno dejstvo, da se vsebine vaše spletne strani na napravo s posebno zaslonsko resolucijo naložijo hitro in pregledno, neglede na hitrost internetne povezave, ki jo ima uporabnik. To zagotovijo strani, ki so dobro organizirane in se osredotočajo na osnovne funkcijske namene.

Jerneja Lobnik Ornik
avtorJerneja Lobnik Ornik
Odgovorna urednica
Jerneja je strokovnjakinja na področju digitalnega marketinga, oblikovalka spletnih strani, grafična oblikovalka, predavateljica in avtorica spletnih vsebin. Vizionarka, načrtovalka in graditeljica novih, boljših spletnih izkušenj. Ima več kot 10 let izkušenj z izdelavo spletnih mest, mediji, grafičnim oblikovanjem in digitalnim marketingom. Je projektno usmerjena oseba, vedno teži k izboljšanju obstoječega stanja in dosegu cilja. Izdelala je že ogromno avtorskih projektov, med drugim tudi tiskane revije in spletne portale. Je zelo intuitivna in optimistična, v ljudeh pa vedno iščem njihov potencial. Verjame v zmago s povezovanjem in širjenjem znanja ter izkušenj.

Dodaj odgovor

Na naši stran uporabljamo piškotke za pravilno delovanje strani in beleženje obiskanosti strani. S strinjanjem nam dovolite uporabo piškotkov.

Privacy Settings saved!
Nastavitve zasebnosti

Tukaj lahko nastavite, kateri piškotki naj se naložijo na stran.

Piškotki, ki so nujni za pravilno delovanje spletne strani in niso povezani z beleženjem podatkov.

Uporabljamo naslednje tehnične piškotke.
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec

Decline all Services
Accept all Services