Oglejte si oblikovanje za mobilne naprave
Ko je bil izdan prvi iPhone, je neurje zajel svet tehnologije. Od takrat je bilo skoraj 5 let in na trgu pametnih telefonov ramped v priljubljenosti, s celo Microsoft je dobil v konkurenci z operacijskim sistemom Windows 7 in partnerji. S tako veliko uporabnikov interneta na njihovem pametnem telefonu danes je smiselno pričakovati, da se bo število mobilnih spletnih strani povečalo agresivno.
Oblikovanje mobilnega spleta pa je popolnoma drugačna operacija s skupnim spletnim oblikovanjem. Naše spletne strani so zasnovane za velik zaslon, vendar je velikost zaslona pametnega telefona premajhna v primerjavi s tem, kar vodi do nadležnih težav z uporabnostjo. Novi standardi in prakse oblikovanja so zelo potrebne za boljšo obliko mobilnega spletnega mesta z gladko uporabniško izkušnjo.
V tem priročniku si bomo prizadevali oblikovati uporabniku prijazno spletno mesto za mobilne brskalnike pametnih telefonov. Govoril bom o najboljših praksah in uporabnem orodju za razvijalce, s katerim boste oblikovali boljšo mobilno spletno mesto, zato pojdimo v to po skoku!
Načrtovanje močne uporabniške izkušnje
Ko ustvarite spletno mesto za mobilne naprave, je to pomembno Vedno upoštevajte vaše uporabnike, saj je vaša spletna stran zasnovana in ustvarjena za uživanje uporabnikov. To je zagotovo običajno, da uporabniki pričakujejo, da se mobilna spletna stran obnaša podobno kot namizno okolje ohranjanje uporabniške izkušnje prijazno mora biti glavni poudarek pri izgradnji uspešne mobilne strani.
Za vaše uporabnike je treba upoštevati veliko konceptov uporabnosti. Ti pomisleki vključujejo velikost zaslona, inline slike, hiperpovezave, velikosti pisav, in navigacija po straneh. Pisali smo o oblikovanju mobilnosti v mobilnih omrežjih, da bi si ustvarili spletno stran za boljšo uporabnost. Poleg vodnika morate vedno bodite pozorni na nove ideje za izboljšanje svojega spletnega mesta.
Načrtovanje močne uporabniške izkušnje pomeni tudi, da morate razmislite, kako bo uporabnik sodeloval z vašim spletnim mestom. Na namizju se lahko spletna stran poveže z miško in tipkovnico, na pametnem telefonu pa bodo uporabniki prisluškovanje, flicking, in vlečenje svojo pot okoli vašega spletnega mesta. Verjetno morate oblikovati spletno mesto na način, ki ga lahko uporabniki s temi fizičnimi premiki preprosto dostopate do informacij o lokaciji.
Obdržite strani Short & Sweet
Meso in krompir na kateri koli spletni strani je vsebine strani. Vsaka od vaših spletnih strani vsebuje pomembne količine koristnih informacij za uporabnike, kot so besedilo, fotografije ali videoposnetki. Našli boste tudi novice in objave na spletnih straneh, ki bodo delovali na nekaj straneh, kar lahko pomaga pri razgradnji besedila, vendar ni priporočljivo za mobilne naprave, saj je tehnika zahteva več nalaganja strani, kar pomeni, da je na čakalniku več časa.
Razen če je to nujno potrebno, priporočam ohranjanje vsebine vaše strani kratko. Prav tako bi morali razmisliti o tem, da bo izgledal sladko styling pisave na veliko večjo velikost in morda premikajočih se slik. Z vašo vsebino na celotnem zaslonu seveda pritegne pozornost, da ne omenjamo optimizacije, ki dejansko olajša skeniranje strani. To je tudi razlog, zakaj a postavitev enega stolpca popolnoma ustreza zakonu.
V večini primerov mobilni brskalniki ne bodo naložili spletnih strani tako hitro kot namizni brskalniki, kar bi lahko razburilo vaše bralce, zato morate optimizirate vsebino in spletno mesto za hitro nalaganje vsebin. Lahko tudi ob hkratnem ohranjanju celotne vsebine skrajšajte članek, ali preprosto odstranite nepotrebne slike. Namesto lepote se osredotočite na preprostost.
Vaša osnovna navigacija je življenjsko varčevanje za obiskovalce, ki iščejo premikanje med stranmi. Na mobilnih napravah bodo povezave na zaslonu po naravi veliko manjše, zato jih je težje uporabiti. Pomembna rešitev za rešitev tega vprašanja je maksimirajte pisavo in prostor za navigacijske povezave, morda celo celotno območje bloka. Lahko pa tudi oblikujete navigacijsko vrstico tako, da bo podobna vrstici z zavihki aplikacije iPhone, kot je prikazana zgoraj.
Zgradite slogi CSS
Zdaj, ko vemo, kako optimizirati mobilno spletno stran za boljšo berljivost in uporabnost, bi bilo dobro govoriti o stilih CSS. Vsaka slogovna vrstica CSS vsebuje številne izbirnike z lastnostmi, ki se nanašajo na pisave, velikosti, nastavitve položaja in nastavitve prikaza. Ko gre za mobilne, morate biti pozorni kako bloki padajo na svoje mesto.
(Vir slike: Smashing Magazine)
Eno področje za začetek je nastavite širino ovojnice spletnega mesta v odstotke. Pogosto je uporaba slikovnih pik kot enote za pozicioniranje, višino črte, velikost pisave in širino DIV-a, vendar boste pri delu z mobilnimi napravami želeli, da so vaše strani prehod med vsako napravo naravno. Če nastavite razdelke na 100% širine, bo vsebina dovoljena enostavno zapolnite med pokončnim / ležečim načinom, ne da bi tekli čez rob.
Če ste eden od ljudi, ki si želijo preurediti celotno postavitev, poskrbite, da boste zadeti vse z a ponastaviti. Tudi odstavki, naslovi in povezave za navigacijo morajo biti nastavljeni na prikaz: blok; tako boste dobili občutek linearnega tiskanja. Znova postavite robove in oblazinjenje, da odstranite nabrekanje iz vaše postavitve. Izogibajte se tabelam če je možno, ker ti ponavadi povzročajo ovire med napravami.
Velike slike so tudi težave med napravami. Večina slik vaše spletne strani bo postala večja od 480px in morda ne boste želeli, da bi zlomili vsebnik. Prva možnost je, da nastavite širino na 100%, tako da bodo slike naravno spremenile velikost. Gotovo je mogoče ustvarite različne nize slik za vaše spletno mesto in jih naredite drugače na podlagi brskalnika, toda pošteno to samo dodaja več del na vaši strani, zato poskusite uporabite tehniko samo takrat, ko je resnično potrebna.
Oblikovanje spletnih mest za iPhone
Tržni delež mobilne telefonije je precej velik in razdeljen, toda Apple ima velik del pite z iDevices. Tako iPhone kot iPad sta mobilne naprave, ki so pripravljene na internet in imajo vgrajen zaslon na dotik. Imajo isti privzeti spletni brskalnik, Safari in celo vrsto drugih možnosti.
Za spletne strani, specifične za iPhone, morate ciljati velikost zaslona. Fiksna velikost zaslona je nastavljena na 320px s 480px za starejše modele iPhone in 640px za 960px za iPhone 4 in iPhone 4S.
Zasloni iPhone so omejeni na prostor. Moral bi en blok vsebine, ki se razteza tako dolgo, kot je potrebno. Ohranjanje elementov v enem stolpcu vam bo prihranilo glavobole in omogočajo postavitev tekočine “izpolni” tako portretni kot ležeči. Za to boste verjetno morali razviti drugo predlogo in poiskati način, da preverite, ali vaš obiskovalec uporablja iPhone. Majhen delček PHP spodaj bi moral dobro delovati:
V bistvu logika potegne naš globalni $ _SERVER spremenljivka za agenta HTTP in preveri, ali je beseda “iphone” kjerkoli se pojavi. Če da, potem vemo, da naš obiskovalec uporablja iPhone in od tam lahko postavimo nekoliko drugačen HTML ali celo popolnoma novo postavitev predloge! To bi se lahko uporabilo tudi za vključuje stilsko listo za iPhone, spremenite naslove strani, odstranite slike ali skoraj vse dinamične učinke.
Ko gre za serviranje novih stilov, je lažji način. Kot smo že omenili, je največja velikost zaslona za iPhone široka 960 pikslov. Zato lahko z novimi poizvedbami za medije CSS3 dodajate sloge neposredno v glavno slogovno shemo spletnega mesta, ki bo samo prikaz na iPhone. Spodaj je majhen primer kode:
@ medijski zaslon in (max-device-width: 960px) / * iPhone css * /
To deluje, ker CSS lahko zdaj zazna agente za brskanje in njihove lastnosti. Največja širina zaslona je ena od lastnosti, ki jo je mogoče zaznati.
Vse-v-vse mobilno spletno mesto za naprave iPhone ni preveč težko oblikovati, saj je preveč primerov, ki jih lahko navedete, npr.. Zaposlujte se študija in ne bojte se preizkusite nove tehnike v oblikovanju uporabniškega vmesnika.
Mobile jQuery Scripting
Večina razvijalcev sprednjih strani je seznanjena s knjižnico jQuery. Ponuja nekaj fantastičnih okrajšav za učinke kodiranja, animacije, spustne menije in številne druge funkcije brskalnika v brskalniku. je ni priporočljivo, da skočite v tehnologijo neposredno in naložite vašo spletno stran z učinki povsod, vendar lahko za namene testiranja napredne funkcije igrajo zelo dobro.
jQuery Mobile je nekoliko drugačen od običajnega jQuery-ja, saj vam omogoča polno okolje za nadgradnjo. Ko delate z njihovimi datotekami, ne gre samo za JavaScript, temveč tudi za stile CSS za gumbe, povezave in učinke prehoda. Še vedno pišete spletne strani v HTML kodi, toda ekipa jQuery Mobile ima priskrbel veliko dodatnih možnosti oblikovanja uporabniškega vmesnika. S tem okvirom lahko veliko storimo, vendar od takrat okvir je še vedno v beta fazi, držimo se preprostih učinkov.
Majhna vadnica na blogu DevGrow ponuja nekaj odličnih primerov. Uradna stran ponuja tudi predstavitve, ki jih lahko preizkusite. Upoštevajte, da uporabljamo atribut HTML, prehod podatkov za dodajanje učinkov animacije s katero koli od vnaprej določenih vrednosti. Ti vključujejo diapozitiv, pop, flip, fade, itd. Oglejte si mali primer DevGrow, da bi dobili okus teh učinkov.
Učinki in prehodi so precej čedni, dejstvo, da lahko gradite celoten mobilni vmesnik strogo z jQuery, je prav tako velik korak naprej za to platformo, vendar s platformo samo v beta različici ne bi priporočal, da zgradite celotno mobilno spletno mesto z njihove knjižnice, zlasti z dejstvom, da je ne podpirajo vsi večji pametni telefoni v času pisanja (zlasti Windows Phone 7), vendar se bo s časom zagotovo izboljšalo.
Konec koncev vam priporočam, da se seznanite s tem novim mobilnim okvirom prej v živo na katerem koli projektu.
Koristna orodja za razvijalce
Mobilni razvijalci ne iščejo samo virov za kodiranje in oblikovanje. Obstaja tudi veliko povpraševanje po programskih orodjih in IDE, da ne omenjamo zmogljivih mobilnih okvirov. Spletni razvoj je težka naloga, ki zahteva precej predanosti, vendar pa bo z uporabo dodatnih orodij vaše delo veliko lažje.
Opera Mobile Emulator
Iščete način za preverjanje prikaza vaše mobilne spletne strani? To je lahko velika bolečina, če nimate pametnega telefona z dostopom do interneta. Ali pa ne želite uporabiti pametnega telefona, da preizkusite spletno mesto vsakič, ko posodobitev potisnete na strežnik. No, Opera Mobile Emulator je odličen program za testiranje vaše mobilne spletne strani.
Emulator podpira okoli 20 mobilnih profilov kot so Samsung Galaxy S, HTC Desire in celo tablete, kot je Motorola Xoom. Možno je tudi nastaviti ločljivost po meri in gostota slikovnih pik za namene intenzivnega testiranja. Najboljše od vsega je, da vam ni treba opravljati preveč konfiguracijskih del, naredite le nekaj klikov in ste pripravljeni.
Prenos je popolnoma brezplačen in programska oprema deluje v okolju Mac OS X in Windows. Njihovi razvijalci so težki pri ustvarjanju ustreznih spletnih standardov in spreminjanju njihovega mobilnega upodabljanja. Drugim orodjem za razvoj priporočam, če iščete dodatna orodja, ki vam bodo pomagala na poti.
PhoneGap
Ni bilo veliko API-jev, razvitih v HTML5 za izgradnjo trdnih mobilnih aplikacij. Predvsem mobilno pokrajino je manjkalo te vrste spletnih strani, kar je tudi razlog, zakaj PhoneGap tako dobro zapolni nišo. Njihova platforma vam omogoča enostavno izdelate aplikacije, ki temeljijo na HTML5, kot domače aplikacije na 6 različnih platformah.
Proces deluje tako, da najprej stisne kodo in jo prenese skozi aplikacijski okvir PhoneGap. Od tam lahko aplikacije dosežejo velik del mobilnega trga, vključno z Androidom, iOS, Windows Phone 7 in BlackBerry.
Če ste malo zmedeni, se ne preveč bojite. Njihove strani za podporo lepo opisujejo proces in ponujajo povezave do koristnih virov. Aplikacije, ki so že bile razvite, so bile zbrane v čudovitem knjižničnem slogu. Oglejte si celotno zbirko aplikacij, ki jo lahko nato razvrstite po napravah z zaslonskimi posnetki.
Studio Aptana
Spletna stran Aptana je glavna lokacija za učenje o njihovih razvojnih orodjih. Najnovejša izdaja paketa, Aptana 3.0.3, vključuje popolnoma integriran IDE za razvoj spletnih strani, stile CSS in gnezdenje HTML oznak, najboljši del: Aptana je popolnoma prost prenesti! Ponujajo pakete za vse tri glavne operacijske sisteme (vključno z Linuxom), kar je veliko ugodnost za razvijalce.
Posebnost Aptane je, kako hitro lahko razvijete majhno spletno aplikacijo in preizkusite svoj dizajn. Studio vam omogoča hitro razvijete in preizkusite spletno aplikacijo, ki teče preko Ruby on Rails, PHP, Python ali preprosto HTML / CSS, in njihove funkcije za poudarjanje kode so nedavno izboljšane vključujejo nove knjižnice oznak HTML5 in CSS3. Prav tako prihaja z integracijo Git, vgrajen terminal, razhroščevalnik kode in peščico drugih elegantnih funkcij.
Mobile GUI kompleti in ikone
Kakšna bi bila splet brez brezplačnih ležišč? Za spletne oblikovalce je pomembnost uporabniškega vmesnika uvrščena nad vse ostalo. Preprosti grafični uporabniški vmesniki so težki in le najbolj ustvarjalni oblikovalci so pripravili delovne rešitve.
Vendar pa obstaja veliko brezplačnih še kakovostnih virov, ki so na voljo za vaš spletni oblikovalec, da preizkusite. Ti GUI kompleti so večinoma zasnovani za Adobe Photoshop ali Fireworks, kjer se lahko premikate po elementih in jih izvozite kot ravne slikovne datoteke.
Ikone so zelo priročen vir. Oblikovalci ustvarjajo brezplačne komplete in jih ponujajo na spletu pogosteje kot kdajkoli prej. Ena takšna spletna stran Glyphish ima razstavo prostih in pro ikon. Ti modeli temeljijo na eni sami temi, ki se uporablja za predloge za mobilne naprave in modele aplikacij.
Naša zbirka modelov za izdelavo prototipov za mobilne naprave vam bo v veliko pomoč na poti razvoja spletne strani in aplikacij. Ne bi smeli začeti s kodiranjem, dokler ne boste imeli močnega grafičnega vmesnika in ti spletni paketi vas bodo začeli na pravi poti.
iOS 5 GUI Kit
Elementi Vector UI Vector
Komplet ikon za aplikacijo iPhone
Wireframe Magnets (Komplet DIY)
GUI za vmesnik Android
