Hogyan teszteljük a reszponzív tervezést? A legjobb eszközök a reszponzív elrendezés tesztoldalának érzékenységének tesztelésére

A teszt megmutatja, hogyan néz ki egy reszponzív webhely különböző oldalakon mobil eszközökÓ. Az ellenőrzéshez webhelyének támogatnia kell a betöltést és a keretekben való munkát. A jobb megjelenítés érdekében állítsa böngészőjét teljes képernyős módba.

Ellenőrizze

Mi az a reszponzív weboldal?

A reszponzív weboldal automatikusan az eszköz szélességéhez igazodik. Ugyanakkor a webhelyblokkok elrejthetők vagy módosíthatók. Például számítógépen a webhely logója és menüje balról jobbra, telefonon pedig fentről lefelé található.

Mi a különbség a reszponzív weboldal és a mobil verzió között?

Ha a webhelynek mobil verziója van, akkor egy ilyen webhely mobiltelefonról való betöltésekor egy másik címre lesz átirányítva: site.ru → m.site.ru. A mobil verzió egy külön webhely, más címmel.

Ha az oldalnak nincs mobil verziója, az oldal címe nem változik a telefonról történő betöltéskor. A telefonra ugyanazok az adatok töltődnek le, mint a számítógépre. Leggyakrabban ez kényelmetlen a felhasználó számára, mert a telefon képernyője többszörösen kisebb.

Ez a probléma kétféleképpen oldható meg: adja hozzá az m.site.ru mobil verzióját, vagy NE hozzon létre külön webhelyet, hanem adja hozzá a fő webhelyéhez alkalmazkodóképesség. Ezek speciális stílusok és szkriptek, amelyek akkor jelennek meg, ha a képernyő szélessége túl kicsi: például elrejtheti a menüt, növelheti a betűtípust, kis képeket jeleníthet meg nagyok helyett stb.

Szigorúan véve nem lehet összehasonlítani egy reszponzív webhelyet és egy webhely mobil verzióját. Lényegében reszponzív webhely = teljes verzió+ verzió táblagépekhez + verzió telefonokhoz (mobil), és mindez egy üvegben. Vagyis az egyik fogalom egy másikba van zárva.

Az adaptív webhely a hagyományos (számítógéphez) és a mobilhoz (telefonokhoz), valamint a több köztes lehetőséget (nagy telefonok, táblagépek, tévék stb.) egyaránt kombinálja. A reszponzív webhely fő előnye, hogy bármilyen képernyőszélességen jól néz ki.

Miért olyan kicsi a telefon szélessége ebben a szolgáltatásban?

A modern kütyükön található pixelek valós száma általában nagyon nagy, és a webhelyeket nem ilyen hatalmas szélességre tervezték. Ezért a nagy felbontású képernyővel rendelkező mobileszközök webhelyeket nyitnak meg, és egy bizonyos virtuális szabványhoz hozzák őket. Ha saját maga szeretné megtudni ezeket a számokat, kattintson a gombra az oldal megnyitásával telefonján vagy táblagépén:

Mekkora a böngésző ablakom?

A retinoszerű kijelzővel rendelkező eszközökön a megjelenített méretek eltérnek az eszköz specifikációjában szereplő tényleges pixelfelbontástól. Az okostelefonok 320x480 vagy 480x800 pixeles, a táblagépek 1280x800-as felbontásban jelennek meg.

Hagyd abba a böngészőablak átméretezését, ne erőszakoskodj! Fogadok, hogy ezt többször hallottad. Oké, lehet, hogy nem hallottad. De ha Ön egy professzionális, rugalmas webfejlesztő, akkor tudja, mire gondolok: bármilyen DOM-módosítás vagy CSS-módosítás, és elkezdi újra előre-hátra húzni a böngésző szélét, teszteli a változtatásokat, és megnézi, hogy elromlott-e valami.

A mozdulatok célja a különböző eszközök képernyőjének szimulálása.

