Cum să faci un site WordPress receptiv pentru mobil

Site-urile web responsive sunt acum standardul industriei, datorită numărului mare de utilizatori care navighează în principal pe dispozitive mobile. Pentru a ilustra cât de profund este acest impact, giganții din industrie, cum ar fi Google, recompensează acum site-urile adaptate pentru dispozitive mobile în clasamentele de căutare, pentru a ajuta la împingerea mai multor site-uri în adaptarea dispozitivelor non-desktop.

Pe scurt, site-urile web responsive folosesc același cod de site pe toate platformele, dar oferă optimizare pentru fiecare experiență, indiferent de mediul de vizualizare. În consecință, configurarea unui site responsive poate însemna reconstruirea întregului design sau pur și simplu efectuarea de câteva modificări celui existent.

În acest articol, veți afla cum pot fi adaptate site-urile WordPress pentru dispozitive mobile folosind un design responsive. De asemenea, vom explica importanța capacității de răspuns pentru optimizarea pentru motoarele de căutare (SEO). Haideti sa crapam!

WordPress este compatibil cu dispozitivele mobile?

WordPress este un sistem de management al conținutului (CMS) care vă permite să proiectați front-end-ul site-ului dvs. pentru a satisface cerințele dvs. exacte. Aceasta înseamnă că poate fi ușor de adaptat pentru dispozitive mobile.

Temele implicite responsive sunt disponibile din 2011. Multe teme de la terțe părți oferă acum și un design responsive din nou. Cele care nu sunt adesea depășite în multe alte domenii.

Ce este Responsive Design?

Să vorbim despre modul în care designul responsive se va aplica site-ului tău WordPress. Designul responsiv este o modalitate de a organiza conținutul de pe site-ul dvs., astfel încât acesta să poată răspunde dinamic la dimensiunea ecranului pe care apare. Aceasta înseamnă că experiența utilizatorului este la fel de bună pe un smartphone precum ar fi pe un laptop.

Pentru a obține această experiență excelentă pe toate dispozitivele, designerii vor crea grile de conținut fluid și flexibilitate de cod în imagini prin intermediul CSS al unui site, pentru a rearanja HTML-ul ca răspuns direct la dimensiunea și rezoluția unui ecran.

Dacă doriți un exemplu grozav, deschideți Mashable.com într-o fereastră nouă (presupunând că nu sunteți deja pe un dispozitiv mobil). Odată ce sunteți acolo, redimensionați fereastra browserului pentru a o face din ce în ce mai mică și urmăriți cum site-ul se rearanjează în consecință

Pe măsură ce micșorați fereastra, imaginile și blocurile de conținut se întrec pentru a se potrivi în fereastra din ce în ce mai mică, conform grilelor fluide pe care le-a creat designerul. Cel mai mic, ai rămas cu cum ar arăta site-ul lui Mashable pe un iPhone. Este frumos și ușor de citit. Embiggen fereastra din nou și ei răspund revenind la configurația lor „desktop”.

Site-ul se rearanjează singur, deoarece există interogări media CSS care aplică reguli diferite paginii, în funcție de dimensiunea dispozitivului (în acest caz, fereastra browserului) care vizualizează site-ul. HTML-ul rămâne același, este pur și simplu rearanjat de CSS. Regulile CSS pot fi aplicate pentru a rearanja totul pe site, inclusiv pentru a servi diferite dimensiuni de imagini în funcție de rezoluția dispozitivului. Este foarte grozav atunci când doriți să faceți lucruri cum ar fi să difuzați imagini îmbunătățite cu retina pe dispozitivele iOS în mod specific.

Aplicații mobile versus site-uri receptive

Alegerea unei aplicații versus un site receptiv se reduce la scopul site-ului. Majoritatea site-urilor web se vor descurca bine cu un design responsive care se poate adapta la dispozitive. O aplicație mobilă intră în joc atunci când utilizatorii dvs. doresc funcționalități foarte specifice pe dispozitivul lor mobil, care sunt diferite de cele pe care le-ar oferi site-ul complet. Banca dvs. oferă probabil o aplicație mobilă, astfel încât să vă puteți verifica rapid soldul la coadă la Starbucks. De asemenea, Facebook și Twitter își ajustează funcționalitatea în aplicațiile lor pentru a se potrivi utilizării dispozitivului mobil.

