Iako se broj web stranica bez optimizacije za mobilne uređaje smanjuje, postoje neke koje su dizajnirane samo za stolna računala. Nažalost, Googleova prethodna web usluga „mobilizatora“je prekinuta. Duhovni nasljednik usluge je Google Weblight, osmišljen oko optimizacije za spore veze, a ne revizije web stranica za gledanje putem mobitela. Osim Googleovih usluga, postoje brojne prakse i alati koje treba uzeti u obzir pri razvoju web stranice s mobilnim uređajima na umu.
Koraci
1. dio od 2: Eksperimentiranje s Google Weblight -om
Korak 1. Analizirajte kako Weblight radi
Weblight je algoritam koji je stvorio Google kako bi korisnicima omogućio brže i lakše učitavanje stranica u lošim mrežnim uslovima. To znači da Weblight nema korisničko sučelje i radi na pozadini. Stranicama su oduzeti složeniji elementi koji pružaju skraćeno i lagano iskustvo, a ne jedan eksplicitno optimiziran za mobilnu platformu.
Korak 2. Testirajte promjene web lokacije pomoću Weblight -a
Na svom mobilnom uređaju jednostavno dodajte cijeli URL web stranice na kraj weblight adrese (npr. Ako je vaša web stranica "mywebsite.com", tada unesite https://googleweblight.com/?lite_url=https://mywebsite.com). Stranica će učitati pojednostavljenu, ali funkcionalnu verziju. S uklonjenim elementima, neke web stranice mogu se pojaviti puno bolje na ekranima mobilnih uređaja.
Korak 3. Prepoznajte ograničenja
Imajte na umu da ovo nije eksplicitan alat za pretvaranje dizajniran za interakciju korisnika. Iako se ručni unos web stranice može koristiti za kratko vrijeme, Weblight je dizajniran za brzinu, a ne za upotrebu.
Dio 2 od 2: Dizajniranje za mobilnu kompatibilnost
Korak 1. Imajte na umu ograničenja mobilnih uređaja
Mobilni uređaji dijele nekoliko aspekata po kojima se razlikuju od svojih desktop računara. Ove osnovne značajke trebale bi biti glavna razmatranja pri kreiranju web stranice za mobilnu potrošnju.
- Mali ekrani i vertikalnost: Iako se rezolucije zaslona na mobilnim uređajima stalno poboljšavaju, veličina i faktor oblika ostaju briga za dizajn web stranice. Dizajniranje web stranice u jednom stupcu izgleda najbolje je za telefone (tableti često mogu koristiti web stranice za računare bez previše problema).
- Interfejsi na dodir: Elemente stranice treba postaviti s obzirom na veličinu prsta. Elemente koji koriste prelazak mišem treba smanjiti ili redizajnirati za dodir (npr. Padajući izbornici).
- Brzina prijenosa podataka: Jedna od velikih prednosti mobilnih uređaja je upotreba izvan dometa WiFi mreže, ali podatkovne veze su obično sporije i manje pouzdane. Korisničko sučelje (UI) treba ostati jednostavno, a sadržaj biti vidljiv i dostupan. Previše nereda će otežati vrijeme učitavanja i otežati navigaciju.
Korak 2. Koristite uslugu CMS (Content Management System)
Za one koji se razvijaju s manje resursa, korištenje CMS servisa poput Wordpressa ili Squarespacea odlična je opcija za jeftino i jednostavno za korištenje dizajn mobilnog telefona. Teme koje koriste responzivni web dizajn pružit će najjednostavniji predložak za mobilnu web lokaciju.
Responzivni web dizajn je teorija web dizajna koja promiče upotrebu fluidnih elemenata dizajna kako bi omogućila glatke prijelaze dizajna i upotrebljivosti na različitim platformama
Korak 3. Testirajte ekrane mobilnih uređaja pomoću softvera za računare
Postoji niz besplatnih web aplikacija koje vam omogućuju oponašanje mobilnih uređaja radi testiranja estetike i funkcionalnosti web stranice. Korištenje ovih alata jednostavno je kao i odabir željenog testnog uređaja, a zatim ulazak na ciljanu web stranicu radi pregleda. Većina će uključivati alate za varijable poput orijentacije ekrana, gustoće piksela ili čak odabira preglednika. Nekoliko popularnih primjera su:
- Emulator načina uređaja Chrome
- mobilephoneemulator.com
- screenfly (podskup quirktools -a)
- mobiletest.me (plaćeno članstvo)
