Cum să vă faceți site-ul WordPress prietenos pentru mobil

Nu este un secret pentru nimeni că site-urile WordPress prietenoase cu dispozitivele mobile sunt noua normă, dar în ciuda cât de comune pot părea, poate fi nevoie de puțină muncă pentru a crea un site frumos, receptiv. Acest ghid vă va ajuta să înțelegeți de ce este important să aveți un site prietenos cu dispozitivele mobile, cum să creați unul pe WordPress și vă va prezenta cele mai bune instrumente pentru a crea un site receptiv.

Pentru a face site-ul WordPress prietenos pentru dispozitive mobile, trebuie să:

1. Înțelegeți de ce este important designul web receptiv
2. Faceți testul Google Mobile-Friendly
3. Utilizați o temă WordPress receptivă (sau creați-vă propria)
4. Luați în considerare pluginurile WordPress prietenoase pentru dispozitive mobile
5. Utilizați opt-in-uri pentru dispozitive mobile
6. Gândiți-vă în termeni de media responsive
7. Prioritizează performanța site-ului

Gata? Să ne scufundăm!

1. De ce sunt importante site-urile pentru dispozitive mobile?

În T4 2019, 61% din căutările Google au avut loc pe un dispozitiv mobil. Aceasta înseamnă că peste jumătate din populație apelează la telefoane și tablete pe dispozitive desktop tradiționale, așa că pentru a ține pasul cu acestea, site-ul dvs. trebuie să fie gata să fie afișat pe orice dimensiune de ecran. Un design prietenos cu dispozitivele mobile oferă o experiență pozitivă pentru utilizator și îi va ajuta pe utilizatori să găsească ceea ce caută în timp ce sunt în deplasare.

Pe lângă UX, există un alt motiv important pentru care site-ul dvs. ar trebui să fie adaptat pentru dispozitive mobile: Google. Începând cu 2015 (anul „Mobilegeddon”), Google a implementat o revizuire majoră a algoritmului său de căutare pentru a recompensa site-urile care sunt considerate „compatibile cu dispozitivele mobile”. Schimbarea s-a rezumat la un punct crucial de date: dacă site-ul dvs. este sau nu receptiv.

Aceasta înseamnă că, dacă site-ul dvs. citește bine pe dispozitivele mobile, va avea performanțe mai bune în rezultatele căutării decât site-urile care nu o citesc. Acesta este un avantaj destul de dulce dacă ați făcut munca pentru a crea un site prietenos cu dispozitivele mobile! Dar poate afecta și traficul site-ului dvs. dacă nu este la îndemână sarcina de a afișa pe ecrane mai mici.

Din fericire, dacă site-ul tău WordPress nu este încă compatibil cu dispozitivele mobile, există o mulțime de instrumente care te vor ajuta să fii la curent și să construiești un site pe deplin funcțional și receptiv. Primul pas? Comparați designul dvs. actual.

2. Faceți testul de compatibilitate cu dispozitivele mobile

Site-ul dvs. web poate arăta grozav pe un dispozitiv mobil (cum ar fi propriul telefon mobil personal), dar trebuie neapărat să-l testați pe o gamă largă de dimensiuni de ecran pentru a afla dacă este cu adevărat receptiv. Chiar dacă se întâmplă să aveți o grămadă de telefoane vechi în jur, acesta poate fi un proces consumator de timp pentru a-l testa pe fiecare ecran.

Pentru a simplifica lucrurile, Google ne-a oferit tuturor un instrument de testare gratuit pentru dispozitive mobile, care vă va spune dacă site-ul dvs. se califică drept „compatibil cu dispozitivele mobile” sau nu. Trebuie doar să introduceți adresa URL a site-ului dvs. pentru o evaluare rapidă a designului mobil al site-ului dvs. Dacă site-ul dvs. este complet optimizat pentru dispozitive mobile, veți primi un mesaj de succes entuziast, care arată astfel:

Dacă vezi roșu, ai puțin de lucru. (Vom ajunge la asta într-o secundă!)

Un instrument mic destul de îngrijit, nu? Ei bine, devine și mai bine.

Pentru toți dezvoltatorii dvs., Google a lansat și un API de testare pentru dispozitive mobile care vă permite să testați adrese URL cu instrumente automate. Avantajul acestui lucru este că puteți testa rapid mai multe pagini, dar puteți, de asemenea, să monitorizați cele mai importante pagini de pe site-ul dvs. fără a fi nevoie să apelați manual la instrumentul browser tot timpul. Scor!

După ce ați folosit instrumentul Google pentru dispozitive mobile pentru a evalua site-ul dvs., este timpul să începeți să faceți îmbunătățiri. Să începem cu tema dvs. WordPress.

3. Utilizați (sau creați) o temă WordPress receptivă

Dacă ați instalat recent o nouă temă WordPress, există șanse decente să fiți bine în acest departament. Dacă tema dvs. există de ceva vreme, ar putea fi timpul pentru o mică actualizare.

Mai întâi: verificați de două ori versiunea dvs. WordPress și versiunea actuală a temei. Dacă există actualizări în așteptare, începeți cu acestea. Nu pot vorbi pentru fiecare temă, dar unele actualizări vor conține elemente adaptate pentru dispozitive mobile și pot fi suficiente pentru a vă rezolva problemele. WordPress 4.4, de exemplu, a adăugat o funcționalitate foarte bună pentru imaginile receptive (puteți citi totul despre asta aici).

Dacă actualizările nu funcționează, probabil că este timpul să cauți o temă nouă sau să te gândești să o creezi pe a ta. Să explorăm ambele opțiuni.

Cele mai bune teme WordPress pentru dispozitive mobile

În mod realist, multe teme WordPress în zilele noastre sunt receptive – probabil că este mai rar ca o temă să nu fie adaptată pentru dispozitive mobile. Acestea fiind spuse, înainte de a cumpăra o temă, verificați din nou dacă se afișează bine pe orice dimensiune de ecran. Testați site-ul demonstrativ, scalați fereastra browserului și citiți toate recenziile pe care le puteți găsi pentru a căuta experiență de la utilizatori reali.

Dacă ești mulțumit de ceea ce vezi, mergi! Dar dacă ceva nu arată în regulă, ferește-te. Chiar dacă ați crezut că este potrivirea perfectă, există atât de multe teme WordPress din care să alegeți, încât vă garantez că veți găsi alta care să funcționeze pentru site-ul dvs.

Dacă te uiți la teme gratuite, asigură-te că vezi cum arată cu propriul tău conținut la loc – după cum sunt sigur că știi, lucrurile nu arată întotdeauna la fel, așa că asigură-te că afișează conținutul tău cum ai vrea pe mobil.

Nu sunteți sigur de unde să începeți? Când vă găzduiți site-ul WordPress pe WP Engine, veți avea acces gratuit la temele StudioPress (inclusiv Genesis Framework!) cu planul dvs. Aceste teme sunt pe deplin responsive, astfel încât vor arăta grozav pe orice dispozitiv, plus că puteți schimba cu ușurință între ele (în loc să vă simțiți blocați de tema premium „cea” pe care ați decis să o cumpărați).

Cum să-ți creezi propria temă WordPress receptivă

Dacă preferați să mergeți pe calea DIY pentru a crea un site prietenos cu dispozitivele mobile, asigurați-vă că începeți de la zero sau într-un mediu de testare - nu ar trebui să faceți niciodată modificări drastice ca acestea pe site-ul dvs. live.

Vă recomand să utilizați Local pentru a crea un site WordPress local chiar pe mașina dvs. Această aplicație gratuită vă va permite să experimentați după pofta inimii, fără a vă distruge niciodată site-ul actual (ceea ce este esențial atunci când treceți printr-o reproiectare). Puteți chiar să importați site-ul existent în Local, așa că trebuie să începeți de la zero doar dacă doriți.

