Cum să faceți site-ul dvs. mobil-prietenos

În vara anului 2015, pentru prima dată au fost efectuate mai multe căutări Google pe mobil decât desktop’mai bine le cred’nu am mai urcat decât de atunci!


daca tu’citiți acest articol, șansele sunteți’Suntem deja conștienți de importanța de a avea un site web mobil pentru clienți și căutăm să vă asigurați că al vostru oferă o experiență excelentă utilizatorilor de telefonie mobilă. Vă putem învăța cum să faceți asta!

Pentru a face site-ul dvs. mobil-prietenos, dumneavoastră’va trebui:

  1. Alegeți o temă sau un șablon care să răspundă de mobil
  2. Retrageți conținutul
  3. Creează imagini și CSS cât mai ușor
  4. Evitați blițul
  5. Schimbați dimensiunea și plasarea butonului
  6. Spuneți-vă legăturile
  7. Utilizați un font mare și care poate fi citit
  8. Eliminați ferestrele de tip pop-up
  9. Testează regulat

În primul rând, ce înseamnă de fapt mobil-friendly?

Când vorbim despre a ‘dispozitive mobile’ site web, noi’Vorbim despre afișarea altfel ‘versiune’ a site-ului dvs. web vizitatorilor care vă vizionează site-ul de pe mobil, pentru a le oferi o experiență mai bună.

Există mai multe modalități prin care puteți realiza acest lucru:

  • Design sensibil – site-ul tau’designul s se ajustează pentru a se adapta dimensiunii ecranului, indiferent dacă’nu faceți decât să schimbați dimensiunea filei desktop sau să navigați de pe un mobil sau o tabletă.
  • Servirea dinamică – vizitatorilor li se arată o versiune diferită, creată special, a site-ului, în funcție de dispozitivul pe care îl au’revedem din.
  • O aplicație mobilă – în unele cazuri, faptul că aveți o aplicație complet separată pentru audiența dvs. mobilă are cel mai mult sens (deși, dacă este cazul, ar trebui să vă asigurați, de asemenea, că site-ul dvs. web este la curent cu cei care nu’nu vreau să-l descărcați).

Designul sensibil este minimul pe care ar trebui să îl urmărești și’este ceea ce Google recomandă. Acestea fiind spuse, credem’merită să editați în continuare site-ul mobil generat automat de dvs. – la urma urmei, doriți să vizați o experiență fantastică pentru utilizatori mobili, mai degrabă decât o ‘acceptabil’ unu.

Dacă credeți că o aplicație mobilă ar funcționa pentru site-ul dvs., vă recomandăm să contactați un dezvoltator care vă poate ajuta.

Iată câteva alte articole care v-ar putea bucura:

Cum să proiectați un site web – Daca tu’reîncepeți să proiectați (sau să reproiectați) site-ul dvs. web, consultați acest articol pentru un ghid pas cu pas și punctele cheie care trebuie luate în considerare.

Cum să construiți un site web – Haven’încă nu ați început pe site-ul dvs.? Fără griji, acest ghid vă va parcurge întregul proces!

5 cei mai buni producători de site-uri web pentru SEO – Orice constructor de site-uri web cu SEO puternic vine cu o prietenie mobilă coaptă chiar în șabloanele sale. Iată cinci dintre cele mai bune.

1

Alegeți o temă sau un șablon receptiv pentru mobil

Bine, deci acesta este primul pas, și asta’este unul mare: alegeți o temă sau un șablon mobil receptiv!
Deoarece este foarte important să aveți un design mobil-receptiv’este ceva pe care aproape fiecare constructor de site-uri web le-a acoperit pe fiecare dintre șabloanele sale. De exemplu:

Squarespace – are o capacitate de reacție mobilă etanșă la apă și ar fi alegerea noastră cea mai bună’refaceți un site de la zero și vizualizați experiența mobilă ca prioritate.