Doar dacă utilizatorii dvs. au nevoie de un set specific de funcții de pe telefoanele lor, diferit de ceea ce au nevoie de pe site-ul dvs. principal, o aplicație nativă este ceva de luat în considerare.

Considerații de performanță pentru site-urile receptive

Un design receptiv va afecta performanța generală a site-ului dvs. Încărcarea multor CSS și diferite dimensiuni de imagini pentru a răspunde la dimensiunile dispozitivului poate fi costisitoare din perspectiva procesării backend. Ca parte a evaluării designului receptiv, este important să acordați prioritate performanței ca caracteristică. Utilizatorii încă se așteaptă ca un site mobil să fie puțin mai lent, dar nu vor ierta dacă vor încerca să afișeze site-ul dvs. pentru a arăta unui prieten sau data lor și trebuie să aștepte mai mult de câteva secunde.

Dintr-o perspectivă tehnică, atunci când vă livrați site-ul pe un dispozitiv mobil care utilizează date celulare, vă dezamăgește până la 0,5 secunde de la început. De exemplu, pentru a prelua 40KB pe 4G durează 700 ms în condiții optime. Latența rețelei și variațiile situaționale vor crește doar timpul de încărcare. Nu puteți controla variabilele rețelei celulare, așa că este esențial să vă construiți site-ul receptiv cu performanța ca caracteristică încă de la început.

Asigurați-vă că ați făcut următoarele pentru a vă asigura că site-ul dvs. este optimizat pentru mobil.

• Optimizați-vă imaginile: detectează automat dimensiunea ecranului dispozitivului pentru a crea, stoca în cache și livra dimensiunea corectă a imaginii.
• Reduceți solicitările HTTP: minimizați cantitatea de CSS și JavaScript pe care trebuie să o utilizați, apoi păstrați în cache orice altceva.
• Încărcare condiționată a activelor: butoanele de rețele sociale mari, imaginile și altele asemenea sunt excelente pentru un dispozitiv mai mare, dar nu vor afecta experiența utilizatorului pentru cele mai mici. Planificați-vă designul pentru a încărca doar ceea ce este absolut necesar.
• Lazy Loading: Dacă poți scăpa cu încărcarea anumitor active, în special JavaScript, după cele mai importante elemente ale paginii, fă-o. În momentul în care utilizatorii dvs. vor consuma conținutul pe care l-au dorit în primul rând, acele alte active se vor fi încărcat.

Site-ul dvs. WordPress trebuie să fie receptiv?

Din ce în ce mai mult, răspunsul implicit la această întrebare va fi da, în special cu disponibilitatea largă a temelor WordPress receptive. Dacă site-ul dvs. este pregătit pentru o reproiectare sau este în curs de a fi proiectat, este important să oferiți utilizatorilor o experiență de calitate pe orice dispozitiv pe care se află.

Ținând cont de asta, voi încheia cu câteva întrebări pe care să le pun pe tine și pe echipa ta pentru a evalua dacă WordPress-ul tău ar trebui să fie proiectat în mod receptiv.

• Care este cazul de utilizare pentru site-ul dvs.? Va fi important consumul mobil? Sunt șanse ca răspunsul la aceasta să fie „da, și tot mai mult cu fiecare an”. Vor fi excepții, dar nu multe.
• Cine sunt utilizatorii tăi? Cu cât sunt mai tehnici, cu atât sunt mai de ultimă oră, cu atât se vor aștepta mai multe la un site receptiv pentru fiecare brand cu care se asociază.
• Ai buget? Acesta este unul mare. Un site receptiv este puțin mai costisitor de construit inițial, dar este mai ieftin să construiți un singur site receptiv decât să planificați construirea a două versiuni separate ale site-ului dvs. și apoi gestionarea întreținerii pentru ambele.
• Ești gata să înveți un nou tip de design? Designul responsive introduce o mulțime de concepte și moduri noi de înțelegere a conținutului digital. va fi important să lucrezi cu o echipă de proiectare care nu numai că poate proiecta ceva frumos, dar te poate educa pe parcurs.

