Cum să vizualizați versiunea mobilă a site-ului web: în doar 3 clicuri

Te chinui cum să vezi versiunea mobilă a unui site web?

Ei bine, o soluție evidentă este să vă scoateți telefonul și să deschideți site-ul acolo. Dar dacă citiți această postare, probabil că nu este o opțiune pentru dvs. din anumite motive.

Din fericire, există o mulțime de alte modalități de a vizualiza versiunea mobilă a unui site web direct din browserul web de pe desktop. Deci, chiar dacă nu aveți acces la un telefon, veți putea vedea cu ușurință versiunea mobilă a unui site web, indiferent de situație.

În această postare, vom împărtăși patru metode simple pentru a previzualiza versiunea mobilă a unui site web:

• Primele două metode vor funcționa cu orice tip de site web, fie că este site-ul dvs. sau site-ul altcuiva și indiferent dacă este construit cu WordPress, Shopify, Wix, Squarespace sau orice altceva.
• Ultimele două metode sunt opțiuni specifice WordPress care vă arată cum să vizualizați versiunea mobilă a site-ului dvs. WordPress. Acestea vor funcționa numai dacă dețineți site-ul.

Cum să vizualizați versiunea mobilă a unui site web din browser

Indiferent dacă dețineți sau nu site-ul web, există două modalități simple de a vizualiza versiunea mobilă a oricărui site web de pe internet:

1. Utilizați instrumentele de dezvoltare ale browserului dvs. web. Chrome funcționează excelent pentru acest lucru, dar majoritatea celorlalte browsere web oferă instrumente similare.
2. Utilizați un instrument de emulator mobil dedicat. Tot ce faci este să introduci adresa URL pe care vrei să o vezi și vei putea să o răsfoiești ca un utilizator mobil.

Să trecem prin ambele metode. Apoi, mai târziu, vă vom arăta și cum să vizualizați versiunea mobilă a unui site web pe care îl construiți singur (pe WordPress).

Utilizați instrumentele de dezvoltare ale browserului dvs. web

Majoritatea browserelor precum Google Chrome, Safari, Firefox, Microsoft și Brave oferă instrumente pentru dezvoltatori care vă permit să explorați un site web, inclusiv să vedeți cum arată pe diferite dispozitive.

Cu instrumentele pentru dezvoltatori, puteți vedea rapid cum arată un site web pe diferite smartphone-uri, tablete și așa mai departe.

Pentru aceste exemple, vom presupune că utilizați Chrome (sau orice browser bazat pe Chromium, cum ar fi Brave). Cu toate acestea, majoritatea celorlalte browsere web oferă caracteristici similare, deși interfața va fi diferită.

Pentru a începe, faceți clic dreapta pe interfața site-ului dvs. și alegeți Inspectați din meniu:

Aceasta lansează instrumente pentru dezvoltatori și dezvăluie un modul în partea dreaptă cu elemente de codare din pagina respectivă.

Nu trebuie să vă faceți griji cu privire la codare, deoarece scopul principal este să comutați pentru a vizualiza versiunea mobilă a site-ului. Găsiți butonul mic Comutare Bara de instrumente dispozitiv (pare o pictogramă pentru telefon și tabletă) și faceți clic pe el pentru a activa vizualizarea mobilă.

Aceasta afișează automat o vizualizare mobilă receptivă, în care puteți modifica dimensiunile dispozitivului în funcție de dispozitivul pe care doriți să îl emulați:

Pentru a face această metodă și mai atrăgătoare, este una dintre puținele opțiuni cu setări implicite de dispozitiv încorporate, oferind o privire mai exactă asupra modului în care site-ul dvs. web apare pe dispozitivele din lumea reală.

De exemplu, puteți alege un iPad Pro și acesta ajustează instantaneu dimensiunile afișajului la cele ale unui iPad Pro.

Sau ai putea opta pentru Pixel 2 XL mai mic.

Sau și mai mic Galaxy Fold. Testați fiecare dintre dispozitivele de pe listă și asigurați-vă că site-ul dvs. web arată acceptabil pe fiecare.

Utilizați un tester sau un emulator online

