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 mobilno gledanje. Osim Googleovih usluga, postoje i 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 uvjetima. 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 mjesta pomoću Weblight -a
Na svom mobilnom uređaju jednostavno dodajte cijeli URL web -lokacije na kraj weblight adrese (npr. Ako je vaša web stranica "mywebsite.com", tada unosite https://googleweblight.com/?lite_url=https://mywebsite.com). Stranica će učitati pojednostavljenu, ali funkcionalnu verziju sebe. S uklonjenim elementima neka se mjesta mogu puno bolje prikazati na zaslonima mobilnih uređaja.
Korak 3. Prepoznajte ograničenja
Imajte na umu da ovo nije eksplicitan alat za pretvaranje dizajniran za interakciju s korisnikom. Dok se ručni unos web stranice može koristiti u krajnjoj mjeri, 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 stolnih računara. Ove temeljne značajke trebale bi biti glavna razmatranja pri izradi web stranice za mobilnu potrošnju.
- Mali ekrani i okomitost: Iako se rezolucije zaslona na mobilnim uređajima stalno poboljšavaju, veličina i faktor oblika ostaju zabrinutost za dizajn web mjesta. Dizajniranje web mjesta u jednom stupcu najbolje je za telefone (tableti često mogu koristiti stolna web mjesta bez previše problema).
- Sučelja na dodir: Elemente stranice treba postaviti s obzirom na veličinu prsta. Elementi koji koriste prelazak mišem trebaju biti minimizirani ili redizajnirani za dodir (npr. Padajući izbornici).
- Brzine prijenosa podataka: Jedna od velikih prednosti mobilnih uređaja je korištenje izvan wifi dometa, ali podatkovne veze su obično sporije i manje pouzdane. Korisničko sučelje (UI) trebalo bi ostati jednostavno, a sadržaj bi trebao biti vidljiv i dostupan. Previše nereda otežat će vrijeme učitavanja i otežati navigaciju.
Korak 2. Koristite uslugu Sustava za upravljanje sadržajem (CMS)
Za one koji se razvijaju s manje resursa, korištenje CMS usluge poput Wordpressa ili Squarespacea izvrsna je opcija za jeftino i jednostavno korištenje mobilnog dizajna. Teme koje koriste responzivni web dizajn pružit će najjednostavniji predložak za web mjesto za mobilne uređaje.
Responzivni web dizajn teorija je 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 zaslone mobilnih uređaja pomoću softvera za stolna računala
Postoji niz besplatnih web aplikacija koje vam omogućuju oponašanje mobilnih uređaja za testiranje estetike i funkcionalnosti web stranice. Korištenje ovih alata jednostavno je kao i odabir željenog testnog uređaja, zatim ulazak na ciljanu web stranicu radi pregleda. Većina će uključivati alate za varijable poput orijentacije zaslona, 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)