Vállalati környezetben gyakran sok, a vállalat által biztosított modullal lehet tesztelni. Munkahelyemen iPad, iPod, egyéb táblagépek, laptopok és asztali monitorok állnak rendelkezésemre. Ha nincs meg ez a luxus, akkor azt kell használnod, ami kéznél van.

Szerencsére számos olyan online eszköz áll rendelkezésre, amelyek különféle eszközméreteket szimulálnak. Természetesen mindegyiknek megvannak a maga előnyei és hátrányai, több ilyen eszközt is megvizsgálunk.

Tesztelésre a PajamasOnYourFeet.com nevű, igazán reszponzív oldalt választottam, amely az EGrappler által ingyenesen biztosított HTML5-sablonra épül.

Érzékeny vagyok?

Am I Responsive, egy nagyon egyszerű eszköz, amellyel gyorsan megtekintheti webhelyét 4 eszközön. Mindegyik IOS, és a fejlesztő ezt a webhely egy funkciójával magyarázza. Általában nincs beállítás, nincs választási lehetőség, de nagyon egyszerű és világos.

Elérhető méretek:

• asztali monitor - 1600 x 992 képpont;
• laptop - 1280 x 802 képpont;
• táblagép - 768 x 1024 képpont;
• mobiltelefon - 320 x 480 képpont.

Idézem a fejlesztőt: „ez nem egy tesztelő eszköz, rendkívül fontos, hogy valódi eszközökön teszteljünk. Ezzel az eszközzel pedig gyorsan képernyőképet készíthet, és megmutathatja az ügyfélnek, mire gondol.”

Két nagyszerű funkció van: az eszközök körbehúzása a képernyőn, valamint a teszthelyre mutató hivatkozás megosztása.

eszköz-pozitív

A deviceponsive nagyon hasonlít az Am I Responsive-hoz, mivel ugyanolyan egyszerű, minimális beállításokkal és lehetőségekkel. Az összes elérhető eszköz egyszerre megjelenik egy hosszú oldalon. Az összes rendelkezésre álló lehetőség közül ez a lehetőség a fejléc hátterének szerkesztésére és a logó hozzáadására, ami hasznos lesz, ha úgy dönt, hogy megoszt egy képernyőképet.

Eszközök és elérhető képernyőfelbontások.

• Macbook - 1280x800
• iPad portré – 768 x 1024
• iPad portré – 1024 x 768
• Kindle portré – 600 x 1024
• Kindle fekvő – 1024 x 600
• iPhone portré - 320 x 480
• iPhone fekvő tájolás – 480 x 320
• Galaxis portré – 240 x 320
• Galaxis fekvő – 320 x 240

A legtöbb hasonló eszközhöz hasonlóan olyan görgetősávok jelennek meg, amelyek nem lennének valódi eszközökön. Ez egy kényszerített lépés a görgetés engedélyezéséhez nem érintős eszközökön.

reszponzív teszt

Az eszközérzékenyhez hasonlóan az adaptív teszt is megjeleníti a webhelyet különféle eszközök. De ahelyett, hogy egyszerre jelenítené meg, Ön maga választja ki a szükséges eszközt főmenü oldalakat. Itt egyébként korrektül működik a skálázás, amivel nagyobb felbontást is tesztelhetünk egy kisebben.

Az oldalon 30 féle felbontás érhető el, a hatalmas asztali monitortól az általuk "vacak androidig" (az igazat megvallva, van egy normál android is).

Vonatkozó Firefox böngésző, akkor nem működik megfelelően ezzel az oldallal. Figyelje meg, hogy a képernyőképen nem látható a zöld fejléc és a fehér háttér tartalomterülete közötti csúszka.

érzékeny.is

Nagyon hasonlít az előző két eszközhöz, de van egy dolog, ami miatt a responsive. különbözik a többitől. Ez egy sima animáció, amikor egyik eszközről a másikra mozog, valamint egy félig átlátszó terület, amely megmutatja a webhely valós területét, amely nem esik a látómezőbe.

