Share
Astăzi am să recapitulez câteva considerente concrete pe care ar trebui să le faceți pentru a vă asigura că designul dvs. web este optimizat pentru utilizarea pe o tabletă tactilă.
În luna martie, am scris un articol intitulat Cum iPad (și tabletele) conduc o nouă eră de Web Design. În acest articol, m-am uitat la iPad - o platformă pe care am folosit-o zilnic de aproximativ zece luni - și cum a schimbat considerațiile designerului web modern. Cu creșterea numărului de tablete (sau, mai degrabă, creșterea iPad-ului), intrările de atingere sunt folosite mult mai des atunci când navigați pe web. Este o poveste diferită față de telefoanele inteligente, care au adesea un site touch specialist.
În acest articol, am analizat conceptele de proiectare pentru tablete, cum ar fi proiectarea pentru noi rezoluții. În timp ce este foarte similar, acest articol va acoperi considerațiile pe care ar trebui să le faceți atingere cu dispozitive.
Poate că una dintre cele mai mari considerații este să ne amintim că degetul uman nu este la fel de precis ca un cursor controlat de un mouse sau trackpad. Luați-vă degetul și mențineți-l pe afișaj, lângă cursor. Este destul de clar faptul că acțiunea precisă realizabilă cu un mouse nu este posibilă doar atunci când se utilizează intrări bazate pe atingere.
Din acest motiv, o mulțime de aplicații web au în prezent omologi iPad nativi care se potrivesc mai bine preciziei unui deget. Desigur, nu trebuie să mergeți și să dezvoltați o aplicație, de fapt, forțând utilizatorii dvs. să utilizeze o aplicație ar putea să le elimine. Takeaway pentru acest punct este de a asigura pur și simplu că zonele cheie, cum ar fi navigația dvs. nu trebuie să fie mărite pentru a fi accesate de către utilizatori pe o interfață touch.
Pentru a realiza o bună utilizare atât la șoarece cât și la atingere, designerii trebuie să facă compromisuri în "terenul de mijloc"; totul trebuie să fie atins de degetul uman, dar nu arăta excesiv de mare atunci când este văzut cu un mouse mai tradițional și configurarea PC-ului.
După lansarea ambelor site-uri pe un iPad, este evident că site-ul Apple are o navigație mai bună. În timp ce ambele funcționează bine cu un mouse, meniul Apple este în mod clar cel mai ușor pentru atingere, în timp ce BBC-urile necesită mult mai multă precizie. Când mi-am scris articolul în luna martie cu privire la designul iPad, am scris următoarea linie: "înseamnă că designerii trebuie să ajungă la acel" mediu de mijloc "sau să aibă un site separat pentru tablete, care folosește o foaie de stil diferită (și chiar un aspect diferit) . retrag asta.
Cu excepția cazului în care designul dvs. web necesită în mod expres o versiune personalizată pentru interfețe bazate pe atingere, nu este o practică generală de a vă segmenta vizitatorii cu diferite versiuni ale unui site. Dacă aveți mai multe versiuni pentru diferite platforme, va fi probabil mai greu de menținut, dar, mai important, va întrerupe conexiunea pe care o fac utilizatorii între navigarea site-ului dvs. pe un desktop și acest lucru pe o tabletă. Dacă arată diferit, trebuie să învețe oa doua modalitate de navigare care nu ajută pe nimeni.
Dacă trebuie să creați o versiune specifică pentru iPad, oferiți întotdeauna un traseu de întoarcere pentru ca utilizatorii să opteze să vizualizeze întregul site.
Aruncați o privire la designul dvs. și gândiți-vă la ceea ce face ceea ce este. Ați folosit fără îndoială cod HTML și CSS, dar ați folosit Flash sau altă tehnologie? Cea mai bună modalitate de a gestiona o gamă largă de platforme este să rămânem la standardele HTML și CSS și să evităm în special utilizarea tehnologiilor care necesită pluginuri de browser sau software suplimentar.
Din fericire, HTML5 oferă un set mare de instrumente pentru crearea de elemente interactive și media care vor funcționa perfect pe o tabletă și pe principalele browsere desktop de generație curentă. Aș putea provoca controverse sugerând acest lucru, dar (în cazul în care designul web este în cauză) încercați să evitați Flash cu orice preț. Nu numai că are multe probleme pe desktop, iPad-ul cu cotație majoritară nu o suportă, și nici nu vor fi cei care rulează interfața de metrou Windows 8.
Există o serie de motive pentru care ar trebui să utilizați HTML5 în general, în afară de faptul că este mai probabil să lucrați instantaneu pe o tabletă. Mass-media precum audio și video funcționează foarte bine cu HTML5 și funcționează pe diferite platforme. Am fost uimit de unele lucruri din HTML5 pe care le-am văzut când făceam cercetări despre o recuzită recentă, deoarece a oferit efecte asemănătoare Flash, dar fără nici un fel de hassle și excludere de la iOS.
Firește, trebuie să vă asigurați că codul dvs. este scris în conformitate cu standardele, cum ar fi orice site web, orientat spre iPad sau altfel.
O mulțime de servicii populare, inclusiv YouTube, oferă în mod automat jucători video alimentate cu HTML5 atât pe propriul lor site, cât și când sunt încorporate în alte persoane. În acest caz, acest videoclip este încorporat pe un blog și se redă fără probleme pe un iPad. Desigur, vor exista excepții de la acest lucru, dar, în general, ar trebui să încercați să proiectați pentru rezoluții în jurul valorii de 1024px, astfel încât să se potrivească o tabletă nativă. Cele mai multe sisteme de rețea ale rețelei web au o lățime de aproximativ 960 pixeli, deci nu ar trebui să fie o problemă masivă de implementat. În cazul în care alegeți să ignorați acest sfat, site-ul dvs. va ajunge probabil la diminuare pentru a se potrivi cu lățimea unui browser de tablete, ceea ce va duce la necesitatea de a apropia utilizatorul. Acest lucru lasă mult mai multă mărire și micșorare a zoom-ului în jurul pentru a găsi lucruri, care nu ajută pe nimeni.
Soluția la problema vine sub forma de CSS adaptabil, care poate schimba stilurile în funcție de platformă, browser și rezoluție. Am explicat deja că nu îmi place ideea de a crea o versiune unică a unui site Web, dar doar modificarea unor stiluri pentru utilizatorii iPad nu ar trebui să fie o problemă. Din păcate, aceasta nu lasă mult mai multă muncă, dar uneori poate fi un pas simplu care face îmbunătățiri majore.
Dacă sunteți în căutarea de a proiecta simultan pentru mai multe rezoluții sau doar modificarea stilurilor triviale între platforme (cum ar fi schimbarea recunoașterii legăturilor pe un iPad versus un desktop), există o mulțime de servicii care vă ajută, inclusiv Adapt.js. De asemenea, asigurați-vă că ați verificat articolul minunat despre layout-urile adaptive de la Smashing Magazine.
iOS are această modalitate destul de minunată de a marca un site web pe pagina dvs. de pornire, așa că arată chiar ca un link pentru a deschide o aplicație. Forma cea mai de bază a acestui lucru este adăugarea unei mici pictograme pentru a fi pusă pe ecranul inițial atunci când este salvată acolo de un utilizator. Acest lucru se realizează cu o singură linie de cod:
Notă: Acest fragment va adăuga automat luciu de stil Apple în pictograma dvs. Schimba-te apple-touch-icon pentru Apple a-touch-icon-precompusă pentru a elimina acea luciu.
Există și alte metaetichete, care în mod normal nu pot fi utilizate, care pot fi aplicate designului dvs. pentru ao îmbunătăți atunci când sunt salvate pe ecranul de pornire al iPad-ului. De exemplu, linia de mai jos va ascunde bara de adresă și marcaje și va afișa doar ecranul web complet.
Acestea sunt doar două dintre fragmentele disponibile și ar trebui să verificați cu ușurință tutorialul MobileTuts + pe acest subiect. Acestea fac puțină importanță pentru site-ul dvs. pe platforme non-iOS, dar ar putea îmbunătăți experiența acestora pe un iPad, în cazul în care aplicația dvs. ar fi potrivită pentru aceștia.
Odată cu utilizarea tot mai mare a tabletelor, majoritatea cu un accelerometru încorporat, se introduce un nou tip de pliante. În timp ce am scris despre felul în care se desprinde, există o nouă, care este introdusă odată cu creșterea numărului de tablete utilizate.
Când o tabletă comută orientarea, întreaga vizualizare a unei pagini web poate fi distorsionată. Ca și în ceea ce privește adaptarea mai multor rezoluții ale browserului, trebuie să vă asigurați că site-ul web reprezintă rezoluțiile multiple capabile de o singură tabletă, cea a orientărilor sale portret și peisaj.
Elementul de listă de verificare aici este să vă asigurați că informațiile dvs. cheie sunt vizibile fără a trece prin bătaie atunci când îl vedeți în peisaj și portret. Acestea pot furniza instantanee radicale diferite ale site-ului dvs., prin urmare încercați să le testați în ambele orientări pentru a vă asigura că toți utilizatorii unei tablete specifice pot vedea cea mai bună reprezentare a designului site-ului dvs. și a conținutului acestuia.
Site-ul CNN în orientare portret și peisaj în Mobile Safari. Un pas important în asigurarea funcționării site-ului dvs. pe un iPad este de a testa efectiv site-ul dvs. pe o interfață touch și să ia în considerare: cât de simplu este? Dacă aveți nevoie, vizitați un magazin Apple, împingeți unul din copii pe Facebook și încărcați design-ul.
Dacă nu aveți un iPad și nu aveți acces la un magazin cu unul pe ecran, dar aveți un Mac, descărcați Xcode, deschideți simulatorul iPad și dați-i un vârtej acolo pentru a testa lucruri precum rezoluția și orientarea.
Xcode este o descărcare gratuită pentru utilizatorii de OS X Lion și oferă simulatoare iPhone și iPad care vă permit în mod aproximativ să vedeți cum apare site-ul în diferite rezoluții. Tabletele au schimbat cu siguranta designul web, probabil pentru mai bine si devine din ce in ce mai important sa le adapostim atunci cand proiectam noi site-uri. Un utilizator care vizitează mai întâi design-ul dvs. pe iPad-ul său, numai pentru a găsi că nu funcționează, necesită o mulțime de derulare sau altă frustrare, poate fi răsturnat pentru viață din cauza impresiei pe care o oferă.
Am vizitat cu siguranță o mulțime de site-uri pe iPad-ul meu în cele 16 luni pe care le-am deținut și am experimentat un pic în lucrul cu designul specific iPad-ului (ca în sfatul # 4). Urmați aceste șase sfaturi și ar trebui să fie setat pentru a merge cu un design compatibil iPad. Atâta timp cât funcționează din punct de vedere tehnic, nu necesită o tonă de zoom și / sau defilare și poate fi utilizat cu deget, sunteți pe o cale de a găzdui o nișă valoroasă a pieței de navigare.
Accentsconagua