Share
A trecut aproape un an de când dispozitivul de tabletare Apple, iPad, a fost lansat pentru mulțimea de adoratori ai gadget-iubitorilor. Steve Jobs a avut o vizită foarte apreciată recent în San Francisco, pentru a prezenta cea de-a doua generație a acestui dispozitiv în mijlocul unui pachet de tablete Android, inclusiv Xoom-ul Motorola și Samsung Galaxy Tab. Aceste dispozitive intră în mâinile a milioane de utilizatori și devin rapid dispozitive cu potențial mare de navigare.
Într-un articol anterior despre Webdesigntuts +, am discutat despre "noul fold" și despre modul în care valul de noi dispozitive (de la telefoane mobile la tablete la televizoarele HDTV) a rupt o gaură în noțiunea de mediu unic pe care proiectanții web îl pot plan pentru.
Pe partea desktop / laptop a industriei de calculatoare (aka, PC-uri), monitoarele au început să devină semnificativ mai mari cu câțiva ani în urmă? și designul de web a început să reflecte acest lucru înapoi în 2009-2010 cu design-uri mari, peisaj, imagini de format larg, și fundaluri bogate texturat. Putem numi această mișcare "extinderea" designului web pentru ecranul mare.
Notă: În sensul prezentului articol, vom face referire la toate computerele de birou care au monitoare dedicate (știți, acele mari monștrii care stau pe birouri) ca PC-uri. Da, chiar și computerele desktop marca Apple vor fi numite "PC-uri" pe durata acestui articol. E ok, poți respira acum.
De la începutul anului 2010, însă, diversitatea ecranelor a început de asemenea scalarea în jos proces. Producătorii de dispozitive au început să arunce în amestec o multitudine de rezoluții noi de ecran, majoritatea mai mici. Așa cum am văzut cu trending atunci când monitoarele au devenit mari, vedem, de asemenea, o tendință similară pentru aceste noi dispozitive mai mici; Ca atare, designul web sa schimbat semnificativ prin faptul că dimensiunile noi ale ecranului, cu metode de introducere noi, devin radical, devenind jucători majori în forțele motrice din spatele tendințelor de design web.
În acest articol vom arunca o privire la unele schimbări majore web designerii au trebuit să facă în scopul de a obține compatibilitatea comprimat și cum puteți face același lucru. De asemenea, vom arunca o privire asupra unor exemple minunate ale acestor site-uri prietenoase pentru "tablete".
Să aruncăm o parte din experiența evidentă a experienței utilizatorului: Când navigați pe un ecran tactil, trebuie să folosiți un deget. Când navigați pe un computer, puteți avea precizia unui mouse.
Principala diferență în proiectarea a experiență utilă pentru fiecare platformă este proporțională. Navigarea pe o tabletă trebuie să fie mai ușoară și mai mare decât pe un PC? adică designerii trebuie să ajungă la acel "mediu de mijloc" (suficient de mare pentru a naviga cu ușurință pe o tabletă, dar nu prea mare pentru a arăta prost pe un computer) sau să aibă un site separat pentru tablete care folosește o foaie de stil diferită aspect) cu totul.
Cei mai mulți utilizatori de PC au una din cele câteva rezoluții comune pe monitorii din jurul a 15 ani? - 24 ?. Unele au screeuri mult mai mari, dar foarte puține sunt mai mici. IPad, în contrast puternic, are un 9,7? ecran la o rezoluție de 1024x768 și cele mai multe tablete Android vin la 7?.
Cu toate acestea, rezoluțiile de 1024 pixeli nu sunt extrem de neobișnuite pentru tablete sau PC-uri. Diferența reală pe care trebuie să o remarcăm este ?orice fel este calea cea bună? atitudinea comprimatelor cu accelerometre încorporate. IPad se ocupă de această schimbare destul de frumos prin reducerea dimensiunilor fixe pentru a se potrivi la lățimea de 768 pixeli sau, desigur, reglarea lățimii fluidului pentru a se potrivi noilor dimensiuni.
Cu toate acestea, designerul mediu are o problemă unică de a nu putea anticipa mediul pe care cineva îl va vedea prin.
Întrebarea este: care este soluția la această problemă? Metode de proiectare adaptivă sunt soluția principală, deoarece dezvoltatorii utilizează CSS adaptabil pentru a arăta dacă un dispozitiv este de un anumit brand, browser sau rezoluție.
Problema este că nu există o singură rezoluție suplimentară adăugată în mix? Există o mulțime de ele. Metodele adaptive CSS / JavaScript funcționează bine pentru câteva dispozitive, dar este o metodă greoaie pe care o îndoiesc că majoritatea dezvoltatorilor ar dori să o folosească. Vrei să spui că vrei să îți proiectezi site-ul de douăzeci de ori înainte de lansare pentru toate dispozitivele diferite disponibile? Știu că nu aș face-o.
Ca atare, structurile fluide vor deveni, probabil, mai frecvente, deoarece se adaptează automat la noile rezoluții care le sunt prezentate fără nevoia greoaie de foi de stil multiple.
Așa cum am spus înainte, accelerometrele încorporate înseamnă că afișajul tabletei nu are o rezoluție clară. Datorită schimbării rezoluției cu puțin efort și a noilor mecanisme de derulare inerțială, nu există nicio șansă definitivă.
Ce este foldul? Pliantul este, în principiu, punctul de intersecție între ceea ce utilizatorul poate vedea și ceea ce nu poate face înainte de defilare. Acesta a fost un termen adus din ideea de ziar pliat și a fost folosit în designul web ca o definiție a vizibilității. Utilizatorii trec judecățile cu privire la ceea ce văd și la cât de repede o percep.
Cu toate acestea, problema este că există prea multe browsere de luat în considerare. Diagrama de mai jos a fost utilizată în articolul lui Shaun Cronin pe fold pentru a afișa o gamă largă de rezoluții care sunt folosite pentru a vizita WebDesignTuts +. După cum puteți vedea, există mai multe browsere acolo decât este posibil să se ia în considerare într-un flux de lucru normal, iar dispozitivele mobile au contribuit la numărul.
Problema constă în faptul că foldul este adaptabil pe fiecare dispozitiv în timp ce dispozitivul se rotește. Este o poveste foarte asemănătoare celei de mai sus despre fluid și lățime.
Probabil ați auzit: Apple nu-i place Flash. Niciunul dintre dispozitivele bazate pe iOS de la Apple nu are built-in Adobe Flash și nu este posibil să se instaleze. Aceasta înseamnă că anumite părți ale webului sunt doar incompatibile cu un iPad.
Trebuie spus că utilizarea actuală a site-urilor Flash este mai puțin frecventă în zilele noastre, însă elementele site-ului web încă utilizează standardul. Multe videoclipuri pe site-uri semi-populare, de exemplu, nu sunt disponibile pe iPad. Cu toate acestea, site-urile video mai populare, cum ar fi YouTube, integrează lent HTML5. Aceasta este soluția preferată a Apple pentru Adobe Flash. Cea de-a cincea revizuire a HTML aduce o selecție de elemente noi care pot fi oferite ca alternative la utilizările de bază ale Flash, cum ar fi distribuția video și audio. Și datorită implementării de pe site-uri precum YouTube și CNET, este clar că această tranziție se întâmplă.
Majoritatea oamenilor pot scutura acest lucru ca nefiind necesar. Dar, după ce a fost doar un an în mâinile publice, iPad-ul a acumulat deja o cotă de piață de navigare mare, astfel încât devine din ce în ce mai importantă decât cea a utilizatorilor din IE 6.
?Este aproape ca și cum dimensiunea nu contează pe tablete.?
iPad rulează browserul Safari alimentat de webkit, într-o formă mobilă. După cum am discutat în secțiunea anterioară, Safari pentru iPad este foarte conform HTML5, dar scade în câteva zone. Tipografia este un lucru, deși iPad acceptă redarea SVG, nu suportă alte servicii de randare a textului care au folosit Adobe Flash sau chiar Cufon.
Pseudo-clasele populare nu pot fi folosite pentru a crea efecte, cum ar fi hovering over links, din cauza lipsei de cursor.
iPad, totuși, împiedică barierele dintre utilizator și conținut, deoarece mărirea și micșorarea este mult mai ușoară. Este aproape ca și cum dimensiunea nu contează pe tablete.
Spuneți adio Aplicațiile Web: Să plecăm de la exemplul specific al iPad-ului pentru o clipă. În schimb, să ne uităm la imaginea mai largă. Există sute de mii de aplicații pe App Store, peste 65.000 dintre acestea fiind specifice pentru iPad. Un număr tot mai mare de aplicații sunt disponibile pe piața Android (multe dintre acestea fiind aplicații pentru copii de tip copie din versiunile iApp). Deși este evident că nu va exista o scădere a site-urilor web, ar putea fi un declin foarte bun aplicații bazate pe web în schimbul aplicațiilor care se află numai pe un dispozitiv.
Ce inseamna asta? Aceasta înseamnă că aplicația web pe care ați folosit-o o dată prin navigarea către un anumit site va dispărea sau va deveni redundantă - în locul său va fi o aplicație reală pe dispozitiv. Browserul dvs. nu va mai fi principalul mod în care accesați informațiile.
Spuneți la revedere la UI-ul mouse-centric: Probabil că va fi o trecere de la o navigare de precizie verticală până la un tip casual. Toate acele aplicații web care necesită precizia unui cursor sunt înlocuite de omologii nativi care rulează mult mai bine pe o tabletă. Dar pentru brandurile mai mici, exista o sansa mai mare ca ei sa isi reprogrameze aplicatia web pentru a se potrivi mai bine dimensiunilor unei tablete.
Tabletele introduc o categorie complet nouă de dispozitive pentru web designeri. Unii sunt doar de capturare cu cresterea in browsing smartphone-ul si acum au luat cinci sau sase noi rezolutii sa ia in considerare. Navigatoarele acestor dispozitive sunt, cu siguranță, ceva de luat în considerare și predicția mea este că, într-un an sau două, site-urile nu vor avea o versiune iPad, ci vom vedea site-uri universale pe măsură ce aplicăm.
Spuneți salut la interfața cu aplicațiile Centric: Nu voi spune că degetul va fi noul factor de conducere al întregului design web pentru că, bine, mouse-urile (șoarecii?) Nu merg nicăieri în curând. Sigur, într-o generație sau două am putea controla toate site-urile cu degetele, cu ochii și chiar cu undele cerebrale? dar până atunci, mouse-ul / cursorul va rămâne instrumentul principal pe care majoritatea oamenilor interacționează cu site-urile web.
Ceea ce voi spune in schimb este ca site-urile vor incepe sa-si ia din ce in ce mai mult influenta design-ului de la design-ul App - asta inseamna butoane mai mari, o mai mare tipografie, o utilizare semnificativa a gradientilor si texturilor si layouts mai putin complicate. Fără întârziere, să analizăm principalele elemente ale designului eficient al tabletelor:
Cele mai multe dintre punctele principale pe care le vom arăta aici pot fi rezumate într-o declarație strălucitoare:
Dacă designul web este Lego, designul iPad trebuie să fie Duplo
- Oliver Reichenstein
Dacă ați jucat vreodată cu Legos (și ce designer de web nu a dat ?!), acest mesaj este sigur de a lovi acasă. Proiectarea pentru comprimate este cam ca proiectarea hârtiei de rețea pentru copiii mici care folosesc acele creioane de dimensiuni mari pentru a desena imagini - ceea ce înseamnă că vrei să păstrezi lucrurile simple și BIG.
Tipul de tip mic (și vreau să spun tipul tipic care ne-a plăcut să-l folosim înapoi în 2005) nu este ușor de citit pe un comprimat. Sigur, puteți să măriți imaginea? dar dacă lungimea liniei este prea lungă, textul este destul de greu de citit dacă nu veți derula fiecare linie de text.
De asemenea, textul mare poate fi o oprire pe tablete. Textul care este prea mare forțează utilizatorii să parcurgă mai des decât ar putea avea nevoie de altceva. Răspunsul este textul "drept" pe care Goldilocks l-ar putea pune. Acest lucru nu înseamnă doar găsirea dimensiunii perfecte a fontului; Aceasta înseamnă găsirea unei combinații perfecte între font-chip, dimensiune, înălțimea liniei și lungimea liniei.
Sunt sigur că vom reuși să ne descurcăm într-un articol complet în viitor - dar pentru moment, ghidul dvs. ar trebui să fie crearea unei scheme de tipografie care să fie ușor de vizualizat și să se distreze.
Acest lucru este de la sine înțeles, dar acele mici pictograme de 16 x 16 pixeli nu o vor tăia pe o tabletă atunci când degetul mediu poate face clic cu ușurință pe un spațiu de aproximativ 20 de pixeli. La fel ca tipul, asta nu înseamnă că butoanele trebuie să fie ginormoase pentru a fi utilizabile. Butoanele bune trebuie să fie ușor de apăsat cu degetul, dar nu ar trebui ca surferii PC să se simtă ca și cum ar folosi un mouse Playskool.
A existat o perioadă în mijlocul anilor 2000, când designerii au început să utilizeze texturi doar pentru că ar putea. Asta e bine și bine, dar nu are cu adevărat un scor mare când vine vorba de uzabilitate.
Deci ce sunt plin de înțeles texturi și gradienți? Pentru a pur și simplu - acestea sunt efecte vizuale care subliniază și sprijină utilitatea unui site. De exemplu, un buton ar putea avea un gradient subtil peste el pentru a face să pară "presă". O textura de fundal s-ar putea simti ca o fibra de carbon intunecata pentru a face din prim-plan pop-out mai mult. Acesta este un alt caz în care putem scrie un articol complet pe acest subiect, dar folosim bunul simț. Dacă o textură sau un gradient nu oferă o valoare semnificativă, probabil că puteți scăpa de ea.
Voi fi atent cu aceasta, deoarece "mai puțin complicate" machete nu înseamnă mai puțin coloane, mai puțin varietate, sau mai puțin interesante rețele. Acestea fiind spuse, dacă ați încercat vreodată să utilizați sistemul de backend WordPress pe un iPad, veți ști exact despre ce vorbesc. Modelele complexe necesită ca un utilizator să mărească constant anumite piese de informații pentru a le putea citi (cu atât mai puțin îl folosiți).
Un aspect mai bun înseamnă o abordare mai atentă a designului site-ului. Dacă site-ul dvs. nu are o miniatură pentru fiecare postare de pe blog, nu vă deranjați să încercați să forțați un layout condus de imagine? și invers, dacă site-ul dvs. utilizează o mulțime de imagini, utilizați un aspect care complimentează acea parte a conținutului dvs., mai degrabă decât încercarea de a se potrivi întotdeauna fragment de 40 de cuvinte lângă fiecare imagine.
Construcții mai puțin complicate înseamnă eliminarea datelor meta inutile care au ajuns astăzi să ne aglomereze pe site-urile noastre? în loc de a lista data, etichete, categorii, icoane de social media, autor și orice altcineva vă puteți gândi, faceți doar mai mult spațiu pentru ceea ce este de fapt important: conținutul dvs. de bază!
Acum știm ce face un site optimizat pentru tablete, să aruncăm o privire la câteva site-uri care au făcut deja acest lucru. Site-urile de sub fiecare lucrează excelent pe un iPad, indiferent dacă este vorba de utilizarea lor în portret sau peisaj, sau de utilizarea elementelor HTML5.
Accentsconagua