Crearea unui design web WordPress receptiv

Modelele statice existente pot fi adesea convertite în teme receptive. Iată câteva dintre elementele de luat în considerare pe parcursul procesului de conversie:

• Zoom implicit în browser
• Lățimi și înălțimi ale elementelor fluide
• Optimizarea imaginii
• Puncte de întrerupere specifice designului
• Meniuri responsive separate pentru dispozitivele mobile

De asemenea, ar trebui să testați designul actualizat pe mai multe dispozitive și să luați în considerare elemente suplimentare, cum ar fi tabelele receptive, în testare. Cu toate acestea, cel mai simplu mod de a face WordPress receptiv este să alegeți de la început o temă receptivă pre-construită.

Alegerea temei WordPress potrivite

Înainte de a începe să căutați printre cele peste 10.000 de teme WordPress disponibile astăzi, este o idee bună să faceți o listă cu funcțiile pe care doriți să le aibă site-ul dvs. și să utilizați acea listă ca punct de plecare.

Dacă nu sunteți sigur de tipurile de funcții de căutat, există câteva linii de bază asupra cărora puteți insista pentru a vă ajuta să restrângeți lucrurile: optimizarea pentru motoarele de căutare (SEO) și timpii rapidi de încărcare a paginii (indiferent de dispozitiv) sunt două lucruri pe care ar trebui să le aibă orice temă.

Deși există o mulțime de teme WordPress care nu au această funcționalitate încorporată, utilizarea unei teme care are ambele aceste caracteristici va oferi o experiență mult mai bună pentru utilizatorul final pe site-ul dvs.

Suita de teme WordPress premium a WP Engine, de exemplu, sunt toate optimizate pentru motoarele de căutare și receptive pentru mobil, ceea ce înseamnă că toate se încarcă rapid pe orice dispozitiv. Aceste teme minunate au fost create pentru o mare varietate de cazuri de utilizare, iar companiile de toate formele și dimensiunile le folosesc pentru a-și alimenta prezența online.

Accesul la aceste teme este, de asemenea, inclus în fiecare plan WP Engine, ceea ce înseamnă că clienții WP Engine le pot folosi pe toate fără costuri suplimentare.

Pluginuri WordPress mobile

Telefoanele mobile deschid un mare potențial pentru funcții precum notificările push și încărcarea persistentă prin conexiuni lente. Cu toate acestea, deși există soluții care vă ajută să vă transformați site-ul într-o aplicație web mobilă și să ducă conceptul de compatibilitate cu dispozitivele mobile la nivelul următor, multe sunt încă în faze de dezvoltare și testare.

Aceasta înseamnă că unele dintre funcționalitățile la care te-ai aștepta ar putea lipsi. Cu toate acestea, există o serie de pluginuri WordPress mobile care vă pot ajuta să vă îmbunătățiți site-ul în diferite moduri.

1. JetPack

Deși există multe soluții disponibile, pluginul Jetpack este o opțiune foarte populară. Îl veți găsi în Directorul de pluginuri, dar are și opțiuni pentru a crea o temă mobilă simplă pe site-ul dvs.

Unul dintre cele mai bune lucruri despre Jetpack este că este bine întreținut. Aceasta înseamnă că vor exista actualizări frecvente pentru a asigura securitatea și funcționalitatea acestuia. Este, de asemenea, unul dintre instrumentele cele mai pline de caracteristici pe care le puteți găsi. Pluginul de bază este gratuit și vine cu o mulțime de opțiuni. Dezavantajul este că există atât de multe funcții, încât interfața poate părea confuză la început.

În plus, dacă doriți copii de rezervă zilnice, teme personalizate și instrumente SEO, va trebui să investiți în versiunea premium a Jetpack. În funcție de nevoile dvs., puteți obține pluginul premium pentru uz personal la 39 USD pe an, nivelul superior fiind de 299 USD anual.

2. WPtouch

