Vjerojatno ste vidjeli kako iPhone može okretati i širiti web stranice. Može vam na prvi pogled prikazati cijelu web stranicu ili povećati tekst kako bi tekst koji vas zanima bio čitljiv. U jednom smislu, od iPhone koristi Safari, web dizajneri ne bi trebali učiniti ništa posebno za stvaranje web stranice koja će raditi na iPhoneu. No, želite li doista da vaša stranica samo radi - ili se ističe i blista?
Kada ti izgraditi web stranicu, morate razmisliti o tome tko će ga pogledati i kako će ga gledati. Neke od najboljih web lokacija uzimaju u obzir na kojem se uređaju stranica pregledava, uključujući rezoluciju, opcije boja i dostupne funkcije. Ne oslanjaju se samo na uređaj kako bi to shvatili.
Opće smjernice za izradu web mjesta za mobilne uređaje
- Testirajte na što više uređaja. Prvo što biste trebali učiniti je pogledati svoju web stranicu na iPhoneu i na toliko različitih Mobilni uredaji ili emulatore koliko god možete. Iako za sve svoje testove možete koristiti emulatore, oni vam zaista ne daju isti osjećaj kao da pokušavate navigirati web stranicom na malom malom zaslonu. Trebali biste testirati na stvarnim uređajima što je više moguće.
- Neka se vaše stranice graciozno degradiraju. Možete napisati svoje stranice za Omogućen Flash, širokozaslonski preglednici, ali pripazite da su ključne informacije vidljive čak i na majušnom monitoru koji ne može obraditi nikakve posebne značajke (poput kolačića, Ajaxa, Flash-a, JavaScript-a itd.). Sve što je izvan XHTML Basica bit će izvan nekih mobitela. Iako se većina pametnih telefona može nositi sa svim tim stvarima, drugi mobilni uređaji ne mogu.
- Izradite stranicu specifičnu za bežičnu mrežu - i olakšajte je pronalaženju. Ako ćete izraditi određenu stranicu za kupce mobitela i bežične mreže - učinite je dostupnom. Odličan je način staviti vezu na bežičnu stranicu na sam vrh dokumenta, a zatim sakriti tu vezu od ne-ručnih uređaja pomoću ručnog medija. Napokon, većina ljudi dolazi na vašu početnu stranicu, čak i na mobitelima - a ako veze do vaše bežične stranice nema, otići će ako je stranicu preteško koristiti.
Izgled web stranice za pametne telefone
Prvo čega biste se trebali sjetiti prilikom pisanja stranica za tržište pametnih telefona jest da ne morate unositi nikakve promjene ako to ne želite. Sjajna stvar kod većine dostupnih pametnih telefona je što koriste Webkit preglednike (Safari na iOS-u i Chrome na Androidu) prikažite web stranice, pa ako vaša stranica izgleda dobro u Safariju ili Chromeu, izgledat će dobro na većini pametnih telefona (samo puno manji). Ali postoje stvari koje možete učiniti kako biste iskustvo pregledavanja učinili ugodnijim:
- Imajte na umu da je zaslon malen. Pametni telefoni kondenzirat će sve te stupce u maleni prozor, a to ih može učiniti vrlo teškim za čitanje bez zumiranja. Većina korisnika naviknuta je na zumiranje, ali to može postati zamorno. Lakši je čitanje jednog dugog stupca teksta.
- Podijelite stranice na manje dijelove. Čitati duge segmente teksta na mobitelu može biti teško, pa ih stavljanjem na više stranica olakšava čitanje.
Veze i navigacija na iPhone uređajima
- Što su URL-ovi kraći, to su bolji. Ako ste ikad pokušali upisati URL na mobitelu, znat ćete da je to muka (osim možda za tinejdžere koji su navikli slati puno tekstualnih poruka). Čak je i na iPhoneu zamorno upisivati dugačke URL-ove. Neka budu kratki.
- Ali lakše je dodirnuti tekst duge veze. Kada se na stranici nalazite nekoliko odvojenih riječi povezanih s različitim člancima, točno jedna pored druge, može biti vrlo teško dodirnuti ispravnu bez zumiranja. Mnogi će ljudi jednostavno odustati i otići negdje drugdje. Veze s 3 do 5 riječi lakše je kliknuti telefonom nego veze s 1 riječju.
- Ne stavljajte navigaciju na sam vrh zaslona. Ne postoji ništa neugodnije od potrebe za listanjem zaslona i zaslona veza kako biste pronašli željene informacije. Ako ste pogledali web stranice dizajnirane za mobitele, vidjet ćete da su prve stvari koje se pojavljuju sadržaj i naslov. Zatim, ispod toga je navigacija.
- Ne bojte se sakriti navigaciju.Sakrivanje navigacijskih veza pomoću CSS-a ili JavaScript-a, a njihovo prikazivanje samo kada korisnik to zatraži, način je koji olakšava stranicu korisnicima pametnih telefona.
Savjeti za slike na pametnim telefonima
- Slike moraju biti male. Da, Android i iPhone mogu povećavati i smanjivati slike, ali što su manje, i u dimenzijama i u vremenu preuzimanja, vaši će bežični korisnici biti sretniji. Optimizacija slika je uvijek dobra ideja, ali za stranice mobitela je kritično.
- Slike se moraju brzo preuzeti. Slike zauzimaju puno prostora na web stranicama kada ih gledate s mobilnog uređaja. Iako su često vrlo lijepe i čine da stranice izgledaju bolje kada se gledaju u web-pregledniku preko cijelog zaslona, često im smetaju na mobilnom uređaju. Uz to, kada je korisnik pametnog telefona na mobilnoj mreži, posljednje što žele platiti je preuzimanje gomile ogromnih slika ili ikona za navigaciju.
- Ne stavljajte velike slike na vrh stranice. Baš kao i kod navigacije, i na samom vrhu stranice može biti vrlo zamorno čekati da se slika učita do 3 do 4 zaslona. I to je izuzetno često na web stranicama. Izuzetak je jedino ako čitatelj zna da će dobiti sliku kad klikne, recimo u fotogaleriji.
Što treba izbjegavati prilikom dizajniranja za mobitel
Postoji nekoliko stvari koje biste trebali izbjegavati prilikom izrade stranice prilagođene mobilnim uređajima. Kao što je gore spomenuto, ako ih stvarno želite imati na svojoj stranici, možete, ali pobrinite se da web lokacija radi bez njih.
- Bljesak: Većina mobilnih telefona ne podržava Flash, pa ga nije dobro uvrstiti na svoje bežične stranice.
- Kolačići: Mnogi mobiteli nemaju podršku za kolačiće. iPhoni jesu podrška za kolačiće.
- Okviri: Čak i ako ih preglednik podržava, razmislite o dimenzijama zaslona. Okviri jednostavno ne rade na mobilnim uređajima - vrlo ih je teško ili ih je nemoguće pročitati.
- Stolovi: Ne koristite tablice za izgled na mobilnoj stranici. I pokušajte izbjegavati tablice općenito. Nisu podržani na svim mobitelima (iako ih podržavaju iPhone i drugi pametni telefoni), a na kraju možete dobiti čudne rezultate.
- Ugniježđene tablice: Ako morate koristiti tablicu, pazite da je ne ugnijezdi u drugoj tablici. Teško ih podržavaju preglednici za stolna računala i, u najboljem slučaju, usporavaju učitavanje stranice.
- Apsolutne mjere: Drugim riječima, nemojte definirati dimenzije predmeta u apsolutnim veličinama (poput piksela, milimetara ili inča). Ako nešto definirate kao širinu od 100 piksela, na jednom mobilnom uređaju to može biti polovica zaslona, a na drugom dva puta veća širina. Relativne veličine (poput ems-a i postotaka) najbolje funkcioniraju.
- Krstionica: Ne pretpostavljajte da je bilo koji od fontovi na koji ste navikli da će pristup biti dostupan na mobitelima.