Share
Responsabilitatea design-ului web este o necesitate în zilele noastre. Având în vedere numărul tot mai mare de persoane care folosesc dispozitivele mobile pentru a face cercetare înainte de a cumpăra un produs, precum și pentru a recupera cele mai recente știri, afacerea dvs. nu își poate permite să aibă un site web care nu răspunde.
Când adăugați că Google favorizează site-urile care răspund de mobilitate în algoritmul de căutare, devine clar că designul receptiv este aici pentru a rămâne. Dacă vă abonați site-ul la pământ, sfaturile pentru un design web receptiv descrise în acest articol vă vor ajuta să proiectați un site atractiv și receptiv. Și dacă reproiectați un site existent, aceleași sfaturi vor fi la îndemână.
Următoarele sfaturi pentru designul site-urilor mobile și design-ul receptiv vă vor ajuta să vă asigurați că site-ul dvs. este atât de receptiv, cât și de prietenos mobil. Iată câteva dintre cele mai bune sfaturi pentru un design web receptiv:
Înțelegeți că utilizatorii vor folosi site-urile web în mod diferit pe computere desktop decât pe dispozitive mobile. Gândiți-vă la vizionarea vizitatorilor site-ului dvs. sau la utilizarea analizelor pentru a afla de ce accesează site-ul dvs. cu un dispozitiv mobil și ce pagini și elemente accesează cel mai mult. Aceste informații vă vor ajuta să înțelegeți care pagini și alte elemente ale site-ului dvs. web trebuie să fie disponibile pe ecranele mai mici.
De exemplu, dacă fac o căutare rapidă a site-ului dvs. pentru a accesa informațiile dvs. de contact, asigurarea că pagina dvs. de contact se afișează pe navigația pe mobil este o alegere inteligentă.
Înainte de a proiecta site-ul dvs., este util să planificați mai întâi aspectul. De fapt, majoritatea designerilor web încep prin a crea o rețea wireframe și apoi designul vizual al site-ului înainte de a trece la partea de codificare. Nu numai că acest lucru vă va ajuta să creați aspectul exact și să vă simțiți că doriți, ci va facilita, de asemenea, dvs. sau designerului să personalizați șablonul și să îl integreze perfect cu marca dvs..
Asigurați-vă că pentru a crea mai multe prototipuri ale site-ului dvs. web și testați-le pe diferite dimensiuni ale ecranului pentru a vă asigura că designul final va fi receptiv. Iată câteva instrumente pe care le folosiți pentru a crea prototipuri receptive:
Navigarea este cea mai importantă parte a oricărui site web. Acesta servește ca o foaie de parcurs pentru vizitatorii dvs. și le permite să acceseze cu ușurință alte pagini de pe site-ul dvs. În versiunile de desktop ale site-ului dvs., navigarea dvs. va avea de obicei linkuri vizibile către toate paginile importante. Pe dispozitivele mobile, practica obișnuită este să utilizați o pictogramă de hamburger și să ascundeți legăturile din spatele acesteia.
Cu toate acestea, aceasta nu este întotdeauna cea mai bună abordare, deoarece unii utilizatori nu își dau seama că trebuie să facă clic pe pictograma pentru a dezvălui meniul și a lăsa frustrați, deoarece nu pot vizita alte pagini. O abordare mai bună ar fi să lăsați cele mai importante elemente de meniu vizibile chiar și pe ecrane mai mici și folosind meniul hamburger pentru restul legăturilor. De asemenea, puteți include linkuri către alte pagini din textul de pe pagina dvs. de pornire pentru a facilita navigarea.
Imaginile joacă un rol important în designul site-ului dvs. Ele vă pot ajuta să faceți o legătură emoțională cu vizitatorii dvs. și să le permiteți să vizualizeze produsul pe care sunt interesați să îl cumpere. Ca atare, este crucial ca imaginile dvs. să fie optimizate pentru web.
Aceasta înseamnă că imaginile trebuie salvate în format corespunzător - JPG pentru imagini fotografice sau scenice și PNG-8 pentru pictograme și logo-uri care necesită un fundal transparent. Pe lângă aceasta, ar trebui să reduceți dimensiunea imaginii utilizând un instrument precum TinyJPG și să luați în considerare utilizarea unor imagini optimizate pentru diferite puncte de întrerupere mobile pentru a reduce problemele legate de scalare și de lățime de bandă.
O altă modalitate de a aborda designul receptiv este să proiectați mai întâi o versiune mobilă a site-ului dvs. Web. Acest lucru vă permite să vedeți cum vor arăta imagini, text, logo-uri și alte elemente pe ecrane mai mici. Dacă acestea afișează fără probleme, atunci nu ar trebui să aveți probleme la adaptarea designului la ecrane mai mari.
Interogările media au fost inițial schițate ca parte a propunerii inițiale pentru CSS, dar nu au devenit realitate până când browserele au adăugat un sprijin oficial pentru ei în 2012. Rolul principal al interogărilor media este că acestea vă permit să optimizați aspectul site-ului dvs. pentru diferite lățimi de ecran.
Atunci când utilizați interogări media, conținutul va răspunde diferitelor condiții de pe anumite dispozitive. Pe scurt, o interogare media va verifica rezoluția, lățimea și orientarea dispozitivului și va afișa setul corespunzător de reguli CSS. Un exemplu de interogare media arată astfel:
Ecran @media și (min-width: 500px) regulile dvs. CSS aici
Este de la sine înțeles că formele de pe site-ul dvs. ar trebui să se adapteze la lățimea și dimensiunea ecranului. Cu toate acestea, puteți face un pas mai departe și asigurați-vă că câmpurile de intrare declanșează tipul corect de tastatură. Puteți face acest lucru ușor prin adăugarea unui element de intrare în câmpurile de formular.
Câmpurile care necesită introducerea textului, cum ar fi numele, adresa de e-mail, adresa și altele ar trebui să declanșeze o tastatură textuală în timp ce orice câmp de introducere care necesită un număr ar trebui să declanșeze imediat tastatura numerică. Acest lucru îmbunătățește caracterul general al mobilității site-ului dvs. web, precum și experiența utilizatorului.
Nu uitați să acordați o atenție deosebită butoanelor de pe site-ul dvs. web. Deoarece realitatea pe ecran este atât de prețioasă, este ușor să coborâți în capcana și să faceți butoanele dvs. mai mici, astfel încât să se potrivească pe ecran. Cu toate acestea, acest lucru le face mai greu să faceți clic.
Asigurați-vă că butoanele dvs. sunt ușor de recunoscut:
În ceea ce privește mărimea, luați în considerare utilizarea padding-ului pe butonul dvs. pentru a mări suprafața care poate face clic. Puteți, de asemenea, să urmați recomandarea de design material pentru accesibilitatea butoanelor și asigurați-vă că sunt de 36dp înălțime. (1dp = 1px).
Când vine vorba de text, doriți să vă asigurați că textul este lizibil pe ecrane mai mici. O dimensiune bună pentru copia corpului dvs. este de 16 pixeli sau de 1 și apoi ajustați dimensiunea titlurilor dvs. în consecință. În același timp, veți dori să ajustați înălțimea liniei textului dvs. la 1.5m pentru a vă asigura că liniile din paragraf au suficient spațiu pentru respirație.
Un alt tip de design al site-ului mobil este utilizarea unui font lizibil. Evitați fonturile decorative sau script pentru copiile corporale sau în elementele de meniu deoarece sunt greu de citit, în special pe ecrane mai mici.
Una dintre cele mai mari tendințe care se îndreaptă încet către designul web este utilizarea de microinterații. În anii precedenți, animațiile și funcționalitatea interactivă ar fi putut fi considerate "plăcute pentru a avea" pentru majoritatea site-urilor de afaceri. Cu toate acestea, deoarece designerii au devenit hiper-concentrat pe experiența utilizatorului, utilizarea de animații au sărit într-adevăr la lumina reflectoarelor, în special în forme.
Acestea oferă utilizatorilor feedback rapid, care este util în mod special pe dispozitivele mobile, în loc să reîncărcați pagina - ceea ce poate duce la creșterea utilizării lățimii de bandă. Luați în considerare acest exemplu dintr-o companie de curățenie australiană de leasing. M-am îndreptat către ei cu privire la utilizarea microinterațiilor. Iată ce au avut de spus:
Formularul nostru de verificare a fost conceput pentru a ajuta Sydneysiders obține cu ușurință un sfârșit de cotare de leasing de leasing. Am vrut cu adevărat să subliniem faptul că a fost cu adevărat instant și nimic nu a făcut acest lucru mai mult decât prin utilizarea unei microinterații. Când solicitați o ofertă, o chitanță animă din spatele formularului, dezvăluind prețul total al obligațiunii dvs. curat. Suntem de părere că acest mic moment "ta-da" ne-a sporit într-adevăr ratele de finalizare în timpul procesului de plată.
Un alt exemplu minunat de microinterații vine de pe site-ul Le Cafe Noir Studio. Magazinul lor online oferă inimile animate care traversează ecranul când adăugați un element în coșul dvs., creând un sentiment de apreciere imediată a clienților:
Aveți posibilitatea să economisiți o mulțime de timp proiectarea unui site web receptiv dacă adăugați un cadru de răspuns la fluxul de lucru. Un cadru HTML, cum ar fi Bootstrap, folosit într-un șablon HTML, este un punct de plecare potrivit dacă doriți să creați site-uri simple, statice.
De asemenea, puteți profita de temele WordPress responsabile pentru premade, dacă doriți să faceți un site mai complex și să includeți un blog în strategia dvs. de marketing. Cadre precum acestea sunt, de asemenea, o alegere excelentă dacă nu sunteți un coder cu experiență, dar doriți să faceți totul singur.
Designul minimalist a crescut în popularitate în ultimii ani și cu un motiv bun. Elimină toate dezordinea, facilitează vizitatorii să se concentreze asupra conținutului dvs., îmbunătățind astfel ratele de conversie și ajută încărcarea mai rapidă a site-ului dvs. deoarece utilizează mai puține elemente. Este, de asemenea, merge bine cu design web responsiv, deoarece vă poate ajuta să evidențiați zone importante site-ul web și să atragă atenția asupra apelurilor dvs. de acțiune.
Includerea butoanelor de partajare de pe site-ul dvs. web vă poate ajuta să obțineți mai multă vizibilitate și să conduceți la mai mult trafic. Cu toate acestea, butoanele de partajare pot bloca adesea conținutul dvs., ceea ce face dificilă citirea pe ecrane mai mici. Asigurați-vă că butoanele de partajare se calculează frumos pe ecrane mai mici, testându-le pe un dispozitiv mobil sau considerați că le dezactivați pe ecrane mai mici de 768 pixeli.
Odată ce ați implementat sfaturile pentru un design web receptiv de mai sus, se plătește pentru a verifica dacă site-ul dvs. este acum receptiv. Există o mulțime de instrumente online care vă vor permite să testați reactivitatea site-ului dvs. Iată primele trei instrumente pe care le recomandăm să le utilizați:
Google are propria versiune a testului prietenos cu dispozitivele mobile și este destul de simplu. Introduceți adresa URL a site-ului dvs. Web și faceți clic pe acesta A analiza, și așteptați apoi rezultatele. Dacă site-ul dvs. este prietenos cu dispozitivele mobile, veți vedea un mesaj de confirmare verde. Dacă nu este, testul vă va arăta motivele pentru care site-ul dvs. nu a trecut testul și nu vă îndreaptă spre resurse pentru a vă ajuta să remediați problemele.
Screenplay de către QuirkTools vă va arăta cum va arăta site-ul dvs. pe diferite dimensiuni ale ecranului. Acest instrument nu vă va ajuta să adăugați sfaturi utile și sugestii, dar puteți vedea cum apare site-ul dvs. pe smartphone-uri, desktop-uri și chiar pe ecrane TV mari.
În cele din urmă, MobileTest.me vă permite să alegeți un anumit dispozitiv mobil, să introduceți adresa URL și să interacționați cu site-ul dvs., ca și cum ați fi pe dispozitivul specificat. Acest instrument este util mai ales pentru că puteți vedea cum funcționează site-ul dvs. pe un dispozitiv mobil, formulare de testare și butoane și înțelegeți dacă vizitatorii dvs. vor avea o experiență bună pentru utilizatori. Puteți să-l utilizați singur sau împreună cu cele de mai sus două instrumente pentru a vă asigura că site-ul dvs. este cu adevărat receptiv.
Crearea unui design web receptiv nu mai este opțională. Este o necesitate. Responsabilitatea web design-ului face mai ușor pentru oricine să vadă site-ul dvs. fără probleme și poate influența reputația mărcii dvs., precum și ratele de conversie. Cu sfaturile și trucurile de reacție sugerate de mai sus, veți putea face ca site-ul dvs. de afaceri să arate excelent indiferent de dispozitivul pe care îl utilizează vizitatorii dvs. și să se asigure că au o experiență extraordinară pentru utilizatori.
Accentsconagua