Kako testirati responzivni dizajn? Najbolji alati za testiranje responzivnog izgleda Provjerite responzivnost stranice

Test pokazuje kako responzivna web stranica izgleda na različitim Mobilni uredaji Oh. Da bi bila testirana, vaša stranica mora podržavati učitavanje i rad u okvirima. Radi lakšeg gledanja, prebacite svoj preglednik na prikaz preko cijelog zaslona.

Ček

Što je responzivna web stranica?

Responzivno web mjesto automatski se prilagođava širini uređaja. U tom slučaju blokovi web mjesta mogu se sakriti ili izmijeniti. Na primjer, na računalu se logo i izbornik stranice nalaze slijeva nadesno, a na telefonu odozgo prema dolje.

Koja je razlika između responzivne web stranice i mobilne verzije?

Ako stranica ima mobilnu verziju, prilikom učitavanja takve stranice s mobilnog telefona bit ćete preusmjereni na drugu adresu: site.ru → m.site.ru. Mobilna verzija je zasebna stranica s drugom adresom.

Ako stranica nema mobilnu verziju, adresa stranice se neće promijeniti prilikom učitavanja s telefona. Na telefon će se preuzeti isti podaci kao i na računalo. Najčešće je to nezgodno za korisnika, jer je zaslon telefona nekoliko puta manji.

Ovaj problem se može riješiti na dva načina: dodajte mobilnu verziju m.site.ru ili NE napravite zasebnu stranicu, već je dodajte na svoju glavnu stranicu prilagodljivost. To su posebni stilovi i skripte koje se uključuju ako je širina zaslona premala: na primjer, sakrijte izbornik, povećajte font, prikažite male umjesto velikih slika itd.

Strogo govoreći, ne možete usporediti responzivnu web stranicu i mobilnu verziju web stranice. U biti responzivna web stranica = Puna verzija+ verzija za tablete + verzija za telefone (mobilne), i sve to u jednoj bočici. Odnosno, jedan koncept je sadržan u drugom.

Adaptivna web stranica kombinira običnu web stranicu (za računala) i mobilnu (za telefone), te nekoliko srednjih opcija (veliki telefoni, tableti, televizori itd.). Glavna prednost responzivne web stranice je da izgleda dobro na bilo kojoj širini zaslona.

Zašto je širina telefona u ovoj usluzi tako mala?

Stvarni broj piksela na modernim gadgetima obično je vrlo velik, a web stranice nisu dizajnirane za tako veliku širinu. Stoga mobilni uređaji sa zaslonima visoke razlučivosti otvaraju web stranice, dovodeći ih u određeni virtualni standard. Kako biste sami saznali ove brojeve, kliknite gumb otvaranjem ove stranice sa svog telefona ili tableta:

Koja je veličina prozora mog preglednika?

Na uređajima sa zaslonima sličnim retina, prikazane dimenzije razlikovat će se od stvarne rezolucije piksela navedene u specifikaciji uređaja. Pametni telefoni će prikazati 320x480 ili 480x800 piksela, tableti - 1280x800.

Prestanite mijenjati veličinu prozora preglednika, prestanite ga silovati! Kladim se da ste ovo čuli više puta. U redu, možda niste čuli za to. Ali ako profesionalno razvijate responzivna web-mjesta, znate na što mislim: svaka promjena DOM-a ili uređivanje CSS-a, a vi ponovno počnete povlačiti rub preglednika naprijed-natrag, testirati promjene i vidjeti je li nešto pokvareno.

Svrha vaših pokreta je oponašanje zaslona raznih uređaja.

U korporativnom okruženju često imate razne gadgete koje tvrtka daje na testiranje. Na poslu imam iPad, iPod, druge tablete, prijenosna računala i desktop monitore na raspolaganju. Ako nemate taj luksuz, morate koristiti ono što vam je pri ruci.

Srećom, postoji impresivan skup online alata koji simuliraju različite veličine uređaja. Naravno, svaki od njih ima svoje prednosti i nedostatke, pogledat ćemo nekoliko ovih alata.

Za testiranje sam odabrao istinski responzivnu web stranicu PyjamasOnYourFeet.com, web stranica je izgrađena na temelju HTML5 predloška koji besplatno pruža EGrappler.

Odgovaram li?