A rendelkezésre álló eszközopciók: automatikus (ahogyan látja a webhelyet), asztali számítógép, táblagép fekvő és álló, okostelefon álló és fekvő módban. Sajnos nem állíthat be tetszőleges méretet px-ben.

Screenqueries

De a lehetőségek és a rendelkezésre álló lehetőségek megkülönböztetik a képernyőlekérdezéseket a korábbi szolgáltatásoktól. 14 telefon és 12 táblagép található itt, külön lehetőséggel az álló és fekvő mód között váltani. Az eredmények vonalzókkal ellátott rácson jelennek meg. Lehetőség van tetszőleges felbontás beállítására a jobb vagy az alsó szél húzásával is.

Ennek a webhelynek egy érdekessége, hogy számos eszköz esetében létezik egy „TrueView” opció, amely megjeleníti webhelyét az eszköz natív böngészőjében.

Sajnos a Firefox itt sem tudta megjeleníteni a csúszkát. Nem kell hibáztatni, a Firefox a kedvenc böngészőm, de a dolgok így állnak.

Screenfly

A Screenfly talán a legfunkcionálisabb az összes közül. A táblagépnél 9-nél több készülék érhető el - 10"-os laptoptól, akár 24"-es monitorig, 5 táblagép, 9 telefon, 3 TV-felbontás, valamint egyedi felbontások. Adjon hozzá egy külön kapcsolót az álló és fekvő módhoz, valamint a görgetés megjelenítésének lehetőségét. A teszt linkjét is megoszthatja egyetlen gombbal.

Minden eszköznek van egy képernyőmérete px-ben a menüben, és a böngészőablak tényleges mérete a jobb felső sarokban jelenik meg.

Mindezek az előnyök lehetővé teszik a vezető szerep megszerzését, ha nem egy dologról lenne szó (fejlesztői idézet): „A Screenfly proxyszervert használhat eszközök utánzására, miközben böngészi az Ön webhelyét. A proxy a felhasználói ügynök karakterláncot utánozza, de nem ezeknek az eszközöknek a viselkedését." A Screenfly az egyetlen szolgáltatás a listán, amely lehetővé teszi a felhasználói ügynök karakterláncon alapuló tesztelést.

Használja ezeket az eszközöket a gyakorlatában? Oszd meg kommentben a reszponzív webhelyek fejlesztésének titkait.

P.S. Fordítási hibákat kérünk személyesen jelezni.

„A Business Motor csapat projektmenedzsere, webmester, szövegíró.
Mobil adaptáció- az oldallal végzett munka fontos szakasza. A mobil rangsorolási faktor bevezetésével az onboarding még fontosabbá vált. Elmondjuk, hogyan kell elvégezni az alapvető webhely mobilitási tesztelését»

Az oldal mobileszközökön való megjelenítésének kényelme olyan tényező, amelynek jelentősége az elmúlt években folyamatosan nőtt. És itt nem csak az okostelefonról és táblagépről megtekintő felhasználók növekvő számában van a lényeg, hanem a keresőmotorok szintjén való helyezésben is.

A Google 2015.04.21-én hivatalosan is bejelentette ennek a tényezőnek a webhely helyzetére gyakorolt ​​hatását. A közelmúltban a Yandex blogon jelentek meg információk. Az algoritmust, amely figyelembe veszi a webhely mobileszközökön való megjelenítésének kényelmét, "Vladivosztok"-nak hívták, és a Yandex képviselői szerint Oroszországban már aktívan bevezetik.

A webhelyek igényeihez igazításának fontossága mobil felhasználók növekszik és tovább fog növekedni. A mobilhoz való alkalmazkodás a látogatói konverziókban és az oldalak keresési eredményekben való rangsorolásában egyaránt meg fog jelenni. De honnan tudja, hogy projektje megfelel-e ezeknek a követelményeknek? Hogyan állapítható meg, hogy egy webhely minden részletében mobilbarát-e? Mai áttekintésünkben erről fogunk beszélni.

Mobilbarát az oldal?

