15 Cele mai bune practici pentru un design web responsabil și responsabil

Designul web responsive nu este doar o chestiune de strângere și întindere.

Este vorba despre livrarea unui site web în nenumărate moduri, în funcție de lățimea ecranului.

Ce să adaugi? Ce să eliminați? Cum să prioritizezi ceea ce este cel mai important? Care sunt implicațiile pentru clasamentele de căutare? Și cum faci toate astea cu o singură bază de cod?

Este nevoie cu adevărat de un expert pentru a codifica în mod receptiv un site web.

Așa că l-am rugat pe Tim Cross, unul dintre cei mai buni designeri web responsivi de la AwesomeWeb, să vă ofere informații despre ceea ce este nevoie pentru a construi un site web adecvat, responsabil și receptiv.

Indiferent dacă îl angajezi pe Tim sau decizi să adaugi personalitate site-ului tău web, păstrează-l ca resursă pentru a ști ce trebuie făcut.

1. Meniuri de navigare ascunse.

Pe ecranele mai mici, ascunderea meniului principal de navigare este o modalitate bună de a păstra aspectul simplu. O pictogramă, un text sau o combinație a ambelor indică utilizatorului unde se află meniul.

Opțiunile dvs. includ un meniu derulant simplu în care meniul glisează în jos și acoperă conținutul principal de mai jos sau metoda de suprapunere în care meniul se extinde și acoperă întregul ecran.

BBC Sport folosește un meniu derulant care se extinde atunci când este apăsat. Deoarece au mai multe meniuri restrânse pe aceeași pagină, folosesc îndemnuri diferite pentru a ajuta utilizatorul să înțeleagă ierarhia paginii.

Huge folosește un meniu suprapus. De asemenea, folosesc acest stil de meniu pe ecranul desktop, păstrând vizibilă pictograma burger și simplificând conținutul paginii.

Sfat de top pentru bloggerii începători:

Investește într-o temă premium care să-ți prezinte marca în cea mai bună lumină posibilă.

Temele gratuite sunt grozave pentru început, dar cele mai multe nu pot fi personalizate corespunzător. Amintiți-vă acea zicală: Prima impresie contează!

2. Meniuri cu glisare orizontală.

O altă modalitate de a afișa meniurile pe ecrane mai mici este să-l păstrați vizibil, dar să lăsați conținutul să depășească marginea ecranului. Afișarea unei părți a textului tăiat indică faptul că pot glisa pentru a dezvălui.

The Guardian folosește un meniu de derulare clar, orizontal, cu un îndemn suplimentar pentru a vedea „Toate” – acesta apare ca un meniu derulant când este apăsat. Un bun exemplu de aplicare a diferitelor metode în spațiul disponibil.

Meniul de derulare orizontal de pe Google este o listă de link-uri de text simplu, care depășesc marginea ecranului - o modalitate simplă de a indica mai mult conținut utilizatorului. Fiecare link text are un meniu derulant care apare atunci când este apăsat.

3. Dați butoane și link-uri zone mari, pe care se poate face clic.

În loc să faceți butoanele mai mici pe mobil, faceți-le mai mari, astfel încât să fie mai ușor de apăsat. De fapt, acest lucru nu se aplică doar ecranelor mici, este bine ca acestea să fie mari indiferent de dispozitiv – de la tablete cu ecran tactil la PC-uri desktop.

Butoanele mari îmbunătățesc utilizarea. Pe lângă mărirea butoanelor, linkurile text beneficiază de a fi mai mari. Dacă, de exemplu, aveți o grilă de titluri de știri, cu un link text care spune „Citiți mai multe” în fiecare dintre ele, în loc să faceți din acesta un link, faceți ca întregul conținut să blocheze un link, astfel încât utilizatorul să poată face clic oriunde. .

Mai usor de folosit. O experiență mai bună pentru toți.

Butonul Adaugă în coș de pe site-ul Oliver Bonas este mare, clar și iese în evidență de pe pagină prin culoarea sa contrastantă.

Site-ul Pretty Green Energy are butoane mari și zone mari, pe care se poate face clic pe elementele din lista de conținut.

4. Echilibrați greutățile și dimensiunile fonturilor.

