Cum să vă optimizați aspectele WordPress pentru traficul mobil

Numărul dispozitivelor mobile și al persoanelor care le utilizează este în continuă creștere. Nu este o surpriză faptul că peste jumătate din traficul de pe Internet este mobil și că majoritatea interogărilor efectuate pe motorul de căutare sunt pe dispozitive mobile. În plus, Google sancționează site-urile web care nu sunt optimizate pentru dispozitivele mobile.

Pentru a vă optimiza aspectele WordPress pentru traficul mobil, trebuie să faceți mult mai mult decât să instalați o temă. Trebuie să investiți în versiunea mobilă a site-ului dvs. web, nu numai din punct de vedere UX, ci și din punct de vedere SEO, CRO, publicitate și performanță.

Prin urmare, în acest articol, vom explica ce va trebui să abordați pe site-ul dvs. WordPress pentru a-l face să funcționeze pentru traficul mobil și pentru a ne asigura că utilizatorii vor beneficia de cea mai bună experiență posibilă atunci când vizitează site-ul web pe un dispozitiv mobil.

De ce este important traficul mobil

În 2016, pentru prima dată, traficul de internet mobil a depășit desktopul. Pentru a ține pasul cu acest lucru, trebuie să vă pregătiți site-ul WordPress pentru traficul de la orice tip de dispozitiv.

Optimizarea nu înseamnă doar să arăți grozav pe smartphone-uri, ci să ai și un site funcțional. Dacă aveți un site web pregătit pentru mobil, veți îmbunătăți UX-ul și veți îmbunătăți rata de conversie și este crucial pentru site-urile care își bazează venitul pe publicitate.

În plus față de un UX îmbunătățit, un aspect compatibil cu dispozitivele mobile influențează pozitiv și SEO-ul tău. De la actualizarea Google din 2015 încoace, a existat o revizuire semnificativă a algoritmilor motoarelor de căutare. Acum, compatibilitatea cu dispozitivele mobile este unul dintre factorii importanți pentru o mai bună clasare a căutării și pentru creșterea traficului web.

Traficul web mobil este în continuă creștere, așa cum se arată în acest grafic de la Statista.

Prin urmare, dacă site-ul dvs. web este excelent pe dispozitivele mobile, se va clasa mai bine în SERP și va avea ca rezultat mai multe vânzări prin intermediul dispozitivelor mobile. Chiar și marii comercianți cu amănuntul, cum ar fi Walmart Canada, au beneficiat în continuare de optimizările aspectului web mobil, cu o creștere de 98% a vânzărilor de dispozitive mobile!

Când compania a aflat că aproape 50% dintre clienții lor țintă sunt mame care folosesc tablete, și-au dat seama că trebuie să facă ceva în legătură cu experiența lor mobilă. Pentru a rezolva cu succes problemele cu aspectele lor mobile, au implementat următoarele soluții:

• Stabilirea unui plan Mobile-First: Echipa a ajuns la o decizie că trebuie să adopte o abordare tactică a designului și a făcut ca acesta să arate foarte bine pe tablete și smartphone-uri.
• Implementarea optimizării designului mobil: abordarea de design receptiv a făcut ca site-ul lor să devină excelent pe fiecare dimensiune a ecranului. În plus, și-au optimizat paginile de produse și pentru traficul web mobil.

Rezultatul: o creștere de 20% a ratei lor generale de conversie și o creștere de 98% a vânzărilor de dispozitive mobile, așa cum am menționat mai sus.

Cum evaluează Google aspectele site-urilor mobile?

Atunci când evaluează capacitatea site-ului de a primi trafic de la o căutare mobilă, Google ia în considerare următorii factori:

• Aspect pagină: Google examinează dacă pagina dvs. este redată corect pe un ecran mobil.
• Accesibilitate: Verificarea dacă butoanele, suportul media și textul sunt suficient de mari pentru a fi ușor accesibile, fără a face utilizatorii să mărească.
• Performanță: viteza paginii este vitală pentru experiențele de pe desktop și de pe mobil, iar Google acordă prioritate performanțelor paginilor mobile față de desktop în SERP.
• Destinația de plasare a anunțurilor: o pagină plină de reclame este intruzivă pentru mulți și o problemă și pentru Google. De aceea, atunci când utilizați anunțuri, trebuie să vă asigurați că nu încălcați regulile privind plasarea anunțurilor.

Începeți cu unele teste

