În acest articol am să prezint câteva posibilități cu ajutorul cărora putem verifica cum se vede site-ul sau blogul pe diferite dispozitive portabile. Mai exact, cum apare tema pe diferite tipuri de telefoane sau tablete.
Google a început să pună mare preț pe optimizarea site-urilor pentru smartphone-uri și tablete, datorită creșterii masive ale utilizării acestor dispozitive în ultimii ani. Nu s-a gandit rau din punctul de vedere al cititorului, dar pentru autorii de site-uri și bloggeri, această schimbare nu va fi tocmai ușoară. Și am să vă spun și de ce.
Dacă acum câțiva ani consumatorii de internet stăteau acasă în fața desktopului, și citeau știrile. Acum, aceștia o fac de pe mobile și tablete, în timp ce merg cu trenul, metroul, mașina (nu dacă și conduc), când stau în parc, când merg în vacanțe etc. Voi știți mai bine cum stă treaba. Și eu, la rândul meu, citesc știrile de pe mobil și tabletă. Așa că știu ce vorbesc.
La polul opus sunt bloggerii și autorii de site-uri. Chiar dacă și ei sunt consumatori de informații de pe dispozitivele mobile, trebuie să se ocupe și de optimizarea site-ului pentru a fi lizibil pe mobil și tabletă. Pentru a rezolva această problemă, putem apela la următoarele lucruri:
- instalăm un plugin care permite adaptarea site-ului pentru diferite dimensiuni de ecran. Vedeți aici cum optimizăm site-ul pentru mobil și tabletă cu ajutorul unui plugin wordpress . Aceasta metodă este gratuită, dar nu este 100% cea mai potrivită. Nu poate fi compatibilă cu absolut toate modelele de telefoane, dar pe cele de ultimă generație le suportă fără probleme.
- utilizăm o temă responsive. Adică o temă care se poate adapta pe absolut toate dimensiunile de ecrane. Numai că o temă bună nu găsim prea ieftin. Sau putem să o creăm noi, în cazul în care ne pricepem la webdesign.[adsense float=”center”]
Presupunând că am luat măsurile necesare pentru a avea un site / blog optimizat, atunci ar mai rămâne să îl testăm. Dacă nu avem de pe ce să testăm, apelăm la varianta online.
Instrumente pentru testarea site-ului pe mobil și tabletă
1. ipad Peek. Acesta este un instrument destul de popular cu ajutorul căruia putem vedea cum apare site-ul pe iPad sau iPhone. Pentru o acuratețe cât mai bună, este recomandată utilizarea browser-ului Safari sau Google Chrome. Utilizarea instrumentului este gratuită.
2. Screenfly permite vizualizarea site-ului de pe o varietate de dispozitive și rezoluții:
- desktop (de la 10 inch până la 24)
- tablete: Kindle Fire HD 7″, Kindle Fire, Samsung Galaxy Tab, Google Nexus 7, Apple iPad 1-3/mini, Kindle Fire HD 8.9″
- telefoane: Motorola RAZR V3m, Motorila Razor V8, BB 8300, iPhone 3/4/5, LG Optimus S, Samsung Galaxy S2/3/4 etc
3. Mobile Phone Emulator este un instrument foarte interesant, care testează de pe o mulțime de telefoane. În teste mi-a afișat cu optimizarea pe care eu am făcut-o cu ajutorul plugin-ului de care vă vorbeam în articolul de mai sus.
4. The Responsinator. Foarte bun, dar trebuie să aveti răbdare cu el. După ce introduceți url-ul site-ului, așteptați puțin până se va termina de încarcat. Browser-ul va consuma ceva RAM.
5. Matt Kersley’s Responsive Design Testing. Afișează în funcție de diferite rezoluții.
Mă opresc la acestea. Sunt foarte multe, dar cele prezentate mai sus cred că sunt suficiente pentru a ne testa tema site-ului sau a blog-ului. Vă ofer o scurtă introducere în responsive web design, și de ce să utilizăm o asemenea temă.
Pe acest blog folosesc varianta cu plugin-ul, dar în perioada următoare am în vedere achiziționarea unei teme responsive. Voi vedea ce și cum.
Ce alte metode de testare a site-ului de pe mobil și tablete sunt? Voi ce folositi pentru a vedea cum arată site-ul de pe smartphone?
Ultima actualizare 16 January 2022 by Alexandru Ionut
De curand am inceput sa produc teme wordpress responsive si pot sa spun ca am le-am testat cu Matt Kersley’s Responsive Design Testing.Bune informatiile tale si cu ocazia asta aflu si de alte site-uri unde pot sa fac la fel.
Stiam ca faci teme, dar nu stiam ca ai ajuns la un nivel asa avansat :). Ma bucur ca te ajuta articolul. Intr-adevar, sunt site-uri foarte interesante cele prezentate de mine mai sus.
Intarziatule :D http://blog.chestiiutile.com/web-development/cum-arata-blogul-meu-pe-telefon.html
Scz mane.. nu iti vazusem articolul :D. Lasa ca nu sunt identice.
Daca-mi permiteti, instrumente gratuite pentru testarea website-ului pe dispozitive mobile sunt mult mai multe (eu recunosc faptul ca folosesc mai mult responsinator.com, care-mi place la nebunie, arata asa, simplut, ca Google si nu-mi streseaza singurul meu neuron in viata ;) )
La mine responsinator.com merge aproape instantaneu, nu am avut probleme de asteptare.
Am incaput sa realizez cu adevarat website-uri adaptate pentru mobil (si sa le dau importanta) de acum catva timp, cand am avut de realizat 2 website-uri pentru 2 firme de tractari auto.
Pentru aceste firme este esential ca site-ul sa fie adaptat si pentru mobil. Daca-mi permiteti o gluma, sunt rari oamenii care, atunci cand raman cu masina in pana au computerul desktop la ei si sunt si mai rari aceia la care desktopul are curent si e conectat la net. ;)
Multi te cauta pe smartphone si te suna. Tot un lucru util este si posibilitatea de a te suna direct din website,iar butonul pentru convorbirea telefonica sa apara DOAR cand website-ul este vizionat pe mobil.
Pentru aceasta eu am folosit in WordPress 2 metode: template-uri gata adaptate (am folosit variantele gratuite ale temelor produse de http://www.inkthemes.com, descarcate de pe wordpress.org) sau, a doua metoda a constat in folosirea unor teme responsive (adaptate pentru mobil) si a pluginului Call now button (http://wordpress.org/plugins/call-now-button/), care introduce acel buton suplimentar. Ultima versiune a pluginului nu-mi place, butonul nu mai este verde cu un receptor alb, ci este transparent si este mai greu vizibil pe fondul site-ului.
Ar mai fi de spus multe, dar nu-mi permit sa monpolizez blogul omului, scuze pentru comentariul foarte lung.
Multumesc de feedback. Nu ai de ce sa te scuzi. Comentariile lungi si la subiect, aduc valoare.
vreau sa spun ca eu acum o saptamana mi-am luat un samsung chat on si chiar scriu de pe el. am ramas placut surprins sa vad ca siteu-ul tau l-ai adaptat ptr versiunile mobile ceea ce inseamna plus trafic.
sper ca nu o sa-l schimbi ca nu o sa mai am ce sa citesc :D
Am folosit un plugin până acum ceva vreme, dar nu funcționa corect decât pentru iPhone. Acum am făcut update la temă, iar dezvoltatorii mi-au oferit șansa de a avea una responsive. Apare foarte ok pe toate telefoanele. Te mai aștept pe aici.
De ce sa te complici cu fel de fel de plug-in-uri, cand poti doar sa aduci fereastra browser-ului la rezolutia dispozitivelor vizate, in cazul temelor responsiv….
În cazul temelor responsive, dar atunci când am scris articolul, tema blogului nu era responsive. Așa că eu mă foloseam de un plugin.
PS: mă gândesc că nu te cheamă M, așa că te-am botezat :D. Am nimerit-o, n-am nimerit-o, asta e.
Exemplu, tema ta e ok, singurul defect care l-am observat este textul cu numele blogului care, la rezoluti mai mici de 320p (Blackberry), nu se vede tot…..insa, cine a vazut tema perfecta!
Tema a devenit resposive de scurtă vreme :). Am observat că numele blogului se vede cam mare pentru anumite rezoluții, dar nu e o așa mare problemă. Mulțumesc de feedback.
Poti vedea o tema foarte usor cu dev tools, exista apps (trebuie instalat manual) atat pentru google chrome, cat si pentru mozilla. Poti simula rotirea device-ului (ai mai multe posibilitati din care alegi) si este cam identic cu cele prezentate de tine mai sus. Am intrat de curiozitate pe unul dintre site-uri, dar nu este nicio diferenta…
E posibil să fie mai dificil de utilizat de către anumite persoane.
Interesante site-urile propuse de tine, le-am pus la favorites.