Am I Responsive, vrlo jednostavan alat koji vam omogućuje brzi pregled vaše stranice na do 4 uređaja. Svi su iOS i programer to objašnjava kao značajku stranice. Općenito, bez postavki, bez izbora, ali vrlo jednostavno i jasno.

Dostupne veličine:

• desktop monitor - 1600 x 992px;
• prijenosno računalo - 1280 x 802px;
• tablet - 768 x 1024px;
• mobitel - 320 x 480px.

Da citiram programera: “Ovo nije alat za testiranje, iznimno je važno testirati na stvarnim uređajima. A ovaj će vam alat pomoći da brzo napravite snimku zaslona i pokažete klijentu što mislite.”

Postoje dvije zgodne značajke: mogućnost povlačenja uređaja preko zaslona i mogućnost dijeljenja veze na test web mjesta.

uređaj pozitivan

deviceponsive je vrlo sličan Am I Responsive, jer je jednako jednostavan, s minimalnim postavkama i opcijama. Svi dostupni uređaji prikazani su odjednom na jednoj dugačkoj stranici. Od svih dostupnih opcija, ovo je mogućnost da uredite pozadinu zaglavlja i tamo dodate svoj logo, što će biti korisno kada odlučite podijeliti snimku zaslona.

Uređaji i dostupne rezolucije zaslona.

• Macbook - 1280 x 800
• iPad portret - 768 x 1024
• iPad portret - 1024 x 768
• Kindle portret - 600 x 1024
• Kindle pejzaž - 1024 x 600
• iPhone portret - 320 x 480
• iPhone pejzaž - 480 x 320
• Portret galaksije - 240 x 320
• Pejzaž galaksije - 320 x 240

Poput većine sličnih alata, prikazuju se trake za pomicanje koje ne bi bile prisutne na stvarnim uređajima. Ovo je nužan korak za omogućavanje pomicanja na uređajima bez dodira.

odgovarajući test

Kao deviceponsive, responzivni test prikazuje vašu web stranicu u razne uređaje. Ali umjesto da ih prikažete sve odjednom, vi birate uređaj koji vam je potreban gornji izbornik stranice. Usput, skaliranje ovdje radi ispravno, što vam omogućuje testiranje veće rezolucije na manjoj.

Na stranici je dostupno 30 različitih rezolucija, u rasponu od ogromnog stolnog monitora do onoga što nazivaju "usranim androidom" (da budemo pošteni, postoji i normalan android).

O Firefox preglednik, onda ne radi malo ispravno s ovom stranicom. Imajte na umu da snimka zaslona ne prikazuje klizač između zelenog zaglavlja i bijele pozadinske površine sadržaja.

odgovarajući.je

Vrlo sličan prethodna dva alata, ali postoji jedna stvar koja izdvaja responsive.is od ostalih. Ovo je glatka animacija pri prelasku s jednog uređaja na drugi, kao i poluprozirno područje koje prikazuje stvarno područje stranice koje ne spada u područje gledanja.

Dostupne opcije uređaja su automatski (način na koji vidite stranicu), stolno računalo, tablet u pejzažnoj i portretnoj orijentaciji, pametni telefon u portretnoj i pejzažnoj orijentaciji. Nažalost, nije moguće postaviti proizvoljne veličine u px.

Zaslonski upiti

Ali mogućnosti i dostupne opcije razlikuju Screenqueries od prethodnih usluga. Ovdje je prikazano 14 telefona i 12 tableta, s odvojenim opcijama za prebacivanje između portretnog i pejzažnog načina rada. Rezultati se prikazuju na mreži s ravnalima. Također je moguće postaviti prilagođenu rezoluciju povlačenjem desnog ili donjeg ruba.

Zanimljiva značajka ove stranice je da za brojne uređaje postoji opcija "Trueview" koja prikazuje vašu stranicu u izvornom pregledniku uređaja.

Nažalost, Firefox ni ovdje nije mogao prikazati klizač. Ne trebate me kriviti, Firefox je moj omiljeni preglednik, ali to je tako.

sitan mušica

Screenfly je možda najfunkcionalniji od svih. Dostupno je 9 više od tablet uređaja - od 10" prijenosnih računala, do 24" monitora, 5 tableta, 9 telefona, 3 TV rezolucije, kao i prilagođene rezolucije. Ovdje dodajte poseban prekidač za portretni i pejzažni način rada, kao i opciju za prikaz pomicanja. Također možete podijeliti poveznicu na test koristeći jedan gumb.