Primul lucru pe care trebuie să-l faceți este să examinați dacă site-ul dvs. actual răspunde în mod adecvat traficului web mobil sau nu. În acest scop, puteți utiliza instrumentul Google Mobile-Friendly Test.

Testul Google Friendly Mobile ca unul dintre cele mai bune instrumente pentru a examina aspectele adaptabile pentru dispozitive mobile ale site-ului dvs.

Trebuie doar să introduceți URL-ul site-ului și să selectați Test URL . Analiza nu va dura mai mult de câteva secunde. Dacă site-ul dvs. este funcțional pe dispozitivele mobile, instrumentul vă va anunța, cu o captură de ecran a aspectului site-ului pe un smartphone. Sau, dacă site-ul dvs. nu este compatibil cu dispozitivele mobile, instrumentul va indica ce trebuie să ajustați.

Există o mână de alte instrumente utile pe care le puteți utiliza pentru a testa compatibilitatea cu dispozitivele mobile, cum ar fi:

• Varvy Mobile SEO
• Validator mobil W3C
• Responsive Design Checker

Instrumentele sunt grozave, dar nimic nu depășește cu adevărat experiența de mână. Vă sugerăm întotdeauna să parcurgeți site-ul dvs., să efectuați acțiuni pe care le considerați prioritare pentru utilizatorii dvs. (cum ar fi adăugarea unui produs într-un coș, trimiterea unui formular, navigarea către o pagină, partajarea unei postări). Căutați potențiale probleme pe tot parcursul procesului. Aceasta este cea mai simplă formă de testare UX.

Testați performanța

Viteza este mai relevantă ca niciodată. Google consideră viteza ca fiind unul dintre cei mai semnificativi factori de clasare și până la 85% dintre utilizatori se așteaptă ca site-urile mobile să se încarce mult mai repede decât versiunile desktop.

Iată câteva instrumente pe care le puteți utiliza pentru a testa viteza site-ului dvs. web:

• PageSpeed ​​Insights
• GTMetrix
• Pingdom

Dacă doriți să accelerați conținutul pe mobil, un CDN vă poate ajuta să difuzați conținutul mai rapid prin cache și distribuire din numeroase locații.

De exemplu, să presupunem că serverul dvs. de găzduire este în San Francisco, CA, iar vizitatorul dvs. web mobil este din Paris. Este o distanță care poate încetini conținutul transversal. Un CDN poate stoca o versiune a site-ului dvs. pe un server francez lângă Paris și, prin urmare, vă poate difuza conținutul mult mai repede.

În plus, trebuie să selectați un furnizor puternic de găzduire gestionată pentru site-ul dvs. WordPress. O gazdă partajată rulează sute de site-uri web simultan și, dacă unul dintre site-uri se confruntă cu creșteri de trafic mai mari decât cele normale, va reduce viteza celorlalte site-uri.

Un upgrade la o găzduire WordPress precum Pagely poate aduce îmbunătățiri semnificative ale performanței. Pagely folosește o infrastructură de server care vă va accelera imediat site-ul. De asemenea, utilizează cea mai recentă versiune PHP 7 și includ un CDN care poate crește activele site-ului dvs.

Mențineți simplitatea

Deoarece smartphone-urile au un ecran mult mai mic decât aspectele desktop, cantitatea de elemente pe care le puteți arăta utilizatorilor este mai mică. Prin urmare, dacă doriți să afișați o mulțime de conținut, veți împiedica doar experiența utilizatorului.

De exemplu, să aruncăm o privire pe site-ul sucursalei braziliene Toyota. Arată foarte solid pe un laptop.

Un site frumos pentru desktop nu înseamnă că aspectul mobil va urma exemplul. Sursa imaginii: Toyota Brazilia

Dar ce se întâmplă dacă doriți să răsfoiți vehiculele lor pe smartphone-ul dvs.

Un aspect web aglomerat mobil duce la mai puțin trafic și la o rată de conversie redusă. Sursa imaginii: Toyota Brazilia

Nu este atât de rău, dar din nou, bara de sus și meniul principal sunt cam prea mult, făcând întreaga experiență depășită și dezordonată.

Menținerea lucrurilor simple cu designul dvs. îmbunătățește interfața de utilizare mobilă, iar utilizatorii pot naviga în paginile dvs. mai eficient. În plus, aspectele simple îmbunătățesc scorul de viteză al paginii mobile, deoarece cu cât un browser are mai puține elemente de încărcat, cu atât pagina este mai rapidă.

Un aspect WordPress simplu pentru mobil de la Swell