A diagnosztika első szakasza a webhely mobileszközökön történő megnyitása. De még itt sem minden olyan egyszerű, mint amilyennek látszik, mert bizonyos alkalmazkodóképességi problémák csak bizonyos böngészőkben és bizonyos képernyőméreteken jelentkezhetnek. Emiatt javasoljuk a következő tesztelést:

• függőleges képernyőtájolású okostelefonon (beleértve a körülbelül 300 pixel szélességű keskeny képernyőket is);
• vízszintes képernyőtájolású okostelefonon (480 pixel szélességtől);
• függőleges és vízszintes képernyőtájolású táblagépeken (768 pixel szélességtől).

Teljesen természetes, hogy kipróbál egy webhelyet különböző eszközök nem mindig kényelmetlen. Már csak azért is, mert nem biztos, hogy minden szükséges kütyü van kéznél ehhez. Ezt a problémát különféle mobilképernyő-emulátorok segítségével oldhatja meg. Nem szükséges azonban felvenni a kapcsolatot harmadik fél szolgáltatásaival: egy hasonló emulátor előre telepítve van Google Chrome. Használatához csak nyissa meg a kívánt oldalt, nyomja meg az F12 billentyűt (hívja a fejlesztői konzolt), és kattintson a mobiltelefon képét tartalmazó ikonra:

Fontos figyelembe venni a jellemzőket is mobil böngészők, mert ezeknek is lehetnek saját jellemzőik. A tesztelés során fontos, hogy az oldalt a következő címen tekintse meg:

• előre telepített Android OS böngésző;
• Google Chrome mobil;
• "gyors" böngészők - például Opera Mini vagy UC Browser;
• Safari (például iPhone-on).

Hogyan látják a keresőmotorok az Ön webhelyét?

Első automatikus ellenőrzés, amelyen érdemes végigmenni, ha érdekel az oldalad alkalmazkodóképességének problémája, az mobilbarát teszt a google-tól. Ez az eszköz meglehetősen egyszerű, és egyértelmű ítéletet ad a mobileszközökre való oldaloptimalizálásról. Ha pedig nemleges a válasz, akkor szinte biztos, hogy az oldalt a kis képernyők számára és a Google algoritmusainak szintjén kényelmetlennek tartják – az ebből fakadó összes következménnyel együtt.

Ha bármilyen igény merül fel az okostelefonok képernyőjén történő tartalomformázással kapcsolatban, azok itt lesznek felsorolva. Ez lehetővé teszi, hogy gyorsan diagnosztizáljon bizonyos megjelenítési problémákat, és azonnal nekivágjon azok megoldásának:

Kérjük, vegye figyelembe: képernyőkép a webhelyről mobil képernyő előfordulhat, hogy a szkennelési eredmények nem egyeznek az okostelefonon látottakkal. Ennek leggyakrabban az az oka, hogy a mobilbarát tesztben csak a kereső által indexelt fájlok vesznek részt, a stílusfájlok (css) és a szkriptek (js) pedig gyakran zárva vannak az indexelés érdekében a robots.txt szinten. A legfrissebb Google ajánlásoknak megfelelően ezeket egyébként a keresők számára is láthatóvá kell tenni.

Weboldal optimalizálás mobileszközökre a Google és a Yandex webmesteri irodájában

Fontos megjegyezni, hogy arról, hogy az oldal hogyan felel meg a keresőmotorok mobileszközökön való megjelenítés kényelmével kapcsolatos elképzeléseinek, a webmesteri irodákban szerezhető be - Google Search Consoleés a Yandex.Webmaster (egyelőre csak az új fiók béta verziójában).

A Google Search Console-ban az aktuális oldalellenőrzés eredményei itt érhetők el: Search Traffic => Mobile Experience. Ez az oldal megkettőzi azokat az információkat, amelyekről beszerezhetünk mobil használatával barátságos teszt, de a webhely összes indexelt oldalára vonatkozik, mivel azokat a Google robotjai feltérképezik:

A Yandex új webmesteri irodájában a tömeges aktuális ellenőrzési adatok még nem jelennek meg. Ehelyett a Google mobilbarát tesztjéhez hasonló eszközt találhat. Ezzel manuálisan ellenőrizheti, hogy a keresőmotor algoritmusai egy adott oldalt kényelmesnek tartanak-e okostelefonon való megtekintéshez.

P.S.

Az oldal megítélése és alkalmazkodóképessége kereső motorok, - a kérdés rendkívül fontos, de a felhasználói élmény sem kevésbé fontos. A formai jellemzők szerint tehát az oldal teljes mértékben megfelel a mobileszközökön való könnyű megtekintés követelményeinek, de a valóságban - az "élő" felhasználók számára - ez a kényelem kétséges lesz. Ennek közvetlen következménye az alacsonyabb konverziók, kieső eladások, rosszabb viselkedési tényezők (amelyek a helyezéseket is befolyásolják).

A ciklus következő cikkében, egy hét múlva eláruljuk, hogyan kell látni az oldalt látogatói szemével, hogyan lehet megtalálni a „szűk keresztmetszeteket” a mobil kijelzőn, és milyen szempontok alapján kell értékelni a kényelmét.

következtetéseket

A webhelyek mobileszközökön történő megtekintésének egyszerűsége egyre fontosabb szerepet játszik az oldalak konverziós és keresési rangsorolásában egyaránt.

A webhely alkalmazkodóképességének felméréséhez az első lépés a tesztelés különböző képernyőkés különböző mobilböngészőkben.

Annak megtudásához, hogy a keresőmotorok hogyan értékelik a webhelyek mobileszközökön való megjelenítésének kényelmét, a Google mobilbarát tesztje, valamint a megfelelő funkciók a webmesteri irodákban (Google Search Console ill. új iroda webmester a Yandexben).

A keresőmotorok arra törekszenek, hogy javítsák a keresési eredményeket a mobileszközök (okostelefonok, táblagépek) felhasználói számára, így a webhelyek különböző méretű képernyők magasabban jelennek meg, mint azok a webhelyek, amelyek nem rendelkeznek ilyen optimalizálással. Ez is magában foglalja mobil verziók oldalak.

A mobilbarát weboldal jelei:

1. Kényelmesen olvasható tartalom (nagyítás nélkül olvasható), nagy űrlapmezők és gombok.
2. "Nehéz" képek, Flash - elemek és túlzott animáció hiánya.
3. Java kisalkalmazások és Silverlight bővítmények hiánya.
4. Nincs vízszintes görgetősáv.
5. Minimális webhely betöltési sebesség.
6. A legegyszerűbb navigáció.
7. A nézetablak metacímke hozzáadva.

Szolgáltatások a webhely „mobilitás” ellenőrzésére

A szolgálatok munkájának bemutatásához vegyük jó partnereim oldalát - a CONTEXT fordítóirodát.

1. Google mobilbarát

Bármely webhelyet ellenőrizhet úgy, hogy egyszerűen beírja a címét a sorba.

Megjeleníti a képernyőn, hogyan néz ki a webhely okostelefonon, és átfogó értékelést ad a mobileszközökre való optimalizálásról.

Más szolgáltatásokkal ellentétben itt nem minden webhelyet ellenőrizhet, hanem csak a sajátját. Ez azt jelenti, hogy miután a webhelyet hozzáadták a webmester felületéhez, a jogok megerősítésével.

A szolgáltatás megjeleníti az általános értékelést, ellenőrzi a 6 megfelelőségi pontot, és megmutatja, hogyan néz ki az oldal okostelefonon.

3. Bing Checker

Az általános optimalizálás és a 4 pont betartása ellenőrzésre kerül.

Azt is megjeleníti, hogyan néz ki az oldal az okostelefon képernyőjén (természetesen operációs rendszer ablakokon, míg a korábbi szolgáltatások androidos okostelefont jelenítettek meg =)).

4. Mobile Checker a W3C-től

A „leghosszabb” szolgáltatás az összes szolgáltatás közül. Olyan "sokáig", hogy nem vártam meg a teszt végét =)