Za svaki uređaj u izborniku je naznačena veličina zaslona u px, au gornjem desnom kutu prikazana je i stvarna veličina prozora vašeg preglednika.

Sve gore navedene prednosti omogućuju nam da tvrdimo da smo vodeći, ako ne i jedna stvar (citat razvojnog programera): “Screenfly može koristiti proxy poslužitelj za oponašanje uređaja dok gleda vašu stranicu. Proxy oponaša niz korisničkog agenta, ali ne i ponašanje ovih uređaja." Screenfly je jedina usluga na popisu koja omogućuje testiranje na temelju niza korisničkog agenta.

Koristite li predstavljene alate u svojoj praksi? Podijelite svoje tajne razvoja responzivnih web stranica u komentarima.

p.s. Sve pogreške u vezi s prijevodom prijavite putem PM-a.

“Voditelj projekta Business Motor tima, webmaster, copywriter.
Mobilna prilagodba važna je faza rada s web stranicom. S uvođenjem čimbenika mobilnog rangiranja, onboarding je postao još važniji. Mi vam kažemo kako provesti osnovno testiranje mobilnosti web stranice"

Lakoća prikazivanja web stranice na mobilnim uređajima faktor je čija važnost posljednjih godina stalno raste. I to ne samo zbog sve većeg broja korisnika koji stranice pregledavaju s pametnih telefona i tableta, već i zbog rangiranja na razini tražilice.

Google je službeno objavio utjecaj ovog faktora na poziciju stranice 21. travnja 2015. Nedavno su se informacije o tome pojavile na blogu Yandex. Algoritam, koji uzima u obzir pogodnost prikazivanja stranice na mobilnim uređajima, nazvan je "Vladivostok" i, prema predstavnicima Yandexa, već se aktivno implementira u Rusiji.

Važnost prilagodbe web stranica vašim potrebama mobilnih korisnika raste i nastavit će rasti. Prilagodba mobilnim uređajima odrazit će se i na konverziju posjetitelja i na rangiranje stranica u rezultatima pretraživanja. Ali kako znati ispunjava li vaš projekt ove zahtjeve? Kako odrediti je li stranica prilagođena mobilnim uređajima u svakom detalju? O tome ćemo govoriti u našoj današnjoj recenziji.

Je li stranica prilagođena mobilnim uređajima?

Prva faza dijagnostike je da sami otvorite stranicu na mobilnim uređajima. Ali ni tu nije sve tako jednostavno kao što se možda čini jer se određeni problemi s responzivnošću mogu manifestirati samo u određenim preglednicima i na određenim veličinama zaslona. Iz tog razloga preporučujemo pokretanje testova:

• na pametnom telefonu s okomitom orijentacijom zaslona (uključujući uske zaslone širine oko 300 piksela);
• na pametnom telefonu s vodoravnom orijentacijom zaslona (od 480 piksela širine);
• na tabletima s okomitom i vodoravnom orijentacijom zaslona (od širine 768 piksela).

Sasvim je prirodno da isprobate stranicu različite uređaje nije uvijek neugodno. Barem zato što možda nemate sve potrebne gadgete pri ruci. Ovaj problem možete riješiti pomoću raznih mobilnih emulatora zaslona. Međutim, nije potrebno obratiti se uslugama trećih strana: takav je emulator unaprijed instaliran Google Chrome. Da biste ga koristili, samo otvorite stranicu koja vas zanima, pritisnite F12 (pozovite konzolu za razvojne programere) i kliknite na ikonu sa slikom mobilnog telefona:

Izuzetno je važno uzeti u obzir značajke mobilni preglednici, jer mogu imati i svoje karakteristike. Prilikom testiranja važno je pogledati stranicu na:

• unaprijed instaliran preglednik Android OS;
• Google Chrome mobilni;
• “brzi” preglednici – na primjer, Opera Mini ili UC Browser;
• Safari (na primjer, na iPhoneu).

Kako tražilice vide vašu stranicu?

Prvi automatska provjera, koji vrijedi proći ako vas zanima problem prilagodljivosti vaše web stranice, jest Googleov test prilagođenosti mobilnim uređajima. Ovaj je alat prilično jednostavan i daje jasnu presudu o optimizaciji stranice za mobilne uređaje. A ako je odgovor ne, stranica se gotovo sigurno smatra nezgodnom za male ekrane i na razini Google algoritama – sa svim posljedicama.

