Aveți un " site web receptiv "? Acesta este un site cu un aspect care se modifică în funcție de dispozitivul vizitatorului și de dimensiunea ecranului. Design-ul web responsiv este acum o bună practică în domeniu. Este recomandat de Google și găsit pe milioane de site-uri de pe Web. Există, totuși, o mare diferență între a avea un site care se potrivește "simplu" pe diferite dimensiuni ale ecranului și având un site care este cu adevărat receptiv.
Eu văd în mod obișnuit companiile reproiectând site-ul lor și împingând un comunicat de presă care să extolă virtuțile noii lor design-uri mobile. Când vizitez aceste site-uri, ceea ce găsesc adesea este un aspect care într-adevăr scade și se schimbă pentru a se potrivi pe diferite ecrane, dar asta este în măsura în care acestea iau ideea de reacție. Acest lucru nu este suficient. Un site cu adevărat receptiv face mai mult decât scalarea pentru a se potrivi unui ecran mai mic sau mai mare. Pe aceste site-uri, veți găsi, de asemenea, următoarele trăsături importante.
1. Performanță optimizată
Nimănui nu îi place să aștepte încărcarea unui site web și atunci când cineva folosește un dispozitiv mobil cu o conexiune care poate fi mai mică decât cea ideală, nevoia de a încărca rapid un site este chiar mai importantă.
Deci, cum optimizați performanța site-ului dvs.? Dacă începeți cu un nou site ca parte a unui reproiect, atunci ar trebui să faceți un punct pentru a crea un buget de performanță ca parte a proiectului respectiv. Dacă lucrați cu un site existent și nu porniți de la zero, primul pas este să testați performanța site-ului dvs. pentru a vedea unde stați astăzi.
Odată ce aveți o linie de bază a locului în care site-ul dvs. se situează în funcție de performanță, puteți începe să faceți îmbunătățirile necesare pentru a mări viteza de descărcare. Un loc minunat pentru a începe este, probabil, cu imaginile site-ului dvs. Imaginile prea mari sunt # 1 vinovat atunci când vine vorba de site-uri de încărcare lentă, optimizarea imaginilor pentru livrarea pe web poate ajuta într-adevăr site-ul dvs. de la un punct de performanță.
Realitatea este că performanțele îmbunătățite ale site-ului și vitezele rapide de descărcare sunt un beneficiu pe care toți vizitatorii îl vor aprecia. La urma urmei, nimeni nu sa plâns vreodată că un site încărcat "prea repede", dar dacă un site durează prea mult pentru a încărca, acesta va întoarce absolut oamenii dacă se potrivește sau nu pe ecranul lor.
2. Ierarhia conținutului inteligent
Atunci când un site web este afișat pe un ecran mare, puteți să concepeți conținut într-o varietate de moduri, datorită proprietății imobiliare de pe ecran. Puteți să vă potriviți de multe ori mesajele și imaginile importante, actualizările de știri, informațiile evenimentului și navigarea pe site-ul de pe ecran simultan. Acest lucru permite unui vizitator să scaneze ușor și rapid conținutul întregii pagini și să decidă ce este important pentru ei.
Acest scenariu se schimbă destul de dramatic atunci când luați acest design al site-ului și îl transformați pentru dispozitive de mici dimensiuni, cum ar fi un telefon mobil. Dintr-o dată lucrați cu o fracțiune din ecranul imobiliar pe care l-ați avut înainte. Aceasta înseamnă că trebuie să decideți ce va apărea mai întâi pe site, ce va urma, etc. În loc să fie văzute simultan, probabil că aveți doar spațiul pentru a afișa una sau două lucruri (dintre care una este probabil navigație). Aceasta înseamnă că deciziile de ierarhie trebuie să fie luate. Din păcate, ceea ce determină adesea ce apare mai întâi pe ecran, apoi al doilea, etc. este modul în care este codificată pagina în sine. Este mai ușor, atunci când construiți un site receptiv, să afișați ceea ce este primul în codul de pe ecran, urmat de al doilea element în cod și așa mai departe. Din păcate, ceea ce poate fi cel mai important pe un dispozitiv nu poate fi la fel de critic pentru altul. Un site cu adevărat receptiv înțelege că ierarhia conținutului ar trebui să se schimbe în funcție de situații diferite și ar trebui să fie inteligent cu privire la ceea ce afișează unde.
Îmbunătățirile în tehnicile layout-ului CSS, inclusiv CSS Grid Layout, Flexbox și multe altele, permit proiectanților web și dezvoltatorilor mai multe opțiuni atunci când vine vorba de elaborarea inteligentă a conținutului, în loc să fie împiedicată de ordinea exactă a domeniilor de conținut din codul HTML. Profitând de aceste noi tehnici de aspect vor deveni și mai importante, pe măsură ce peisajul dispozitivului și nevoile utilizatorilor site-ului nostru continuă să evolueze.
3. Experiențe care iau în considerare punctele forte și punctele slabe ale unui dispozitiv
Stați pe subiectul dispozitivelor - fiecare dispozitiv pe care cineva îl poate utiliza pentru a vă accesa site-ul are atât avantajele, cât și punctele forte care sunt inerente platformei respective. Un site care răspunde în mod deosebit înțelege capabilitățile și limitările diferitelor dispozitive și le folosește pentru a crea experiențe personalizate care sunt cele mai potrivite pentru orice dispozitiv pe care un vizitator îl poate folosi în acel moment.
De exemplu, un telefon mobil include o serie de caracteristici pe care nu le-ați găsi într-un computer desktop tradițional. GPS-ul este un exemplu de caracteristică centrat pe dispozitive mobile (da, puteți obține și informații generale despre locație pe desktop-uri, dar dispozitivul GPS este mult mai precis). Site-ul dvs. poate utiliza informații GPS pentru a trimite cu ușurință unei persoane o informație detaliată și detaliată detaliată și detaliată sau oferte speciale bazate pe exact unde se află în acel moment.
Un alt exemplu al acestui principiu în practică ar fi un site care să înțeleagă ce tip de afișaj pe ecran îl utilizați și trimite imagini care sunt cele mai potrivite pentru afișarea respectivă. Dacă aveți un ecran cu densitate mare de pixeli, puteți decide să trimiteți imagini de calitate superioară pe acel ecran. Aceleași imagini ar fi inutile pe un ecran mai puțin capabil, totuși, iar calitatea suplimentară s-ar pierde în timp ce dimensiunea extra fișierului ar fi descărcată fără motiv real.
Site-urile cu reacție excelentă iau în considerare întreaga experiență a utilizatorilor și lucrează pentru a adapta această experiență bazându-se nu numai pe un tip de dispozitiv sau pe dimensiunea ecranului, ci și pe alte aspecte importante ale hardware-ului.
4. Conținutul cu context
Inițial, designul web receptiv a primit numele său din cauza ideii că aspectul unui site răspunde la diferite dimensiuni ale ecranului, dar puteți răspunde la mult mai mult decât dimensiunea ecranului. Bazându-se pe exemplul anterior de utilizare a punctelor forte și a punctelor slabe ale dispozitivului, le puteți utiliza, precum și alte date, cum ar fi data și ora, pentru a personaliza cu adevărat o experiență de pe site.
Imaginați-vă un site web pentru un mare eveniment comercial. În timp ce un site web receptiv va schimba aspectul paginilor site-ului pentru a scala cu diferite ecrane, puteți utiliza și data pentru a determina ce conținut este cel mai important pentru afișare. Dacă este perioada de timp înainte de eveniment, probabil doriți să afișați în mod vizibil informații de înregistrare. Cu toate acestea, dacă evenimentul se întâmplă în acel moment, înregistrarea poate să nu fie cel mai important conținut. În schimb, puteți decide că programul de evenimente al zilei este mai critic, deoarece este mai relevant pentru nevoile imediate ale acelui utilizator.
Luând lucrurile la un pas mai departe, puteți folosi GPS-ul dispozitivului pentru a determina unde sunt de fapt la expoziția comercială. Puteți să le oferiți conținut interactiv bazat pe locația lor, arătându-le cabine sau ședințe din apropiere pentru a începe.
5. Accesibilitatea
Exemplul final pe care îl vom examina pentru modul în care un site poate răspunde cu adevărat nevoilor unui vizitator este acela de a gândi despre accesibilitatea site-ului . Site-urile Web ar trebui să poată fi utilizate de cât mai mulți oameni, inclusiv cei cu dizabilități. Site-ul dvs. Web ar trebui să poată fi utilizat de cineva care are nevoie de un cititor de ecran sau de un alt software asistat pentru a accesa conținutul acestuia. În acest fel, site-ul dvs. răspunde nevoilor lor, deoarece ați asigurat că experiența, în timp ce este diferită pentru vizitatorii cu handicap, este în continuare adecvată.
Răspunzând la cât mai multe puncte de date posibil și nu doar mărimea ecranului, un site web poate fi mult mai mult decât "prietenos mobil". Poate deveni o experiență cu adevărat receptivă în toate sensurile frazelor.