Wix – toate șabloanele sunt receptive la dispozitivele mobile, dar asigurați-vă întotdeauna că vedeți în ecranul mobil în timp ce mergeți. Deoarece site-urile Wix sunt atât de personalizabile, uneori se schimbă mari don’nu tradui atât de perfect, iar tu’va trebui să fac câteva modificări.

daca tu’refaceți un site folosind un sistem CMS, cum ar fi WordPress, asigurați-vă că tema din care alegeți să vă construiți site-ul este receptivă la mobil – sau dacă’Am construit deja un site, trece la unul care este!

Doar căutați ‘temă receptivă’ în WordPress’ biblioteca proprie de teme sau pe un site terț precum Themeforest. Asigurați-vă că citiți recenzii și, dacă este posibil, aruncați o privire pe site-urile care utilizează această temă de pe mobil pentru a evalua experiența dvs..

Ajutor! Dar dacă eu’sunt pe o temă care nu răspunde și pot’nu-l comutați?

Dacă site-ul dvs. web a fost creat folosind o temă sau un șablon vechi, care nu răspunde, și dvs.’nu puteți să-l comutați, încercați să adăugați această linie de cod în fiecare pagină’eticheta s:

Aceasta înseamnă că paginile dvs. ar trebui să se reformateze automat pentru a se potrivi cu lățimea dispozitivului, trecând de la un stil de peisaj la un portret.

2

Retrageți conținutul

Tu’Am ales o temă sau un șablon minunat responsive, așa că acum tu’sunt totul setat, nu? Gresit!

Trecerea la șablonul sau temă potrivită este un pas mare, dar’este doar unul dintre mai multe pe care trebuie să le luați pentru a perfecționa experiența mobilă.

Acum’este timpul să aruncăm o privire asupra vizualizării automate a mobilului a site-ului dvs. web și să o retrageți înapoi:

Distilează-ți oferta

Elaborați-ți principalul obiectiv al paginii’reîncepe și don’nu ezitați să faceți acest lucru mult mai proeminent în versiunea dvs. mobilă.

Aruncați o privire la acest exemplu din Trainline:

Exemplu prietenos cu trenul mobil

Pagina principală este concepută pentru a încuraja utilizatorii să caute bilete de tren, iar acest formular are un rol central pe versiunea mobilă. Pe versiunea desktop, acest lucru ar părea prea apăsător, dar pe o versiune mobilă funcționează.

Evitați bucăți mari de text

Copia de pe site-ul dvs. ar trebui să fie scurtă și dulce în cel mai bun moment (cu excepția postărilor de pe blog, ca aceasta!), Dar pe mobil acest lucru devine cu atât mai important. Citiți sfaturile noastre pentru scrierea pe web și duceți foarfecele virtuale la orice bucată lungă de text.

Scurtați formele

Completarea formularelor lungi este o sarcină în cel mai bun moment, dar pe un telefon mobil? În mișcare? Uita! Formele lungi vă vor pierde cititorii mai repede decât puteți spune ‘Acest câmp este obligatoriu’. Asigurați-vă că fiecare formular vă’afișarea pe mobil solicită doar informații care’este absolut esențial.

Sfat de sus! Autocorectarea Pesky este o modalitate sigură de a transforma completarea formularului într-o pierdere de timp majoră. Salvați cititorii stresul oprindu-l. Dacă aveți acces la codul formularului, asigurați-vă că câmpul de corectare automată este setat pe AutoCorecție = oprit. 3

Creează imagini și CSS cât mai ușor

Crearea site-ului dvs. cât mai ușor este întotdeauna o idee bună – dar ce înseamnă exact asta? Ei bine, fiecare element de pe site-ul dvs. web poartă un virtual ‘greutate’ – dacă asta’s un videoclip sau o imagine care are dimensiunea fișierului sau codul care trebuie încărcat de fiecare dată când faceți clic pe site.

Google a fost foarte clar în ceea ce privește faptul că viteza site-ului web este un factor de clasificare crucial, adică lent (a.k.a.. ‘greu’) site-urile web vor pierde din concurență în paginile cu rezultatele motorului de căutare (SERP).

