“Mobile first” na drugačen način

“Mobile first” je standard, ki se ga je moramo danes držati pri razvoju spletnih strani in aplikacij. V osnovi “Mobile first” pristop pomeni to, da najprej razvijamo za najmanjše zaslone, npr. mobilne telefone in šele na koncu za namizne računalnike. Skladno s tem se tudi informacije na ekranu prilagajajo in mediju primerno prikazujejo. Velikokrat pa tu spregledamo odgovorni pristop k odzivnemu oblikovanju.

Odgovorno oblikovanje pomeni to, da se zavedamo, da nimajo vsi naši uporabniki enakih pogojev za dostop, hitrosti interneta, enakih zmožnosti, … Zato moramo pri razvoju spletnih strani in aplikacij to upoštevati.

6 korakov za drugačen “Mobile first”:

  • Sistemski fonti
  • font-display: optional
  • Uporaba odzivnih slik
  • Vsebinske slike ne skrivamo s CSSjem
  • Dostava ustreznih slik s pomoèja CSSja
  • Odgovorno dodajanje naprednih oblikovanj

Sistemski fonti

Uporaba sistemskih fontov je boljša, ker se vsebine hitreje naložijo, uporabniki jih že poznajo, posledično se lažje navadijo uporabniškega vmesnika. Prenosi strani oz. prenos podatkov za prikaz strani ali aplikacije je bistveno nižji, saj ni potrebno prenašati specialnih fontov.

font-display: optional

Če že uporabimo specialne fonte zaradi samega oblikovanja uporabimo nastavitev “font-display: optional”. Ta nastavitev daje zelo malo časa za nalaganje specialnih fontov (podobno, kot fallback), vendar je ta opcija boljša v primerih, ko je font bolj “nice to have”, ni pa nujno potreben za prenašanje informacij. Nastavitev OPTIONAL omogoča brskalniku, da se sam odloči ali font naložil ali ne, kar pride v primerih slabih povezav (npr. EDGE) oz. se brskalnik odloči kaj je najbolje za uporabnika v dani situaciji.

Uporaba odzivnih slik

Odzivne slike oz. slike ki se prilagajajo prostoru, ki je na voljo so postale že običajna praksa. Medtem ko uporaba različnih slik, ki se prilagajajo mediju uporabnika niso preveč v uporabi. Ta metoda običajno poleg različnih dimenzij in velikosti prinaša tudi režijo vsebine slike. Namreč na mobilnih telefonih vidimo bistveno manj, kot na namiznih računalnikih.

Vsebinske slike ne skrivamo s CSSjem

Velikokrat se zgodi, da za mobilno različico strani slike enostavno skrijemo s pomočjo CSSja. To ni vedno najboljša praksa, predvsem v primerih ko so slike vsebinske in prenašajo vsebino uporabnikom.

Dostava ustreznih slik s pomočjo CSSja

S pomočjo media querijev lahko določimo katere slike se prikažejo v določenih primerih. Npr. pri manjših zaslonih uporabimo manjše in lažje slike, kar izboljša nalaganje strani – manj prenosa.

Odgovorno dodajanje naprednih oblikovanj

S pomočjo CSSja lahko dosežemo pri oblikovanju veliko. Veliko pa ni vedno potrebno pri mobilnih uporabnikih, kjer je v prvi vrsti potrebno zagotoviti prenos informacij oz. ključne zadeve. Zato je dobro premisliti tudi v postopnem dodajanju naprednih oblikovanj stilov. Stile lahko dodajamo postopno, glede na medij uporabnika oz. njegove zmožnosti.

Komentiraj


*