Ako postoje pritužbe na formatiranje sadržaja na zaslonima pametnih telefona, one će biti navedene ovdje. To će vam omogućiti da brzo dijagnosticirate određene probleme sa zaslonom i odmah prijeđete na njihovo rješavanje:

Imajte na umu: snimak zaslona stranice na mobilni ekran u rezultatima skeniranja možda neće odgovarati onome kako vidite na svom pametnom telefonu. Najčešće je to zbog činjenice da prilagođen mobilnim uređajima test, uključene su samo datoteke koje je indeksirala tražilica, a stilske (css) i skriptne (js) datoteke često su zatvorene za indeksiranje na razini robots.txt. Usput, u skladu s najnovijim preporukama Googlea, trebali bi ih učiniti vidljivima tražilicama.

Optimizacija web stranice za mobilne uređaje na računu webmastera Google i Yandex

Važno je napomenuti da se informacije o tome koliko je stranica u skladu s idejama tražilica o jednostavnosti prikaza na mobilnim uređajima mogu dobiti na računima webmastera – Google Search Console i Yandex.Webmaster (zasad samo u beta verziji novog računa).

U Google Search Consoleu rezultati provjere trenutne stranice dostupni su ovdje: Promet pretraživanja => Lakoća pregledavanja na mobilnim uređajima. Ova stranica duplicira informacije iz kojih možemo dobiti pomoću mobitela prijateljski test, ali se daje za sve indeksirane stranice web mjesta jer ih indeksiraju Google roboti:

U novom računu webmastera u Yandexu još se ne prikazuju podaci o masovnoj aktualnoj provjeri. Umjesto toga, tamo možete pronaći alat sličan Googleovom testu prilagođenosti mobilnim uređajima. Uz njegovu pomoć možete ručno provjeriti smatraju li algoritmi tražilice određenu stranicu prikladnom za pregledavanje na pametnim telefonima.

p.s.

Kako se mjesto percipira i njegova prilagodljivost tražilice, iznimno je važno pitanje, ali korisničko iskustvo nije ništa manje važno. Dakle, prema formalnim kriterijima, stranica može u potpunosti zadovoljiti zahtjeve za lakoćom pregledavanja na mobilnim uređajima, ali u stvarnosti - za "žive" korisnike - ta će pogodnost biti upitna. Izravan rezultat toga je smanjenje konverzije, gubitak prodaje i pogoršanje čimbenika ponašanja (koji zauzvrat također utječu na rangiranje).

U sljedećem članku ove serije, za tjedan dana, reći ćemo vam kako vidjeti stranicu očima posjetitelja, kako pronaći “uska grla” u mobilnom prikazu i kojim kriterijima treba procijeniti njegovu upotrebljivost.

zaključke

Lakoća pregledavanja web stranice na mobilnim uređajima igra sve važniju ulogu u pretvorbi i rangiranju stranica u pretraživanju.

Prvi korak u procjeni prilagodljivosti web stranice je testiranje za različite ekrane i u različitim mobilnim preglednicima.

Googleov test prilagođenosti mobilnim uređajima, kao i odgovarajuće funkcije u računima webmastera (Google Search Console i novi ured webmaster u Yandexu).

Tražilice se trude poboljšati Rezultati pretraživanja korisnika mobilnih uređaja (pametni telefoni, tableti), dakle stranice optimizirane za različite veličine ekrani će biti prikazani više od stranica koje nemaju takvu optimizaciju. Ovo također uključuje mobilne verzije stranice.

Znakovi web stranice prilagođene mobilnim uređajima:

1. Lako čitljiv sadržaj (čitljiv bez povećanja), velika polja obrasca i gumbi.
2. Nedostatak "teških" slika, Flash elemenata i nepotrebne animacije.
3. Nedostatak Java apleta i Silverlight dodataka.
4. Nema horizontalne trake za pomicanje.
5. Minimalna brzina učitavanja stranice.
6. Što jednostavnija navigacija.
7. Dodana je meta oznaka okvira za prikaz.

Usluge provjere mjesta za "mobilnost"

Za prikaz funkcioniranja usluga uzmimo web stranicu mojih dobrih partnera - prevoditeljske agencije CONTEXT.

1. Google prilagođen mobilnim uređajima

Možete provjeriti bilo koje mjesto jednostavnim unosom njegove adrese u red.