Raportul de dimensiune dintre antete și textul paragrafului ar trebui să fie bine echilibrat. Anteturile mari nu arată bine pe mobil, mai ales dacă se întind pe câteva linii. Totul ar trebui redimensionat corespunzător.

Dispozitivele mobile mai noi au ecrane de înaltă rezoluție, ceea ce face textul mai lizibil și mai ușor de citit. Vă puteți permite să deveniți puțin mai mic pe ecranele mobile și să măriți dimensiunile fonturilor atunci când ajungeți la un afișaj mai mare.

Nike folosește o greutate mai mare a fontului pe desktop, care funcționează bine în banner. Pe mobil ele ușurează fontul și reduc dimensiunea, astfel încât să se potrivească pe o singură linie.

No Drama reduce titlurile H1 pe mobil, astfel încât acestea să se potrivească pe ecran și să nu supraalimenteze pagina.

5. Lățimi optime de citire.

În timp ce faceți un aspect mai larg pe ecrane mai mari, este important să luați în considerare lungimile rândurilor conținutului dvs.

Dacă o linie de text este prea lungă, este mai greu de citit, deoarece este dificil de urmat rând pe rând. În mod similar, având linii prea scurte întrerupe ritmul lecturii, deoarece ochii trebuie să se miște prea des înainte și înapoi.

Practica obișnuită este de a menține lungimea liniilor la aproximativ 60-75 de caractere. Acest lucru poate fi realizat prin setarea zonelor de text pentru a avea o lățime maximă de aproximativ 500/700 de pixeli lățime.

99u își păstrează paginile bine echilibrate, cu lățimi optime de citire, link-uri simple de partajare și o bară laterală bine poziționată, care nu slăbește prea mult articolului.

Pe lângă faptul că are lățimile de citire potrivite, aspectul articolului The Guardian este necomplicat, cu mult spațiu alb și o bară laterală clară, fără dezordine.

6. Pune informații importante în partea de sus pe mobil.

Afișați numere de telefon, informații de contact, cumpărați acum apel la acțiuni etc. în partea de sus pe mobil. Utilizatorii de telefonie mobilă doresc informații rapid, dar acest lucru funcționează bine și pe orice dispozitiv.

Chiar dacă dimensiunile browserului sunt atât de variate acum și ideea de „fold” nu mai există cu adevărat, punerea cheie la acțiuni în partea de sus a paginii este încă importantă. De exemplu, pe o pagină cu detalii despre produs de comerț electronic este bine să aveți butonul „Adăugați în coș” vizibil pentru majoritatea utilizatorilor, fără ca aceștia să fie nevoiți să deruleze.

Metris Kitchens plasează informațiile cheie aproape de partea de sus pe mobil, deoarece este important ca utilizatorii lor să vadă informațiile de contact (găsiți un showroom) și acțiunile de conversie (solicitați o broșură) în mod clar și rapid.

Ebay se asigură că prețul și butonul Cumpără-l acum sunt vizibile clar pe mobil.

7. Schimbați ordinea blocurilor de conținut atunci când acestea se prăbușesc pe ecrane mai mici.

Decideți ce este mai important să afișați mai întâi pe un ecran mic, apoi schimbați ordinea conținutului - acest lucru se poate realiza prin CSS (și uneori JS dacă aspectul este prea complex).

Dacă pe desktop există un bloc de conținut text și un bloc de imagine poziționate unul lângă altul, decideți ce este mai relevant.

Sau o bară laterală și o zonă de conținut pe o pagină – pe mobil, dacă aceasta se prăbușește, bara laterală ar fi prima și ar împinge tot conținutul în jos pe pagină, de aceea ar fi bine să schimbi acest lucru pe mobil.

În acest articol de conținut editorial de la Brown Thomas, informațiile despre produs sunt poziționate pe primul loc pe mobil. Pe desktop, ordinea conținutului este schimbată, astfel încât o fotografie de stil de viață să apară lângă produs.

Pagina cu detaliile produsului Melanie F plasează mai întâi imaginea produsului pe mobil, apoi împinge în sus informațiile despre produs pentru a sta una lângă alta pe desktop.

8. Ascunderea conținutului pe ecrane mai mici.