Când proiectați un aspect mobil, cel mai bine este să vă concentrați pe un aspect de pagină cu o coloană, pentru a promova mai multe derulare pe pagină. Gândiți-vă - de ce Facebook și Instagram au atât de mult succes ca platformele mobile?

Utilizatorii glisează în mod natural pe verticală. Sursa imaginii: Giphy

Mai mult, trebuie să luați în considerare alte caracteristici acceptabile pentru designul web mobil simplu, cum ar fi „meniul hamburger”.

Un buton Hamburger Menu din partea stângă sus. Sursa imaginii: AMC

Acum este o componentă standard în designul web mobil și, atunci când utilizatorii doresc să navigheze pe altă pagină, caută în partea de sus a aspectului paginii. Nu utilizați meniuri derulante extinse. Acestea sunt provocatoare pentru a naviga pe smartphone-uri și, uneori, chiar împiedică utilizarea site-urilor web desktop.

Excludeți conținutul inutil

Pe lângă simplificarea tranziției paginii către dispozitive mobile prin eliminarea elementelor inutile, puteți elimina și conținutul suplimentar. Desigur, nu ar trebui să ștergeți niciodată conținut care vă îmbunătățește rata de conversie. Cu toate acestea, există pur și simplu un conținut care nu este necesar pentru versiunea mobilă a site-ului dvs.

Când examinați ce conținut ar trebui să apară pe pagină, întrebați-vă următoarele:

• Cât de relevant este acest conținut pentru pagină?
• Este conținutul crucial pentru călătoria utilizatorului?
• Dacă trebuie să includem acest conținut, cum îl putem simplifica pentru mobil?
• Dacă îl putem elimina de pe mobil, mai este necesar pe desktop?

Eliminarea conținutului inutil va spori experiența utilizatorului și ratele de conversie. Salvați doar cel mai important conținut pentru vizitatorii dvs. de pe mobil. Simplificați-vă conținutul acolo unde puteți, dar nu eliminați conținutul cheie care ar putea convinge utilizatorii să opteze pentru produsul dvs.

O interfață simplă de utilizator de pe site-ul mobil BuildFire.

Limitați zonele care pot fi făcute clic

Când oamenii vizitează site-uri web pe dispozitive mobile, nu doresc să facă clic pe prea multe opțiuni. Acest lucru poate fi copleșitor și nu veți putea livra un UX mobil operabil. În schimb, trebuie să evidențiați cele mai importante îndemnuri și zone pe care puteți face clic pe paginile dvs.

Todoist are doar îndemnul și câteva grafică frumoasă.

Rețineți că navigarea pe un site web pe un smartphone constă în a căuta și a face clic pe un ecran tactil cu degetele în loc să arătați cu săgeți. Prin urmare, includerea unui număr limitat de link-uri și distanțarea corespunzătoare a acestora vă va asigura că aveți o pagină accesibilă pe care utilizatorii de dispozitive mobile o pot naviga.

Site-ul mobil Quicksprout are zone mari pe care se poate face clic.

Acest lucru este crucial, deoarece dacă zonele care pot fi făcute clic sunt aproape pe un ecran mobil, oamenii pot face clic pe linkul greșit. În plus, Google poate semnaliza site-ul dvs. ca fiind neprietenos pentru utilizatorii de telefonie mobilă și veți pierde o mulțime de trafic potențial de căutare organică.

Harness Responsive Design

Dacă doriți să afișați corect site-ul dvs. pe desktop și mobil, trebuie să îl faceți receptiv. Un site web receptiv utilizează aceleași elemente de pagină pentru versiunile desktop și mobile. Conform dispozitivului, designul se remodelează pentru a se potrivi pe ecran.

Pe lângă UX îmbunătățit pentru vizitatorii dvs. de pe dispozitivele mobile, designul receptiv aduce site-ului dvs. și următoarele beneficii:

• Flexibilitate: cu un design receptiv, nu trebuie să vă gândiți la schimbarea designului pe două site-uri web. Trebuie doar să remediați sau să adăugați elemente o singură dată și o faceți atât pentru versiunile mobile, cât și pentru cele desktop.
• Eficiență din punct de vedere al costurilor: Rularea unui site desktop și mobil poate fi costisitoare. Prin utilizarea unui design receptiv, eliminați aceste costuri inutile.
• Beneficii SEO: designul receptiv este benefic pentru clasamentul dvs. de căutare, deoarece Google, așa cum sa discutat la începutul articolului, acordă prioritate site-urilor compatibile cu dispozitivele mobile din SERP.