Când vine vorba de telefonie mobilă, acest lucru este cu atât mai important. daca tu’Am încercat vreodată să încarci o pagină web undeva la distanță, doar pentru a urmări fiecare element să cadă în loc dureros încet, tu’Voi înțelege de ce.

Deci, ce poți face despre asta?

Compresează-ți imaginile

Cand tu’reîncarci orice imagine pe site-ul tău – versiunea mobilă sau pe desktop – ea’Este vital să vă comprimați imaginile folosind un instrument online gratuit, cum ar fi kraken.io. Acest lucru reduce considerabil dimensiunea fișierului imaginilor dvs., fără a face compromisuri cu calitatea imaginii.

Gazduiește-ți videoclipurile cu o terță parte

Prin încărcarea videoclipurilor dvs. către o terță parte și apoi încorporarea lor pe site-ul dvs., înseamnă virtual ‘greutate’ din aceste videoclipuri este păstrat în mare parte pe site-ul ales, mai degrabă decât pe al tău.

Wistia este o platformă populară pentru asta, dar YouTube funcționează și tu – tu’Vreau doar să te asigur’reînchideți redarea automată, astfel încât un videoclip nu are legătură’nu te joci după al tău. Pentru a face acest lucru, pur și simplu:

  • Accesați pagina sau postarea dvs. WordPress
  • Găsiți codul încorporat și faceți clic pe butonul ‘text’ fila
  • Găsiți partea care spune src =”youtubeurlhere”
  • Adăuga ?autoplay = 0&rel = 0 după youtubeurlhere
  • Codul ar trebui să citească acum src =”youtubeurlhere? autoplay = 0&rel = 0 “
  • Lovit ‘Actualizați’ si tu’e bine să plec

Sfat de sus! Dacă nu’Nu cred că conținutul tău ar scădea prea bine pe YouTube (unele videoclipuri nu sunt’nu aveți mult sens fără contextul unei pagini complete), asigurați-vă că setați vizibilitatea la ‘necatalogat’. În acest fel, nimeni nu se va poticni cu el decât pe site-ul dvs. web. 4

Evitați blițul

Flash este adesea folosit pentru a crea animații, dar în general nu este’este acceptat de dispozitivele mobile, deci este cel mai bine evitat cu totul.

5

Schimbați dimensiunea și plasarea butonului

Fiecare site web folosește butoane pentru a face legătura la alte secțiuni sau la formulare. Dar a ‘bun’ butonul poate deveni rapid un ‘rău’ buton pe mobil dacă’s în locul greșit sau este dimensiunea greșită.

Gândește-te la cum ții și folosești telefonul. Șansele sunt tu’folosește-ți degetul mare pentru aproape toate, adică orice poți’A ajunge cu degetul mare devine o durere totală.

Aici’s unde ar trebui să vă doriți să plasați CTA pe un site mobil:

Crearea unui site web mobil-mobil: unde să adăugați CTA-uri

Deci acum tu’Aveți butoanele în locul potrivit, nu’este timpul pentru a le face dimensiunea potrivită. Asta înseamnă, în general, pentru tine’Va trebui să le măriți puțin – it’este mult mai greu să faceți clic cu precizie cu degetul mare decât cu mouse-ul, până la urmă.

6

Spuneți-vă legăturile

Vorbind despre cât de greu este să faceți clic cu precizie cu degetul mare, nu cu mouse-ul, ceea ce ne aduce frumos în următorul nostru punct: uitați-vă la linkurile dvs.!

Mai precis, dumneavoastră’Vreau să verific dacă orice hyperlink de pe site-ul dvs. mobil:

  • Aren’nu prea sunt împreună, pentru a evita oamenii care fac clic pe greșit din greșeală.
  • Conectați-vă la pagini care sunt, de asemenea, optimizate pentru mobil pentru o călătorie fără probleme de utilizator.

7

Utilizați un font mare și care poate fi citit