Pe mobil puteți simplifica aspectul prin ascunderea conținutului care ar fi vizibil pe ecrane mai mari, fie ascunzându-l complet, fie folosind file și acordeoane pentru a afișa/ascunde conținut. Acest lucru descompune pagina pe ecrane mai mici și îi permite utilizatorului să vadă toate informațiile cheie, cu opțiuni pentru a vedea mai multe dacă dorește.

Această pagină a produsului de pe christianlouboutin.com își simplifică antetul și reduce informațiile despre produs pe mobil, lăsând imaginea produsului ca prim bloc de conținut.

Pe Selfridges, caruselul de imagini în miniatură este eliminat de pe mobil, lăsând doar săgeți simple stânga/dreapta pentru a glisa prin intermediul.

9. Afișează mai mult conținut pe ecrane mai largi.

Având un ecran mai larg, vă permite să împingeți mai mult conținut mai sus pe ecran. Mai mult conținut este vizibil pentru utilizator imediat, înainte ca acesta să fie nevoit să deruleze. Aspectele se pot extinde și pot găzdui mai multe coloane.

Această vizualizare în grilă de portofoliu pe Jimmy Gleeson mărește numărul de articole vizibile pe măsură ce ecranul devine mai larg, permițând afișarea mai multor conținut mai sus pe pagină.

Aspectul de navigare al revistei Smashing este destul de complex și se schimbă foarte mult pe diferite dimensiuni de ecran. Acesta este un bun exemplu de gândire cu adevărat la aspect și de maximizare a întregului spațiu disponibil pe dispozitiv și dimensiunea ecranului.

10. Nu uitați de tablete în modul portret.

Uneori, această orientare fie se încadrează în aspectul mobil mic, care este mai de bază și nu utilizează tot spațiul disponibil pe ecran, fie se adună cu un aspect desktop, care poate face conținutul complet stricat.

O mai bună utilizare a interogărilor media în CSS poate obține aspectul corect.

Aspectul de pe această pagină de detalii produs Protest are încă o mulțime de informații într-un spațiu mai mic, fără a deranja proporțiile și spațierea aspectului.

Aspectul detaliilor produsului Firebox nu compromite nimic în modul portret de masă. Tot ceea ce apare pe desktop este încă acolo, iar conținutul este prezentat într-un mod bine echilibrat și simplu.

11. Înlocuiți funcționalitatea de mărire a imaginii cu pagini lungi de galerie derulabile.

Pe dispozitivele mici, a avea o fereastră de imagine mărită nu funcționează dacă imaginea la care te uiți deja umple ecranul.

Pentru galeriile de imagini, utilizați o pagină lungă care poate fi derulată sau un carusel care poate fi glisat cu săgeți stânga/dreapta. Galeria lungă care poate fi derulată funcționează bine și pe tabletă și desktop.

Această galerie de imagini de pe Apple utilizează o pagină lungă care poate fi derulată atât pe desktop, cât și pe mobil. Legendele sunt eliminate de pe mobil pentru a simplifica și mai mult aspectul.

Această galerie de produse de pe UrbanEars apare pe aceeași pagină și se extinde în jos după apăsarea unui link. Acesta păstrează părțile bune fundamentale ale unui pop-up, de exemplu. nu merge la o pagină nouă, dar apoi prezintă imaginile într-un mod mai bun, mai utilizabil.

12. Optimizați UX pentru ecranele tactile.

Adăugați gesturi de glisare în bannere, meniuri, galerii de imagini etc.

Ecranele tactile sunt prin natura lor intuitive de utilizat, prin urmare putem fi mai subtil cu ajutorul ajutoarelor de navigare, de exemplu, o jumătate de imagine de pe ecran pe un carusel sugerează că urmează mai mult conținut.

Evenimentele de trecere cu mouse-ul sunt inconsecvente pe ecranele tactile. Dezactivează-le și înlocuiește-le cu evenimente tactile. Dacă conținutul care urmează să fie afișat la trecerea cursorului nu este esențial și este doar înfrumusețat, atunci dezactivați-l pe ecranele tactile.

Stările de hover de pe pagina portofoliului Born Group sunt animate pe desktop și arată titlul proiectului. Deoarece aceste informații trebuie încă să fie accesibile pe ecranele tactile, evenimentele de trecere cu mouse-ul sunt înlocuite cu evenimente tactile – o atingere pentru a vedea informații, apoi o altă atingere pentru a vedea proiectul.