Cu toate acestea, trebuie să fii atent. Majoritatea site-urilor responsive convertesc doar trei coloane de conținut desktop într-o singură coloană.

Un site receptiv este unul care se potrivește cu fiecare ecran. Încarcă aceleași date de pe desktop în versiunea mobilă. De exemplu, dacă doriți să afișați o fotografie de desktop de 1.200 px pe un ecran mobil de 300 px, se vor încărca întregul 1.200 px, doar redat.

Sursa imaginii: Giphy

În ceea ce privește imaginile, WordPress a făcut deja progrese semnificative către o experiență mai bună. De la versiunea 4.4, CMS scalează automat chiar și cele mai mari imagini prin atributul srcset HTML.

PNG și JPEG sunt cele mai comune formate de fișiere imagine. Dar, odată cu cele mai recente tehnologii și imagini digitale, formatele WebP și SVG devin din ce în ce mai prezente.

Un SVG este o imagine vectorială și poate fi scalat pentru a se potrivi cu orice dimensiune a ecranului. De obicei, SVG-urile sunt mult mai mici decât PNG-urile, deci economisește timp prețios în timpul încărcării.

Cu toate acestea, ar trebui să fii totuși atent. Elemente vizuale precum videoclipuri, fotografii și grafică pot fi unul dintre consumatorii semnificativi de performanță pentru site-uri web. Chiar dacă nu există reguli strict definite pentru dimensiunea fișierelor media, fișierele mai mici duc la timpi de încărcare mai buni.

Rețineți că aceleași elemente vizuale din versiunea desktop a site-ului dvs. WordPress ar putea să nu funcționeze întotdeauna pe designul mobil. De aceea, eliminarea imaginilor de fundal mari și schimbarea acestora cu o imagine care nu împiedică UX pe mobil este o opțiune mult mai bună.

Să luăm pagina de pornire a HubSpot ca exemplu. Grafica din secțiunea erou descrie perfect modul în care CRM pune lucrurile în mișcare. Imaginați-vă o imagine realistă a unei clădiri de birouri cu atât de mulți oameni în fiecare fereastră. Nu ar funcționa la fel de bine ca acesta.

Sursa: HubSpot

Optimizați formularele

Completarea formularelor pe un smartphone poate fi o provocare, mai ales dacă utilizatorii trebuie să trimită prea multe date și să navigheze în prea multe câmpuri. De aceea, trebuie să vă asigurați că vă simplificați formularele mobile și că colectați doar cele mai importante informații.

Păstrați formularele pentru paginile dvs. mobile cât mai simple posibil. Sursa: Copyblogger

În WordPress, puteți instala un plugin cum ar fi WPForms și puteți crea formulare receptive rapid și ușor, care vă pot ajuta să convertiți vizitatorii web pe mobil.

Din perspectiva dezvoltatorului, folosim Formularul de contact 7, deoarece oferă cea mai mare flexibilitate. Deși trebuie remarcat faptul că interfața sa de utilizare nu este ușor de utilizat pentru utilizatorii non-tehnici care doresc un design personalizat pentru formularele lor.

Formularul de contact 7 este instrumentul de optimizare a formularului mai bun din punct de vedere al dezvoltatorului.

Încheierea

În prezent, este esențial să aveți un aspect WordPress potrivit pentru mobil. Este o cerință necesară ca utilizatorii și motoarele dvs. de căutare să vă accepte site-ul.

Un site web WordPress pentru dispozitive mobile are puterea de a atrage mai mult trafic organic, de a atrage noi clienți potențiali și de clienți.

Acum, că aveți o înțelegere mai bună a ceea ce trebuie testat, cum să căutați probleme de interfață mobilă și să identificați probleme suplimentare. Puteți urma sfaturile prezentate mai sus pentru a vă asigura că UX-ul mobil al site-ului dvs. WordPress este întotdeauna la îndemână.

Persoanele din spatele celui mai bun CMS fac, de asemenea, progrese mari către un UX mobil nativ îmbunătățit. De la redimensionarea imaginilor pe browserele mobile până la un backend îmbunătățit, puteți fi siguri că sunteți înaintea proprietarilor de site-uri web care utilizează un alt CMS.

Dacă aveți mai multe întrebări sau aveți nevoie de ajutor cu probleme UX mobile și crearea unei experiențe web moderne pe dispozitive, nu ezitați să luați legătura.