A webhely reszponzivitása a webhely azon képessége, hogy megfelelően jelenjen meg különböző eszközök eltérő tulajdonságokkal.
Még több videó a csatornánkon – tanulja meg az internetes marketinget a SEMANTICA segítségével
Ma az oldalakat személyi számítógépeken, táblagépeken és okostelefonokon tekintik meg. Minden eszköznek megvannak a saját jellemzői - működési sebesség, képernyőfelbontás.
Ha a webhely nem reagál, akkor helyesen jelenik meg a számítógépen. A telefonon pedig "menni" - a blokkok átfedik egymást, a betűtípus olvashatatlanná válhat.
Maga a reagálóképesség kifejezés széles körben használatos Ethan Marcotte Responsive Web Design – Responsive Web Design című könyvének megjelenése óta. A megtekintő eszközök adott jellemzőihez dinamikusan alkalmazkodni képes oldalakat adaptívnak nevezték.
Példa reszponzív elrendezésre
Megjelenítés PC-n:
A tányéron:
Okostelefonon:
Miért van szüksége reszponzív weboldalra?
A technológiák gyors ütemben fejlődnek, és a berendezésgyártók lépést tartanak velük. Okostelefonok, táblagépek, tévék és egyéb, internetre csatlakoztatott elektronikus eszközök minden ízlésnek és pénztárcának megfelelőek, számos képernyőméret közül választhat.
Ugyanakkor a tartalomfogyasztás exponenciálisan növekszik. Az ügyfelekért folytatott küzdelemben a webhelytulajdonosok minden eszközt és módszert bevetnek. Különösen a fejlesztési szakaszban határozzák meg a webes erőforrás megfelelő megjelenítésének lehetőségét különböző eszközökön.
Évről évre nő azoknak az eszközöknek a százalékos aránya, amelyek lehetővé teszik az információk online megtekintését. A formátumok és felbontások sokfélesége megnehezíti a fejlesztési folyamat egészét, minden szakaszban további követelményeket kell figyelembe venni: tervezők, elrendezéstervezők és programozók.
A reszponzív tervezés koncepciója lehetővé teszi a folyamat egyszerűsítését, mivel nem kell több webhelyváltozatot létrehoznia, mint korábban, például a mobil verziók esetében. Ebben az esetben külön funkciókészletet terveztek egy külön aldomainre.
A régi oldalakat javítani kell, és az alkalmazkodóképesség különféle megközelítései lehetővé teszik ennek megvalósítását. A lényeg az, hogy az elején helyesen értékeljük a léptéket, bizonyos esetekben egyszerűbb, gyorsabb és olcsóbb az új tervezési elrendezések és sablonok használata. Ha a vállalati identitás nem felismerhető márka, gyakran az a tény is, hogy erkölcsileg elavult, átdolgozásra késztet. És senki sem mondta le a márkaváltást, mint az új szintre való átmenet szakaszát. A reszponzív webhely hatékony eszköz vállalkozása számára.
Vannak olyan szolgáltatások, amelyek ellenőrizhetik, mennyire reagál az oldal.
Ráadásul ma a legnagyobb keresőmotorok, a Google és a Yandex figyelembe veszik ezt a paramétert a webhelyek rangsorolásakor. A használhatóság óta a navigáció az egyik nélkülözhetetlen tényező az oldal minőségének megítélésében. Az információ betöltésének sebessége, illetve optimalizált képek esetén leesik, az olvashatatlan szöveg és a túl kicsi vagy a képernyőre nem férő torz elemek megnehezítik az információkeresést és egyszerűen az elutasítások számának növekedéséhez vezetnek - a felhasználó bezárja az oldalt. Ezek olyan viselkedési tényezők, amelyek a keresési eredményekben elfoglalt pozíciót is befolyásolják.
Az oldaltulajdonosok számára a technikai terminológia és a rangsorolási paraméterek nem teljesen egyértelmű és kézzelfogható kritériumok. De elég, ha megértik, hogy ez hogyan befolyásolja a látogatottság dinamikáját. A mobileszközökről érkező forgalom aránya sok területen összemérhető, sőt meghaladja az asztali forgalom arányát. Ezzel számolni kell. Egyre kevésbé lehet találkozni olyan fejlesztőkkel, akik nem ajánlják fel a weboldal adaptálását, de nem árt ebben a kérdésben navigálni a folyamat irányításához.
Az alkalmazkodóképesség elvei
Menetelés
Tegyük fel, hogy kifejlesztett egy tervet asztali böngészőkhöz. Minden csúcsszuper. Amikor ezt az oldalt mobileszközről nézi, a blokkok eltolódnak és egymás alá kerülnek.
Ezt áramlásnak hívják. És most ez az egyik fő elv, amelyet a reszponzív tervezésben alkalmaznak. Ezt fontold meg.
Mértékegységrelativitás
Az iskolai fizikaórákról ismert, hogy a sebesség abszolút lehet, amikor akárhonnan is figyeljük a mozgást, a sebesség ugyanaz lesz. És relatív - amikor a referenciaponttól függően a sebesség változhat.
Az egységek ugyanazok. A különböző eszközök eltérő pixelsűrűséggel rendelkeznek. És a méret például a 320 px másképp fog kinézni egy számítógép és egy okostelefon képernyőjén.
A megoldás a relatív mértékegységek használata. Amikor beállítja a blokk összes méretét, léptékét és koordinátáját a számítógép képernyőjén és az okostelefon kijelzőjén megjelenő elemhez viszonyítva. Például a felső szegély.
Ellenőrző pontok használata
Ezek olyan elemek, amelyek elrendezése csak akkor változik, ha egy bizonyos eszközt használunk a megtekintéshez adott paramétereket képernyő.
Például, ha az oldal tartalma „elmászik”, akkor érdemes egy ilyen pontot hozzáadni, és javítani a tartalmat.
Minimális és maximális értékek
Mobiltelefonon a cikk úgy jeleníthető meg, ahogy kell. De most megnyitja ugyanazt az oldalt egy szélesvásznú monitoron, és nem elégedett a képpel. Minden el van nyújtva, az olvashatóság szóba sem jöhet.
Például megadhat tulajdonságokat. Ha a képernyő szélessége kisebb, mint 1000 pixel, akkor a tartalmat teljes képernyőn kell megjeleníteni. Ellenkező esetben a maximális szélesség 1000 pixel lesz.
Tárgyak egymásba ágyazása
Előfordul, hogy sok olyan elemet kell használnia, amelyek más blokkok helyzetétől függenek. Nehéz irányítani. Az ilyen objektumokat egy tárolóba ágyazhatja be. Ez azokhoz a blokkokhoz való, amelyeket nem kíván a képernyő paramétereihez igazítani - gombok, logók stb.
Helyes betűtípusok
A webes betűtípusok jól néznek ki. De ne felejtsd el, hogy mindegyik be van töltve. Ez befolyásolja az oldalak betöltésének sebességét a felhasználó számára.
A raszteres és vektoros grafika helyes használata
Ha a kép sok apró részletet tartalmaz, használjon raszteres formátumot. Ellenkező esetben - vektor.
De egyetlen kép sem használható optimalizálás - tömörítés nélkül. A vektorképek általában már tömörítettek. De nem minden régebbi böngésző támogatja őket.
Az elrendezések tisztelete
Vannak általános szabványok arra vonatkozóan, hogy az elrendezés kidolgozásakor milyen alapvető méreteket kell általában figyelembe venni.
A reszponzív tervezésben létezik olyan dolog, mint a töréspontok. Ezek olyan paraméterek, amelyeket a médiafunkciók adnak át. Jelölje meg, hogy a tervezési változtatás milyen felbontásoknál történik.
- Mobilhoz 320px, 480px.
- Táblagépekhez 768px.
- Netbookokhoz és egyes táblagépekhez 1024px.
- Személyi számítógépekhez 1280px és több.
Egy adott felbontáshoz való kötés nem merev. Az eszközök beállításaitól és paramétereitől függ.
Néha nincs szükség elrendezés létrehozására a köztes felbontásokhoz, például 480 képponthoz, ha az elrendezés helyesen jelenik meg a 768 és 320 képpont közötti tartományban.
Ha az elrendezés "megszakad" egy adott modulon, és hibásan jelenik meg más felbontásban, akkor ennek a képernyőnek a tényleges értékeit veszik töréspontnak.
Médialekérdezések
A reszponzív oldalak fejlesztése a stílusparaméterek médialekérdezések segítségével történő meghatározásának elvén alapul.
A lekérdezések meghatározzák:
- Eszköz típusa: projektorok, okostelefonok, monitorok, tévék stb.
- Körülmények.
A megfelelő kérés és válasz a css stíluslapfájl megfelelő megjelenítési beállításait alkalmazza.
A webhely válaszkészségének ellenőrzése
Különféle szolgáltatások és eszközök segítségével ellenőrizheti, hogyan jelenik meg webhelye mobileszközökön.
Böngésző használatával
Például a Google Chrome rendelkezik egy beépített eszközkészlettel, amellyel ellenőrizheti a webhely kialakításának helyességét a mobileszközökön. Nyomja meg az F12 billentyűt vagy a Ctrl + Shift + I billentyűkombinációt, vagy válassza ki a "További eszközök" - "Fejlesztői eszközök" menüpontot a menüben.
V Mozilla Firefox megtehető így: "Menü" - "Fejlesztés" - "Reszponzív tervezés", vagy Ctrl + Shift + M.
Google mobilbarát (Google Search Console)
Csak beírjuk a teljes URL-t a karakterláncba, és megkapjuk az eredményeket. Az ellenőrzés általában kevesebb, mint egy percet vesz igénybe.
A reszponzív webhely egy webfejlesztési szabvány, amely az internetes erőforrások minőségének és a felhasználók igényeihez való figyelmes hozzáállásának egyik mutatója.
Adaptív elrendezés A webhely lehetővé teszi, hogy a weboldalak automatikusan alkalmazkodjanak a táblagépek és okostelefonok képernyőjéhez. A mobilinternetes forgalom évről évre nő, ennek a forgalomnak a hatékony feldolgozásához pedig reszponzív, felhasználóbarát felülettel rendelkező oldalakat kell kínálni a felhasználóknak.
A keresőmotorok számos kritériumot használnak annak felmérésére, hogy a webhely mennyire reagál mobileszközökön. A Google igyekszik leegyszerűsíteni az internethasználatot az okostelefonok és táblagépek tulajdonosai számára, a mobil eredményeket a mobil eszközök speciális jelzéssel ellátott oldalak mobilbarát... A Yandexnek van egy algoritmusa is, amely a mobil/reszponzív verziójú webhelyeket részesíti előnyben a mobilkereső felhasználók számára.
Az oldal megjelenését mobileszközökön a szolgáltatásokon és a.
Rizs. 1. A Yandex és a Google mobil keresési eredményei, megjegyzéssel az oldal mobileszközök számára való barátságosságáról Mi az a reszponzív elrendezés
A reszponzív elrendezés feltételezi a hiányát vízszintes csíkok görgethető és nagyítható területek bármilyen eszközön, olvasható szöveg és nagy területek a kattintható elemek számára. A médialekérdezések segítségével szabályozhatja a blokkok elrendezését és helyzetét az oldalon, így a sablont átépítheti, hogy alkalmazkodjon a különböző eszközképernyő-méretekhez.
A reszponzív webhely létrehozásának alapvető technikáit a cikk tartalmazza. Mert reszponzív dizájn a webhely fő konténerének szélessége százalékban van beállítva, míg lehet egyenlő a böngészőablak szélességének 100%-ával, vagy annál is kisebb. A rácsoszlopok szélessége is %-ban van beállítva. V reszponzív dizájn a fő tároló és a rácsoszlopok szélessége a px értékekkel van rögzítve.
Az ebben a leckében tárgyalt reszponzív rugalmas elrendezési technika kiválóan működik kétoszlopos elrendezésben, így a webhely érzékeny és könnyen megtekinthető mobileszközökön. A sablon az oldalak fő tartalmának eltérő elrendezését feltételezi, ebben a leckében a főoldal elrendezését elemezzük.
A főoldal elrendezése
Egy oldal három fő blokkból áll: egy fejlécből (fejlécből), egy burkolótárolóból a fő tartalomhoz és az oldalsávhoz, valamint egy láblécből (lábléc). A tervezés során a 768 és 480 képpontot vesszük figyelembe.
Az első pontnál elrejtjük a felső menüt, és áthelyezzük az oldalsávot a bejegyzéseket tartalmazó tároló alá. A második pontban megváltoztatjuk a fejléc elemek pozícióját, megszakítjuk a közösségi média gombok elhelyezését a bejegyzésekben, és megszakítjuk a láblécoszlopok körüli körítést.
Rizs. 2. Példa reszponzív elrendezésre 1. Metacímkék és szakasz
1) Hozzáadás a szakaszhoz
szükséges fájlok - hivatkozás a használt betűtípusokra, a jQuery könyvtárra és a prefixfree beépülő modulra (hogy ne írjon böngésző előtagokat a tulajdonságokhoz):
2. Oldalfejléc
Az oldal fejlécében
a logót ;
gombot a főmenü megjelenítéséhez/elrejtéséhez