Există, de asemenea, o funcție numită Live Links, care generează o adresă URL care poate fi partajată către site-ul local. Acest lucru vă permite să îl trimiteți unui client sau să îl ridicați de pe telefon, astfel încât să puteți testa cu ușurință cum arată site-ul pe un dispozitiv mobil.

Dacă creați o temă copil bazată pe o temă părinte receptivă, veți fi într-o formă destul de bună. Dacă porniți de la o tablă complet goală și vă creați propria temă, asigurați-vă că utilizați interogări media pentru a stabili limite pentru design și gândiți elementele pe rând.

Întrebați-vă cum ar trebui să scalați imaginile, cum ar trebui să arate navigarea și dacă vreunul dintre conținut se va ascunde pe un dispozitiv mobil. Iată câteva tutoriale care vă pot ajuta:

• Cum să creați un meniu de navigare receptiv în WordPress
• 7 sfaturi de bune practici pentru design web receptiv
• Lucrul cu imagini receptive în WordPress

4. Utilizați pluginuri responsive

Pluginurile adaugă funcționalitate site-ului dvs. WordPress, astfel încât nu adaugă întotdeauna nimic vizual la front-end. Dar în cazul în care adaugă un element fizic pe site-ul dvs. (cum ar fi un widget sau un buton CTA), asigurați-vă că acesta se adaptează bine la toate dimensiunile de ecran sau cel puțin vă oferă opțiunea de a-l dezactiva pe ecrane de dimensiuni mai mici.

De exemplu, un widget din bara laterală este un plus minunat pentru un site desktop, dar dacă domină designul mobil sau nu se reduce, nu va oferi o experiență de utilizator foarte bună.

Asemenea temelor, acordați atenție caracteristicilor unui plugin și încercați să citiți recenzii sau să găsiți un demo înainte de a cumpăra unul. Și ori de câte ori activați un plugin nou, nu uitați să faceți o verificare rapidă a calității site-ului dvs. pentru a vă asigura că este scalat corect pe dimensiunile ecranului.

Atâta timp cât aveți o temă receptivă și pluginuri care se comportă bine pe mobil, site-ul dvs. va fi într-o formă foarte bună pentru a fi afișat pe ecrane mai mici.

5. Evitați să adăugați ferestre pop-up pe dispozitivele mobile

Dacă încercați să construiți o listă de e-mail cu site-ul dvs. WordPress, bănuiesc că aveți o varietate de opțiuni de înscriere pe site-ul dvs. Majoritatea formularelor de înscriere prin e-mail funcționează foarte bine pe dispozitivele mobile (presupunând că acestea se extind și sunt ușor de utilizat).

Pop-up-urile, totuși, sunt o fiară diferită. Google a început să penalizeze site-urile cu interstițiale intruzive, adică opt-in-uri care acoperă conținutul unui site. Acestea includ ferestre pop-up (indiferent dacă se afișează imediat sau după ce un utilizator a fost pe site de ceva timp) și orice alt tip de opt-in pe care un utilizator trebuie să îl îndepărteze înainte de a accesa conținutul de pe pagină. Puteți citi totul despre poziția Google în această privință aici.

Pentru a menține site-ul WordPress prietenos pentru dispozitive mobile și pentru a urma cele mai bune practici, evitați ferestrele pop-up pe designul dvs. mobil. Modul în care procedați va depinde de serviciul care vă oferă opt-in-urile, dar majoritatea furnizorilor ar trebui să aibă opțiunea de a dezactiva ferestrele pop-up intruzive pe dispozitivele mobile.

6. Elaborați o strategie pentru mass-media receptivă