Emulatoarele sunt în general utilizate pentru testarea aplicațiilor în mediile lor native, dar multe dintre ele sunt disponibile pentru capacitatea de răspuns a site-ului. De asemenea, puteți găsi testeri de bază online pentru a lipi adresa URL și pentru a vedea cum arată pe dispozitivele mai mici.

ResponsivePX.com este o opțiune viabilă, dar puteți găsi multe altele printr-o căutare rapidă online.

Motivul pentru care sugerăm oamenilor să încerce emulatoare și simulatoare este că acestea vă oferă mult mai mult control asupra dimensiunilor site-ului. Și sunt adesea mai simple decât utilizarea instrumentelor de dezvoltare ale browserului dvs.

Luați ResponsivePX.com de exemplu: accesați site-ul, lipiți adresa URL și vedeți imediat o versiune mobilă.

Vă permite să reglați lățimea, înălțimea și vizibilitatea barei de defilare. Puteți chiar să împărtășiți rezultatele cu oamenii din organizația dvs.

Cum să vizualizați versiunea mobilă a site-ului dvs. WordPress

Dacă lucrați pe propriul site WordPress, WordPress oferă și câteva opțiuni încorporate pentru a vă ajuta să vedeți cum va arăta site-ul dvs. pe dispozitivele mobile.

Când lucrați în editorul WordPress, puteți vedea rapid cum va arăta conținutul dvs. pe diferite dispozitive. De asemenea, puteți face același lucru în timp ce vă personalizați tema în Personalizatorul WordPress.

Să trecem prin aceste metode...

Vizualizați versiunea mobilă prin previzualizarea paginii sau a editorului de postări

Puteți vizualiza versiunea mobilă a unui site web, pagină cu pagină. De exemplu, poate doriți să vedeți dacă postarea dvs. actuală de blog pare prezentabilă în vizualizarea mobilă. De asemenea, este înțelept să verificați pagina dvs. de pornire pentru răspunsul mobil, mai ales după schimbarea designului.

Să începem cu pagina de pornire. Iată cum arată următorul site web dintr-o vizualizare desktop:

Puteți vedea o pagină individuală și puteți publica vizualizări mobile accesând filele Postări sau Pagini din tabloul de bord WordPress.

Pentru postările și paginile create anterior, accesați Toate postările sau Toate paginile .

Vom începe cu o pagină; mai precis, pagina de pornire. Selectați orice pagină doriți.

Fiecare pagină și postare din backend-ul WordPress oferă un link de previzualizare în colțul din dreapta sus. Selectați acel buton Previzualizare pentru a afișa un meniu derulant cu aceste opțiuni:

În mod implicit, WordPress arată versiunea pentru desktop.

Selectați vizualizarea pentru tabletă sau mobil pentru a vedea site-ul dvs. transformându-și elementele, cum ar fi imagini, videoclipuri, meniuri și casete de text, într-un format mai mic, mai ușor de citit și pe care se poate face clic.

Când testați site-ul dvs. în alte vizualizări, verificați dacă se poate da clic pe linkuri (nu prea mici), că activele sunt încă vizibile și că totul iese clar, fără a forța utilizatorul să mărească.

Acordați-vă timp pentru a derula în jos pe pagină pentru a verifica tot conținutul. Acest site, de exemplu, listează mai multe produse de comerț electronic pe pagina principală, cu imagini, nume de produse și butoane Adaugă în coș.

Arata decent, dar este posibil să ne dorim să trecem la două sau trei coloane de produse pentru a mări detaliile produsului.

Postările nu sunt diferite atunci când utilizați această metodă. Ele sunt pur și simplu localizate într-o secțiune separată a WordPress (Postări → Toate postările).

Având în vedere cum acestea conțin postările de pe blog și nu paginile web statice, este și mai important să testați compatibilitatea cu dispozitivele mobile. De ce? Pentru că multe companii publică zeci de postări pe blog în fiecare lună, cu actualizări minore ale paginilor. Dacă un blog este sursa dvs. principală de conținut, trebuie să vă asigurați că fiecare dintre ele este pregătit pentru mobil înainte de publicare.

Ca de obicei, accesați Previzualizare, apoi faceți clic pe Tabletă sau Mobil.

