Vaadake mobiilseadmete projekteerimist
Kui esimene iPhone ilmus, võttis ta tormiga maailma. Sellest ajast alates on olnud peaaegu 5 aastat ja nutitelefonide turg on populaarsemaks muutunud, isegi isegi Microsoft on jõudnud võistlusse oma Windows 7 operatsioonisüsteemi ja partneritega. Nii palju internetikasutajaid oma nutitelefoni tänapäeval on mõistlik eeldada, et mobiilsete veebisaitide arv suureneb agressiivselt.
Mobiilse veebi projekteerimine on siiski täiesti erinev toiming koos ühise veebidisainiga. Meie veebisaidid on mõeldud suureks ekraaniks, kuid nutitelefoni ekraani suurus on sellega võrreldes liiga väike, mis toob kaasa tüütu kasutatavuse probleemid. Uued projekteerimisstandardid ja -tavad on hädavajalikud parema mobiilse veebilehe kujunduse ja sujuva kasutuskogemusega.
Selles juhendis soovime kujundada nutitelefoni mobiilse brauseri jaoks kasutajasõbraliku saidi. Ma räägin parimatest tavadest ja kasulikust arendusvahendist, mis võimaldab teil luua parema mobiilse veebisaidi.!
Tugeva kasutaja kogemuse planeerimine
Kui loote mobiilse veebisaidi, on see oluline hoia oma kasutajaid alati meeles, kuna teie veebisait on lõppkokkuvõttes projekteeritud ja loodud kasutajatele nautima. Kindlasti on tavaline, et kasutajad ootavad, et mobiilne veebisait käituks sarnaselt töölaua keskkonnaga kasutajasõbralikkuse säilitamine peaks olema teie peamine fookus eduka mobiilse saidi loomisel.
Teie kasutajate jaoks on palju kasutatavuse kontseptsioone. Need kaalutlused hõlmavad ekraani suurus, pildid, hüperlingid, fondi suurused, ja lehekülje navigeerimine. Oleme kirjutanud mobiilse kasutatavuse kujundusest, et saaksite oma veebilehte paremini kasutada. Lisaks juhendile peate alati olema hoia ennast uute ideede suhtes tähelepanelikult saidi parandamiseks.
Tugeva kasutuskogemuse planeerimine tähendab ka seda, et peaksite seda tegema kaaluge, kuidas kasutaja teie veebisaidiga suhtleb. Töölaual saab veebisaiti suhelda hiirega ja klaviatuuriga, kuid nutitelefoni kasutajatele koputades, libisemine, ja pühkimine oma saidi ümber. Tõenäoliselt peate saidi kujundama nii, nagu kasutajad saavad pääseda saidi teabele kergesti nende füüsiliste liigutustega.
Hoidke lehekülgi lühike ja magus
Mis tahes veebisaidi liha ja kartul on lehekülje sisu. Iga teie veebileht omab olulist kogust kasulikku teavet kasutajatele, nagu tekst, fotod või videod. Leiad ka uudiste artikleid ja blogipostitusi, mis töötavad mõne lehekülje kohta, mis võib aidata teksti lõhkuda, kuid seda ei soovitata mobiilseadmetele tehnikana nõuab rohkem lehekülje laadimist, mis tähendab rohkem ooteaega kasutaja poolel.
Kui see pole absoluutselt vajalik, siis soovitan lehe sisu lühike hoidmine. Samuti peaksite kaaluma, et see oleks magus fontide kujundamine palju suuremaks ja võib-olla liikuvate piltide kõrvale. Täieliku ekraani sisu tõttu tõmbab see loomulikult tähelepanu, rääkimata sellest, et optimeerimine muudab lehekülgede skaneerimise palju lihtsamaks. See on ka põhjus, miks a ühe veeru paigutus sobib arve ideaalselt.
Enamikul juhtudel ei laadi mobiilibrauserid veebilehti nii kiiresti kui töölaua brauserid ja see võib teie lugejaid häirida. optimeerige sisu ja veebisaiti suure kiirusega sisu laadimiseks. Võite kas lühendada artiklit, säilitades täieliku sisu, või lihtsalt eemaldage mittevajalikud pildid. Asetage ilu asemel oma tähelepanu lihtsusele.
Teie põhiline navigeerimine on teie külastajate elu säästja, kes soovivad lehekülgede vahel liikuda. Mobiilseadmes ilmuvad ekraani lingid oma olemuselt palju väiksemaks, seega on neid palju keerulisem koputada. Oluline näpistama selle probleemi lahendamiseks on maksimeerida oma navigatsioonilinkide font ja ruum, võib-olla võib alustada kogu blokeerimisala. Teise võimalusena saate kujundage navigeerimisriba sarnaselt tegeliku iPhone'i rakenduse vahekaardile, nagu eespool näidatud.
Mobiilse CSS-stiili loomine
Nüüd, kui me teame, kuidas mobiili veebisaiti optimeerida parema loetavuse ja kasutatavuse nimel, oleks hea rääkida CSS-stiilidest. Iga CSS-i laaditabel sisaldab paljusid valikuid, mille omadused on seotud fondide, suuruste, positsioneerimise ja kuva seadetega. Kui tegemist on mobiiliga, peaksite pöörama tähelepanu kuidas teie plokid paigale satuvad.
(Pildi allikas: Smashing Magazine)
Üks ala alustada on lähtestage saidi ümbrise laiused protsentides. Pikslite kasutamine positsioneerimise, joone kõrguse, fondi suuruse ja div laiuse jaoks on tavaline, kuid mobiiliga tegelemisel soovite, et teie lehed oleksid vedelik ja üleminek iga seadme vahel loomulikult. Konteinerite jagamine 100% laiuseni võimaldab sisu täitke kergesti portree / maastikurežiimi vahel, ilma et see voolaks üle serva.
Kui olete üks inimestest, kes soovivad kogu oma paigutuse ümber struktureerida, veenduge, et olete tabas kõike a lähtestamine. Samuti kõik punktid, pealkirjad ja navigatsioonilinkid peaksid olema seatud kuva: plokk; nii saad selle lineaarse prindi-stiilis tunne. Paigutage marginaalid ja polsterdused, et eemaldada paistetust oma paigutusest. Vältige tabeleid kui see on võimalik, kuna need kalduvad muutma bugilisi tulemusi seadmete vahel.
Suured pildid on samuti seadmete vahel vaeva. Enamik teie veebisaitide pilte muutub suuremaks kui 480px ja te ei pruugi soovida, et need pakendit katkestaks. Esimene võimalus on määrake nende laius 100%, nii et pildid muutuvad loomulikult. See on kindlasti võimalik luua oma veebisaidile erinevaid pilte ja muuta need erinevalt brauseri agendi põhjal, kuid ausalt öeldes lisab see lihtsalt rohkem teoseid, nii et proovige kasutage tehnikat ainult siis, kui see on tõesti vajalik.
IPhone'i veebisaitide kujundamine
Mobiilside turuosa on üsna suur ja jagatud, kuid Apple on oma iDevices'iga saanud suure lõigu pirukast. Nii iPhone kui iPad on mobiilsed Interneti-seadmed, millel on sisseehitatud puutetundlik funktsioon. Neil on sama vaikimisi kasutatav veebibrauser Safari ja terve rida teisi võimalusi.
IPhone-spetsiifiliste veebisaitide puhul peate sihtima ekraani suurust. Fikseeritud ekraani suurus on seatud väärtusele 320px 480px vanemate iPhone'i mudelite puhul ja 640px 960 pikslit iPhone 4 ja iPhone 4S jaoks.
iPhone'i ekraanid on piiratud ruumi. Sa peaksid olema üks sisu, mis ulatub nii kaua kui vaja. Elementide hoidmine ühes veerus säästab peavalu ja võimaldada vedeliku paigutust “täitma” nii portree- kui ka maastikurežiimid. Selleks peate tõenäoliselt välja töötama teise malli ja leidma viisi, kuidas kontrollida, kas teie külastaja (d) kasutab iPhone'i. Allpool toodud väike PHP-fragment peaks hästi toimima:
Põhimõtteliselt tõmbab loogika meie globaalset $ _SERVER
HTTP agendi muutuja ja kontrollib selle sõna “iphone” ilmub kõikjal. Kui jah, siis teame, et meie külastaja kasutab iPhone'i ja sealt saame pisut erineva HTML-i või isegi uue malli paigutuse! Seda võiks kasutada ka sisaldab iPhone-spetsiifilist laaditabelit, muuta oma lehe pealkirju, eemaldada pilte või peaaegu kõiki dünaamilisi efekte.
Uute stiilide teenindamisel on lihtsam viis. Nagu varem mainitud, on iPhone'i maksimaalne ekraani suurus 960px. Seega saate uute CSS3 meedia päringute abil lisada stiilid otse oma saidi peamisse stiilile ainult kuvatakse iPhone'is. Allpool on väike näite kood:
@media ekraan ja (max-device-width: 960px) / * iPhone css * /
See toimib, sest CSS suudab nüüd tuvastada sirvimisagendid ja nende omadused. Max ekraani laius on üks omadusi, mida saab tuvastada.
IPhone'i seadmete kõikehõlmav mobiilne veebisait ei ole liiga keeruline kujundada, vaid on liiga palju näiteid, nt. CSS iPhone. Hoidke end kursis õppides ja ärge kartke eksperimenteerida uute tehnikate abil kasutajaliidese disainis.
Mobiilne jQuery skriptimine
Suurem osa esiotsa veebiarendajatest on tuttav jQuery raamatukoguga. See pakub mõningaid fantastilisi lühikirju kodeerimisefektidele, animatsioonidele, rippmenüüdele ja paljudele muudele brauseris kasutatavatele funktsioonidele ning see muutub lihtsalt jQuery Mobile väljakuulutamisega üha suuremaks. see on ei ole soovitatav hüpata otse tech ja laadige oma veebisait mõjuga kõikjal, kuid testimise eesmärgil saab täiustatud funktsionaalsus mängida väga hästi.
jQuery Mobile on mõnevõrra erinev tavapärasest jQueryst, kuna see annab teile täieliku keskkonna. Nende failidega töötades ei ole nad ainult JavaScripti, vaid ka nuppude, linkide ja üleminekuefektide CSS-stiilid. Sa kirjutad ikka veel veebilehti HTML-koodis, kuid jQuery Mobile'i meeskonnal on tarnitud palju valikulisi kasutajaliidese disaini funktsioone. Meil on selle raamistikuga palju teha, kuid sellest ajast saadik raamistik on ikka veel beeta, jääme lihtsate efektide juurde.
Väike juhendaja DevGrow blogis pakub mõningaid suurepäraseid näiteid. Ametlik veebisait pakub ka demo, mida saate proovida. Pange tähele, et kasutame HTML atribuuti, andmete üleminek animatsiooniefektide lisamiseks mis tahes eelnevalt määratletud väärtusega. Nende hulka kuuluvad slaid, pop, flip, fade jne. Vaadake väikest DevGrow näidet, et saada nende mõjude maitse.
Efektid ja üleminekud on päris puhtad ning asjaolu, et saate ehitada kogu mobiililiidese rangelt jQueryga, on ka selle platvormi jaoks suur samm edasi, kuid platvormiga ainult beetaversioonil ei soovitaks teie kogu mobiilse saidi loomist nende raamatukogu, eriti sellega, et see on kõik suuremad nutitelefonid ei ole selle kirjutamise ajal toetatud (eriti Windows Phone 7), kuid see paraneb kindlasti aja jooksul.
Lõpuks soovitan ma selle uue mobiilse raamistikuga tutvuda enne mis tahes projekti elluviimine.
Kasulikud arendustööriistad
Mobiiliarendajad ei otsi lihtsalt kodeerimis- ja disainiressursse. Samuti on suur nõudlus tarkvara ja IDEde järele, rääkimata võimsatest mobiilsetest raamistikest. Veebiarendus on raske ülesanne, mis nõuab üsna pühendumist, kuid lisavahendite kasutamine muudab teie töö palju lihtsamaks.
Opera Mobile Emulator
Otsite viisi, kuidas kontrollida, kuidas teie mobiilne veebisait esitleb? See võib olla tohutu valu, kui teil ei ole Interneti-ühendusega nutitelefoni. Või lihtsalt ei taha oma nutitelefoni kasutada iga saidi testimiseks iga kord, kui uuendust serverisse lükatakse. Noh, Opera Mobile Emulator on fantastiline tarkvara teie mobiilse veebisaidi testimiseks.
Emulaator toetab seda 20 mobiilprofiili nagu Samsung Galaxy S, HTC Desire ja isegi tablett nagu Motorola Xoom. Samuti on võimalik määrata kohandatud resolutsioon ja pikslitihedus intensiivse testimise eesmärgil. Mis kõige parem, sa ei pea tegema liiga palju konfiguratsioonitöid, tehke vaid mõned klõpsud ja sa oled hea minna.
Allalaadimine on täiesti tasuta ja tarkvara töötab nii Mac OS X kui ka Windows keskkonnas. Nende arendajad on raske töötada sobivate veebistandardite loomisel ja nende mobiilse renderdamise mootoriga. Soovitan nende teisi dev tööriistu, kui otsite täiendavaid tööriistu, mis aitavad teil teel.
Telefonikõne
HTML5-s ei ole loodud tugevaid mobiilirakendusi ehitamiseks palju API-sid. Eelkõige on mobiilmaastikul puudunud sellist tüüpi veebisaite, mistõttu TelefonGap täidab niši nii hästi. Nende platvorm võimaldab teil kergesti ehitada HTML5-põhised rakendused kohalikeks rakendusteks 6 eri platvormil.
Protsess toimib oma koodi esmakordsel kokkusurumisel ja selle edastamisel PhoneGapi rakenduste raamistiku kaudu. Sealt jõuavad teie rakendused suure osa mobiiliturust, sealhulgas Android, iOS, Windows Phone 7 ja BlackBerry.
Kui sa oled natuke segaduses, ärge muretsege liiga palju. Nende tugilehed kirjeldavad protsessi täpselt ja pakuvad linke kasulikele ressurssidele. Juba välja töötatud rakendused on koostatud ilusas raamatukogu stiilis portfellis. Tutvuge nende täielike rakenduste kogumikuga, mida saate sorteerida ekraanipiltidega seadmete vahel.
Aptana Studio
Aptana veebisait on peamine asukoht nende arendusvahendite tundmaõppimiseks. Uusim tarkvarapakett, Aptana 3.0.3, sisaldab täielikult integreeritud IDE veebiarendust, CSS-stiile ja HTML-märgendi pesemist ning parim osa: Aptana on täielikult tasuta alla laadida! Nad pakuvad pakette kõikidele kolmele peamisele operatsioonisüsteemile (sh Linuxile), mis on arendajatele väga mugav.
Aptana eriline on see, kui kiiresti saate luua väikese veebirakenduse ja testida oma disaini. Stuudiokorter võimaldab teil kiiresti arendada ja katsetada veebirakendust, mis töötab üle Ruby on Rails, PHP, Python või lihtsalt HTML / CSS, ja nende koodide esiletõstmise funktsioone on hiljuti täiustatud sisaldama uusi HTML5 ja CSS3 sildiraamatuid. Kaasas ka Git integratsioon, sisseehitatud terminal, koodijagur ja käputäis muid suurepäraseid funktsioone.
Mobiilse GUI komplektid ja ikoonid
Mis oleks veebis ilma freebiesita? Veebidisainerite jaoks on kasutajaliidese tähtsus kõike muud. Lihtsad GUI-d on raske tulla ja ainult kõige loovamad disainerid on välja töötanud töölahendused.
Siiski on teie veebidisaineri jaoks palju vaba, kuid kvaliteetset ressurssi, et testida. Need GUI-komplektid on enamasti mõeldud Adobe Photoshopi või Fireworks'i jaoks, kus saab liikuda elementide ümber ja eksportida neid lamedate pildifailidena.
Ikoonid on väga mugav vahend. Disainerid loovad tasuta komplekte ja pakuvad neid võrgus sagedamini kui kunagi varem. Üks sellist veebisaiti Glyphish'il on nii tasuta kui ka pro ikoonid. Need kujundused põhinevad ühel teemal, mida kasutatakse mobiilsete mallide ja rakenduste kujunduses.
Meie mobiilseadmete prototüüpide mallide kogum on teile suureks abiks kodulehe ja rakenduste arendamise teekonnal. Te ei tohiks alustada kodeerimist enne, kui teil on tugev graafiline kasutajaliides ja need veebikomplektid alustavad teid õigel teel.
iOS 5 GUI komplekt
iPhone UI vektorite elemendid
iPhone App Icon Kit
Traatvõrgu magnetid (DIY komplekt)
Android Interface GUI