Mobile Web Design 10 sfaturi pentru o mai bună utilizare

Navigarea web pe mobil este de așteptat să se transforme în următoarea platformă majoră pe Internet. Acum este ușor să navigați pe net aproape de oriunde folosind dispozitive mobile care se încadrează într-o mână din cauza tehnologiei. Faptul că implementarea bună a utilizării în designul web mobil este de scurtă durată face dificilă răsfoirea în diverse site-uri mobile populare. Proiectarea pentru dispozitivele mobile trebuie să fie mai simplă decât site-ul standard și să se bazeze mai mult pe sarcini pentru a face treaba, deoarece utilizatorii caută ceva specific și urgent.

Ar trebui să țineți cont de modul de utilizare a celui mai restrâns minim al spațiului disponibil pentru conținutul dvs. principal și să rămâneți interesant pentru utilizatorii mobili. Evitați imaginile mari și animația flash deoarece acestea vă vor încetini. Rețineți că funcționalitatea este mai importantă decât stilul pentru site-urile mobile. Dacă site-ul dvs. nu este codificat și proiectat corespunzător, acesta ar putea arăta mai bine pe un singur telefon, cel mai rău la altul sau mai rău, fără a afișa deloc. Testați, validați și verificați dacă este compatibil cu toate dispozitivele mobile.

Pentru a vă ajuta să creați un site accesibil nu numai pe computere desktop sau laptop, ci și pe dispozitive mobile, iată câteva dintre lucrurile pe care trebuie să le luați în considerare în ceea ce privește designul web mobil cu exemple de imagini împreună cu link-ul direct al versiunii site-ului mobil.

1. Decideți asupra rezoluției ecranului

Lumea mobilă conține o varietate bogată de considerații de proiectare din diferite dimensiuni ale ecranului și rezoluție într-o varietate de forme. Încercați să obțineți un echilibru între lățimea ecranului și dimensiunea audienței. Aflați specificațiile dispozitivelor mobile actuale și folosiți cea mai bună soluție. Ceea ce este o provocare pentru dezvoltatorii de dispozitive mobile este modul în care unul poate fi afișat în mod corespunzător într-o gamă de dimensiuni de ecran, fără a trebui să recreați pagini pentru diferite platforme.

Iată o listă de rezoluții web populare pe dispozitive mobile din februarie 2011, prezentate de Uxbooth.com cu articolul publicat, Considerații privind designul web mobil (Partea 2): Dimensiuni, de David Leggett. Autorul explică câteva aspecte legate de dimensiunile afișării și de soluțiile pentru proiectarea layout-ului.

2. Despachetați paginile web în porțiuni mici

Secțiunile lungi ale textului pot fi greu de citit, astfel că plasarea lor pe mai multe pagini limitează deplasarea într-o singură direcție. Scapa de conținut cu prioritate scăzută. Urmează o singură coloană de text care se împachetează astfel încât nu există derulare orizontală.

Pentru exemplul de mai jos, versiunea CBS News pe mobil arată doar secțiunea principală de știri și încalcă articolele de știri în porțiuni mici. În timp ce Treehugger se prezintă cu articolele recente și ultimele tweet-uri cu unele dintre caracteristicile site-ului complet. Ambele site-uri au ca utilizator să facă clic pe un link text pentru a vedea restul articolului.

CBS News

Treehugger

3. Simplificați designul

Simplitatea echivalează cu utilitatea. Lăsați-i să se deplaseze în jurul locului fără dificultate. Evitați includerea de tabele, cadre și alte formate. Dacă utilizați umplutură, amintiți-vă să o păstrați la un minim absolut mult mai mic decât ați folosi pentru o pagină web obișnuită. În comparație cu computerele desktop, cu cât faceți mai mult clic pe linkurile de pe site-urile mobile, cu atât mai mult așteptați din cauza timpului de încărcare. Cu aceasta, trebuie să vă dezbrăcați și să vă simplificați site-ul cu echilibru între conținut și navigație.

Pentru exemplul nostru, site-ul versiunii mobile a Best Buy conține numai categoriile de produse esențiale care reduc nivelul ierarhiei pentru conținut. În timp ce pagina de pornire mobilă YouTube afișează numai cele patru videoclipuri recente.

Cea mai buna achizitie

YouTube

4. Opțiunea de a vedea întregul site Web

