O privire în proiectarea dispozitivelor mobile
Când primul iPhone a fost lansat, a luat lumea tech prin furtună. De atunci, aceasta a fost de aproape 5 ani, iar piața smartphone-urilor a crescut în popularitate, chiar dacă Microsoft a intrat în competiție cu sistemul de operare Windows 7 și partenerii săi. Cu mulți utilizatori de pe telefonul smartphone de astăzi, este normal să se aștepte ca numărul de site-uri mobile să crească agresiv.
Cu toate acestea, proiectarea pentru webul mobil este o operație complet diferită, cu un design web obișnuit. Site-urile noastre sunt concepute pentru un ecran imens, dar dimensiunea ecranului smartphone-ului este mult prea mică în comparație cu cea care duce la probleme enervante de uzabilitate. Noi standarde și practici de design sunt foarte necesare pentru un design mai bun al site-ului mobil, cu o experiență netedă a utilizatorului.
În acest ghid, vom căuta să proiectăm un site ușor de utilizat pentru browserele mobile pentru smartphone-uri. Voi vorbi despre cele mai bune practici și un instrument util pentru dezvoltatori pentru a vă proiecta un site mobil mai bun, așa că să intrăm în el după salt!
Planificarea experienței puternice a utilizatorilor
Când construiți un site web mobil, este important să păstrați în permanență utilizatorii în minte, ca în cele din urmă site-ul dvs. Web este proiectat și creat pentru ca utilizatorii să se poată bucura. Este, desigur, obișnuit ca utilizatorii să se aștepte ca un site mobil să se comporte similar cu mediul desktop, deci păstrând experiența prietenoasă a utilizatorului ar trebui să vă focalizați în timp ce construiți un site mobil de succes.
Există multe concepte de uzabilitate care trebuie luate în considerare pentru utilizatorii dvs. Aceste considerente includ marimea ecranului, imagini inline, hyperlink-uri, dimensiunile fontului, și pagina de navigare. Am scris despre designul de utilizare mobilă pentru a vă sculpta site-ul pentru o mai bună utilizare. Pe lângă ghid, trebuie să întotdeauna ține-ți alertă pentru idei noi pentru a vă îmbunătăți site-ul.
Planificarea unei experiențe puternice a utilizatorului înseamnă, de asemenea, că ar trebui ia în considerare modul în care un utilizator va interacționa cu site-ul dvs. Web. Pe un desktop, site-ul dvs. poate fi interacționat cu un mouse și cu o tastatură, dar pe un utilizator smartphone vor fi atingând, flicking, și swiping în jurul site-ului. Probabil că trebuie să proiectați site-ul în modul pe care îl pot utiliza utilizatorii accesați cu ușurință informațiile despre site cu aceste mișcări fizice.
Păstrați paginile scurte și dulci
Carnea și cartofii de pe orice site web sunt conținutul paginii. Fiecare dintre paginile dvs. web deține cantități semnificative de informații utile pentru utilizatorii dvs., cum ar fi text, fotografii sau videoclipuri. Veți găsi, de asemenea, articole de știri și postări pe blog care rulează pe câteva pagini, ceea ce poate ajuta la ruperea textului, dar nu este recomandat pentru dispozitivele mobile ca tehnica necesită o încărcare mai mare a paginii, ceea ce înseamnă mai mult timp de așteptare pe partea utilizatorului.
Dacă nu e absolut necesar, recomand menținerea conținutului paginii scurt. Ar trebui să luați în considerare, de asemenea, face să arate dulce de către modelarea fontului la o dimensiune mult mai mare si poate mișcarea imaginilor deoparte. Cu conținutul pe afișaj complet atrage atenția în mod natural, să nu mai vorbim de optimizare face de fapt scanarea paginile mult mai simplu. Acesta este și motivul pentru care a montaj o singură coloană se potrivește perfect facturii.
În cele mai multe cazuri, browserele mobile nu vor încărca paginile web la fel de repede ca browserele desktop și acest lucru ar putea deranja cititorii dvs., de aceea trebuie să optimizați conținutul și site-ul Web pentru încărcarea conținutului de mare viteză. Poți și tu scurtați articolul în timp ce păstrați conținutul complet, sau pur și simplu eliminați imaginile inutile. Puneți-vă accentul pe simplitate în loc de frumusețe.
Navigarea dvs. principală este economistul de viață pentru vizitatorii dvs. care doresc să se miște între pagini. Pe un dispozitiv mobil, legăturile de pe ecran vor apărea mult mai mici din punct de vedere al naturii, astfel fiind mult mai greu de atins. O amendă esențială pentru a rezolva această problemă este de a maximizați fontul și spațiul pentru legăturile dvs. de navigare, poate să luăm toată zona blocului. Alternativ poți proiectați bara de navigare pentru a fi similară cu bara de file a aplicației iPhone reală, ca cea prezentată mai sus.
Crearea stilurilor CSS mobile
Acum că știm cum să optimizăm site-ul mobil pentru o mai bună citire și utilizare, ar fi bine să vorbim despre stilurile CSS. Fiecare foaie de stil CSS conține multe selectori cu proprietăți referitoare la fonturi, dimensiuni, poziționare și setări de afișare. Când vine vorba de mobil, trebuie să fiți atenți cum blocurile dvs. intră în loc.
(Imagine Sursa: Smashing Magazine)
Un domeniu pentru a începe este de a resetați lățimile de înfășurare ale site-ului în procente. Se utilizează în mod obișnuit pixeli ca unitate pentru poziționare, înălțimea liniei, dimensiunea fontului și lățimea divului, dar când se ocupă cu mobilul, veți dori ca paginile dvs. să fie fluid și tranziție între fiecare dispozitiv în mod natural. Setarea containerului se divide la lățimea de 100% va permite conținutul umpleți ușor între modul portret / peisaj, fără a curge peste margine.
Dacă sunteți unul dintre oamenii care doresc să vă reorganizeze întregul aspect, asigurați-vă că sunteți a lovit totul cu o restabili. De asemenea paragrafele, rubricile și legăturile de navigare trebuie să fie setate la afișare: bloc; astfel încât să obțineți acel sentiment liniar în stil tipărit. Re-poziționați margini și padding pentru a elimina bloat din aspectul dvs.. Evitați mesele dacă este posibil, deoarece acestea tind să producă rezultate bug-uri între dispozitive.
Imaginile mari sunt, de asemenea, un hassle între dispozitive. Majoritatea imaginilor site-ului dvs. Web vor face mai mari de 480 de pixeli și este posibil să nu doriți să le rupeți containerul. Prima opțiune este setați lățimea la 100%, astfel încât imaginile să poată fi redimensionate în mod natural. Cu siguranta este posibil creați seturi diferite de imagini pentru site-ul dvs. web și le face diferit pe baza agentului de browser, dar sincer acest lucru adaugă mai multe lucrări de partea dvs., așa că încercați utilizați tehnica numai atunci când este cu adevărat necesar.
Proiectarea site-urilor web pentru iPhone
Cota de piață mobilă este destul de mare și împărțită, dar Apple are o felie mare de plăcintă cu iDevices. Atât dispozitivele iPhone cât și iPad-ul sunt dispozitive mobile pe Internet cu funcționalitate touchscreen încorporată. Acestea includ același browser web implicit, Safari și o serie întreagă de alte opțiuni.
Pentru site-urile web specifice iPhone, va trebui să vizați dimensiunea ecranului. Dimensiunea ecranului fix este setată la 320px la 480px pentru modelele iPhone mai vechi și 640 x 960 pixeli pentru iPhone 4 și iPhone 4S.
Ecranele iPhone sunt limitate la spațiu. Tu trebuie sa ai un bloc de conținut care se întinde pe cât timp este necesar. Păstrarea elementelor într-o singură coloană vă va salva durerile de cap și permite o structură fluidă “a completa” atât portret cât și peisaj. Pentru aceasta, va trebui probabil să dezvoltați un alt șablon și să găsiți o modalitate de a verifica dacă vizitatorii dvs. folosesc un iPhone. Fragmentul PHP de mai jos trebuie să funcționeze bine:
Practic, logica ne trage la nivel global $ _SERVER variabilă pentru agentul HTTP și verifică dacă cuvântul “iPhone” apare oriunde. Dacă da, atunci știm că vizitatorul nostru folosește un iPhone și de acolo putem pune un HTML ușor diferit sau chiar un aspect complet nou de șablon! Acest lucru ar putea fi, de asemenea, folosit pentru a includeți o foaie de stil specifică iPhone-ului, schimbați titlurile paginilor, eliminați imaginile sau aproape orice efecte dinamice.
Când vine vorba de a servi stiluri noi, există o cale mai ușoară. După cum am menționat mai devreme, dimensiunea maximă a ecranului pentru iPhone are o lățime de 960 pixeli. Prin urmare, cu interogări noi pentru CSS3, puteți adăuga stiluri direct în foaia de stil principală a site-ului dvs. numai afișare pe iPhone. Mai jos este un exemplu de cod mic:
Ecranul @media și (max-width-device: 960px) / * iPhone css * /
Acest lucru funcționează pentru că CSS poate detecta acum agenții de navigare și proprietățile acestora. Lățimea maximă a ecranului este una dintre proprietățile care pot fi, de asemenea, detectate.
Toate site-urile mobile pentru dispozitive iPhone nu sunt prea greu de proiectat, există prea multe exemple de referință, și anume iPhone CSS. Păstrați-vă studiile ocupate și nu vă fie frică experimentați cu noi tehnici în designul UI.
JQuery Mobile Scripting
Majoritatea dezvoltatorilor web de la sfârșitul paginii sunt familiarizați cu biblioteca jQuery. Oferă câteva stenograme fantastice pentru efecte de codificare, animații, meniuri derulante și o serie de alte funcționalități în browser și devine din ce în ce mai minunat cu anunțul jQuery Mobile. Este nu se recomandă să sară direct în tehnologie și încărcați site-ul dvs. cu efecte peste tot, dar pentru scopuri de testare funcționalitatea avansată poate juca foarte bine.
jQuery Mobile este un pic diferit de jQuery obișnuit, deoarece vă oferă un mediu complet pe care să îl dezvoltați. Când lucrați cu fișierele lor, acestea nu sunt doar JavaScript, ci și stiluri CSS pentru butoane, link-uri și efecte de tranziție. Încă mai scrieți pagini web în cod HTML, dar echipa jQuery Mobile are a furnizat o mulțime de caracteristici opționale de design UI. Există multe lucruri pe care le putem face cu acest cadru, dar de atunci cadrul este încă în versiune beta, să rămânem la efecte simple.
Un tutorial mic la blogul DevGrow oferă câteva exemple minunate. Site-ul oficial oferă și demo-uri pentru a încerca. Rețineți că folosim atributul HTML, date de tranziție pentru a adăuga efecte de animație cu oricare dintre valorile predefinite. Acestea includ slide, pop, flip, fade, etc. Verificați exemplul mic DevGrow pentru a obține un gust al acestor efecte.
Efectele și tranzițiile sunt destul de clare, iar faptul că puteți construi o interfață mobilă integrală strict cu jQuery este de asemenea un pas uriaș pentru această platformă, dar cu platforma numai în beta, nu aș recomanda construirea întregului site mobil cu biblioteca lor, mai ales cu faptul că este nu este acceptat de toate smartphone-urile majore la momentul scrisului (în special Windows Phone 7), dar cu siguranță va fi mai bine cu timpul.
În cele din urmă recomand să vă familiarizați cu acest nou cadru mobil inainte de implementarea live pe orice proiect.
Instrumente utile pentru dezvoltatori
Dezvoltatorii de dispozitive mobile nu caută doar resurse de codificare și de proiectare. Există, de asemenea, o mare cerere pentru instrumente software și IDE-uri, fără a menționa cadrele mobile puternice. Dezvoltarea web este o sarcină dificilă, care necesită destul de multă dăruire, dar utilizarea unor instrumente suplimentare vă va face munca mult mai ușoară.
Opera Mobile Emulator
Căutați o modalitate de a verifica modul în care site-ul dvs. mobil este redat? Aceasta poate fi o mare durere dacă nu aveți un smartphone cu acces la Internet. Sau pur și simplu nu doriți să utilizați telefonul smartphone pentru a testa site-ul de fiecare dată când o actualizare este împinsă pe serverul dvs. Ei bine, Opera Mobile Emulator este o piesă fantastică de software pentru a testa site-ul dvs. mobil.
Emulatorul nu suportă în jur 20 profile mobile cum ar fi Samsung Galaxy S, HTC Desire și chiar comprimate precum Motorola Xoom. De asemenea, este posibil să setați rezoluție personalizată și densitatea pixelilor pentru teste intensive. Cel mai bine, nu trebuie să faci prea multă muncă de configurare, fă câteva clicuri și ești bine să pleci.
Descărcarea este complet gratuită, iar software-ul rulează atât în mediul Mac OS X, cât și în Windows. Dezvoltatorii lor sunt greu la locul de muncă, creând standarde web adecvate și ajustând motorul de randare mobil. Vă recomandăm celelalte instrumente dev, dacă căutați instrumente suplimentare care să vă ajute pe parcurs.
PhoneGap
Nu s-au dezvoltat mai multe API-uri pe HTML5 pentru a construi aplicații mobile solide. În special peisajul mobil a fost lipsit de aceste tipuri de site-uri web, ceea ce este exact de ce PhoneGap umple nișa atât de bine. Platforma lor vă permite să vă uitați cu ușurință să construiască aplicații bazate pe HTML5 ca aplicații native pe 6 platforme diferite.
Procesul funcționează prin comprimarea mai întâi a codului și trecerea acestuia prin cadrul de aplicații al PhoneGap. De aici, aplicațiile dvs. pot ajunge la o mare parte din piața de telefonie mobilă, inclusiv Android, iOS, Windows Phone 7 și BlackBerry.
Dacă sunteți puțin confuz, nu vă îngrijorați prea mult. Paginile de suport ale acestora descriu cu exactitate procesul și oferă legături către resurse utile. Aplicațiile care au fost deja dezvoltate au fost compilate într-un portofoliu frumos de bibliotecă. Verificați colecția completă de aplicații pe care o puteți sorta după dispozitive cu capturi de ecran.
Aptana Studio
Site-ul Aptana este locația premier pentru a afla despre instrumentele de dezvoltare ale acestora. Cea mai recentă versiune de suite, Aptana 3.0.3, dispune de un IDE complet integrat pentru dezvoltarea web, stilurile CSS și încadrarea în tag-ul HTML, iar cea mai bună parte: Aptana este complet liber a descărca! Ei oferă pachete pentru toate cele 3 mari sisteme de operare (inclusiv Linux), ceea ce reprezintă un avantaj imens pentru dezvoltatori.
Ceea ce face Aptana specială este cât de repede puteți dezvolta o mică aplicație web și vă puteți testa designul. Suita studio vă permite să faceți dezvoltați rapid și testați o aplicație web care rulează pe Ruby on Rails, PHP, Python sau pur și simplu HTML / CSS, iar caracteristicile lor de evidențiere a codului au fost recent îmbunătățite includ noi biblioteci de taguri HTML5 și CSS3. De asemenea, vine cu integrarea Git, un terminal încorporat, un program de depanare a codului și o serie de alte caracteristici minunate.
Mobile GUI Kituri și Icoane
Care ar fi site-ul fără frezii situate în jur? Pentru web designeri, importanța interfeței cu utilizatorul se situează mai presus de orice. GUI-urile simple sunt greu de găsit și doar cei mai creativi designeri au venit cu soluții de lucru.
Cu toate acestea, există multe resurse gratuite de calitate disponibile pentru dvs. web designer pentru a testa. Aceste kituri GUI sunt destinate în principal pentru Adobe Photoshop sau Fireworks, unde puteți să vă mișcați în jurul elementelor și să le exportați ca fișiere cu imagini plate.
Icoanele sunt o resursă foarte utilă. Designerii creează seturi gratuite și le oferă online mai frecvent decât oricând. Un astfel de site web Glyphish are o vitrină atât de liberi cât și de procurori. Aceste modele se bazează pe o singură temă care va fi utilizată pe șabloane mobile și pe modele de aplicații.
Colecția noastră de șabloane de prototipuri pentru dispozitive mobile vă va ajuta foarte mult pe parcursul călătoriei de dezvoltare a site-urilor web și a aplicațiilor. Nu ar trebui să începeți codificarea până când nu aveți o interfață grafică puternică și aceste kituri web vă vor face să începeți pe calea cea bună.
iOS 5 GUI Kit
Elemente vectoriale iPhone UI
iPhone App Icon Kit
Magneți pentru cadre (DIY Kit)
Interfață grafică Android