Site-ul Made a adăugat evenimente de glisare în bannerul paginii sale de pornire. S-au gândit în mod clar la utilizatorii lor și utilizează aceste evenimente tactile pe restul site-ului, în locuri în care este firesc să gliseze – de exemplu, pe un carusel de produse.

13. Folosiți mai puține imagini.

O mulțime de efecte, cum ar fi gradienții de fundal și stările de trecere la buton, pot fi obținute prin html și css pur. Paginile se încarcă mai repede, ceea ce este deosebit de bun pentru mobil și se pierde mai puțin timp creând o mulțime de grafică.

Utilizarea fonturilor pentru pictogramele dvs. înseamnă că nu trebuie să creați imagini. Sunt scalabili, au margini mai curate, se încarcă mai repede și sunt bune pentru afișajele retină. Această optimizare funcționează excelent pe toate dispozitivele și ecranele.

Site-ul desk.com folosește bine fonturile de pictograme. Adăugarea de culoare, care este la fel de ușoară ca și schimbarea culorii unui font, este o modalitate excelentă de a adăuga mai mult impact paginii dvs.

Site-ul Pretty Green Energy folosește fonturi mari de pictograme pentru anteturile secțiunilor sale. Mărirea dimensiunii fonturilor pictogramelor este simplă și nu necesită editarea imaginilor.

14. Videoclipuri responsive.

Această metodă permite ca videoclipurile de orice dimensiune să răspundă automat la dimensiunea dispozitivului, fără a fi nevoie să setați înălțimi sau lățimi explicite pentru videoclipul în sine.

Se realizează cu doar câteva linii de css. Acest lucru funcționează bine cu videoclipurile inserate direct pe pagină și în cadre iframe.

Videoclipurile de pe Anyilu se întind pe pagină și umplu întreg spațiul. Acest lucru dă paginii un mare impact. Ei răspund și redimensionează automat pe diferite dimensiuni de ecran.

Videoclipurile încorporate pe Brown Thomas folosesc cadre iframe și sunt pe deplin receptive. Nu sunt specificate înălțimi sau lățimi, permițând gestionarea ușoară a conținutului și crearea rapidă a paginii.

15. Folia nu mai există.

Dispozitivele sunt mai mici, mai înalte, mai late și mai lungi.

Nu este important să înghesui totul în partea de sus a paginii. Lăsați paginile să respire și să se extindă cu blocuri de conținut lungi și fluide și spații generoase.

Oamenii derulează în mod natural. Oferându-le mai mult conținut sub „fold”, îi invitați de fapt să fie mai implicați cu pagina și să vă citească conținutul.

Pagina de produs iMac de pe Apple este o pagină lungă, fluidă, cu multe întâmplări pe măsură ce derulați. Experiența te atrage. De asemenea, folosesc o navigare fixă, astfel încât cheia cheie la acțiuni, adică Cumpără acum, este încă vizibilă pe măsură ce te deplasezi în jos pe pagină.

Paginile de produse Sonos au un echilibru bun între blocurile de text cu lățime fixă ​​și panourile de imagini mai largi, pe tot ecranul. Acest lucru menține pagina interesantă și mai captivantă pe măsură ce derulați. Distanța este bine echilibrată, fără a fi supraaglomerată.

Încheierea

Verificați-vă Analytics. Pun pariu că traficul mobil este un procent mai mare decât credeți. Și pun pariu că crește de la lună la lună.

Dacă site-ul dvs. nu este receptiv, fiecare utilizator mobil care vine pe site-ul dvs. are o experiență proastă.

Chiar dacă este receptiv, sunt sigur că există o serie de domenii în care poate fi îmbunătățit.

Designul web responsiv este specialitatea mea. Pot lucra pe orice site web, WordPress, Modx sau altfel. Clienții mei au de obicei cel puțin 10.000+ vizite lunare și taxez 1.500 USD – 3.000 USD, în funcție de complexitatea site-ului dvs.

Angajați-mă o dată, voi face treaba corect și nu va mai trebui să vă faceți niciodată griji pentru o experiență mobilă proastă.

Dacă aveți întrebări, verificați portofoliul meu și contactați-mă aici.