5 percet vártam, míg a többi szolgáltatás 5-20 másodperc alatt megbirkózott.

5. Felelős

A többivel ellentétben nem ad értékelést, hanem azt mutatja meg, hogyan néz ki a webhely 6 különböző eszközön, két tájolásban IOS és Android rendszeren, ami nagyon klassz.

UPD1: 2017.07.20.:

6. Adapter

A cikkhez fűzött megjegyzésekben javasolt szolgáltatás. Személyesen nem használtam, de nagyon jónak tűnik. A lehetőségek hasonlóak a válaszadóhoz, de ott van az alkalmazkodóképesség eredményének értékelése is.

UPD2: 2017.11.3.:

7. iloveadaptive.ru

Egy másik új szolgáltatás javasolt a megjegyzésekben. Ami engem illet, kicsit nehéz és nem praktikus, de ez több mint kifizetődik a nagyszerű lehetőségekkel. Még az operációs rendszer szerinti rendezés is lehetséges.

Következtetés

Kétségtelen, hogy egy webhely adaptálása mobileszközökhöz nem csak tisztelgés a divat és az idő előtt, hanem egy olyan modern webhely szükséges tulajdonsága, amely nemcsak a végfelhasználót segíti.

Ezért azt javaslom, hogy mindenki, aki közelebb szeretne kerülni az ügyfélhez, és több látogatást/lead-et szeretne elérni, mielőbb alakítsa át oldalát. Kérdezz valamit -

2015-09-11 8204 4 Denis Abdullin

A reszponzív tervezés nemcsak új trend, hanem bizonyos mértékig szükségszerűség is. Most az orosz webhelyeket úgy készítik el, hogy bármilyen képernyőn jól, gyönyörűen és kényelmesen nézzenek ki.

Megosztjuk Önnel az online szolgáltatások listáját a webhely reagálásának ellenőrzése. Más blogokkal ellentétben nálunk csak a legjobb szolgáltatásaink vannak.

Megjegyzem, a hivatalos uCoz sablonboltban minden téma reszponzív, mert. ez az egyik fő feltétele az eladásra szánt sablon közzétételének.

Screenfly - az oldal alkalmazkodóképességének ellenőrzése az eszköz kiválasztásával

A Screenfly azért van az első helyen, mert van egy listája a népszerű képernyőméretekről mobiltelefonok, okostelefonok, laptopok és asztali számítógépek. Természetesen saját méreteket is beállíthat és megnézheti, lehetséges az oldal megtekintése proxy szerveren keresztül, a görgetés be- és kikapcsolása.

Mattkersley - minden méret egy oldalon

A projekt annyiban jó, hogy megadsz egy linket a webhelyedre, és azt betölti az oldalon lévő összes keretbe. Azonnal tesztelheti az oldalt 5 méretben. 2 mód van: csak tesztelje a szélességet, vagy mutassa meg az eszközök nevét és magasságát.

Responsive.is – Reszponzivitás teszt több eszközön

Jó és kényelmes szolgáltatás, de csak 5 eszközön tudod ellenőrizni az oldalt. A korábbi szolgáltatásokhoz képest ez nagyon kicsi. Azok a felhasználók, akik eltévednek ezekben a méretekben, nem is szerepelnek itt, csak az eszközikonok láthatók.

Én személy szerint nem veszek igénybe ilyen szolgáltatásokat, de csak csökkentse a böngésző szélességét. Ráadásul a webhely alkalmazkodóképesség-ellenőrző szolgáltatásai ugyanezt teszik, jobb, ha valódi eszközökön nézi a projektet, szabványos formában Android böngészőkés Safari iPhone-on.

Vannak más szolgáltatások is, beleértve az orosz nyelvet is. Eleinte pontosan ezeket akartuk hozni, de egyszerűen lemásolták a fent felsorolt ​​oldalakat, a meglévő szöveget egyszerűen lefordították, csak a „Telefon” helyett például a „Telefon” lesz látható.