Furnizați un link pentru vizitatorii dvs. de pe mobil pentru a reveni la site-ul dvs. complet, pentru ca utilizatorul să găsească și să vizualizeze celălalt conținut și caracteristici accesibile numai pentru versiunea de desktop a site-ului. Vizitatorii dvs. vor face cu siguranță o mulțime de derulare verticală, astfel încât să le ajutați cu link-uri "Înapoi la început", astfel încât să poată sări în partea de sus a paginii.

De exemplu, Ars Technica are butonul de legătură pe site-ul web standard plasat pe poziție. În timp ce Shangri-La are link-ul complet al site-ului plasat pe subsolul paginii.

Ars Technica

Shangri-La

5. Plasarea de navigație

Familiarizați-vă cu publicul și aflați ce căutați. Aflați cum vor dori să navigheze site-ul dvs. Poziționați meniul de navigare sub conținut dacă utilizatorii dvs. de telefonie mobilă vizați vor să vadă rapid modificarea conținutului. Conținutul și titlul trebuie să fie vizibile mai întâi pentru a nu fi în calea vizualizării conținutului paginii. Pentru utilizatorii care doresc să navigheze imediat pe o anumită categorie, plasați navigația în partea de sus a paginii. Mai jos sunt diferite eșantioane de plasare de navigație folosite în designul web al mobilului.

D & G

politico

Horoscop zilnic

6. Utilizați link-urile de text

Site-ul dvs. principal poate să utilizeze meniuri tip fly-out, rollover sau alte gadgeturi de lux, însă un browser mobil nu va fi probabil. Rețineți că elementele dinamice ale paginilor și legăturile grafice consumă resurse, deci alegeți legături text bine marcate.

A List Apart

Reddit

7. Faceți o distincție între linia selectată

Mutarea cursorului în jos va defila pagina și va scoate în evidență toate link-urile simultan. Deci, este important să sfătuiți în mod clar utilizatorul ce element se concentrează. Acest lucru se poate face prin modificarea fontului și a culorii de fundal a legăturilor și butoanelor sau prin adăugarea pur și simplu a unor elemente de umplutură în jurul legăturilor, pentru a face zona clickabilă mai mare cu 44px-44px. Geek Squad și Diesel au folosit fonturi mari pentru text clicabil.

Echipa de tocilari

Diesel

8. Balansați legăturile

Descărcarea fiecărei pagini consumă resursele de timp și de sistem, dintre care cele din urmă sunt în cantități mici, așa că nu încercați să forțați vizitatorul site-ului să diguleze printr-o multitudine de pagini pentru a accesa informațiile solicitate. Aplicați un echilibru între numărul de linkuri de pe fiecare pagină și adâncimea site-ului.

Flickr

Stare de nervozitate

9. Reduceți introducerea textului utilizatorului

Este greu să introduceți text în versiuni mobile ale site-urilor web. Înlocuiți-le cu butoane radio sau cu lista, pentru a putea opta de la ceea ce au nevoie cu ușurință. Rețineți că utilizatorii de telefoane mobile nu au acces la tastatura și mouse-ul convențional. Cu cât este mai scurtă adresa URL, cu atât mai bine este faptul că este monotonă să tastați adrese URL lungi.

Pentru exemplul nostru de mai jos, Fedex a folosit lista de verificare și meniurile derulante. În timp ce Tumblr v-a făcut să alegeți limba utilizând meniul derulant.

Fedex

Tumblr

10. Nu apare nici o reîmprospătare

Browserele mobile nu acceptă în mod normal ferestrele pop-up. Și dacă au făcut-o, ar avea un spațiu foarte mic în care să poată intra. Stați departe de a le folosi pentru a evita rezultatele imprevizibile. De asemenea, nu aveți pagini revigorante periodic pentru a evita umplerea memoriei limitată a dispozitivului. Permiteți utilizatorului să actualizeze conținutul.

Pe scurt

Creați-vă creații și aplicați-vă designul web pentru mobil într-un mod nou. Asigurați-vă că conținutul este suficient de convingător și de utilizat. Oferiți-le utilizatorilor ceea ce doresc, atunci când o doresc. Utilizatorii nu doresc să sapă mai adânc pe site doar pentru a găsi ceea ce caută în webul mobil.

Aveți site-uri mobile preferate care te-au inspirat într-adevăr? Îți poți împărtăși câteva sfaturi despre designul de web pentru mobil? Anunță-ne!

Citirea în continuare

1. Responsabil Web Design (Alistapart.com)
2. Faceți-vă site-ul mobil prietenos (Thinkvitamin.com)
3. W3C mobileOK Checker (W3.org)
4. iPhone Simulator