Prikazuje na ekranu kako stranica izgleda na pametnom telefonu i daje ukupnu ocjenu njezine optimizacije za mobilne uređaje.

Za razliku od drugih usluga, ovdje možete provjeriti ne svaku stranicu, već samo svoju. Odnosno, nakon što je stranica dodana sučelju webmastera uz potvrdu prava na nju.

Usluga prikazuje ukupnu ocjenu, provjerava 6 točaka usklađenosti i prikazuje kako stranica izgleda na pametnom telefonu.

3. Bing alat za provjeru

Provjerava se opća optimizacija plus usklađenost s 4 točke.

Također prikazuje kako stranica izgleda na ekranu pametnog telefona (naravno, na OS windowsima, dok su prethodni servisi prikazivali Android pametni telefon =)).

4. Mobile Checker iz W3C

Najduža od svih usluga. Toliko "dugo" da nisam ni čekao da provjera završi =)

Čekao sam 5 minuta, dok su drugi servisi to rješavali za 5-20 sekundi.

5. Responsinator

Za razliku od ostalih, ne daje nikakve ocjene, ali prikazuje kako vaša stranica izgleda na 6 različitih uređaja u dvije orijentacije: IOS i Android, što je jako cool.

UPD1: 20.7.2017.:

6. Adaptivator

Usluga predložena u komentarima na ovaj članak. Osobno ga nisam koristio, ali čini mi se da je prilično dobar. Mogućnosti su slične responderu, ali postoji i procjena rezultata prilagodljivosti.

UPD2: 3.11.2017.:

7. iloveadaptive.ru

Još jedna nova usluga predložena u komentarima. Po mom mišljenju, malo je glomazan i nepraktičan, ali ovo se više nego isplati velikim mogućnostima. Postoji čak i sortiranje po OS-u.

Zaključak

Nedvojbeno, prilagodba web stranice za mobilne uređaje nije samo danak modi i vremenu, već nužan atribut moderne web stranice koja pomaže ne samo krajnjem korisniku.

Stoga preporučam svima koji žele biti bliže klijentu i imati više posjeta/leadova da što brže prilagode svoje web stranice. Pitaj me -

2015-09-11 8204 4 Denis Abdullin

Responzivni dizajn nije samo novi trend, već donekle i potreba. Sada su i ruske web stranice napravljene tako da izgledaju dobro, lijepo i zgodno na bilo kojem ekranu.

Dijelimo s vama popis online usluga provjere prilagodljivosti web stranice. Za razliku od drugih blogova, mi imamo samo najbolje usluge.

Napominjem da su u službenoj trgovini predložaka uCoz sve teme prilagodljive, jer... Ovo je jedan od glavnih uvjeta za objavu predloška za prodaju.

Screenfly – provjera prilagodljivosti web stranice odabirom uređaja

Usluga Screenfly je na prvom mjestu jer ima popis popularnih veličina zaslona Mobiteli, pametni telefoni, prijenosna računala i desktop računala. Naravno, možete postaviti vlastite dimenzije i vidjeti, također je moguće pregledavati stranicu preko proxy poslužitelja, omogućiti i onemogućiti skrolanje.

Mattkersley - sve veličine na jednoj stranici

Dobra stvar kod projekta je što unesete poveznicu na svoju stranicu, a ona je učitava u sve okvire koji se nalaze na stranicama. Možete odmah testirati stranicu na 5 veličina. Postoje 2 načina: jednostavno testirajte širinu ili pokažite nazive uređaja i njihovu visinu.

Responsive.is – provjerava odziv na više uređaja

Dobra i praktična usluga, ali stranicu možete provjeriti samo na 5 uređaja. U usporedbi s prethodnim uslugama, to je vrlo malo. Za one korisnike koji se izgube u svim tim veličinama, one ovdje nisu niti naznačene, samo su prikazane ikone uređaja.

Osobno ne koristim takve usluge, ali Samo smanjim širinu preglednika. Osim toga, usluge za provjeru prilagodljivosti web stranica rade istu stvar; bolje je pogledati svoj projekt na stvarnim uređajima, u standardnom Android preglednici i Safari na iPhoneu.

Postoje i druge usluge, uključujući i na ruskom. Prvo smo ih htjeli dovesti, ali oni su jednostavno kopirali gore navedene stranice, postojeći tekst je jednostavno preveden, samo umjesto "Phone", na primjer, vidjet ćete "Telephone".