Olvasási idő 6 perc

Miért fontos a webhelyek reszponzitásának tesztelése? A Yandex.Metrica szerint Oroszországban a mobileszközöket használók száma megközelíti az 50%-ot, és folyamatosan növekszik.

Vonatkozó kereső motorok törekedni kell arra, hogy a felhasználók számára kényelmesebbé tegyék a mobil kibocsátást. 2015 februárjában a Google kijelentette, hogy a reszponzív vagy mobil verzió pozitív hatással van a helyezésekre. Pontosan egy évvel később, 2016 februárjában a Yandex ugyanezt jelenti be.

Milyen tulajdonságokkal kell rendelkeznie egy reszponzív weboldalnak?

• Nincs vízszintes görgetés.
• A nézetablak metacímke helyes.
• Az interaktív elemek (hivatkozások, gombok, űrlapok stb.) nincsenek túl közel egymáshoz.
• Flash elemek hiánya, Silverlight bővítmények.
• Kényelmes navigáció a szakaszok között.
• A tartalom (szöveg és képek) a képernyő méretéhez igazodik, és nagyítás nélkül olvasható.

Szolgáltatások a webhely alkalmazkodóképességének online ellenőrzéséhez

1. Google mobilbarát - https://search.google.com/test/mobile-friendly

Megjeleníti, hogyan néz ki a webhely első képernyője okostelefonon, átfogó értékelést ad az optimalizálás minőségéről.

Előnyök

• Hivatalos Google szolgáltatás.
• Konkrét hibákat jelez.
• Képes meghatározni a mobil verzió jelenlétét.

Hibák

• Nem láthatja, hogyan néz ki a webhely különböző képernyőméreteken.
• Csak az első képernyőt mutatja, nem léphet kapcsolatba az oldallal.

1. Yandex.Webmaster mobilbarát - https://webmaster.yandex.ru/site/tools/mobile-friendly/

A Google eszközétől eltérően csak saját erőforrásait ellenőrizheti, amelyekhez megerősítette a jogokat a Yandex.Webmasterben. Megmutatja az általános értékelést, és megmutatja, hogyan néz ki a webhely okostelefonon.

Előnyök

• Yandex hivatalos szerviz.
• Konkrét optimalizálási problémákat jelez.
• Érti, ha a webhelynek van mobil verziója.

Hibák

• Csak a webhelyeit ellenőrizheti.
• Nem lehet megnézni, hogyan néz ki a webhely a különböző képernyőkön

1. Quirktools- http://quirktools.com/screenfly/

Kényelmes és funkcionális szolgáltatás, megtekinthető, hogyan fog kinézni az oldal különféle eszközök az okostelefonoktól a tévékig.

Előnyök

• Választhat a kész eszközök listájából, vagy beállíthatja saját felbontását
• Kapcsolatba léphet az oldallal

Hibák

• A mobil verzió nem észlelhető
• Nincs hibalista

1. szeretek alkalmazkodni- http://iloveadaptive.com/

Szolgáltatás, amellyel ellenőrizheti a népszerű mobileszközök és operációs rendszerek alkalmazkodóképességét.

Előnyök

• Megnézheti, hogyan néz ki az oldal másképp operációs rendszer(IOS és Android)
• Ő maga is megérti, ha van mobil verzió
• Kiterjesztés a Google Chrome

Hibák

• A képernyő méretét saját maga nem adhatja meg, csak egy kész listából választhat
• Nincs hibalista
• Mindig automatikusan letöltődik mobil verzió, anélkül, hogy meg tudná nézni, hogyan néz ki az asztali verzió különböző felbontásokban

1. http://adaptivator.ru/

Előnyök

• Általános értékelést ad az optimalizálás minőségéről, tanácsot ad a hibák kijavításához.
• "Nem látja" a mobil verziót.

Hibák

• "Nem látja" a mobil verziót.
• Nincs mód a képernyő méretének beállítására.

Következtetés

Ha hozzáfér a webmesteri szolgáltatásokhoz (Yandex.Webmaster vagy Google Search Console), akkor a legjobb, ha az ő segítségükkel teszteli az alkalmazkodóképességet. Ezek tükrözik az Ön webhelyére vonatkozó legrelevánsabb keresőmotor-követelményeket.

Ha ez nem lehetséges, akkor használhatja a http://iloveadaptive.com/ oldalt a http://adaptivator.ru/ oldallal együtt, mivel ezek kiegészítik egymást a funkcionalitás szempontjából.

Sok országban az okostelefonokat gyakrabban használnak internetezésre, mint a számítógépeket. Ezért nagyon fontos, hogy az oldalt mobileszközökhöz igazítsuk. Ha meg szeretné tudni, hogy oldalai alkalmasak-e az okostelefon-felhasználók számára, a Search Console egy speciális eszköze segít.

Használat

Egyszerűen ellenőrizheti, hogy egy oldal okostelefonon való megtekintésre alkalmas-e: csak írja be a teljes URL-t. Az ellenőrzés általában kevesebb mint egy percet vesz igénybe. Ha vannak átirányítások az oldalon, azok is feldolgozásra kerülnek.

Az ellenőrzés eredménye alapján látni fogja, hogyan néz ki az oldal okostelefonon, és megtudhatja, milyen problémák merülhetnek fel a megtekintése során. Leggyakrabban ezek kisbetűs (kis képernyőn nehezen olvashatók) és Flash elemek (a legtöbben nem támogatottak). mobil eszközök).