Vizualizarea Desktop arată uneori foarte asemănătoare cu vizualizarea Tabletă, așa că asigurați-vă că nu ați mărit în browser.

Vizualizarea Tabletă pare oarecum mai mică decât vizualizarea Desktop, dar cu spațiu negru în jurul conținutului site-ului, imitând o dimensiune mai realistă a tabletei.

Vizualizați versiunea mobilă a unui site web în Personalizatorul WordPress

Personalizatorul WordPress nu numai că vă oferă modalități excelente de a vă edita tema WordPress, dar are o previzualizare vizuală a site-ului dvs. pe măsură ce faceți modificări.

Din fericire, WordPress Customizer nu vă limitează doar la o previzualizare desktop. De fapt, este posibil să finalizați toate editările în timp ce vă uitați la vizualizarea unui telefon mobil sau tabletă.

Pentru a face acest lucru, accesați Aspect → Personalizare pentru a lansa Personalizatorul.

În mod implicit, iată cum arată Personalizatorul. Este în vizualizarea standard Desktop cu setări de ajustat în stânga și previzualizarea site-ului în dreapta.

Priviți în partea de jos a listei de setări pentru a găsi pictograme cu trei butoane: una pentru vizualizarea Desktop, alta pentru vizualizarea Tabletă și a treia pentru vizualizarea Mobile.

Faceți clic pe butonul Vizualizare tabletă pentru a vedea cum apar editările dvs. curente pe o interfață de dimensiunea unei tablete generale.

Butonul Mobile View face acea interfață mai mică, apropiindu-vă de dimensiunea standard a ferestrei unui smartphone mobil.

Notă: rețineți că aceste previzualizări backend mobile sunt estimative. Cu atât de multe tipuri de dispozitive în lume, nimeni nu va vedea exact același lucru.

Nu uitați de meniuri. Meniurile sunt notoriu deranjante pe dispozitivele mobile. Verificați pentru a vedea dacă dezvoltatorul temei a testat o cantitate considerabilă. Veți observa că meniul mobil este de obicei plasat într-un meniu ascuns de hamburger (trei linii orizontale) și că puteți ajunge la două meniuri (cum ar fi modul în care această temă oferă butoane de comerț electronic în partea de jos a ecranului).

Ca întotdeauna, abține-te să arunci o privire rapidă la prima pagină și să presupui că întregul tău site web este gata. Aceasta este o rețetă pentru a rata defecte minore care vă afectează experiența generală de utilizator.

Parcurgeți întregul site web în vizualizarea pentru tabletă, inclusiv totul, de la paginile de produse la articolele de blog și coșurile de cumpărături până la paginile Despre noi.

Și finalizați același proces în Vizualizare mobilă. Vă recomandăm în special să testați funcționalitatea comerțului electronic, deoarece ultimul lucru pe care îl doriți este un mic modul de finalizare a comenzii sau butonul Adaugă în coș.

Este ușor să vizualizați versiunea mobilă a unui site web

Cea mai flexibilă opțiune este să utilizați instrumentele de dezvoltare ale browserului dvs. Acest lucru va funcționa indiferent de ce. Atâta timp cât puteți deschide versiunea desktop a site-ului web, puteți previzualiza versiunea mobilă folosind instrumente pentru dezvoltatori.

Abordarea emulatorului funcționează și cu majoritatea site-urilor web, deși site-ul trebuie să aibă o adresă URL accesibilă public pentru ca emulatorul să poată prelua site-ul.

Pe de altă parte, dacă sunteți un utilizator WordPress, vă puteți baza pe instrumentele de previzualizare receptive încorporate ale WordPress pentru a face treaba în timp ce lucrați pe site-ul dvs. Sau, celelalte metode funcționează excelent și pentru site-urile WordPress.

Dacă aveți nevoie de o vizualizare mobilă pentru a lucra pe propriul site, vă recomandăm să consultați și ghidul nostru pentru crearea unui site web adaptat pentru dispozitive mobile, pentru câteva sfaturi despre ce să acordați atenție în timp ce previzualizați versiunea mobilă a site-ului dvs.

Mai aveți întrebări despre cum să vedeți versiunea mobilă a unui site web? Spune-ne în comentarii!