Aceasta’s-a recomandat să folosiți un font de cel puțin 14px pe desktop, dar asigurați-vă că testați cum arată pe versiunea dvs. mobilă – este posibil să găsiți că apare puțin mic, iar dvs.’Vreau să-l resping un pic.

Verificați de asemenea lizibilitatea fontului dvs. Aceasta’este un lucru să încercați un font mai experimental pe un desktop, dar este puțin probabil ca această mișcare să plătească pe mobil. Asta a spus, tu’Vreau să păstreze fonturile ca ‘pe marcă’ posibil pe toate platformele.

Când lucrați la o vizualizare mobilă a site-ului dvs., dvs.’am o zonă mult mai mică cu care să mă joc. Pe un desktop, puteți spaționa text cu pauze de linie și imagini. Pe mobil, încercați în bold sau valorificați diferite linii de text, în loc să le opriți să se contopească între ele.

8

Eliminați ferestrele de tip pop-up

Când sunt utilizate cu atenție, pop-up-urile pot funcționa foarte bine pe o versiune desktop a unui site. Poate ai observat că ele’sunt ceva pe care îl folosim pe destul de multe pagini aici pe WBE.

Dar când vine vorba de dispozitive mobile, pop-urile sunt cel mai bine evitate. Nu numai că aveți un ecran mai mic cu care să faceți față, dar puteți’adaptați fereastra pop-up pentru a fi declanșată în momentele cheie, cum ar fi atunci când utilizatorul va ieși din ecran.

9

Testează regulat

Cel mai bun mod de a afla cât de prietenos este site-ul dvs. mobil este să îl testați! Tu’Vreau să fac acest lucru în trei moduri diferite:

Rulați adresele URL prin Google’s instrument mobil-friendly

Google are un instrument gratuit de testare mobil-prietenos, pe care oricine îl poate folosi pentru a testa cât de prietenoasă este orice URL dată – indiferent de asta’s o pagină de pornire (ca mai jos) sau o pagină din site-ul dvs..

Testul prietenos pentru Google mobil

Încercați diferite dimensiuni ale dispozitivului de pe desktop

O modalitate excelentă de a verifica cât de receptiv este site-ul dvs. este doar să vă jucați cu forma filei site-ului dvs. web deschis. Pe măsură ce reduceți lățimea filei, ar trebui să observați că site-ul dvs. începe ‘contracta’ și se transformă în versiunea mai mobilă.

Pentru a testa rapid aspectul de pe mobil, puteți, de asemenea, faceți clic dreapta pe pagina dvs. web, selectați ‘Inspecta’, apoi faceți clic pe pictograma a două ecrane care apare în bara de instrumente din partea de sus:

Vizualizați versiunea mobilă de pe desktop

Cum să faceți site-ul dvs. mobil-prietenos: rezumat

Vă mulțumim pentru a rămâne cu noi, deoarece am explicat cum să faceți site-ul dvs. mobil-prietenos. Aici’s acești pași încă o dată:

Cum să faceți site-ul dvs. mobil-prietenos:

  1. Alegeți o temă sau un șablon care să răspundă de mobil
  2. Retrageți conținutul
  3. Creează imagini și CSS cât mai ușor
  4. Evitați blițul
  5. Schimbați dimensiunea și plasarea butonului
  6. Spuneți-vă legăturile
  7. Utilizați un font mare și care poate fi citit
  8. Eliminați ferestrele de tip pop-up
  9. Testează regulat

Vestea bună pentru majoritatea site-urilor este că cea mai mare parte a muncii grele va fi probabil realizată pentru dvs. de temă sau șablon. Acestea fiind spuse, credem’merită să faceți modificările suplimentare prezentate mai sus pentru a vă asigura că utilizatorii dvs. de telefonie mobilă obțin o experiență strălucitoare, mai degrabă decât una acceptabilă. La urma urmei, statisticile spun că’Probabil voi constitui majoritatea utilizatorilor dvs.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me