A nézetablak metacímke értéke nincs beállítva

Az oldalkód nem határozza meg a nézetablak tulajdonságot, amely megmondja a böngészőnek, hogyan kell megfelelően átméretezni az oldalelemeket, hogy azok illeszkedjenek az eszköz képernyőjének méretéhez. Ahhoz, hogy webhelye megfelelően jelenjen meg a különböző méretű képernyőkön, állítsa be a nézetablakot a nézetablak metacímke segítségével. Ennek részleteit útmutatónk Reszponzív webdesign alapjai című szakasza tartalmazza.

A nézetablak metacímkéjének eszközszélesség-értékkel kell rendelkeznie

Az oldal adaptálása különböző méretű képernyőkre lehetetlen, mivel a fix szélességű viewport tulajdonság a kódjában van megadva. Ebben az esetben jelentkezni kell adaptív kialakítás az oldal méretezésének a képernyőhöz igazításával.

A képernyőnél szélesebb tartalom

Ez a jelentés azonosítja azokat az oldalakat, ahol a szöveg és a képek megtekintéséhez vízszintesen kell görgetnie. Ez a probléma akkor fordul elő, ha a CSS-méretek abszolút értékekre vannak állítva, vagy ha egy adott böngészőablak-szélességhez készült képeket használnak. Győződjön meg arról, hogy a szélesség és a pozíció értékek megfelelőek css elemek relatívak, és a képek méretezettek. Az erről szóló részletes információk útmutatónk Nézetablakban található tartalomméretek szakaszában találhatók.

Túl kicsi betűtípus

Ez a jelentés azokat az apró betűs oldalakat sorolja fel, amelyek olvasásához nagyításra van szükség. A nézetablak beállítása után meg kell határoznia a betűméreteket, hogy helyesen jelenjenek meg benne.

Keretrendszerek, például vagy , amelyek nagyban megkönnyítik és felgyorsítják az oldalelrendezést.
egy weboldal kiváló megjelenítését jelenti minden eszközön és monitorbővítményen. Valószínűleg nem minden tervező rendelkezik ezzel teljes készlet eszközök mindegyikével lehetséges kiterjesztések kijelzők, for az elrendezés tesztelése. Ez nem meglepő, mert a technológia manapság nem olcsó.
Így. A mobiltelefonok és táblagépek hegyeinek vásárlása nem megoldás – csődbe megyünk. Mit kell tenni? Ezekre a célokra fejlesztettük ki adaptív webhelyek tesztelésére szolgáló szolgáltatások. Működési elvük nagyon egyszerű. Leggyakrabban egy bizonyos méretű keret található, ahol az oldal megnyílik. A hatás nagyjából ugyanaz, mint amikor mobileszközön nézzük. Szeretném megjegyezni, hogy a szolgáltatás nem mindig pontosan mutatja az oldal megjelenítését telefonon vagy táblagépen. Az elrendezés során érdemes szolgáltatások segítségével tesztelni, de a befejezés után lehetőség szerint a legelterjedtebb eszközökön tesztelni.
Így. Figyelmedbe legjobb eszközök reszponzív webhelyek teszteléséhez.

Reszponzív webhelytesztelő eszköz az Adobe-tól. Használatához telepítenie kell a számítógépére.
A program lehetővé teszi, hogy szinkronizálja eszközeit WIFI-n keresztül, és úgy tekintse meg a webhelyet, ahogyan az megjelenik a készülékén. A Ebben a pillanatban támogatott eszközök a következő operációs rendszerekkel: iOS, Android, Kindle Fire.

„A Business Motor csapat projektmenedzsere, webmester, szövegíró.
A mobil adaptáció az oldallal való 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 fontos tényező utóbbi évek folyamatosan növekszik. É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 weboldalak mobilfelhasználók igényeihez igazításának jelentősége egyre nő, és a jövőben is növekedni fog. A mobilhoz való alkalmazkodás a látogatók konverzióiban és az oldalak rangsorolásában egyaránt megjelenik Keresési eredmények. 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);
• egy okostelefonon vízszintes tájolás képernyő (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. Azonban nem szükséges harmadik féltől származó szolgáltatáshoz fordulni: egy hasonló emulátor előre telepítve van a Google Chrome-ban. 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:

Rendkívül fontos figyelembe venni a mobilböngészők jellemzőit, mert ezeknek is lehetnek sajátosságai. 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 találatai aktuális csekk oldalak itt érhetők el: Keresési forgalom => Láthatóság mobileszközökön. Ez az oldal megismétli azokat az információkat, amelyeket a mobilbarát teszttel kaphatunk, de a webhely összes indexelt oldalára vonatkozóan megadjuk, mivel azokat a Google robotok 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.

Rendkívül fontos kérdés, hogy az oldalt és annak alkalmazkodóképességét a keresők hogyan érzékelik, de a felhasználói élmény is ugyanolyan 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, rosszabbak viselkedési tényezők(ami viszont a helyezéseket is befolyásolja).

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

Egyre hangsúlyosabb szerepet játszik a webhely mobileszközökön való megtekintésének egyszerűsége mind a konverzióban, mind a keresési rangsor oldalakat.

Az oldal alkalmazkodóképességének értékeléséhez az első lépés a különböző képernyőkön és különböző mobilböngészőkön végzett tesztelés.

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).

2015-09-11 8204 4 Denis Abdullin

A reszponzív tervezés nem egyszerű új trendés bizonyos mértékig szükségszerűség. 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 weboldal 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ó.