Indiferent dacă lucrați cu un site de portofoliu, un blog zilnic sau un site de comerț electronic, o piesă importantă a puzzle-ului responsive este să luați în considerare media de pe site-ul dvs. Acea imagine mare de fundal de pe pagina ta de pornire ar putea arăta grozav pe un computer desktop, dar dacă nu se scalează corect, ar putea pierde tot contextul și poate duce la o experiență dificilă de vizionare pe un telefon. Deci regula numărul unu pentru mediile receptive? Gândiți-vă la cum evoluează lucrurile.

Dacă scalarea nu este de fapt cea mai bună soluție pentru site-ul dvs., puteți lua în considerare și ascunderea anumitor elemente atunci când site-ul dvs. este încărcat pe un dispozitiv mobil. Acest lucru ar ajuta la simplificarea experienței și ar duce utilizatorii la cel mai important conținut mai rapid.

În cele din urmă, trebuie să aveți în vedere și dimensiunea fișierului media pe care o includeți pe site-ul dvs. Acest lucru nu numai că va îmbunătăți experiența mobilă, dar și timpul de încărcare a desktopului! Fișierele media sunt adesea unele dintre cele mai mari de pe un site web, ceea ce le face cauza barelor de încărcare și a timpilor lungi de așteptare. Pentru a vă eficientiza site-ul și pentru a crește performanța mobilă, încercați să vă optimizați imaginile utilizând cea mai mică dimensiune de fișier posibilă, păstrând în același timp calitatea de care aveți nevoie. (De exemplu, poate că site-ul dvs. mobil încarcă o versiune mai mică a unei imagini decât pe desktop!)

7. Prioritizează performanța site-ului

Viteza paginii a fost importantă de mult timp în ceea ce privește clasarea site-ului dvs. în căutările Google pe desktop, dar din iulie 2018, acesta este acum și cazul clasamentelor mobile. Asociați asta cu statistica de mai sus că peste 60% din căutările pe internet folosesc dispozitive mobile, iar performanța site-ului dvs. (pe fiecare dispozitiv) este acum mai importantă ca niciodată.

Imaginile reprezintă o mare parte a ecuației de performanță, dar codul și gazda WordPress joacă, de asemenea, un rol important.

Când vine vorba de codul dvs., luați în considerare acțiuni precum minimizarea (mai ales dacă lucrați cu o temă personalizată). Faceți un inventar al tuturor pluginurilor instalate pe site-ul dvs. și dezactivați și dezinstalați pe cele care nu mai sunt necesare. Practic, cu cât păstrați mai organizat elementele care alimentează site-ul dvs., cu atât veți fi mai bine.

În ceea ce privește gazda dvs. WordPress, asigurați-vă că utilizați un partener de calitate care include servicii precum tehnologia de stocare în cache, CDN și infrastructură alimentată de furnizori de încredere precum Google Cloud Platform. Dacă vă găzduiți site-ul pe WP Engine, sunteți setat în toate aceste zone.

Pe măsură ce tot mai mulți oameni își folosesc smartphone-urile sau tabletele pentru a accesa internetul, designerii de site-uri trebuie să se adapteze pentru a aborda aceste modele de utilizare. Deci, site-ul dvs. este pregătit pentru vizitatorii dvs. de pe mobil? Ce aspecte ale site-ului dvs. a trebuit să schimbați? Ce instrumente ați folosit pentru a crea un design responsive? Împărtășește-ți experiența în comentarii!

Obțineți acces la peste 30 de teme premium (și compatibile cu dispozitivele mobile!).

Economisiți timp (și bani!) Cu găzduirea WordPress de către WP Engine și obținerea accesului la temele StudioPress și Genesis Framework. Temele sunt complet receptive și ușor de personalizat, economisind timp atunci când încercați să construiți un site prietenos cu dispozitivele mobile. În plus, platforma puternică a WP Engine va menține performanța site-ului dvs. optimizată, ajutând acele viteze ale paginii să rămână rapide și site-ul dvs. să se clasifice bine.