În plus, puteți explora WPtouch, un plugin popular care poate crea un site web mobil de pe site-ul dvs. existent. Unul dintre principalele avantaje ale utilizării acestui plugin este că puteți personaliza versiunea mobilă fără a perturba sau schimba site-ul original.

Versiunea gratuită are și o funcționalitate destul de robustă. Dacă sunteți în căutarea unui aspect diferit, va trebui să achiziționați versiunea pro. Planurile de prețuri profesionale încep de la 79 USD pe an și variază până la 359 USD pe an pentru licențele la nivel de întreprindere.

3. Pachetul mobil WordPress

Deși WordPress Mobile Pack nu a fost testat cu cea mai recentă versiune de WordPress, este un plugin popular pentru crearea unei aplicații web progresive (PWA) din site-ul dvs. web existent. Aceasta înseamnă că utilizatorii site-ului dvs. vor primi o experiență „asemănătoare unei aplicații”, fără a fi necesar să puneți resurse în programarea unei aplicații descărcabile pentru un magazin de aplicații.

Cu acest plugin, veți putea trimite mesaje banner către utilizatori, avertizându-i cu privire la opțiunea de a adăuga site-ul dvs. pe ecranele lor de pornire. Paginile dvs. se vor stoca în cache și se vor încărca foarte repede. Funcționalitatea de bază este gratuită pentru acest plugin, dar va trebui să achiziționați versiunea pro pentru a obține acces la mai multe teme, opțiuni de personalizare și abilitatea de a sincroniza anumite conținuturi.
Versiunea pro a pluginului are trei niveluri din care să alegeți. Pachetul Freelancer începe de la 99 USD pe an și poate fi folosit pe trei domenii. Nivelurile de preț depășesc cu opțiunea VIP, la 499 USD pe an pentru zece licențe de domeniu.

Imagini receptive

WordPress a oferit imagini receptive prezentate în mod implicit începând cu versiunea 4.4. Cu toate acestea, mai ales pentru site-urile care utilizează codul mai vechi, există un fragment simplu pe care îl puteți adăuga în foaia de stil pentru a vă asigura că imaginile nu vor părea niciodată prea mari pe dispozitive mici:

img {
max-width: 100%;
height: auto;
}

Deși există multe modalități de a asigura o performanță optimă a imaginii receptive, acest fragment vă asigură că toate imaginile dvs. sunt receptive ca bază.

În cele din urmă, majoritatea imaginilor sunt potrivite pentru includerea pe un site receptiv, deși scalabilitatea ar trebui să fie un factor. De exemplu, dacă includeți o imagine cu mult text, este posibil să nu fie ușor de citit pe dispozitivele mobile. În acest caz, ar fi mai bine să alegeți o altă imagine sau să oferiți o modalitate prin care textul să fie citit independent de imagine.

Meniuri receptive

Există două școli primare de gândire în ceea ce privește crearea de meniuri receptive:

1. Faceți un meniu care funcționează la toate dimensiunile.
2. Creați două meniuri: unul pentru ecrane mari și unul pentru experiențe cu ecrane mici. Doar unul va fi afișat la un moment dat, în funcție de dimensiunea ecranului utilizat.

Abordarea universală funcționează cel mai bine pentru meniurile mai mici, deoarece optimizarea CSS pentru lizibilitatea mobilă necesită doar câteva modificări simple. În această situație, meniul este întotdeauna vizibil pentru utilizator, indiferent de dimensiunea dispozitivului.

Cu toate acestea, dacă un meniu este prea mare pentru a se micșora cu ușurință pentru dispozitivele mobile, este posibil să aveți nevoie de o a doua versiune dedicată ecranelor mai mici. În acest caz, meniul mare este vizibil doar pe ecranele mari, iar o pictogramă de meniu mobil este prezentă pe ecranele mai mici.

Un exemplu tipic al acestei abordări este pictograma meniului hamburger, care glisează meniul complet al mobilului în vizualizare când se dă clic pe. Puteți folosi, de asemenea, selecția variată de pluginuri WordPress pentru a vă ajuta la crearea meniului receptiv. Să ne uităm la trei opțiuni.

