Pogledajte dizajn za mobilne uređaje
Kada je prvi iPhone je objavljen je uzeo tech svijetu oluja. Od tada je prošlo gotovo 5 godina, a tržište pametnih telefona je poraslo u popularnosti, čak je i Microsoft ušao u konkurenciju sa svojim Windows 7 OS i partnerima. Sa toliko korisnika Interneta na svom pametnom telefonu danas, razumno je očekivati da će se broj mobilnih web-mjesta povećati agresivno.
Međutim, projektiranje za mobilni web je potpuno drugačija operacija s uobičajenim web dizajnom. Naše web stranice su dizajnirane za veliki zaslon, ali veličina zaslona pametnog telefona je premala u usporedbi s tim, što dovodi do neugodnih problema s upotrebom. Novi standardi i prakse dizajna uvelike su potrebni za bolji dizajn mobilnih web-lokacija s glatkim korisničkim iskustvom.
U ovom vodiču tražit ćemo dizajn web-mjesta za mobilne preglednike pametnih telefona. Govorit ću o najboljim praksama i korisnim alatima za razvojne inženjere kako biste osmislili bolju mobilnu web-lokaciju, pa ćemo se upustiti u nju nakon skoka!
Planiranje snažnog korisničkog iskustva
Prilikom izrade mobilne web-lokacije važno je uvijek imajte na umu svoje korisnike, kao što je u konačnici vaše web stranice je dizajniran i stvoren za korisnike da uživaju. Sigurno je da korisnici obično očekuju da se mobilna web-lokacija ponaša na sličan način kao i na radnoj površini održavanje korisničkog iskustva prijateljskim trebala bi biti vaš glavni fokus tijekom izgradnje uspješne mobilne web-lokacije.
Postoje mnogi koncepti upotrebljivosti koje treba uzeti u obzir za vaše korisnike. Ta razmatranja uključuju veličina ekrana, inline slike, hiperveze, veličine fonta, i navigacija po stranicama. Pisali smo o dizajnu mobilnosti za mobilne uređaje kako biste svoju web-lokaciju izradili za bolju upotrebljivost. Osim vodiča, morate uvijek budite oprezni zbog novih ideja da biste poboljšali svoju web-lokaciju.
Planiranje snažnog korisničkog iskustva također znači da biste trebali razmotrite kako će korisnik komunicirati s vašom web-lokacijom. Na radnoj površini vaše web stranice mogu biti u interakciji s mišem i tipkovnicom, ali na pametnom telefonu korisnici će biti kuckanje, kvrcanjem, i listanje svoj put oko vaše stranice. Vjerojatno trebate dizajnirati web-lokaciju na način na koji korisnici mogu lako pristupiti informacijama o mjestu s tim fizičkim pokretima.
Zadržite stranice Short & Sweet
Meso i krumpir bilo koje web stranice je sadržaj stranice. Svaka od vaših web stranica sadrži značajne količine korisnih informacija za korisnike, kao što su tekst, fotografije ili videozapisi. Naći ćete i novinske članke i postove na blogu koji se prikazuju na nekoliko stranica, što može pomoći u razbijanju teksta, ali se ne preporučuje za mobilne uređaje kao što je tehnika zahtijeva više učitavanja stranica što znači više vremena čekanja na strani korisnika.
Osim ako je to apsolutno potrebno, preporučujem zadržavanje sadržaja Vaše stranice kratko. Vi bi također trebali razmisliti o tome da izgleda slatko stiliziranje fonta na mnogo veću veličinu i možda pokretne slike na stranu. Sa svojim sadržajem na punom zaslonu prirodno privlači pozornost, a da ne spominjemo optimizaciju, zapravo čini skeniranje stranica puno jednostavnijim. To je ujedno i razlog zašto a izgled jednog stupca savršeno odgovara računu.
U većini slučajeva mobilni preglednici neće učitati web-stranice što je brže moguće od preglednika na radnoj površini i to bi moglo nervirati vaše čitatelje, zato trebate optimizirajte sadržaj i web-lokaciju za učitavanje sadržaja velike brzine. Možete i vi skratite članak zadržavajući cijeli sadržaj, ili jednostavno uklonite nepotrebne slike. Usredotočite se na jednostavnost umjesto na ljepotu.
Vaša osnovna navigacija je život spasitelj za svoje posjetitelje koji žele premjestiti između stranica. Na mobilnom uređaju veze zaslona bit će po prirodi mnogo manje, stoga je mnogo teže dodirnuti. Bitno ugađanje za rješavanje ovog problema jest maksimizirajte font i prostor za svoje navigacijske veze, možda zauzima cijelo područje bloka. Alternativno možete osmislite navigacijsku traku da bude slična traci s karticama stvarne aplikacije za iPhone, poput one prikazane iznad.
Izrada CSS stilova za mobilne uređaje
Sada kada znamo kako optimizirati mobilnu web stranicu za bolju čitljivost i upotrebljivost, dobro bi bilo razgovarati o CSS stilovima. Svaka CSS stilska tablica sadrži mnoge selektore sa svojstvima koja se odnose na fontove, veličine, postavke položaja i postavke prikaza. Kada je u pitanju mobitel, trebate obratiti pozornost kako blokovi padaju na svoje mjesto.
(Izvor slike: Smashing Magazine)
Jedno područje za početak je vratite širinu omota web-lokacije u postotak. Uobičajena je upotreba piksela kao jedinice za pozicioniranje, visinu linije, veličinu fonta i širinu DIV-a, ali kada se radi o mobilnim uređajima, bit će potrebno da se vaše stranice tekućine i prijelaz između svakog uređaja prirodno. Postavljanje divovih spremnika na 100% širine omogućit će sadržaj lako se puni između portretnog / pejzažnog načina rada bez prelijevanja preko ruba.
Ako ste jedan od ljudi koji žele preurediti cijeli raspored, provjerite jeste li pogoditi sve s reset. Također sve stavke, naslove i veze za navigaciju prikaz: blok; tako ćete dobiti taj osjećaj linearnog ispisa. Ponovno postavite margine i padding kako biste uklonili nadimak iz vašeg izgleda. Izbjegavajte tablice ako je moguće, budući da imaju tendenciju prikazivanja neispravnih rezultata između uređaja.
Velike slike su i gnjavaža između uređaja. Većina slika vaše web-lokacije prikazat će se veće od 480 piksela i možda ne želite da ih slomite. Prva opcija je da postavite širinu na 100% kako bi slike mogle prirodno mijenjati veličinu. Svakako je moguće stvorite različite skupove slika za svoju web-lokaciju i učiniti ih drugačije na temelju agenta preglednika, ali iskreno ovo samo dodaje više radova na vašu stranu, pa pokušajte koristite tehniku samo kada je stvarno potrebna.
Izrada web stranica za iPhone
Udio mobilnog tržišta je prilično velik i podijeljen, ali Apple ima veliki dio kolača s njihovim iDevices. I iPhone i iPad su mobilni uređaji spremni za internet s ugrađenom funkcijom zaslona osjetljivog na dodir. Imaju isti zadani web-preglednik, Safari i čitav niz drugih opcija.
Za web lokacije specifične za iPhone trebate ciljati veličinu zaslona. Fiksna veličina zaslona je postavljena na 320px za 480px za starije iPhone modele i 640 piksela za 960 piksela za iPhone 4 i iPhone 4S.
Zasloni iPhonea ograničeni su na prostor. Trebao bi imati jedan blok sadržaja koji se proteže onoliko dugo koliko je potrebno. Čuvanje elemenata u jednom stupcu će vam spasiti glavobolje i omogućuju raspored tekućina “popuniti” i portretni i pejzažni. Za to ćete vjerojatno morati razviti drugi predložak i pronaći način da provjerite koriste li vaši posjetitelji iPhone. Mali PHP isječak u nastavku trebao bi dobro funkcionirati:
U osnovi logika vuče naše globalno $ _SERVER varijabla za HTTP agent i provjerava je li riječ “iphone” pojavljuje se bilo gdje. Ako da onda znamo da naš posjetitelj koristi iPhone i odatle možemo staviti nešto drugačiji HTML ili čak cijeli novi predložak! To se također može koristiti uključiti stilove za stilove specifične za iPhone, promijenite naslove stranica, uklonite slike ili gotovo sve dinamičke efekte.
Kada je riječ o posluživanju novih stilova postoji jednostavniji način. Kao što je ranije spomenuto, maksimalna veličina zaslona za iPhone je široka 960px. Stoga s novim CSS3 medijskim upitima možete dodati stilove izravno u glavni stilski list svoje web-lokacije samo prikazati na iPhone uređaju. U nastavku je mali primjer koda:
@ media zaslon i (max-device-width: 960px) / * iPhone css * /
To radi jer CSS sada može otkriti agente pregledavanja i njihova svojstva. Maksimalna širina zaslona je jedno od svojstava koje se također može otkriti.
Sve-u-svim mobilnim web-lokacijama za iPhone uređaje nije previše teško dizajnirati, postoje samo previše primjera za upućivanje, na primjer, CSS iPhone. Držite se zauzetog proučavanja i ne bojte se eksperimentirajte s novim tehnikama dizajna korisničkog sučelja.
Skriptiranje za jQuery za mobilne uređaje
Većina prednjih web programera je upoznata s jQuery knjižnicom. Ona nudi neke fantastične kratice za kodiranje efekte, animacije, padajućeg izbornika, i niz drugih in-preglednik funkcionalnost, a to samo dobiva više strašan s najavom jQuery Mobile. to je ne preporuča se izravno u tehnologiju i učitati vaše web stranice s efektima svugdje, ali za potrebe testiranja napredne funkcionalnosti mogu igrati vrlo dobro.
jQuery Mobile je malo drugačiji od uobičajenog jQuery jer vam daje punu okolinu za nadogradnju. Kada radite s njihovim datotekama, oni nisu samo JavaScript već i CSS stilovi za gumbe, veze i efekte prijelaza. Još uvijek pišete web-stranice u HTML kodu, ali tim jQuery Mobile ima isporučena su mnoga dodatna svojstva dizajna korisničkog sučelja. Postoji mnogo toga što možemo učiniti s ovim okvirom, ali od tada okvir je još uvijek u beta fazi, držimo se jednostavnih učinaka.
Mali udžbenik na DevGrow blogu pruža neke sjajne primjere. Službena web-lokacija nudi i demonstracije koje možete isprobati. Imajte na umu da koristimo HTML atribut, Podaci-prijelaz za dodavanje animacijskih efekata s bilo kojom od unaprijed definiranih vrijednosti. To uključuje slajd, pop, flip, fade, itd. Pogledajte mali DevGrow primjer kako biste dobili okus tih efekata.
Efekti i prijelazi su prilično uredni, a činjenica da možete izgraditi cijelo mobilno sučelje isključivo s jQuery-om također je veliki korak naprijed za ovu platformu, ali s platformom samo u beta inačici ne bih preporučio izgradnju cijele mobilne web-lokacije njihovoj knjižnici, osobito s činjenicom da je to nisu podržani u svim većim pametnim telefonima u vrijeme pisanja (osobito Windows Phone 7), ali će s vremenom zasigurno biti bolje.
U konačnici preporučujem da se upoznate s ovim novim mobilnim okvirom prije implementirati u bilo kojem projektu.
Korisni alati za razvojne programere
Razvojni inženjeri za mobilne uređaje ne traže samo resurse za kodiranje i dizajn. Također postoji velika potražnja za softverskim alatima i IDE-ima, da ne spominjemo snažne mobilne okvire. Web razvoj je težak zadatak koji zahtijeva dosta posvećenosti, ali korištenje dodatnih alata učinit će vaš posao puno lakšim.
Opera Mobile Emulator
Tražite li način za provjeru prikazivanja mobilne web-lokacije? To može biti velika bol ako nemate pametni telefon s pristupom internetu. Ili jednostavno ne želite koristiti svoj pametni telefon kako biste testirali web-lokaciju svaki put kada se ažuriranje stavi na vaš poslužitelj. Pa, Opera Mobile Emulator je fantastičan komad softvera za testiranje vaše mobilne web stranice.
Emulator radi oko 20 mobilnih profila kao što su Samsung Galaxy S, HTC Desire, pa čak i tablet kao što je Motorola Xoom. Također je moguće postaviti prilagođena razlučivost i gustoća piksela u svrhu intenzivnog testiranja. Najbolje od svega, ne morate raditi previše konfiguracijskih radova, samo napravite nekoliko klikova i dobro ste ići.
Preuzimanje je potpuno besplatno i softver radi u Mac OS X i Windows okruženju. Njihovi razvojni inženjeri teško rade na izradi odgovarajućih web standarda i prilagođavaju njihov mobilni uređaj. Preporučujem njihove druge dev alate ako tražite dodatne alate koji će vam pomoći na tom putu.
PhoneGap
Nije bilo mnogo API-ja razvijenih tijekom HTML5 za izgradnju čvrstih mobilnih aplikacija. Osobito mobilni krajolik je nedostajalo ove vrste web stranica, što je točno zašto PhoneGap ispunjava niša tako dobro. Njihova platforma omogućuje vam jednostavno konstruirati aplikacije temeljene na HTML5 kao izvorne aplikacije na 6 različitih platformi.
Proces radi tako da najprije komprimirate svoj kôd i proslijedite ga kroz PhoneGapov aplikacijski okvir. Odatle vaše aplikacije mogu doseći veliki dio mobilnog tržišta, uključujući Android, iOS, Windows Phone 7 i BlackBerry.
Ako ste malo zbunjeni, ne uzrujavajte se previše. Njihove stranice podrške uredno opisuju proces i nude poveznice na korisne resurse. Aplikacije koje su već razvijene sastavljene su u prekrasnom portfelju u stilu knjižnice. Provjerite njihovu potpunu zbirku aplikacija koju možete poredati po uređajima s snimkama zaslona.
Studio Aptana
Aptana website je premijerno mjesto za učenje o njihovim razvojnim alatima. Najnovije izdanje paketa, Aptana 3.0.3, sadrži potpuno integrirani IDE za web razvoj, CSS stilove, i gniježđenje HTML oznaka, a najbolji dio: Aptana je potpuno besplatno preuzeti! Oni nude pakete za sva tri glavna operativna sustava (uključujući Linux), što je velika pogodnost za programere.
Ono što Aptanu čini posebnim je kako brzo možete razviti malu web aplikaciju i testirati svoj dizajn. Studio vam omogućuje brzo razviti i testirati web aplikaciju koja se pokreće preko Ruby on Rails, PHP, Python ili jednostavno HTML / CSS, i njihove značajke za isticanje koda nedavno su poboljšane uključuju nove HTML5 i CSS3 biblioteke oznaka. Također dolazi s integracijom Git-a, ugrađenim terminalom, programom za otklanjanje grešaka u kodu i pregršt drugih izvanrednih značajki.
Mobilni GUI setovi i ikone
Što bi bila web bez lišća? Za web dizajnere važnost korisničkog sučelja je iznad svih ostalih. Jednostavni GUI-i su teški i samo su najkreativniji dizajneri došli do radnih rješenja.
Međutim, postoje mnogi besplatni, ali kvalitetni resursi dostupni za vas web dizajner za testiranje. Ovi GUI setovi su uglavnom dizajnirani za Adobe Photoshop ili Fireworks gdje se možete kretati po elementima i izvoziti ih kao ravne slikovne datoteke.
Ikone su vrlo zgodan resurs. Dizajneri stvaraju besplatne setove i nude ih online češće nego ikada prije. Jedna takva web-stranica Glyphish ima izlog i besplatnih i profesionalnih ikona. Ovi dizajni temelje se na jednoj temi koja će se koristiti na mobilnim predlošcima i dizajnu aplikacija.
Naša kolekcija šablona za izradu prototipova mobilnih uređaja bit će vam od velike pomoći na putu razvoja web-mjesta i aplikacija. Ne biste trebali početi kodirati sve dok ne dobijete snažno grafičko sučelje, a ovi web-setovi će vas pokrenuti na pravom putu.
iOS 5 GUI Kit
Elementi Vector UI Vector
Komplet ikona za iPhone aplikacije
Žičani magnet (DIY Kit)
GUI za Android sučelje
