Cum să reproiectezi un site web pentru a arăta incredibil pe mobil
Publicat: 2016-01-24[ Proto .io este un instrument de prototipare a aplicațiilor mobile folosit de antreprenori și startup-uri pentru a crea prototipuri realiste complet interactive, care arată și se simt ca aplicații reale.]
În urmă cu cincisprezece ani, reproiectarea site-ului a fost un efort mult mai simplu – pur și simplu ai decis cum va arăta experiența ta pe desktop, ai organizat conținutul în consecință și ai construit site-ul. Incredibil, unele site-uri web încă nu au o experiență mobilă adevărată, fie că este vorba de o reproiectare separată a site-ului web sau de un design responsive bine planificat.
Designul poate simți uneori un joc nesfârșit de recuperare din urmă, dar acești experți în aplicații mobile vă pot ajuta să vă ghidați prin procesul de reproiectare a experienței dvs. web, astfel încât să arate grozav pe orice dispozitiv, desktop sau mobil.
Cum să reproiectezi un site web pentru o experiență mobilă frumoasă
Handsome (@HandsomeMade) este o companie de design și tehnologie ale cărei valori de bază includ „gândire centrată pe om la fiecare nivel” și „software intenționat frumos și încântător”. Directorul de creație Brandon Termini și directorul tehnic Alex Zub explică modul în care aplică aceste principii în reproiectarea site-urilor mobile:
Spune Termini, cheia pentru o reproiectare a site-ului web Handsome este să adoptăm o „abordare a designului pe dispozitivul mobil”, făcând experiența utilizatorului cât mai elegantă și ușor de utilizat. „O modalitate prin care aplicăm designul pe mobil este să începem cu dimensiuni mai mici ale ecranului, ceea ce ne obligă să simplificăm interfața cât mai mult posibil și să punem doar ceea ce contează cel mai mult pe ecran.”
Zub adaugă: „Utilizarea tehnologiilor și a celor mai bune practici – cum ar fi designul receptiv și designul adaptiv, cu implementarea lor tehnică compatibilă – este cheia. Pentru multe produse, este logic să rămânem la sisteme de rețea receptive, ceea ce simplifică efortul necesar pentru a le construi, menținând în același timp aspectul grozav pe toate tipurile de ecrane.”
Cum să reproiectezi un site web pentru a arăta frumos pe mobil
I-am cerut lui Termini să ne împărtășească câteva dintre cele mai bune practici de design vizual. „Există sute de lucruri pe care le-am adunat de-a lungul anilor”, spune el. Acestea sunt primele trei bune practici pe care le pune în aplicare la frumos:
- Gândiți-vă cu atenție în ierarhia aspectului dvs. „Un aspect de succes înseamnă că un utilizator ar trebui să vă poată ghida prin ceea ce văd/citește în ordinea dorită. Buna utilizare a spațiului alb, teoria culorilor, tipografia etc. joacă un rol esențial în acest sens.”
- Utilizați culoarea în mod corespunzător. „Alege culorile potrivite pentru marca ta și asigură-te că se armonizează bine împreună. Folosiți o culoare erou pe care o asociați cu elemente importante ale interfeței de utilizare, cum ar fi butoanele de apel la acțiune. Asigurați-vă că utilizați culoarea cu moderație în locurile potrivite, care permit utilizatorului să curgă prin interfață și să nu se blocheze.”
- Tipografia ar trebui să fie ușoară pentru ochi. „Asigurați-vă că tipografia dvs. este adecvată pentru marcă și lizibilă pe dispozitivele pentru care proiectați și utilizați tipul ornamental cu moderație.”
Testarea reproiectării site-ului dvs. mobil
Bineînțeles, odată ce ați construit site-ul mobil, trebuie să-l puneți la punct pentru a asigura o experiență excelentă pentru utilizator. Termini spune: „Testarea frecventă și ajustarea sunt esențiale. Începeți să testați imediat ce afișați primele schițe desenate manual cu potențialii utilizatori și continuați să testați pe tot parcursul procesului, până la sistemele proiectate complet. A fi configurat pentru a putea auzi, sintetiza și repeta feedback-ul este foarte important pentru succesul oricărui produs.”
Recomandat pentru tine:
Ce înseamnă prevederea anti-Profiteering pentru startup-urile indiene?
Cum startup-urile Edtech ajută forța de muncă din India să își îmbunătățească abilitățile și să devină pregătite pentru viitor...
Stocuri de tehnologie New-Age săptămâna aceasta: problemele Zomato continuă, EaseMyTrip postează Stro...
Startup-urile indiene iau comenzi rapide în căutarea finanțării
Platforma de marketing digital Logicserve are finanțare de 80 INR Cr, rebrand-urile ca LS Dig...
Raportul avertizează asupra unui control de reglementare reînnoit asupra spațiului Lendingtech
Zub adaugă: „Asigurarea calității este o parte esențială a construirii unui produs care este utilizat pe diferite tipuri de dispozitive. Și deoarece este practic imposibil să avem fiecare dispozitiv posibil în birou, folosim servicii online care oferă acces la zeci de dispozitive „virtuale” în cloud, automatizându-l cât mai mult posibil. Cu investiții adecvate în automatizare, este ușor și rapid să efectuați teste între dispozitive pe drum.”
Am vrut să aflăm și mai multe despre cum să testăm și să asigurăm calitatea unei reproiectări a unui site mobil. Pentru asta, am auzit de la Simon Papineau, CEO al Crowdsourced Testing (@crowdsourcingqa). Papineau a creat Crowdsourced Testing pentru a aborda unele dintre punctele dureroase pe care le-a întâlnit în experiența sa de a testa numeroase aplicații mobile, site-uri web, jocuri și multe altele.
Ceea ce funcționează pe desktop nu funcționează întotdeauna pe mobil — și invers
Papineau spune: „Singurul lucru pe care dezvoltatorii tind să-l uite este că nu aveți nevoie de aceeași profunzime sau același conținut pe site-ul mobil pe care l-ați afișa pe site-ul desktop. Intenția, mentalitatea și obiectivul utilizatorului mobil sunt complet diferite. Vizitatorii nu vor petrece 20 de minute pe telefonul lor citind despre istoria companiei dvs. și amprentele sale fine.
În schimb, dă-le ceea ce doresc cât mai direct și cât mai repede posibil. Dacă este vorba de informațiile tale de contact, pune-le direct pe pagina de pornire, fără niciun fel de puf suplimentar.”
Una dintre provocări, spune Papineau, este să vă asigurați că reproiectarea site-ului dvs. mobil va arăta bine și va funcționa bine pe o multitudine de dispozitive: „Testarea pentru a vedea dacă site-urile web sunt receptive poate fi foarte consumatoare de timp și costisitoare. Cel mai bun lucru pe care îl poate face o companie este să se concentreze pe primele 15-20 de dispozitive care reprezintă majoritatea vizitelor sale. Întotdeauna va exista un dispozitiv mobil pe care site-ul nu arată perfect. Dar dacă acel dispozitiv reprezintă 0,05% dintre vizitatorii tăi, probabil că nu merită efortul suplimentar de dezvoltare.”
Cum să reproiectezi un site web utilizând design responsiv
Bob Bentz este președintele ATS Mobile (@atsMobile), o agenție de marketing mobil cu servicii complete, care supraveghează reproiectarea site-ului web pentru clienții din mai multe industrii. Bentz este pasionat de a se asigura că o experiență de site web arată și se simte la fel de bine pe un dispozitiv mobil ca și pe un monitor desktop de înaltă rezoluție, iar una dintre principalele moduri prin care ATS Mobile realizează asta pentru clienții săi este prin utilizarea designului responsive.
De ce Responsive Design? Un primer
„Designul web responsiv (RWD), cel mai des conceput cu HTML5, va fi alegerea probabilă în aproape toate noile versiuni web mobile”, spune Bentz. „De asemenea, poate fi proiectat folosind CSS3 și Javascript. Designul receptiv are avantajul izbitor de a fi extrem de flexibil, deoarece se modifică fluid pentru a se potrivi cu orice dispozitiv. RWD funcționează prin trimiterea aceluiași cod, indiferent de dispozitiv, și apoi rearanjarea acestuia pe partea clientului, permițând astfel afișarea aceleiași pagini web pe orice dispozitiv.”
Pentru a vedea designul responsive în acțiune, trageți această postare de blog pe un ecran de desktop, dacă nu ați făcut-o deja (vom aștepta!). Veți observa că există mai multe dimensiuni de fereastră la care interfața de utilizator se „rupe” și se rearanjează, astfel încât pagina să arate diferit în funcție de dispozitivul pe care îl utilizați (și de cât de mare este fereastra în interiorul dispozitivului respectiv).
Deci, cum funcționează, exact, designul responsive - și de ce ar trebui să-l folosiți pentru reproiectarea site-ului dvs.? „O reproiectare receptivă a site-ului web servește același cod HTML pe aceeași adresă URL, indiferent dacă dispozitivul utilizatorului este un desktop, tabletă, phablet, smartphone, telefon cu funcții sau purtabil (cum ar fi Apple Watch)”, spune Bentz. „De asemenea, poate răspunde diferit în funcție de dimensiunea ecranului site-ului. Dezvoltatorii pot decide ce grafică și conținut vor fi folosite pentru utilizatorii de dispozitive mobile și tablete. Textul și imaginile se pot ajusta în funcție de orice browser sau dimensiune a ecranului.”
Cu un design receptiv, vă asigurați că nu faceți o nouă actualizare de fiecare dată când ceva se schimbă în starea de lucru a dispozitivului mobil. „Când un nou dispozitiv apare pe piață și accesează site-ul dvs. web, nu este necesară programarea suplimentară dacă site-ul este construit pe un design responsive”, spune Bentz. „Cel mai important, însă, designul receptiv este cea mai bună practică de design recomandată de Google. Pentru multe site-uri web, RWD realizează un echilibru rezonabil între compatibilitatea cu dispozitivele mobile și ușurința implementării.”
Cele mai bune practici în design vizual receptiv
Potrivit lui Bentz, luarea în considerare a următoarelor bune practici va ajuta la reproiectarea site-ului dvs. responsive să arate și să funcționeze cel mai bine:
- Un antet simplu, izbitor. „Antetul și capul catargului ar trebui să fie simple, astfel încât să nu îndepărteze punctele cheie de vânzare. Logo-ul este imaginea cheie a mărcii; un logo prea orizontal poate să nu arate grozav pe ecranele verticale mai mici.”
- Navigare ușor de utilizat. „Navigarea este mult mai dificilă pe un ecran mic. Adesea, designerii vor folosi un buton de navigare afișat prin trei linii orizontale, de obicei în partea dreaptă sus a site-ului. Acesta se numește „meniu de hamburger”, deoarece arată ca un burger înconjurat de chiflă. Unele site-uri folosesc o navigare din partea stângă care se poate extinde spre exterior pentru a acoperi cea mai mare parte a ecranului.”
- O mulțime de imagini. „Este dificil să includeți prea multe imagini pe ecranul mobil, dar cuvintele pot copleși rapid interfața de utilizare. Prin urmare, designerii folosesc adesea carusele de imagini care permit utilizatorilor să treacă prin mai multe imagini ale produselor în loc să blocheze ecranul cu copiere.”
- Utilizarea inteligentă a subsolului. „Consumatorii sunt obișnuiți să folosească subsolul ca instrument de navigare și nu ocupă spațiu atât de valoros precum antetul de mai sus. Ar trebui să includă și linkul foarte important „Contactați-ne”.
O reproiectare minunată a site-ului web începe cu un prototip superb
A învăța cum să reproiectezi un site web pentru mobil nu este o minune, dar a avea un instrument puternic de prototipare rapidă care să te ajute să testați experiența face cea mai mare diferență. După decuparea copiei, delimitarea elementelor și depistarea schemei de navigare, puteți obține rapid feedback de la utilizatori cu privire la faptul dacă reproiectarea site-ului dvs. mobil este încă utilizabilă și intuitivă. Apoi, după cum a sugerat Termini, continuați să repetați până când aveți un prototip de care sunteți cu adevărat mândru.