1. UberMenu

O opțiune pe care o puteți încerca este UberMenu. Pentru 25 USD, veți avea acces la actualizări viitoare și șase luni de asistență. UberMenu vă poate ajuta să creați meniuri complet receptive și ușor de tactil. Din păcate, cu excepția cazului în care tema dvs. este specifică UberMenu, va trebui probabil să faceți unele modificări manuale pentru ca tema să funcționeze corect.

2. Max Mega Meniu

O altă opțiune este pluginul Max Mega Menu. Acest instrument are o opțiune gratuită în Directorul de pluginuri WordPress și funcționează cu meniurile existente pentru a le converti în meniuri „mega”:

Versiunea gratuită are, de asemenea, multe funcții de meniu mobil, cum ar fi suportul nativ pentru ecranele tactile. Pentru a obține acces la mai multe fonturi și opțiuni de comutare mobilă, va trebui să verificați unul dintre cele trei niveluri de preț. Versiunea premium a pluginului începe de la 29 USD pe an și variază până la 99 USD pe an pentru mai multe licențe de site.

3. Meniu receptiv

Un alt plugin bine cotat și popular pe care îl puteți verifica pentru a vă face meniurile prietenoase pentru dispozitive mobile este pluginul Responsive Menu. Această soluție are peste 150 de opțiuni de personalizare diferite, toate într-o interfață ușor de utilizat.

Veți avea flexibilitatea de a modifica aproape fiecare aspect al meniurilor din pagina de setări a pluginului. Dacă sunteți în căutarea de animații și mai multe fonturi, totuși, va trebui să verificați actualizarea pluginului Responsive Menu.

Versiunea gratuită a pluginului poate aduce caracteristicile de care aveți nevoie, deoarece lista de opțiuni este destul de extinsă. Dacă faceți upgrade, puteți obține o licență pentru un singur site pentru 29 USD sau puteți obține licențe nelimitate pentru 99 USD. Costul pluginului este o taxă unică și veți primi actualizări gratuite pe viață.

Tabele receptive

În mod implicit, tabelele ocupă la fel de mult spațiu ca și conținutul lor (sau mai mult). Acest lucru poate duce la tabelele foarte largi, care să distrugă aspectele mobile.

Din păcate, tabelele pline de conținut devin greu de citit atunci când sunt reduse pentru a se potrivi cu lățimea unei pagini mobile. Design-ul responsive nu se referă doar la strângerea datelor pe un ecran mic. În schimb, este vorba de a face totul ușor de utilizat, indiferent de dispozitiv.

Pentru o soluție rapidă și murdară, puteți adăuga o capacitate de răspuns de bază la tabelele dvs. cu acest fragment CSS:

table {
width: 100%;
border-collapse: collapse;
}

Cu toate acestea, nu trebuie să vă opriți aici. Dacă nu aveți mese mici, vă recomandăm să le optimizați pe fiecare în funcție de tipul de conținut pe care îl prezintă. În funcție de datele din tabelele dvs., există o serie de opțiuni receptive din care puteți alege pentru cea mai bună lizibilitate posibilă.

Dacă sunteți în căutarea unei soluții de plugin pentru tabele receptive, totuși, aveți noroc! Există mai multe opțiuni, dar vom recomanda trei în special.

1. TablePres

În primul rând, pluginul TablePress este o opțiune populară, bine întreținută și foarte apreciată. Veți putea crea și încorpora tabele frumoase cu coduri scurte. Cu toate acestea, pentru a obține tabele cu adevărat receptive, va trebui să instalați o extensie TablePress. Deși acestea sunt și gratuite, se recomandă să faceți o donație dezvoltatorului.

2. WP Table Builder

Dacă sunteți în căutarea unei opțiuni de constructor de mese de cinci stele, drag-and-drop, WP Table Builder ar putea fi pentru dvs. Un plugin oarecum nou, dar bine primit, interfața sa de tip drag-and-drop facilitează crearea de tabele receptive pentru site-ul dvs.

