Web stranice koje su optimizovane za upotrebu na mobilnim uređajima razlikuju se od onih koje se pojavljuju na desktop i laptop računarima. Potonji su dizajnirani za velike ekrane i precizno klikanje mišem, dok su mobilne web stranice veličine za manje ekrane i neprecizno kuckanje prstom.
- Dizajniran za manje ekrane i neprecizno kuckanje prstima.
- Dizajniran za velike ekrane sa preciznim klikom miša.
S obzirom na to da većina posjeta web stranicama dolazi s mobilnih uređaja, dizajneri sajtova imaju zadatak da obezbede verzije koje rade i sa mobilnim uređajima i sa desktop računarima. Najčešći pristup je korištenje responzivnog web dizajna, koji automatski isporučuje odgovarajuću verziju na osnovu korisnikovog uređaja i veličine ekrana, kako ih detektuje pretraživač.
U svakom slučaju, web stranice prilagođene mobilnim uređajima razlikuju se od desktop verzija na više načina.
Dizajn stranice: Mobilni ekrani imaju manje prostora
- Diagonala ekrana pametnih telefona i tableta je 4 do 10 inča.
- Sklopivi ili proširivi vidžeti menija obično zamjenjuju bočne trake i glomazne menije zaglavlja.
-
Grafika pune širine sa pravilnom upotrebom razmaka između teksta.
- Većina desktop monitora ima dijagonale od 19 do 24 inča.
- Sponzorisani linkovi i veliki baner oglasi su češći.
- Gušći tekst sa više prostora za grafiku.
Najočitija razlika između desktop i mobilnih web stranica je veličina ekrana. Dok većina desktop monitora ima dijagonalno najmanje 19 do 24 inča, tableti su obično oko 10 inča. Dijagonala pametnih telefona je oko 4 inča. Jednostavno smanjivanje ne dovodi uspješno web stranicu u verziju prilagođenu mobilnim uređajima jer čini tekst nečitljivim i zahtijeva dodatni korak od posjetitelja stranice. Takođe, precizno kuckanje po sitnim elementima postaje nemoguće.
Da bi riješili problem, dizajneri mogu ukloniti bočne trake i grafike koje nisu striktno neophodne. Umjesto toga, koriste manju grafiku, povećavaju veličinu fonta i skupljaju sadržaj u proširive widgete. Ovo ograničenje nekretnina dovelo je do potpuno drugačijeg razmišljanja među web dizajnerima.
Takođe, sklopivi ili proširivi widgeti menija obično zamjenjuju bočne trake i glomazne menije zaglavlja. U potrazi za svakim milimetarom prostora na ekranu, dizajneri uklanjaju suvišni bijeli prostor, pritom pažljivo pazeći na čitljivost.
Mnoštvo sponzoriranih linkova i velikih baner oglasa jednostavno ne radi na telefonu ili malom tabletu. Umjesto toga, mali pop-up oglasi su češći na mobilnim web stranicama.
Izgledi koji sadrže tekst omotan oko grafike ne igraju se dobro na mobilnim uređajima. Umjesto toga, dizajneri često daju toj grafiki punu širinu ekrana i pokreću tekst ispod ili iznad. Slično, dobar web dizajn razbija tekst na komade radi čitljivosti; niko ne želi da čita čvrste zidove teksta. Ovo postaje još važnije na malim ekranima. Razborito korištenje razmaka je ključno.
Kontrole stranice: Desktop Precision vs. Mobile Blobs
- Velike oblasti za dodirivanje ili pristupne tačke za precizniju navigaciju.
- Različiti URL: dodaje slovo "m." Često opcija za pregled desktop verzije stranice.
- Akreditivi za prijavu često imaju namenski prostor, ponekad sa pristupom otiskom prsta.
-
Precizniji linkovi i dugme zasnovani na kursoru.
Za razliku od preciznog pokazivača miša na radnoj površini, ljudski prst je mrlja, a tapkanje zahtijeva velike mete na ekranu za hiperveze. Web-lokacije prilagođene mobilnim uređajima nude velika područja za prisluškivanje (ili pristupne tačke) kako bi se olakšala precizna navigacija.
Web stranice prilagođene mobilnim uređajima također obično uključuju slovo m u svoje adrese; na primjer, Facebookova mobilna adresa je m.facebook.com. Mobilni URL se obično automatski bira za vas kada surfate pomoću mobilnog tableta ili pametnog telefona. U nekim slučajevima, vidjet ćete vezu koja se može dodirnuti i koja vam omogućava da se prebacite na standardnu verziju stranice.
Polja za prijavu i lozinku namijenjena desktop i laptop računarima postaju sićušna i neupotrebljiva na telefonu, pa ih web izdavači povećavaju, ponekad im dajući vlastite stranice radi lakšeg korištenja. Prijavljivanje pomoću otiska prsta ili nekog drugog naloga, kao što je Google ili Facebook, postaje sve češće kako se mogućnosti uređaja i usluga razvijaju.
Zašto je to važno?
Mobilne web stranice su dizajnirane za ručne uređaje i prilično se razlikuju od stranica napravljenih za čitanje sa desktopa. Iako obično možete vidjeti desktop verziju web stranice na mobilnom uređaju i obrnuto, one su drugačije dizajnirane kako bi sadržaj olakšali pregledavanje, čitanje i navigaciju.
