Ieskats mobilajām ierīcēm
Kad pirmais iPhone tika izlaists, tas paņēma vētras tehnoloģiju pasauli. Kopš tā laika tas ir bijis gandrīz 5 gadi, un viedtālruņu tirgus popularitāte ir palielinājusies, un pat Microsoft ir iekļuvusi konkursā ar Windows 7 OS un partneriem. Tā kā mūsdienās viedtālrunī ir tik daudz interneta lietotāju, ir saprātīgi sagaidīt, ka mobilo tīmekļa vietņu skaits palielināsies agresīvi.
Tomēr mobilās tīmekļa projektēšana ir pilnīgi atšķirīga darbība ar kopēju tīmekļa dizainu. Mūsu tīmekļa vietnes ir paredzētas milzīgam ekrānam, bet viedtālruņa ekrāna izmērs ir pārāk mazs, salīdzinot ar to, tādējādi radot kaitinošas lietojamības problēmas.. Jauni dizaina standarti un prakse ir ļoti nepieciešami, lai nodrošinātu labāku mobilās vietnes dizainu ar vienmērīgu lietotāja pieredzi.
Šajā rokasgrāmatā mēs vēlamies izveidot lietotājam draudzīgu vietni viedtālruņu mobilajām pārlūkprogrammām. Es runāšu par labāko praksi un noderīgu izstrādātāja rīku, lai jūs varētu izveidot labāku mobilo vietni, tāpēc nonāksim tajā pēc lēciena!
Spēcīgas lietotāja pieredzes plānošana
Veidojot mobilo vietni, ir svarīgi vienmēr paturiet prātā savus lietotājus, jo galu galā jūsu tīmekļa vietne tiek izstrādāta un izveidota lietotājiem, lai tā varētu baudīt. Protams, lietotāji parasti sagaida, ka mobilā tīmekļa vietne rīkosies līdzīgi darbvirsmas videi lietotāja pieredzes uzturēšana draudzīga vajadzētu būt jūsu galvenā uzmanība, veidojot veiksmīgu mobilo vietni.
Jūsu lietotājiem ir jāapsver daudzas lietojamības koncepcijas. Šie apsvērumi ietver ekrāna izmērs, attēlus, hipersaites, fonta lielumus, un lapas navigācija. Mēs esam rakstījuši par mobilās izmantojamības dizainu, lai jūs varētu padarīt jūsu vietni labāku lietojamību. Bez rokasgrāmatas vienmēr ir nepieciešams saglabājiet sev brīdinājumu par jaunām idejām lai uzlabotu vietni.
Spēcīgas lietotāja pieredzes plānošana nozīmē arī to, ka jums vajadzētu apsvērt, kā lietotājs sadarbosies ar jūsu vietni. Darbvirsmā jūsu vietni var mijiedarboties ar peli un tastatūru, bet viedtālruņa lietotājiem būs pieskaroties, flicking, un swiping savu vietni. Iespējams, jums ir nepieciešams veidot vietni tā, kā lietotāji to var viegli piekļūt vietnes informācijai ar šīm fiziskajām kustībām.
Saglabājiet Pages Short & Sweet
Jebkuras tīmekļa vietnes gaļa un kartupeļi ir lapas saturs. Katra no jūsu tīmekļa lapām ir ievērojama daudz noderīga informācija lietotājiem, piemēram, tekstu, fotoattēliem vai videoklipiem. Jūs atradīsiet arī ziņu rakstus un emuāra ziņojumus, kas darbojas uz dažām lapām, kas var palīdzēt izjaukt tekstu, bet tas nav ieteicams mobilajām ierīcēm kā tehnika nepieciešams vairāk lappušu ielādes, kas nozīmē vairāk gaidīšanas laika lietotāja pusē.
Ja vien tas nav absolūti nepieciešams, es iesaku jūsu lapas satura īss saglabāšana. Jums vajadzētu arī apsvērt iespēju to izskatīties salds veidot fontu daudz lielākam izmēram un varbūt pārvietojot attēlus malā. Ar savu saturu pilnā displejā tas dabiski piesaista uzmanību, nemaz nerunājot par optimizāciju, kas padara lapu skenēšanu daudz vienkāršāku. Tas ir arī iemesls, kāpēc a vienas kolonnas izkārtojums perfekti atbilst rēķinam.
Vairumā gadījumu mobilās pārlūkprogrammas neplāno ielādēt tīmekļa lapas tikpat ātri kā darbvirsmas pārlūkprogrammas, un tas var kaitēt jūsu lasītājiem, tāpēc jums ir nepieciešams optimizēt saturu un tīmekļa vietni ātrgaitas satura ielādei. Jūs varat arī saīsināt rakstu, vienlaikus saglabājot pilnu saturu, vai vienkārši noņemiet nevajadzīgus attēlus. Novietojiet savu uzmanību uz vienkāršību, nevis skaistumu.
Jūsu galvenā navigācija ir dzīvības taupītājs, ko apmeklētāji vēlas pārvietoties starp lapām. Mobilajā ierīcē ekrāna saites parādīsies daudz mazākas pēc būtības, tādējādi daudz grūtāk pieskarties. Būtisks kniebiens, lai atrisinātu šo problēmu, ir palielināt navigācijas saites fontu un vietu, varbūt visu bloku apgabalu. Jūs varat arī veidojiet navigācijas joslu, lai tā būtu līdzīga reālajai iPhone lietojumprogrammas cilnes joslai, tāpat kā iepriekš parādītais.
Mobilo CSS stilu izveide
Tagad, kad mēs zinām, kā optimizēt mobilās tīmekļa vietnes labāku lasāmību un lietojamību, būtu labi runāt par CSS stiliem. Katrā CSS stillapā ir daudz atlasītāju ar īpašībām, kas attiecas uz fontiem, izmēriem, pozicionēšanu un displeja iestatījumiem. Kad runa ir par mobilo, jums jāpievērš uzmanība kā jūsu bloki nonāk vietā.
(Image Source: Smashing Magazine)
Viena no jomām, lai sāktu, ir atiestatiet vietnes iesaiņojuma platumus procentos. Tas ir kopīgs, lai pozicionēšanai, līnijas augstumam, fonta lielumam un div platumam izmantotu pikseļus, bet, strādājot ar mobilo, vēlaties, lai jūsu lapas būtu šķidrums un pāreja starp katru ierīci dabiski. Konteineru sadalījumu iestatīšana uz 100% platumu ļaus saturam viegli aizpildiet starp portreta / ainavas režīmu, nepārplūstot pāri malai.
Ja esat viens no cilvēkiem, kas vēlas pārstrukturēt visu izkārtojumu, pārliecinieties, ka esat hit viss ar a atiestatīt. Arī visi punkti, virsraksti un navigācijas saites ir jāiestata displejs: bloks; lai iegūtu šo lineāro drukas stila sajūtu. Novietojiet malas un polsterējumu, lai noņemtu izkrāpšanu no izkārtojuma. Izvairieties no tabulām ja iespējams, jo tie mēdz padarīt bugiskus rezultātus starp ierīcēm.
Lieli attēli ir arī problēmu starp ierīcēm. Lielākā daļa jūsu vietnes attēlu būs lielāki par 480px, un jūs, iespējams, nevēlaties, lai tie tiktu pārtraukti. Pirmā iespēja ir iestatiet to platumu 100%, lai attēli varētu dabiski mainīt izmērus. Tas noteikti ir iespējams izveidojiet dažādus attēlu kopumus jūsu vietnei un padarīt tos atšķirīgus, balstoties uz pārlūka aģentu, bet godīgi, tas tikai papildina vairāk darbu jūsu pusē, tāpēc mēģiniet izmantot tehniku tikai tad, kad tas ir patiešām nepieciešams.
Tīmekļa vietņu izstrāde iPhone
Mobilo sakaru tirgus daļa ir diezgan liela un sadalīta, bet Apple ir ieguvusi lielu daļu no pīrāga ar iDevices. Gan iPhone, gan iPad ir mobilās interneta gatavās ierīces ar iebūvētu skārienekrāna funkcionalitāti. Tiem ir tāda pati noklusējuma tīmekļa pārlūkprogramma - Safari, kā arī virkne citu iespēju.
IPhone specifiskām tīmekļa vietnēm būs jāpielāgo ekrāna izmērs. Fiksētais ekrāna izmērs ir iestatīts uz 320px par 480px vecākiem iPhone modeļiem un 640px par 960px iPhone 4 un iPhone 4S.
iPhone ekrāni ir ierobežoti. Tev vajadzētu būt viens satura bloks, kas aptver tik ilgi, cik nepieciešams. Elementu saglabāšana vienā slejā ietaupīs galvassāpes un atļaut šķidruma izkārtojumu “aizpildīt” gan portreta, gan ainavas režīmos. Lai to izdarītu, jums, iespējams, būs jāizstrādā vēl viena veidne un jāatrod veids, kā pārbaudīt, vai jūsu apmeklētājs (-i) izmanto iPhone. Tālāk norādītajam mazajam PHP fragmentam jādarbojas labi:
Būtībā loģika velk mūsu globālo $ _SERVER HTTP aģents un pārbauda, vai vārds ir “iphone” parādās jebkur. Ja jā, tad mēs zinām, ka mūsu apmeklētājs izmanto iPhone, un no turienes mēs varam piedāvāt nedaudz atšķirīgu HTML vai pat pilnīgi jaunu veidnes izkārtojumu! To var arī izmantot ietveriet iPhone specifisku stilu, mainiet lapas nosaukumus, noņemiet attēlus vai gandrīz visus dinamiskos efektus.
Ja runa ir par jaunu stilu apkalpošanu, ir vieglāk. Kā minēts iepriekš, maksimālais iPhone ekrāna izmērs ir 960px. Tāpēc ar jauniem CSS3 mediju vaicājumiem varat pievienot stilus tieši jūsu vietnes galvenajā stillapā tikai displejs iPhone. Zemāk ir neliels piemērs:
@media ekrāns un (max-device-width: 960px) / * iPhone css * /
Tas darbojas tāpēc, ka CSS tagad var atklāt pārlūkprogrammas un to īpašības. Maksimālais ekrāna platums ir viena no īpašībām, ko var arī noteikt.
Visu visu mobilo ierīču iPhone ierīcēm nav pārāk grūti izstrādāt, ir tikai pārāk daudz piemēru, piemēram, CSS iPhone. Saglabājiet sevi aizņemts un nebaidieties eksperimentēt ar jaunām metodēm UI dizainā.
Mobilais jQuery skripts
Vairums priekšējā tīkla izstrādātāju ir pazīstami ar jQuery bibliotēku. Tā piedāvā dažas fantastiskas shēmas kodēšanas efektiem, animācijām, nolaižamajām izvēlnēm un daudzām citām pārlūkprogrammas funkcijām, un tas vienkārši kļūst lielāks ar paziņojumu par jQuery Mobile. Tas ir nav ieteicams tieši pāriet uz tehnoloģiju un ielādējiet savu tīmekļa vietni ar sekām visur, bet testēšanas nolūkos uzlabotas funkcionalitātes var spēlēt ļoti labi.
jQuery Mobile ir nedaudz atšķirīgs no parastās jQuery, jo tas sniedz jums pilnīgu vidi, uz kuras var balstīties. Strādājot ar saviem failiem, viņi ir ne tikai JavaScript, bet arī pogas, saites un pārejas efekti. Jūs joprojām rakstāt tīmekļa lapas HTML kodā, bet jQuery Mobile komandai ir piegādāja daudz izvēles izvēles UI dizaina elementu. Ir daudz, ko mēs varam darīt ar šo sistēmu, bet kopš tā laika sistēma joprojām ir beta versija, pieņemsim vienkāršas sekas.
Neliela apmācība DevGrow blogā sniedz dažus awesome piemērus. Oficiālā vietne piedāvā arī demo izmēģinājumus. Ņemiet vērā, ka mēs izmantojam HTML atribūtu, datu pāreja pievienot animācijas efektus ar kādu no iepriekš noteiktajām vērtībām. Tie ietver slaidu, pop, flip, izbalināt, utt Pārbaudiet mazo DevGrow piemērs, lai iegūtu garšu šo efektu.
Ietekme un pārejas ir diezgan veiktas, un tas, ka jūs varat veidot visu mobilā saskarni tikai ar jQuery, ir arī liels solis uz priekšu šajā platformā, bet ar platformu tikai beta versijā es neiesakām izveidot visu jūsu mobilo vietni ar viņu bibliotēka, īpaši ar to, ka tā ir rakstīšanas laikā neatbalsta visi galvenie viedtālruņi (jo īpaši Windows Phone 7), bet tas noteikti uzlabosies ar laiku.
Galu galā es iesaku iepazīties ar šo jauno mobilo sakaru sistēmu iepriekš dzīvot uz jebkura projekta.
Noderīgi izstrādātāju rīki
Mobilie izstrādātāji ne tikai meklē kodēšanas un dizaina resursus. Ir arī liels pieprasījums pēc programmatūras rīkiem un IDE, nemaz nerunājot par spēcīgām mobilajām sistēmām. Tīmekļa izstrāde ir grūts uzdevums, kas prasa diezgan daudz centību, bet, izmantojot papildu rīkus, jūsu darbs kļūs daudz vieglāks.
Opera mobilais emulators
Vai meklējat veidu, kā pārbaudīt, kā tiek izmantota jūsu mobilā tīmekļa vietne? Tas var būt milzīgs sāpes, ja jums nav viedtālrunis ar piekļuvi internetam. Vai arī jūs vienkārši nevēlaties izmantot savu viedtālruni, lai pārbaudītu vietni katru reizi, kad atjauninājums tiek ieslēgts uz jūsu servera. Nu, Opera Mobile Emulator ir fantastisks programmatūras gabals, lai pārbaudītu jūsu mobilā tīmekļa vietni.
Emulators atbalsta 20 mobilie profili piemēram, Samsung Galaxy S, HTC Desire un pat planšetdators, piemēram, Motorola Xoom. Ir iespējams arī iestatīt pielāgota izšķirtspēja un pikseļu blīvums intensīvai testēšanai. Vislabāk, jums nav nepieciešams veikt pārāk daudz konfigurācijas darbu, vienkārši veikt dažus klikšķus, un jums ir labi iet.
Lejupielāde ir pilnīgi bez maksas, un programmatūra darbojas gan Mac OS X, gan Windows vidē. Viņu izstrādātāji ir grūti strādāt, veidojot atbilstošus tīmekļa standartus un izmainot to mobilos attēlveidošanas motorus. Es ieteiktu savus citus dev rīkus, ja meklējat papildu rīkus, lai palīdzētu jums ceļā.
PhoneGap
HTML5 ietvaros nav izstrādātas daudzas API, lai izveidotu stabilas mobilās lietojumprogrammas. Proti, mobilajām ainavām trūkst šāda veida tīmekļa vietņu, kas tieši tāpēc PhoneGap tik labi aizpilda nišu. To platforma ļauj jums viegli veidot HTML5 balstītas lietotnes kā vietējās lietojumprogrammas 6 dažādās platformās.
Process darbojas, vispirms saspiežot kodu un nododot to caur PhoneGap lietojumprogrammu sistēmu. No turienes jūsu lietotnes var sasniegt lielu daļu mobilā tirgus, tostarp Android, iOS, Windows Phone 7 un BlackBerry.
Ja jūs mazliet sajaukt, neuztraucieties pārāk daudz. To atbalsta lapas precīzi izklāsta procesu un piedāvā saites uz noderīgiem resursiem. Jau izveidotās lietotnes ir apkopotas skaistā bibliotēkā. Pārbaudiet to pilnu lietotņu kolekciju, kuru pēc tam var kārtot pēc ierīcēm ar ekrānšāviņiem.
Aptana Studio
Aptana tīmekļa vietne ir galvenā vieta, kur uzzināt par to izstrādes rīkiem. Jaunākajā komplektā "Aptana 3.0.3" ir pilnībā integrēts IDE tīmekļa izstrādei, CSS stiliem un HTML tagu ligzdošanai, un labākā daļa: Aptana ir pilnīgi bezmaksas lai lejupielādētu! Tie piedāvā iepakojumus visām trim galvenajām operētājsistēmām (ieskaitot Linux), kas ir milzīgs ērtības izstrādātājiem.
Kas padara Aptana īpašu, cik ātri jūs varat izstrādāt nelielu tīmekļa lietojumprogrammu un izmēģināt savu dizainu. Studijas tipa numurs ļauj jums ātri izveidot un pārbaudīt tīmekļa lietojumprogrammu, kas darbojas pār Ruby on Rails, PHP, Python vai vienkārši HTML / CSS, un to koda iezīmēšanas funkcijas nesen ir uzlabotas ietver jaunas HTML5 un CSS3 tagu bibliotēkas. Tas ir aprīkots arī ar Git integrāciju, iebūvētu terminālu, koda atkļūdotāju un nedaudzām citām jaudīgām funkcijām.
Mobilās GUI komplekti un ikonas
Kas būtu tīmeklī bez freebies apkārt? Tīmekļa dizaineriem lietotāja interfeisa nozīme ir augstāka par visu pārējo. Vienkāršās GUI ir grūti sastopamas, un tikai radošākie dizaineri ir izstrādājuši darba risinājumus.
Tomēr jums ir pieejami daudzi bezmaksas, tomēr kvalitatīvi resursi, kas jums ir pieejami web dizainerim. Šie GUI komplekti ir galvenokārt paredzēti Adobe Photoshop vai Fireworks, kur var pārvietoties pa elementiem un eksportēt tos kā plakanus attēlu failus.
Ikonas ir ļoti ērts resurss. Dizaineri rada bezmaksas komplektus un piedāvā tos tiešsaistē biežāk nekā jebkad agrāk. Vienai no šādām tīmekļa vietnēm Glyphish ir gan bezmaksas, gan pro ikonas. Šie dizainparaugi ir balstīti uz vienu tēmu, ko izmantos mobilajām veidnēm un lietotņu dizainiem.
Mūsu mobilo ierīču prototipu veidņu kolekcija būs lielisks palīgs jums, atrodoties tīmekļa vietņu un lietojumprogrammu izstrādes ceļā. Jums nevajadzētu sākt kodēšanu, kamēr nebūsiet spēcīgs grafiskais interfeiss, un šie tīmekļa komplekti jums sāksies pareizajā ceļā.
iOS 5 GUI komplekts
iPhone UI Vector elementi
iPhone App Icon Kit
Kabeļu magnēti (DIY komplekts)
Android interfeisa GUI