Acesta este și un plugin complet gratuit. Singurul dezavantaj real al acestei opțiuni este că vine doar cu cinci opțiuni de date în acest moment. Sunteți oarecum limitat la text, imagini, butoane, liste și evaluări cu stele.

3. wpDataTables

Al treilea plugin pe care îl recomandăm să îl verificăm este wpDataTables. Cu acest instrument, puteți crea rapid tabele și diagrame din Excel, CSV, PHP sau alte date existente. Aceasta înseamnă că puteți lua seturi mari de date și le puteți face accesibile pe site-ul dvs. web.

Acest plugin este, de asemenea, pregătit pentru Gutenberg, ceea ce face foarte ușor să adăugați tabele la paginile și postările site-ului dvs. după ce le-ați personalizat în setările pluginului. Cu toate acestea, veți fi oarecum limitat de versiunea gratuită a acestui plugin.
De exemplu, nu veți putea crea tabele bazate pe interogări MSQL sau nu veți putea extrage informații din Foi de calcul Google decât dacă faceți upgrade. Versiunea premium începe de la 59 USD pe an pentru nivelul de preț de bază și ajunge la 249 USD pe an pentru pachetul pentru dezvoltatori.

Adăugarea de abilități multilingve

Pe măsură ce adoptarea WordPress a continuat să crească în întreaga lume, a stârnit o nevoie tot mai mare de funcționalitate multilingvă, care permite site-urilor să fie traduse în limbile locale în funcție de locația utilizatorului.

Acest tip de funcționalitate este uriaș pentru companiile cu clienți în mai multe țări, iar cu WordPress, adăugarea acesteia pe site-ul dvs. nu este atât de dificilă pe cât ați putea crede. De fapt, poate fi realizat prin instalarea unui plugin precum Weglot, care vă permite să vă faceți site-ul web multilingv în câteva minute – fără a fi nevoie de cod.

Weglot este, de asemenea, compatibil cu toate temele și pluginurile WordPress, ceea ce înseamnă că va funcționa pe orice temă pe care o vei folosi și nu va cauza probleme cu celelalte plugin-uri. Când este adăugat la una dintre temele WordPress premium ale WP Engine, Weglot îi ajută pe proprietarii de site-uri să construiască un site prietenos cu SEO, receptiv pentru mobil, care poate fi accesat în orice limbă.

Consultați acest ghid pentru a afla mai multe și vizitați WP Engine pentru a afla despre diferitele noastre planuri și despre celelalte caracteristici și funcționalități care vin cu Platforma noastră de experiență digitală pentru WordPress.

Reactivitate mobilă pentru SEO

Mai simplu spus, site-urile web compatibile cu dispozitivele mobile sunt recompensate de Google în rezultatele căutării organice. Între 2015 și 2016, la algoritmul de clasare au fost adăugate o serie de actualizări pentru a favoriza site-urile web receptive. Este important de remarcat faptul că, deoarece viteza joacă un rol enorm în uşurinţa utilizării pentru utilizatorii de telefonie mobilă, acest lucru contribuie, de asemenea, la o mai bună clasare în motoarele de căutare.

Desigur, site-urile web receptive cu încărcare rapidă se bazează pe găzduire stelar pentru a reuși. Când alegeți o companie de găzduire de calitate, cum ar fi WP Engine (oferim PHP 7 ca standard și o rețea de livrare de conținut gratuită pentru planuri de nivel superior), veți observa timpi de încărcare mai rapidi și o funcționare mai lină peste tot.

Construiți în mod receptiv cu WP Engine

Lucrul pentru un site web receptiv ar trebui să fie o prioritate în lumea noastră bazată pe dispozitive mobile. Sunt multe de urmărit, dar aici, la WP Engine, vă putem ajuta să vă îndreptăm către cele mai bune resurse pentru dezvoltatori WordPress și teme foarte receptive pentru utilizatorii de telefonie mobilă.

În plus, avem o mare varietate de planuri și soluții pentru site-ul dvs. Vă vom ajuta să construiți în mod receptiv pe platforma noastră de experiență digitală și nu va trebui să vă faceți griji că pierdeți vizitatori din cauza dimensiunilor ecranului!