A reszponzív tervezés ingyenes tesztelése. Reszponzív elrendezés JavaScript-szkript használatával Reszponzív tervezés tesztelése
Sziasztok kedves blog olvasók. Nem meglepő, hogy az adaptív tervezés egyre népszerűbb az orosz interneten. És természetesen az elrendezéstervezőknek tanulmányozniuk kell. Mivel a reszponzív dizájn hamarosan szinte minden weboldalon megjelenik, mert egyre többen használnak mobileszközt.
És azt szeretném mondani, hogy a vele ellátott webhelyeket sokkal kényelmesebb olvasni ilyen eszközökön, mint nélküle.
Ma 5 nagyon hasznos és klassz szolgáltatást szeretnék bemutatni nektek, amelyekkel ellenőrizheti weboldala alkalmazkodóképességét.
És hát, menjünk.
5 szolgáltatás, ahol ellenőrizheti webhelye alkalmazkodóképességét. www.responsivedesigntest.netJó szolgáltatás a webhelyek ellenőrzéséhez. Számos képernyőfelbontás létezik táblagépekhez és telefonokhoz egyaránt.
Mattkersley.comEgy egyszerű szolgáltatás Matt Kersley webhelyének ellenőrzéséhez. Az összes népszerű mobileszköz-felbontás is elérhető.
Nagyon klassz szolgáltatás, amely minden webhelyet ellenőriz. Nagyon tetszett a dizájn és a funkcionalitás is.
Nagyon szép és funkcionális szolgáltatás. Még azt is meg lehet nézni, hogyan fog kinézni az oldal a tévében :-)
A szerzőtől: "Hagyja abba a böngésző átméretezését, hamarosan törlődik!" Milyen gyakran hallod ezt? Nos, jó, talán nem olyan gyakran, de ha reszponzív webhelyeket fejleszt, akkor tudja, miről beszélek: minden alkalommal, amikor szerkeszti a DOM-ot vagy a CSS-t, előre-hátra húzza a böngésző szélét, és teszteli a változtatásokat. és pontatlanságokat keres.
Általánosságban elmondható, hogy ezeknek az erőfeszítéseknek a többsége a különböző eszközök képernyőméretének utánzására irányul.
Ha vállalati fejlesztéssel foglalkozik, valószínűleg sok cég által biztosított eszközt kell tesztelnie. Ahol dolgozom, van iPadünk, iPhone-unk, egy-két másik táblagépünk, laptopunk és asztali számítógépünk. Ha nincs meg ez a luxus, akkor azt kell használnod, ami kéznél van.
Itthon két különböző laptopom van, két különböző Android készülékek: Kindle és Nexus 7. Ezekkel az eszközökkel tesztelem a szabadúszó fejlesztéseimet, de egyértelmű, hogy ez nem egy teljes választék. Egyáltalán nem iOS eszközök, és bár korai alkalmazónak számítok, nem tervezek minden új telefont/táblagépet/táblagépet megvásárolni, amint az eladásra kerül.
Tehát mit tegyen egy fejlesztő? Szerencsére egyre több olyan böngésző alapú eszköz létezik, amelyek különféle eszközök képernyőméretét szimulálják. A különböző eszközök természetesen különböző funkciókkal és különböző hatékonysági szintekkel rendelkeznek. Ezek közül néhányat megnézünk itt.
Tesztelési célból az első igazán reszponzív weboldalt készítettem, a PajamasOnYourFeet.com-ot. A Brownie HTML5 sablonon alapul, nagyon nagylelkűen és ingyenesen biztosított az EGrappler fejlesztői közössége számára.
érzékeny vagyok?érzékeny vagyok? – egy teljesen egyszerű, azonnali előnézet a webhelyről abból a szempontból, hogyan fog megjelenni négy különböző eszközön. Mind a négy iOS, és a fejlesztő a weboldalon elmagyarázza a választását. Nem kínál semmilyen vezérlőt vagy kiválasztást, csak egy nagyon egyszerű és elegáns kijelzőt. Nézze meg az ablak méreteit:
Asztali – 1600 x 992 képpont, léptékkel csökkentve (0,3181)
Laptop – 1280 x 802 képpont, csökkenő léptékű (0,277)
Táblagép – 768 x 1024 képpont, léptékkel csökkentve (0,219)
Mobil – 320 x 480 képpont, léptékkel csökkentve (0,219)
A fejlesztőt idézve: „Ez nem egy tesztelőeszköz, nagyon fontos, hogy ezt valódi eszközökön tegyük. De ez egy eszköz a gyors képernyőképek készítésére (számomra), és vizuális lehetőséget biztosít arra, hogy az ügyféltalálkozókon „lefúrja”, mire gondol.”
A deviceponsive hasonló az Am I Responsive webhelyhez? olyan, amely egyszerűen és szépen jeleníti meg webhelyét, de nem rendelkezik kezelőszervekkel vagy elérhető opciókkal, amikor az eszközökről van szó. Mindegyik egyszerre jelenik meg egy hosszú oldalon. Van egy érdekes tulajdonsága - módosíthatja a fejlécet a háttérszín szerkesztésével és saját logójának beillesztésével, majd „kinyomtathatja”. Így bizonyos értelemben márkajelzést adhat webhelyének, amikor képernyőképeket jelenít meg az ügyfélnek. Ezen az oldalon szimulált eszközök és képernyőméretek:
Macbook - 1280 x 800
iPad (álló) - 768 x 1024
iPad (fekvő) – 1024 x 768
Kindle (portré) - 600 x 1024
Kindle (fekvő) – 1024 x 600
iPhone (álló tájolás) - 320 x 480
iPhone (fekvő) – 480 x 320
Galaxis (portré) - 240 x 320
Galaxis (fekvő) - 320 x 240
A legtöbb hasonló eszközhöz hasonlóan görgetősávok jelennek meg a kis eszközökön. Valódi eszközön nem jelennek meg, de ahhoz, hogy a tesztnézetet görgetni lehessen egy nem érintős eszközön, engedményeket kell tennie.
Az eszközérzékenyhez hasonlóan az adaptív teszt is több eszközön jeleníti meg webhelyét, de ahelyett, hogy egyszerre jelenítené meg őket egy oldalon, az oldal tetején található egyszerű menüből kiválaszthatja, hogy melyik eszközt szeretné megtekinteni. Közepes méretű laptopon böngészve azt tapasztaltam, hogy az oldal kicsinyítése remekül működik, így a teljes webhelyet láthatja a tesztelt eszköz ablakában.
Tizenhárom különböző megtekintési ablakot kínálunk itt egy nagy monitoron asztali számítógép az úgynevezett „Crappy Android”-ra (hogy őszinte legyek, van lehetőségük a „ Android jobb"(Szebb Android).
A Firefox ismét megbotlik ezen az oldalon. Figyeljük meg a képernyőképen - a zöld fejléc és a fehér hátterű tartalomterület között - csak egy kék sáv van, ahol a képcsúszkának kell megjelennie.
Nagyon hasonlít az előző kettőhöz, és az egyetlen dolog, ami megkülönbözteti tőlük a responsive.is-t, az a kijelző zökkenőmentes animációja egyik eszközről a másikra, valamint egy áttetsző fedvény, amely a nézetablakból kieső webhely ingatlanait mutatja. .
Itt csak az automatikus eszközlehetőségek érhetők el, amelyek kitöltik a böngészőablakot, és úgy jelenítik meg az oldalt, ahogyan azt látnád: Asztali; Tablet (fekvő tájolás); Tablet (álló tájolás); Okostelefon (fekvő tájolás) és Smartphone (álló tájolás), a pixelméretek nincsenek megadva.
Ismét számos különféle funkció és beállítás különbözteti meg a Screenqueries-t más webhelyektől. 14 telefon és 12 táblagép áll rendelkezésre, külön elemmel az álló és fekvő módok váltásához. Ezek egy számozott pixelrácson jelennek meg, a méretek a tesztkijelző jobb alsó sarkában láthatók. A kijelző szélei húzhatók, így tesztelheti az egyedi méreteket. Húzza vagy kattintson a tesztelési területre, és a háttér szürkévé válik, kevésbé zsúfolt megjelenéssel.
Érdekes funkció ezen a webhelyen – több eszköz esetében van egy „True view” opció, amely az eszközhöz rendelt Chrome böngészőbe burkolva jeleníti meg webhelyét. Sajnos, és ezt már megszoktam, a Firefox nem tudja megjeleníteni a tesztoldal képcsúszkáját. Ne aggódj, én nagyon szeretem a Firefoxot, ha böngészőről van szó, de szerencsére van lehetőségünk.
A Screenfly valóban növeli a használhatósági tényezőt. Kilenc, a táblagépeknél nagyobb eszközt kínál, a 10 hüvelykes laptoptól a 24 hüvelykes asztali számítógépig, öt táblagépet, kilenc okostelefont, három tévéméretet és egy egyedi képernyőméretet. Bármely kiválasztott beállítás elforgatható álló vagy fekvő tájolásban a menüben található külön vezérlő segítségével. Kiválaszthatja, hogy engedélyezi-e a görgetést vagy sem, és egyetlen gombnyomással létrehozhat egy megosztható hivatkozást.
A webhely proaktívan hasznos a pixelméretekkel kapcsolatos információk megjelenítésében. A menüben minden eszköz névvel és pixelmérettel jelenik meg, a saját böngészőablak mérete az ablak jobb felső sarkában, a kiválasztott opció méretei pedig a kijelző alatti láblécben láthatók a A tesztelt webhely URL-je. Ez a kis funkció megkönnyíti a képernyőképek dokumentálását és az információk megosztását az ügyfelekkel.
A fentiek mindegyike ideális eszközzé tette volna, de a Screenfly fejlesztői megtalálták a lehetőséget, hogy egyszerűen csúcsminőségűvé tegyék, és proxyszervert biztosítottak. Idézet a webhelyükről: „A Screenfly proxyszervert használhat az eszközök megszemélyesítésére, miközben Ön megtekinti a webhelyét. A proxy szimulálja a kiválasztott eszközök felhasználói ügynök karakterláncát, de nem az eszközök viselkedését." Az itt tárgyalt összes többi eszköz kizárólag a CSS-sel foglalkozik. A Screenfly az egyetlen, amely lehetővé teszi a felhasználói ügynök karakterláncon alapuló tesztelést.
Miután így teszteltem egy webhelyet, amelyet a meglévővel hoztam létre mobil verzió, azt mondhatom, hogy az eredmények nagyon jók voltak. Minden pontosan úgy jelent meg, ahogy vártam, és a funkciók tesztelhetők voltak. El kell mondanunk, hogy a felhasználói ágens karakterláncok tesztelése hagyományossá vált, de ez az oldal nagyon régen készült, és a proxy tulajdonság valóban nagyon hasznos kiegészítésnek bizonyult.
Láthatjuk tehát, hogy rengeteg forrás áll rendelkezésre a reszponzív webhelyek teszteléséhez. Különböző tulajdonságokban különböznek egymástól; Az Ön által használt webhelyek személyes preferenciáitól és követelményeitől függenek, és igyekszem bátorítani, hogy fedezze fel és kísérletezzen velük. Minél több van nekünk, fejlesztőknek hasznos eszközöket, annál jobb.
Az online áruházat mobileszközökre kell optimalizálni. Ezt a problémát adaptív tervezéssel oldják meg, amely lehetővé teszi a webhely helyes megjelenítését bármely platformon. A reszponzív tervezés megvalósítása azonban szabványos buktatókkal jár. Soroljuk fel az online vásárlási oldalakra jellemző 8 leggyakoribb problémát.
A látogatói viselkedés elemzésének figyelmen kívül hagyásaA mobilszegmensbe való belépés rohanása arra kényszeríti a kiskereskedőket, hogy weboldalt tervezzenek anélkül, hogy komolyan elemzik a látogatók viselkedését. A látogatók viselkedésének elemzése a felkészülés legfontosabb szakasza, amely lehetővé teszi a legnépszerűbb mobileszközök azonosítását és az oldal optimalizálását először. Az Analytics segít meghatározni a „legnépszerűbb” felhasználói műveletet, például a termék képének nagyítását; a mobil látogatók konverziós arányát mutatja stb. Ezek az adatok betekintést nyújtanak a felhasználói viselkedési preferenciákba, és segítenek megfelelni a mobil közönség elvárásainak. Elemzés mobilforgalom szükséges az eredmények szisztematikus és következetes megvalósítása, az oldal véglegesítése és optimalizálása az ügyfelek igényeinek megfelelően.
Asztali áruház tervezéseJellemzően az online áruház asztali változatát tervezik át a mobil képernyőkre, bár logikusabb, ha egy mobil eszköz kis képernyőjét átméretezzük az asztalra. A kereskedők gyakran nem veszik észre, milyen technikai problémák merülnek fel, ha egy asztali számítógépre tervezett webhelyet okostelefon méretűre hoznak. 
Kezdő tervezés a számára mobil képernyők, akkor a mobil felhasználói élményre összpontosít. Ennek eredményeként könnyebb lesz a tervezés mindkét csatornához: asztali számítógéphez és mobilhoz.
Az internetes áruház mobil elrendezésének tesztelése az indítás kötelező szakasza, de sok tulajdonos ezt gyakran figyelmen kívül hagyja, és tesztelés nélkül indítja el. Emiatt az oldal mobileszközökre szánt élő verziójában még a vásárlás és a rendelés leadása során is előfordulhatnak hibák.
Az adaptív tervezés hiányosságai egy webáruház előzetes tesztelésével könnyen azonosíthatók, de sok eladónak nincs erre forrása. A pénzvesztés kockázatának csökkentése érdekében tesztelje a legfontosabb felhasználói útvonalakat a webhely körül a fő böngészőkben – Chrome, IE, Firefox, Safari és operációs rendszer- Windows, Mac OS, Android, IOS népszerű mobil eszközök. Tesztelje minden változtatáskor; az olyan szolgáltatások, mint a BrowserStack vagy a Viewport Resizer, több órára csökkenthetik a tesztelési időt.
Kis elemek mobil képernyőkhözAnnak érdekében, hogy több hely elférjen az okostelefon képernyőjén, az online boltok tulajdonosai fukarkodnak a „cselekvésre ösztönző” gombjaik méretével. Ne kényszerítse a felhasználókat a nagyításra, hogy a Vásárlás gombra kattintsanak, és ne helyezzenek túl közel egymáshoz a kis elemeket, különben a felhasználók egy kényelmesebb webhelyet választanak. Tervezési felületek nagy navigációs elemekkel és cselekvésre ösztönző gombméretekkel.
Lassú oldalbetöltési sebességA mobilközönség szereti a gyors webhelyeket és a minimális betöltési időt. Értékelje a saját összetevőit mobil oldalak– képek, gombok, szövegek, szkriptek – mobileszközökre kell optimalizálni. A Google figyelembe veszi az oldalbetöltési időt a SERP-eiben, és rangsorolja a mobilwebhelyeket, és előnyben részesíti őket, így a „könnyű” webhelyek további komoly előnyhöz jutnak.
Válasszon tartalmat különböző lapokra, például egy termékoldal csak egy alapképet, leírást, árat és egy „Vásárlás” gombot tartalmazhat. A vásárlói vélemények és videók külön lapra helyezhetők, és csökkenthető az oldal fő részének „súlya”. A tartalom mellett optimalizálja a betöltési sebességet befolyásoló egyéb elemeket - CSS-fájlokat, képeket és szkripteket, csak a szükséges adatokat küldje el. Ebben segítenek az erőforrásfájlok méretét és betöltési idejét csökkentő eszközök: Uglify vagy JSCompress.
Tartalom kivágása mobilfelhasználók számáraA fejlesztők gyakran elrejtik a tartalom egy részét, hogy gyorsabban töltsék be a mobileszközöket. Gyakran azonban az oldal mérete valójában nem csökken, és a tartalom egyszerűen nem jelenik meg a felhasználó számára. Az üzletének képesnek kell lennie dinamikusan oldal generálására, csökkentve az oldal súlyát és a mobil látogatók betöltési idejét. Ezenkívül rossz, ha kevesebb tartalmat adunk a mobilfelhasználóknak, és negatívan befolyásolja a fogyasztói élményt. Jellemzően a vásárlási folyamat során használják különböző eszközök, az online vásárlók körülbelül 90%-a teszi ezt. A reszponzív tervezési módszerekre korlátozni őket nagy hiba.
Csak egy felbontásban támogatja a képeketEgy jó, reszponzív kialakítású weboldal az eszköz típusától függően automatikusan megváltoztatja a képek felbontását, a nehéz képek pedig megnövelik a betöltési időt. Számos módja van a képméretek automatikus beállítására konkrét eszköz. A „rugalmas” képek (fluid images) egy CSS-alapú módszer, amely lehetővé teszi egy kép tömörítését és nyújtását az azt tartalmazó elem szélességétől függően, vagy egy HTML5-elem, amely lehetővé teszi, hogy mindegyikhez a kívánt méretű képet töltsön be. készülék típusa.
"Nem válaszoló" e-mailekElőfordul, hogy magával az oldallal minden rendben van, a reszponzív dizájn jól működik asztali számítógépeken és mobileszközökön. Az e-mailek azonban nem reagálnak, és a mobilfelhasználóknak meg kell küzdeniük a rendelés részleteinek ellenőrzésével vagy az ajánlott termékek végtelen listájának görgetésével, hogy elérjék a befejezett vásárlásokat. 
Az e-mailek kulcsfontosságú ügyfélkapcsolati pontot jelentenek, ezért integrálja a reszponzív e-mail-tervezést mobilstratégiájába. Tervezze meg és tesztelje leveleit és hírleveleit; a levélsablonoknak „könnyűnek” kell lenniük, és csak fontos információkat kell tartalmazniuk.
A webes technológiák fejlődésével a webfejlesztéssel szemben támasztott követelmények is növekednek. A legnagyobb nyomást a webfejlesztők, az elrendezéstervezők vagy ahogy manapság a frontend fejlesztők nevezik.
Ebben a cikkben egy kicsit az adaptív elrendezésről fogunk beszélni, mivel ez a „trükk” most nagyon drága. Ha adaptív elrendezésről van szó, a bármilyen szintű elrendezéstervező finoman szólva is dühösen néz az ügyfelekre vagy a projektmenedzserekre, mert megértik, milyen nehéz.
Sokan kezdik összekeverni az adaptív elrendezést a rugalmas elrendezéssel; ez a kezdő elrendezéstervezők nagyon gyakori hibája. Mi a különbség, kérdezed?
Először is, hogy egyértelmű legyen, és úgymond, tegyük fel az összes pontot, és nézzük meg, milyen típusú elrendezések vannak.
4 típusú elrendezés létezik:
Tekintsünk minden típust részletesebben.
1. Rögzített elrendezés
A blokkok nem változtatják meg a szélességüket. Az alacsony felbontású monitorokon vízszintes görgetősáv jelenik meg.
#temnyi, #svetlyi ( szélesség: 440px; )
2. Gumi elrendezés
A blokkok a böngészőablak méretétől függően változtatják a szélességüket. Maximális és minimális értékeket vehet fel (max-width tulajdonság). De nem lehet 50%-ot 50%-ról 100%-ra növelni, ahogy a képernyő kisebb lesz.
#temnyi, #svetlyi ( szélesség: 50%; )
3. Adaptív elrendezés
@media vagy szkriptekkel valósítva meg. Egyedi ismert eszközökhöz szabva (320, 768, 1024 stb.). Bármilyen változás a rántásokban következik be, a megadott szintek valamelyikének elérése után. Határozottan alkalmas
#temnyi, #svetlyi ( szélesség: 430px; ) @media (max-width: 1220px) ( #temnyi, #svetlyi (szélesség: 380px; ) ) @media (max-width: 1120px) ( #temnyi, #svetlyi (szélesség) : 325px; ) ) @media (max. szélesség: 680px) ( #temnyi, #svetlyi (szélesség: 200px; ) )
4. Reszponzív elrendezés
Ez a rugalmas és az adaptív elrendezés kombinációja. A legnehezebben megvalósítható. De az eredmény a legelfogadhatóbb. Nyugodtan kijelenthetjük, hogy az oldal bármilyen eszközhöz alkalmazkodik.
#temnyi, #svetlyi (szélesség: 50%; ) @media (max. szélesség: 1006px) ( #temnyi, #svetlyi (szélesség: 100%; ) )
Tehát 4 féle weboldal-elrendezésről beszéltünk. Most eljött az ideje a csoda adaptív elrendezési szkriptünknek. Remélem, nem kell magyaráznom semmit, a forgatókönyv nagyon egyszerű, csak azt mondjuk, hogy ha változtatsz, akkor valami blokk keveredik valahol, és ennyi. Természetesen ez CSS-stílusokon keresztül is lehetséges, de ismerni kell az összes metódust; néha néhány helyen nem működik, és van, amelyik pont megfelelő.
Adaptív elrendezési szkript:
/* Hozzunk létre egy változót, amelybe monogest osztályokat rakhatunk, hogy kényelmesen használhassuk őket a kódban. Vagyis itt egyszer észleli őket, és ennyi, és nem minden minta előtt! ez egy hasznos szolgáltatás */ var my = ( ablak: $(ablak) ); /*Tulajdonképpen maga a függvény*/ $(window).resize(function () ( /*Változó, amely meghatározza az ablak szélességét, és a szélesség változóba helyezi*/ var width = my.window.width( ); /*ablak transzformációs feltétel, azaz egy olyan feltétel, amely akkor hajtódik végre, amikor az ablak szélessége elér egy bizonyos méretet */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
Ez minden. Ha bármilyen kérdése van, írja meg a megjegyzésekben, menjen a címre
