Practica distilată pentru construirea unui site web mobil mobil

construirea unui site mobil prietenos


În 2015, Google a scos la iveală algoritmul „Mobilegeddon”, care era un fel de site-uri web pedepsite care nu erau prietenoase pentru mobil. În conformitate cu acest algoritm, clasamentul site-urilor web care nu sunt prietenoase cu mobilul ar scădea.

După cum vedeți că mobilul a depășit desktop-urile și laptopurile și este cel mai utilizat dispozitiv pentru navigarea pe internet. Google a încurajat firmele să se gândească mai întâi la dispozitivele mobile.

creșterea globală a traficului de date mobile

Aceasta înseamnă că designerii grafici și marketerii trebuie să își extindă viziunea în trecut pe desktop-uri și laptopuri în timp ce lucrează pe un site web.

Ce este un site web mobil-friendly?

ce este site-ul mobil prietenos

Așa cum sugerează și numele, un site web mobil-mobil este un site proiectat, dezvoltat și optimizat, astfel încât site-ul web să fie fără probleme pe telefoane mobile – este mai complicat și imperativ decât pare. La nivelul cel mai de bază – utilizatorii doresc conținut ușor de vizualizat pe dispozitivele mobile.

Dacă textul dvs. este prea mic sau imaginile nu se încarcă, utilizatorii se vor irita și vor pleca. Prin urmare, este esențial să aveți conținutul corespunzător dimensionat. Din păcate, este dificil de pus în aplicare, deoarece smartphone-urile, tabletele au dimensiuni și rezoluții diferite; prin urmare, nu există un format fix care să afișeze conținutul perfect pe dispozitivul „fiecare”.

Iată câteva sfaturi care vă ajută să vă optimizați site-ul pentru mobil.

Evitați să faceți un site web mobil care să fie mobil pentru dvs.:

evitați să faceți un site web prietenos pentru mobil

Pentru a facilita implementarea, uneori, designerii, în timp ce proiectează un site web pentru mobil, decid să decupeze conținut pentru a se „potrivi” și ce părți nu trebuie afișate pe mobil. Cu toate acestea, nu putem controla ce tip de conținut vor să vadă utilizatorii și nici nu este posibil să creăm un spațiu separat pentru mobil, în afară de un desktop.

Google vă va penaliza dacă află că aveți conținut identic pentru două aceleași site-uri web – unul este o versiune desktop și / sau laptop, în timp ce cealaltă este o versiune mobilă, deoarece există un singur Google. Prin urmare, nici nu vă gândiți la crearea unui site web separat pentru mobil.

Utilizați desenele responsive:

folosiți șabloane responsive de proiectare

Designul activ permite dezvoltatorilor de site-uri să creeze un site web care să poată fi vizualizat cu ușurință pe diferite dimensiuni de dispozitive. Acest lucru reduce cantitatea de efort suplimentar pe care dezvoltatorii trebuie să-l depună pentru a face un site web compatibil cu diferite dimensiuni de dispozitiv.

Designul receptiv folosește imagini flexibile, machete flexibile și interogări media foilor de stil. Când acest design receptiv este utilizat pe un site web, pagina web va putea detecta dimensiunea și poziționarea ecranului utilizatorului și apoi să ajusteze aspectul paginii web în consecință..

Utilizați interogările media:

Interogările media vă permit să întrebați un dispozitiv despre dimensiunea acestuia și apoi indicați browserul pentru a afișa lucrurile urmând setul de CSS pe care le-ați setat în cod:

exemplu interogări pe ecranul media

Interogările media sunt elementele cheie ale celor mai prietenoase site-uri web mobile, dar înainte de aceasta, trebuie să vă asigurați că sistemul este configurat corespunzător pentru toate dispozitivele utilizate în prezent – nu doar două sau trei dispozitive mobile cele mai populare. Păstrați o listă a dispozitivelor sau puteți lua un abonament pentru a obține aceste informații.

Utilizați cadre precum Bootstrap:

Pentru partea frontală, puteți utiliza cadrele disponibile gratuit, cum ar fi Fundația 3, Schelet etc. Cel mai bun cadru gratuit este Bootstrap-ul Twitter.

utilizați cadrul bootstrap

Bootstrap este un cadru front-end conceput pentru a scala rapid și inevitabil pagina web a site-ului dvs. web pe orice dispozitiv. Punerea în funcțiune a unui sistem pre-construit este mult mai ușor decât crearea unui cod nou pentru fiecare combinație posibilă pe cont propriu (și chiar testarea acestuia) – și este mult mai puțin în jos și în jos.

Dar înainte de a începe să folosiți orice cadru, asigurați-vă că studiați dacă cadrul este complet compatibil cu site-ul și obiectivele dvs. Cu cât sunt mai multe coduri și funcții personalizate pe site-ul dvs., cu atât va fi mai dificil să vă asigurați că totul funcționează fără probleme pe un dispozitiv mobil; luați ajutor de la un expert dacă întâmpinați dificultăți.

Utilizați întotdeauna o etichetă meta virtuală:

Viewport este o zonă virtuală utilizată de motorul de interpretare a browserului pentru a determina modul în care conținutul este scalat și dimensionat. Acestea fiind spuse, este un cod critic în timp ce construiești o experiență cu mai multe dispozitive. Fără acest cod, site-ul dvs. web nu va funcționa bine pe un dispozitiv mobil.

O etichetă de portbagaj spune browserului dvs. că pagina trebuie să se încadreze în ecran. Există multe alte configurații pe care le puteți spune viewport-ului pentru a le controla. Următorul este cel recomandat pentru a fi utilizat la începutul documentului:

Zero in design mai simplu:

folosiți un design simplu și sensibil

Diferența semnificativă între site-urile desktop și cele mobile este că oamenii preferă un design simplu al site-ului web în timp ce vizionează pe un mobil. Aceasta este o chestie din lumea reală ca orice altceva – lucruri care sunt mari și complicate devin lente pe un dispozitiv mobil și una dintre principalele cerințe ale utilizatorilor este de a avea conținutul site-ului web disponibil imediat.

Menținerea simplă a proiectelor simplifică și menținerea atenției telespectatorilor asupra conținutului pe care doriți să îl vadă – utilizatorii de telefonie mobilă au un interval de atenție foarte scurt și este în interesul dvs. să păstrați designul simplu, mai degrabă decât să investească într-un complex. temă.

Nu ignorați niciodată Dimensiunea fontului și Dimensiunea butonului:

Mărimea fontului și dimensiunea butoanelor de pe pagina dvs. web contează foarte mult pentru dispozitivele mobile. Dimensiunea fontului trebuie să fie de cel puțin 14px. Acest lucru poate părea mare, dar este mai bine decât a face utilizatorul să facă zoom pentru a vă citi conținutul; simplificați-le, reglând fontul la claritate maximă. Singura dată când ar trebui să utilizați un font mai mic (până la minim 12px) este pe etichetă sau formulare.

nu ignorați dimensiunea fontului

Ajungând acum la butoane, cu cât este mai mare butonul, cu atât mai bine – acest lucru va reduce șansa ca utilizatorii să lovească un buton greșit sau să nu apară pe buton. Ca și orientările Apple, recomandăm ca dimensiunea butonului să fie de cel puțin 44px până la 44px. Cu ajutorul acestor orientări, vă veți îmbunătăți experiența utilizatorului și veți crește rata de conversie pentru comerțul electronic.

Măriți dimensiunea imaginii:

Atunci când aveți de-a face cu dispozitive mobile, obiectivul este de a avea dimensiunea de fișier cea mai mică pentru imagini, în timp ce arătați în timp clar și bogat pe orice ecran a fost vizualizat. Motivul este că lățimea de bandă a unui dispozitiv mobil este mult mai mică comparativ cu un desktop sau laptop și, prin urmare, determină un timp mai mare de încărcare.

Prin urmare, dacă veți face ca spectatorii dvs. să descarce un fișier de 1MB doar pentru a vizualiza o imagine în miniatură, ei vor fi iritați și vor părăsi site-ul web.

Prietenia mobilă nu înseamnă doar a avea un site frumos, ci și a îmbunătăți experiența utilizatorului și timpul de încărcare. Reducerea dimensiunii imaginii folosește mai puține date (salvarea datelor planurilor de date limitate), ajută la încărcarea paginii mai repede și lasă o impresie pozitivă a site-ului dvs..

Scapă de zoom-ul implicit:

Zoom-ul automat poate încurca elementele de aspect, în special pentru imagini și navigare. Poate să apară mic sau prea mare în aspectul dvs. Pentru a rezolva această problemă, utilizați eticheta metaportport pentru a configura variabile personalizate în conținut. Asigurați-vă că adăugați eticheta în HTML:

Încercați să utilizați fonturile standard:

Fonturile personalizate și creative fac ca site-ul dvs. să arate frumos, dar în cazul dispozitivelor mobile, utilizatorilor nu le este solicitat să descarce un font pentru a vizualiza o pagină web. Este posibil să nu descarce fontul și să se mute pe un alt site web.

Deși majoritatea fonturilor sunt instalate pe dispozitivul mobil și, prin urmare, le vei putea utiliza pe cele din design-ul site-ului tău. Există încă un lucru de reținut că, însă, unele fonturi sunt mai ușor sau mai greu de readaptat la dimensiuni diferite, deci asigurați-vă că verificați lizibilitatea fontului înainte de al utiliza în designul dvs..

Țineți cont de indicațiile:

Un desktop sau laptop mediu este orizontal, bineînțeles că defilăm în sus și în jos, dar este larg. Smartphone-urile, pe de altă parte, sunt elegante și mai calomnice, în consecință, lățimea conținutului poate varia și, prin urmare, are nevoie de luare în considerare. Când creați videoclipuri, imagini, meniuri derulante, rețineți-vă direcția pe care oamenii o vor folosi în timpul vizualizării conținutului.

Nu vă speriați să vă bazați pe un profesionist care să vă repare site-ul și să-l faceți prietenos dacă nu reușește ceva. Acest lucru poate necesita unele investiții, dar odată cu creșterea utilizatorilor de telefonie mobilă și algoritmul actualizat Google, această investiție s-ar putea dovedi a fi una calculată.

La pachet:

Odată cu mobilizarea mondială, este foarte important să vă păstrați site-ul mobil mobil și, de fapt, ceva peste așteptări, numai atunci puteți atrage utilizatori pe site-ul dvs. web. Asigurați-vă că citiți liniile directoare pentru prietenia mobilă și luați opinia experților înainte de a începe activitatea site-ului dvs. web. Sper că aceste sfaturi vă vor ajuta să faceți site-ul dvs. mobil-prietenos. Site-ul dvs. nu este singurul lucru care trebuie să fie mobil, asigurați-vă că managementul dvs. social este de asemenea mobil.

Earleen Brown lucrează cu o reputată companie de servicii SEO, o companie lider SEO India. Compania este practic o firmă de IT care furnizează Servicii SEO India și a ajutat-o ​​foarte mult în îmbunătățirea abilităților sale de scriere.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map