Web stranice koje su optimizirane za korištenje na mobilnim uređajima razlikuju se od onih koje se pojavljuju na stolnim i prijenosnim računalima. Potonji su dizajnirani za velike zaslone i precizno klikanje mišem, dok su mobilne web stranice veličine za manje zaslone i neprecizno dodirivanje prstima.
- Dizajniran za manje zaslone i neprecizno dodirivanje prstima.
- Dizajniran za velike zaslone s preciznim klikom miša.
S obzirom da većina posjeta web-mjestu dolazi s mobilnih uređaja, dizajneri web-mjesta imaju zadatak osigurati verzije koje rade i s mobilnim uređajima i stolnim računalima. Najčešći pristup je korištenje responzivnog web dizajna, koji automatski isporučuje odgovarajuću verziju na temelju korisničkog uređaja i veličine zaslona, koju preglednik otkriva.
U svakom slučaju, web stranice prilagođene mobilnim uređajima razlikuju se od verzija za stolna računala na više načina.
Dizajn stranice: mobilni zasloni imaju manje prostora
- Zasloni pametnih telefona i tableta imaju dijagonalu od 4 do 10 inča.
- Sklopivi ili proširivi widgeti izbornika obično zamjenjuju bočne trake i glomazne izbornike zaglavlja.
-
Grafike pune širine s pravednom upotrebom razmaka između teksta.
- Većina stolnih monitora ima dijagonalu od 19 do 24 inča.
- Sponzorirane veze i veliki banner oglasi su češći.
- Gušći tekst s više prostora za grafiku.
Najočitija razlika između web stranica za stolna računala i mobilnih uređaja je površina zaslona. Dok većina stolnih monitora ima dijagonalu od najmanje 19 inča do 24 inča, tableti su obično oko 10 inča. Pametni telefoni imaju dijagonalu oko 4 inča. Jednostavno smanjivanje ne pretvara web stranicu u verziju prilagođenu mobilnim uređajima jer čini tekst nečitljivim i zahtijeva dodatni korak od posjetitelja stranice. Također, precizno dodirivanje sitnih elemenata postaje nemoguće.
Da bi riješili problem, dizajneri mogu ukloniti bočne trake i grafike koje nisu nužno potrebne. Umjesto toga, koriste manju grafiku, povećavaju veličinu fonta i sažimaju sadržaj u proširive widgete. Ovo ograničenje nekretnina potaknulo je potpuno drugačije razmišljanje među web dizajnerima.
Također, widgeti izbornika koji se mogu sklopiti ili proširiti obično zamjenjuju bočne trake i glomazne izbornike zaglavlja. U svojoj potrazi da svaki milimetar prostora na zaslonu bude važan, dizajneri uklanjaju suvišni bijeli prostor, dok pažljivo paze na čitljivost.
Gomila sponzoriranih veza i velikih banner oglasa jednostavno ne funkcionira na telefonu ili malom tabletu. Umjesto toga, mali skočni oglasi češći su na mobilnim web stranicama.
Izgledi koji sadrže tekst omotan oko grafike ne rade dobro na mobilnim uređajima. Umjesto toga, dizajneri često toj grafiki daju punu širinu zaslona i pokreću tekst ispod ili iznad. Slično tome, dobar web dizajn rastavlja tekst u dijelove radi čitljivosti; nitko ne želi čitati čvrste zidove teksta. To postaje još važnije na malim ekranima. Razborito korištenje razmaka je ključno.
Kontrole stranice: Preciznost stolnog računala u odnosu na mobilne mrlje
- Velika područja za dodirivanje ili vruće točke za točniju navigaciju.
- Različiti URL: dodaje slovo "m." Često opcija za prikaz desktop verzije stranice.
- Akreditivi za prijavu često imaju namjenski prostor, ponekad s pristupom otiskom prsta.
- Preciznije poveznice i gumb temeljene na pokazivaču.
Za razliku od preciznog pokazivača miša na vašoj radnoj površini, ljudski prst je mrlja, a dodirivanje zahtijeva velike ciljeve na zaslonu za hiperveze. Web-mjesta prilagođena mobilnim uređajima nude velika dodirna područja (ili žarišne točke) kako bi se olakšala točna navigacija.
Web stranice prilagođene mobilnim uređajima također često sadrže slovo m u svojim adresama; na primjer, Facebookova mobilna adresa je m.facebook.com. Mobilni URL obično se odabire automatski za vas kada surfate putem mobilnog tableta ili pametnog telefona. U nekim ćete slučajevima vidjeti poveznicu koju možete dodirnuti i koja vam omogućuje prebacivanje na običnu verziju stranice za radnu površinu.
Polja za prijavu i zaporku namijenjena stolnim i prijenosnim računalima 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. Prijava otiskom prsta ili drugim računom, poput Googlea ili Facebooka, postaje sve češća kako se razvijaju mogućnosti uređaja i usluga.
Zašto je to važno?
Mobilne web-stranice dizajnirane su za ručne uređaje i prilično se razlikuju od stranica napravljenih za čitanje sa stolnog računala. Dok verziju web-stranice za radnu površinu obično možete pogledati na mobilnom uređaju i obrnuto, one su drugačije dizajnirane kako bi sadržaj bio lakši za pregledavanje, čitanje i navigaciju.
