itthon / Dolgozzon az interneten / Alkalmazkodóképesség elérhetőségi adatai. Hogyan készítsünk tökéletes kapcsolati oldalt? Töréspontok használata

Alkalmazkodóképesség elérhetőségi adatai. Hogyan készítsünk tökéletes kapcsolati oldalt? Töréspontok használata

13.04.2020 Dolgozzon az interneten

Értékesítési generátor

Olvasási idő: 18 perc

Az anyagot elküldjük Önnek:

Ha az Ön webhelye nem lett adaptálva mobileszközökre, akkor nincs ok az aggodalomra, azonban a Yandex előrébb sorolja azokat a webhelyeket, amelyek ilyen adaptációval rendelkeznek.

Ebből a cikkből megtudhatja:

  • Mi az oldal adaptációja mobileszközökhöz
  • Hogyan ellenőrizhető
  • Webhely adaptáció a Google számára
  • Az oldal önadaptációja
  • A legjobb és ingyenes plugin a Wordpresshez
  • 6 legjobb szolgáltatás a webhelyek mobileszközökre való online adaptálásához
    • Miért van szükség a mobil adaptációra?

    Feltételesen fel vannak osztva külsőre és belsőre. Más szavakkal, a külső PF-ek például egy kattintás az eredményekből egy webhelyre mutató hivatkozásra Keresési eredmények, míg a megtekintett oldalak száma, az oldalon töltött teljes idő belső.

    Vegye figyelembe, hogy a Google is hasonló rendszert használ. Ez a kereső azonban még tovább ment, és kijelentette, hogy az oldal mobileszközökre való adaptálásán átesett források magasabban jelennek meg a keresési eredmények között.

    Ezután a belső PF-ekről fogunk beszélni. Gondoljon bele, ha a látogatónak kényelmes az oldallal dolgozni, termékeket találni és rendelni rajta, akkor nagyobb a valószínűsége annak, hogy átkerül a vásárlók kategóriájába.

    Ugyanez az elv működik kereső motorok: minél több vendég hagyja el az erőforrást a rajta való tartózkodás első másodperceiben, annál alacsonyabb a mutatója annak, hogy megfelel-e az emberek követelményeinek. A 10 másodpercnél rövidebb felhasználói munkamenetek arányát a webhely látogatásainak teljes számához viszonyítva visszafordulási aránynak nevezzük.

    Példaként vegyük az egyik orosz webhely mutatóját:

    Nézze meg, ha az oldalt nem mobileszközökre adaptálták, vagyis az oldal helytelenül jelenik meg rajtuk, akkor az okostelefonokról és táblagépekről származó visszafordulási arány 2-2,5-szer magasabb, mint egy PC-ről.

    Ezek a számok nemcsak a PF szintjét befolyásolják negatívan, hanem a potenciális ügyfelek elvesztését is jelzik, akik ténylegesen fizethetnek szolgáltatásokért vagy árukért.

    Egyetértek, az alkalmazás gyakoriságának növekedése mobilinternet igazán lenyűgöző. Könnyen megtudhatja, hogy a vendégek százalékos aránya a mobileszközöket használó bármely erőforráson, lehetővé teszi A Google Analytics. A mutató megtekintéséhez a következő lépéseket kell tennie:


    Nem titok, hogy a keresőmotorok mindig törődnek a táblagépek és egyéb eszközök felhasználóinak kényelmével, ami azt jelenti, hogy forgalom nélkül maradhat, ha nem hajlandó a webhelyet mobileszközökhöz igazítani.

    Ne feledje, hogy e hiba miatt sok felhasználó örökre elhagyja Önt, amint azt az Equation Research tanulmánya is bizonyítja. Szakértői rájöttek, hogy az emberek 46%-a már nem keresi fel azt az oldalt, ahol nem elégedett a mobil kütyükkel végzett munka színvonalával.

    Mint érti, ennek eredményeként szomorú következmények várnak rád: magának az erőforrásnak a termelékenységi szintje folyamatosan csökken, mivel a már felhalmozott közönség okostelefonról vagy táblagépről elérve nem tud kommunikálni, rendelést leadni, hírleveleket kapni. stb.

    Ha nem elégedett az események alakulásával, javasoljuk, hogy az oldalt mobileszközökhöz igazítsa.

    Melyik a jobb - reszponzív design vagy mobil verzió

    Először is értsük meg a különbséget e két fogalom között.

    A reszponzív dizájn csak arra szolgál, hogy olyan megjelenést adjon az oldalnak, amely megfelelően megjelenik a felhasználó által igényelt eszközről.

    Míg a mobil verzió alapvetően új verzió, amelyet kifejezetten az oldalt használó felhasználók igényeinek kielégítésére terveztek hordozható készülékek. Most beszéljünk többet mindkét típusról.

    Adaptív kialakítás

    Ez az opció lehetővé teszi, hogy egy kis pénz befektetésével az oldal barátságos legyen a kütyüből használó vendég számára.

    Valójában egy webhely mobileszközökhöz való adaptálásakor az oldalméretek, a webhelyelemek és a méretek egyszerű kombinációja létezik konkrét eszköz. Ennek eredményeként az ilyen webhelyek használata egyszerű, bár tisztában kell lennie a hiányosságaikkal.

    Először is ez a betöltött oldal mérete. Bár mobileszközön megjelenik, súlya változatlan marad. Emiatt az oldal betöltése sokáig tart, mert a mobilinternet sebessége kisebb, mint a vezetékesé, a felhasználó pedig belefárad a várakozásba, és bezárja a lapot.

    mobil verzió

    A mobil verzió általában a fő aldomainjén található: m.site.ru, mobile.site.ru. Ezt a funkciót nehéz pozitívumnak tulajdonítani, ha a SEO oldaláról beszélünk, mivel ebben az esetben nagyon sok feltételes átirányítás történik a fő verzióból a mobil verzióba. Végül is a site.ru/page és az m.site.ru/page a keresőmotorok szempontjából különböző oldalak maradnak.

    Érdemes elmondani, hogy a mobil verzió kisebb súlyú, gyorsabban töltődik be az adaptív elrendezéshez képest, mivel itt kikerülnek a felesleges funkciók, és az egyedi kialakítás megkönnyíti az oldallal való interakciót.

    Természetesen ez a verzió többe fog kerülni, mint az előző. Annak érdekében, hogy könnyebben kiválaszthassa, melyik opciót részesítse előnyben, kiemeljük azok jellemzőit:

    • Nincs értelme egy kis webhelyet mobil eszközökhöz igazítani, ha például egy szépségszalon webhelyéről beszélünk, akkor a normál adaptáció elegendő.
    • A mobil verzióhoz hatékony webhelyre lesz szükség, sok betölthető oldallal. Ez a lehetőség a napi több ezer fős közönséggel rendelkező online médiára vonatkozik.

    Vagyis a választásnál figyelembe kell venni a lehetőségeket és az igényeket. Hangsúlyozzuk azt is, hogy mindkét lehetőség ártól függetlenül sokkal jövedelmezőbbnek bizonyul az átalakítás szempontjából, mint a teljes hiányuk.

    Mit ad a webhely mobileszközökre való adaptációja a „nehéz” fotók hiánya miatt, vaku, további elemek tervezés.
  • Világos, könnyű navigáció. A mobileszközökön használt erőforrásokat függőleges görgetés, kényelmes keresőmodul, navigációs menü Kezdőlap, Fel, Vissza jellemzi. Ezenkívül a hívás funkció használatos, vagy a kapcsolat telefonszáma megjelenik a felhasználó előtt a webhely fejlécében.
  • Kényelmes menük, űrlapok. Fontos, hogy egy személy könnyen aktiválhassa a hivatkozást, ha ujjával a webhely más elemeire kattint.
  • olvasható tartalom. Fontos, hogy a forrás vendége ne tapasztaljon nehézségeket, ha el akarja olvasni a szöveget.
  • Képes költözni teljes verzió webhely. Nem állíthatja be, hogy a portál automatikusan a mobil kezdőlapjára irányítsa a látogatókat, amikor megpróbálják megtekinteni a modul teljes verzióját a modul képernyőjén.
  • Funkcionalitás, konverziós műveletek lehetősége. Nem fogadható el, hogy a felhasználó mobileszköz használata során nehézségeket tapasztaljon a rendelés, a hírlevélre való feliratkozás, a dokumentumok letöltése során.


    • Nyújtsa be jelentkezését

    Hogyan ellenőrizhető a webhely reszponzivitása mobileszközökön

    Az oldal mobileszközökre való adaptációjának ellenőrzése, ami abból áll, hogy látni fogja különböző eszközök, a következőképpen hajtható végre:

    • Quirktools.


    Itt láthatja, hogyan fog kinézni az oldal a különböző kütyük képernyőjén. A portál használatának megkezdéséhez egyszerűen írja be a portál URL-jét a címsorba, majd válassza ki a kívánt eszközt a vízszintes menüben.

    • ipadpeek.


    Lehetővé teszi a webhely megjelenésének ellenőrzését iPaden, iPhone-on.

    • F12.

    A legegyszerűbb mindig a szokásos trükk használata: nyomja meg az F12 billentyűt, majd kattintson a telefon ikonra.

    Weboldal adaptáció mobileszközökhöz a Google számára

    Ha webhelyét mobileszközökhöz szeretné igazítani a Google-on, akkor az ingyenes Fejlesztői eszköz hasznos lesz. Google:

    Itt meg kell adnia az erőforrás címét, és kattintson az "Elemzés" gombra. Példánkban a mobil használhatósági pontszám 49% a 100%-ból.

    Tanácsokat ad arra vonatkozóan is, hogy mit kell módosítani ahhoz, hogy az oldalt mobileszközhöz igazíthassuk, hasznos linkek ebben a kérdésben. Ezeknek az ajánlásoknak köszönhetően könnyedén elérheti a 90%-ot, ami a minimum a Google számára.

    Mit tehet webhelye mobilbaráttá tétele érdekében Állítsa be a megfelelő űrlapmező-attribútumokat

    Ha webhelye beviteli mezőket használ a felhasználónévhez/címhez, törölje az automatikus javítás kijelölését, és engedélyezze az automatikus nagybetűs írást:

    A neved:

    Ennek a technikának köszönhetően a webhely mobileszközökhöz való adaptálásakor megakadályozza, hogy a T9 automatizált beviteli rendszer neveket cseréljen, például " Erwan" tovább " Jereván».

    Ha beállítja az első nagybetűk automatikus használatát a szófajtákban, megkíméli az erőforrás vendégeit attól, hogy állandóan be kelljen kapcsolniuk a nagybetűket, vagyis minden szó elejére nagybetű kerül. szó (például " Ken ég"át fog alakulni Ken Burns"):


    Használja az e-mail mezőt, ha a webhely megkérdezi a felhasználót email hogy ne írja be a @ szimbólumot egy mobileszköz billentyűzetéről:

    Az email címed:

    Állítson be megfelelő szélességet a mobileszközökhöz

    Ehhez nyissa meg a webhelyet a számítógép böngészőjében, csökkentse a program ablakának szélességét, amíg a szöveg már nem olvasható. Ez megadja a minimális megengedett szélességet. Állítsa be ezt az aktuális értéket a @viewport tulajdonságra a metacímke beállításával az oldal fejlécében:

    Ha mobileszközről újra belép az oldalra, a rendszer automatikusan az Ön által megadott szélességet választja ki, vagyis az erőforrás vendége nem kényszeríti a nagyítást.

    Az alábbi ábrán extra hely maradt a jobb szélen:


    És itt a szélesség értéke megfelelően van kiválasztva:


    Az Ön feladata sokkal könnyebbé válik, ha a webhely rugalmas elrendezésre épül, és minden képernyőmérettel kompatibilis. Azt tanácsoljuk, hogy kísérletezzen a szélességgel, miközben a webhelyet mobileszközökhöz igazítja, így lehetővé teszi, hogy a forrás szépen nézzen ki és olvasható maradjon. Kiválasztott érték és beállítva a metacímkében.

    A kép szélességének beállítása 100%-ra

    Ne feledje, hogy néhány kép túl széles lesz, miután a webhelyet a kiválasztott szélességhez igazítja. Korábban nem kellett ilyen problémával foglalkoznom, mivel az asztali monitorok meglehetősen széles felbontásúak, sok kép elfér a szélességben:


    Ezt a problémát elkerülheti, ha 100%-os maximális szélességet állít be a képekhez. Ennek köszönhetően, ha a képek túl nagyok a kütyü képernyőjéhez képest, automatikusan átméreteződnek. Ne felejtse el feltüntetni az alábbi kódot webhelye CSS-jében:

    img (max. szélesség: 100%)

    Ha úgy állítja be háttér kép bármilyen kép nem használ img címkét, csak be kell állítania a háttér méretű CSS tulajdonságot, hogy tartalmazzon. Tehát a háttér mérete megváltozik, ha a képernyő felbontása nem elegendő a 100%-os léptékű megjelenítéshez:

    .header ( háttér: url(header.png) 50% no-repeat; background-size: include )

    Ne aggódjon, hogy a kép elveszíti tisztaságát - a modern mobileszközök ezt nem teszik lehetővé. Az a tény, hogy amikor a webhely látogatója nagyítást használ, a böngésző növeli a kép tisztaságát. Ügyeljen azonban arra, hogy a portálon ne szerepeljen a user-scalable=no tulajdonság a metacímkében, mivel az nem teszi lehetővé a nagyítást:

    A beviteli mezők szélességének beállítása 100%-ra

    Miután beállította a kép szélességét a max-width tulajdonsággal, tegye ugyanezt a beviteli mezőkkel. Ehhez egyszerűen adja hozzá a CSS-fájlhoz - a webhely fájljához:

    bemenet, szövegterület (max. szélesség: 100%)

    Mostantól a beviteli mezők nem fognak eltűnni a képernyőről, ha a webhelyet mobileszközről használja.

    Legyen óvatos, amikor a Letiltás gombot használja az űrlap elküldését megerősítő gombokhoz

    Ha a beküldés a gombra való első kattintás után leáll, akkor az űrlap elküldése gombjára nem kerül sor többszöri kattintásra.

    De ne feledje, hogy az asztali számítógépekhez képest a mobileszközök gyakran elvesztik az internetkapcsolatukat.

    Tehát ha egy gombot inaktívvá tesz, megakadályozza, hogy a felhasználó ismét rákattintsa, és a probléma nem csak a hálózat elvesztése lehet. Tehát egy ilyen eszköz böngészője bezárul, amikor Bejövő hívás, és felbukkan a blokkolt gomb problémája, mert nem engedi beküldeni az űrlapot a kitöltést követően.

    Ha úgy dönt, hogy kikapcsolja a beküldés gombot, tegye ezt néhány másodpercig, amikor a webhelyet mobileszközökhöz igazítja.

    Hosszú sorok esetén használjon tördelést

    Néha hosszú sorokat kell használnia: ide tartoznak a kódpéldák, linkek, bankszámlaszámok. Ha a portál nem elég széles a teljes vonalhoz, előfordulhat, hogy a modul képernyőjén kívülre kerül:

    Kezelje ezt a szótördelést, amellyel a vonal tördelődik, amikor eléri a képernyő szélét. Így a webhely vendége az összes információt egyszerre láthatja anélkül, hogy görgetést igényelne:

    Itt kell egy jelszó:

    Legyen óvatos a szóközökkel

    Mindannyian megszoktuk, hogy minden öt karaktert szóközzel választanak el, ha hosszú karakterláncot alkotnak. Végül is könnyebb lesz megjegyezni őket egy másik alkalmazásban való további bevitelhez.

    De megjegyezzük, hogy nem valószínű, hogy egy okos felhasználó beleegyezik abba, hogy önállóan beírja a karaktereket - tud a vágólapról. Igaz, az Ön által elhelyezett szóközöket manuálisan kell törölnie. Fontolja meg, hogy kényelmes-e tisztítani őket mobiltelefonon vagy táblagépen?

    A felhasználók életének megkönnyítése érdekében, amikor a webhelyet mobileszközökhöz igazítja, cserélje ki a szóközöket behúzással:

    .split m ( padding: 0em 0,5em ) Az Önkód: 435143a1b5fc8bb

    Mint látható, a karakterek között hézagok maradnak, de másoláskor nem kell velük foglalkozni. És időt takarít meg!

    A médialekérdezések előnyei

    Mobileszközökön (vagy kis böngészőablakban) megjelenített webhelyekhez egyéni stílusokat hozhat létre, míg az asztali számítógépen a weboldal megszokott megjelenése megmarad. Ehhez célstílusokra van szükség a médialekérdezésekben, íme egy példa:

    /* normál css */ .tabs ( padding: 10px 2em ) @media screen and (max-width: 500px) ( /* csak akkor érvényes, ha a képernyő keskenyebb mint 500px */ .tabs ( padding: 3px 1em ) )

    Kerülje a rögzített elhelyezést

    Ha a fejléc vagy az oldalsáv fixen van elhelyezve, és a pozíció CSS ​​tulajdonság fixre van állítva, azt tanácsoljuk, legyen óvatos.

    Ebben az esetben a jelölés létrehozásakor a cím mérete az oldallal arányosan nő, vagyis akár a teljes képernyőt is elfoglalhatja:


    A webhely mobileszközökhöz való igazításának legegyszerűbb módja, ha megtagadja a rögzített pozíciókat a mobil kütyükön való megjelenítéskor.

    Egy példa bemutatja, hogyan működik ez a gyakorlatban:

    /* normál css */ #fejléc ( pozíció: rögzített ) @média képernyő és (max. szélesség: 500 képpont) ( /* csak akkor érvényes, ha a képernyő keskenyebb 500 képpontnál */ #header ( pozíció: statikus ) )

    Használjon szabványos betűtípusokat

    Az egyedi betűtípusoknak köszönhetően az oldal drágának és professzionálisnak tűnik. Ugyanakkor a vendégeknek fájlokat kell feltölteniük betűtípusokkal – ezt a műveletet azelőtt hajtják végre, hogy a felhasználó láthatná a webhelyet.

    Az ilyen fájlokat általában nagy mennyiség jellemzi, azaz mobileszközön hosszú ideig tart a letöltés. És mit fog látni a portál vendége? Üres tér:


    Ha a webhelyet mobileszközökhöz adaptálja a Google Font Loader segítségével, miközben az egyéni verzió betöltődik, a szöveg szabványos betűtípussal jelenik meg. Ezután újra generálja az oldalt, és a vendég látja az eredetileg kiválasztott betűtípust.

    De meg kell írnia a CSS-szabályok két verzióját: egyet az alapértelmezett betűtípushoz, egyet pedig a letöltötthez.

    Hidd el, egy ilyen megoldás lesz az optimális: az ember mindent elolvas, amire szüksége van a betűtípusok letöltése közben, és akkor láthatja a dizájnt. Használja a következő kódot:

    WebFont.load(( google: ( családok: ["Open Sans"] ) )); .header ( font-family: Arial ) .wf-opensans-n4-active .header ( font-family: "Open Sans" )

    Hangsúlyozzuk: a .wf-opensans-n4-active osztályválasztót dinamikusan adja hozzá a webhely kódjához a Font Loader, de csak a betűtípus betöltésekor.

    Olvasható tartalmat kínáljon a felhasználóknak

    A mobileszköz-felhasználók általában meghatározott célra használják az internetet. Például, ha össze szeretné hasonlítani az áruk árát a különböző üzletekben, keresse meg a szalon elérhetőségeit, a gyógyszer használatára vonatkozó utasításokat.

    Ezért akkor jelennek meg a webhelyén, amikor a cím vonzza őket. Ezt követően fontos számukra, hogy egy kis képernyőről olvasásra előkészített tartalmat fedezzenek fel.

    Ennek a szabálynak az angol nyelvű leírására egy meglehetősen tágas szó „snackable” (az angol „snack” szóból - snack). Tehát az ilyen felhasználóknak szánt tartalomnak pontosan nassolnivalónak kell lennie, azaz kényelmesnek kell lennie a gyors olvasáshoz, útközbeni lapozáshoz.

    Vázoljuk fel azokat a főbb funkciókat, amelyeket figyelembe kell vennie, amikor egy webhelyet mobileszközökre adaptál képernyőolvasókhoz:

  • Kezdje egy rövid, tömör, szemet gyönyörködtető címsorral. Javasoljuk, hogy 10 szón belül fogalmazza meg, és használjon nagy betűtípust.
  • Bontsa a szöveget blokkokra, mindegyiknek rövid, informatív alcímmel kell kezdődnie, amely kiemelkedik az általános háttérből.
  • Számozott beszúrás / pontozott listák a tiédhez mobil felhasználók Könnyű volt gyorsan megtalálni, amire szüksége van.
  • Használjon vizuális betéteket, továbbá strukturálja az információkat és egyszerűsítse az észlelést.
    • Testreszabhatja az e-maileket a kis képernyős olvasáshoz

    A következő levelezőeszközök segítenek az e-mailek hozzáigazításában a mobileszközök képernyőjéről történő olvasáshoz:

    • MailChimp.
    • Weber.
    • Állandó kapcsolattartás.
    Cserélje ki a hivatkozásokat "tapintható" gombokra

    Amint a felhasználók mobileszközökről olyan oldalakra jutnak, amelyek nincsenek hozzájuk igazítva, „kövérujj-szindrómát” diagnosztizálnak magukon. Az orvosi terminológiák között nem található, ez a szakterület specialistáinak szleng, amely leírja azokat a hibákat, amikor egy adott elemet ujjal próbálnak eltalálni.

    Milyen méret lesz optimális egy gombnak, navigációs elemnek, hogy az embernek ne legyen gondja vele? Íme néhány tipp, hogyan illesztheti webhelyét mobileszközökhöz:

    • Az Apple úgy véli, hogy a gombok, navigációs elemek optimális mérete 44 x 44 pixelnél kezdődik.
    • A Nokia 48 x 48 képpont vagy 0,7 x 0,7 cm minimális méretet javasol ezen elemek létrehozásakor.
    • A Microsoft a 34 x 34 pixeles gombokat ajánlja.

    Ne feledje, hogy a mobilfelhasználók nehezen tudják használni az oldalt, ha a szövege tele van egymáshoz közeli linkekkel.

    Az általunk bemutatott példában az oldal teljes verziójának menüje linkek formájában készült. Itt rendkívül nehéz lesz azonnal eljutni a kívánt részhez egy tíz hüvelykes táblagépen.

    Az úgynevezett mobilbarát gombok, navigációs elemek beszerzéséhez két mód közül választhat: egyedi tervezéssel rendelheti meg, vagy sabloneszközöket használhat. Ha a WordPress-t választotta, javasoljuk a következő bővítmények használatát:

    • Kiemelkedő színes dobozok és gombok. Ezzel kényelmes gombokat hozhat létre különböző méretű, színű és helyi menü mobil felhasználók számára adaptálva.
    • Reszponzív menü. Ez a bővítmény lehetővé teszi egy kényelmes hamburger menü létrehozását.
    A legjobb és ingyenes beépülő modul a webhely mobileszközökhöz való adaptálásához a Wordpress JetPack számára

    Beszéljünk a legtöbbről egyszerű módszer a webhely mobileszközökre való adaptálása magán a WordPressen, miközben a legtöbbet magas szint hatékonyság. A JetPack eszközkészlet minimális erőfeszítéssel elvégzi ezt a feladatot – csak egy gombot kell megnyomni.

    És valószínűleg már telepítve van az alap beépülő modulok között. Ha igen, kattintson a "JetPack" hivatkozásra a webhely adminisztrációs menüjében, lépjen a modulok oldalára. Itt csak a „Mobil témát” kell aktiválnia.

    MobilePress

    Ez az egyik leggyakoribb, mégis egyszerű bővítmény. Két témát tartalmaz, és akkor hasznos, ha további alkotás azok a mobilfejlesztők.

    wptouch

    Ez a lehetőség a következő a mobileszközökhöz készült ingyenes webhely-adaptációs eszközök listáján a hatékonyság szempontjából. A statisztikák szerint több mint 4,3 millió alkalommal töltötték le.

    Előnye, hogy pár perc alatt gyönyörű, gyors mobiloldalt készíthet anélkül, hogy akár egy sor kódot is megírna. A WPtouch Pro nevű fizetős verzióban külön adminisztrációs panelt kap, támogatást a jegyrendszerben.

    Wapple Architect mobil beépülő modul

    Ez a beépülő modul a WAPL jelölőnyelven készült, kifejezetten a webtartalom testreszabásához, megjelenítéséhez és szállításához különféle eszközökön és platformokon.

    Minden kütyühöz saját API-t használ, és ez a lehetőség sokkal jobb, mint a szippantásos módszer, mivel nem érinti az asztali oldal címstruktúráját. Kiderült, hogy ez a bővítmény könnyen használható és meglehetősen egyszerű megoldás.

    Mobil detektor

    Az oldal mobileszközökhöz való adaptálásának ez a lehetősége fel van szerelve a hagyományos mobiltelefonok, okostelefonok automatikus felismerésével, aminek köszönhetően az oldal olyan verzióban töltődik be, amely kompatibilis felhasználói eszköz, vagyis a képernyő felbontása, átlója stb.

    Összesen hét előre telepített mobil téma opció áll rendelkezésre. Ezenkívül a Mobile Detector függetlenül változtatja a képek méretét és felbontását a megjelenítési beállításoknak megfelelően. Saját widgeteket, statisztikai gyűjteményt is kínál.

    Főbb előnyök:

  • Automatikus modulfelismerés több mint 5000 modulból álló adatbázis segítségével.
  • Képes megkülönböztetni a szabványos telefonokat a fejlett eszközöktől.
  • Statisztikák készítése a mobilfelhasználókról, amely olyan mutatókat tartalmaz, mint az egyedi látogatások száma, keresési forgalom stb.
    • WP Mobile Edition

    Valójában ez a korábban bemutatott verzió másolata - ugyanazokkal az előnyökkel, opciókkal rendelkezik, de többek között támogatja a Disqus kommentelő rendszert, mobil kártya XML saját generátorral a webhelyekhez.

    Ez utóbbi hasznos lehet Keresőoptimalizáció. Ne feledje, hogy ez a beépülő modul, amelyet a webhely mobileszközökhöz való adaptálására terveztek, egy mobil verziót hoz létre az m.facebook.com típusú aldomainben, amely gyorsítótárazást és mobil cookie-k támogatását teszi lehetővé.

    WordPress mobilcsomag

    A webhely mobileszközökhöz való adaptálásának ez a lehetősége támogatja a tartományleképezést, a keresési ügynököket, amelyek lehetővé teszik a népszerű mobileszközök azonosítását, ami lehetővé teszi a tartalom megjelenítését a szükséges felbontásban és minőségben. Egyedi témához testreszabható színsémák is rendelkezésre állnak.

    Webhelytáblázatok adaptálása mobil eszközökhöz

    Nem titok, hogy a legnehezebb dolog egy webhely mobileszközökhöz való adaptálásakor, nevezetesen a különböző felbontásokhoz, a táblázatokkal való munka. Sőt, ez leginkább a nagy mennyiségű információt tartalmazó táblázatokra vonatkozik.

    Beszéljünk az adaptív táblázat két elrendezési lehetőségéről.

    Először is nézzük meg a táblázat megjelenését:


    Bootstrap reszponzív táblázatelrendezés

    Őszintén szólva nehéz egy ilyen táblázatot igazán adaptívnak nevezni. Mobileszközön organikusnak tűnik, és az oldal elrendezése sem „folyik”. Ez az opció akkor megfelelő, ha nincs sok tábla az oldalon, így a plugin csatlakoztatása, további stílusok írása időpocsékolás lesz. A Bootstrap így használja.

    Ennek gyakorlati megvalósítása érdekében a táblázatot egy div-be csomagolják, amelynek szélessége legfeljebb 100%, túlcsordulás: auto.

    Ezenkívül az oldal mobileszközökhöz való adaptálásakor kiválaszthatja a maximális magasságot, rögzítheti a táblázat fejlécét, ha hosszú.

    Egy igazán érzékeny táblázat elrendezése

    Most beszéljük meg azt a helyzetet, amikor az Ön webhelye valóban tele van táblázatokkal - itt érdemes a Footable bővítményhez folyamodni.

    Először is csatlakoztatnia kell a bővítményt (letöltés a GitHubon / csatlakozni kell a CDN-ről), inicializálnia kell:

    De van egy finomság a webhely mobileszközökhöz igazításában: a szkript a táblázat szélességét veszi figyelembe, nem a nézetablak szélességét. Mivel ezt a hibát ki kell javítanunk, fontos, hogy egy kicsit „modernizáljuk” a szkriptet:

    Ehhez az inicializálásnál megadjuk a tábla osztályát vagy csak a tábla címkét, ha azt szeretnénk, hogy minden oldaltábla adaptív legyen.

    Mire gondolunk? A táblagépeken a „RAM”, „Átló”, „PPI”, „Akkumulátor” oszlopok el lesznek rejtve. Ha még kisebb, telefonképernyőn használjuk, az „Ár” is elrejtik.

    Az inicializálásnál töréspontok állíthatók be:

    Kiderült, hogy a 0-720 tartományban a mobil betartja a szabályt, a 720-1024 - táblagép, és 1024 felett - az asztali. Ha szükséges, további szabályokat is létrehozhat.

    Alapértelmezés szerint lehetősége van egy adott oszlop kibontására is. Ebben az esetben adja meg a data-attribute data-expanded="true" értéket:

    Nem beszéltünk a bővítmény összes funkciójáról, de ez a blokk elegendő lesz az adaptív táblák létrehozásához.

    Weboldal adaptálás mobileszközökre online: 6 legjobb szolgáltatás
  • mobiSiteGalore

    • Ez a webhely mobileszközökhöz igazítására szolgáló szolgáltatás joggal tekinthető a legkönnyebben kezelhető mobilwebhely-szerkesztőnek. A készítők szerint mindössze 54 percet vesz igénybe a weboldal teljes értékű mobil verziójának kifejlesztése.

    Vegye figyelembe, hogy a legtöbb meglévő szolgáltatás az okostelefonokkal való együttműködésre irányul, míg a mobiSiteGalore lehetővé teszi, hogy webhelyeket készítsen régebbi telefonokhoz.

  • MobStac

    • A MobStac segítségével HTML5-tel elkészített mobilwebhelyet kap. Ezenkívül lehetősége van a beállítások módosítására vagy egy adott sablon kiválasztására a design megváltoztatásához, ami nem lesz nehéz.

    Hangsúlyozzuk, hogy a MobStac az egyetlen olyan szolgáltatás, amely beépített bevételszerzési tervet kínál a mobilwebhelyeken. A mínusz abban rejlik, hogy a szolgáltatás még béta állapotban van, de lehet kapni egy meghívót, majd regisztrálni.

  • Mofuse

    • Itt kétféle megközelítéssel lehet majd fejleszteni a weboldal mobil verzióját: mindent saját kezűleg egerek segítségével, vagy az oldalt mobileszközökre adaptálva szakembercsapattól rendelve.

    Az első esetben több lehetőséget kap a tervezés területén, miközben havonta csak a szolgáltatás működtetéséért kell fizetnie. Ha szakembereket alkalmaz, minden munka az ő vállukra hárul.

  • Mobile App America

    • Ez az opció továbbfejlesztett keresőoptimalizálást biztosít webhelyének. Lehetőségeinek köszönhetően megelőzheti azokat a versenytársakat, akiknek a portáljai még mobil verzióval sem rendelkeznek. Amíg ez a szöveg készült, az alkalmazás támogatott iPhone készülékek, Blackberry, Android.

  • bMobilizált

    • Lehetővé teszi, hogy rövid időn belül elkészítse a webhely mobil verzióját. Az alkalmazást gyors konverzió jellemzi speciális beállításokkal, amelyek többek között lehetővé teszik a dizájn megváltoztatását.

    A fejlesztők szerint a bMobilized adatbázis több mint 13 000 mobileszköz-modellt támogat, beleértve a jelenleg népszerű márkákat is.

    De ha aggódik egy webhely mobileszközökhöz való adaptálásának költségei miatt, akkor ez a szolgáltatás az Ön számára készült, mert minél több webhelyet tárol rajta keresztül, annál több kedvezményt kap. Más szóval, a bMobilized szinte ideális lesz olyan webhelyek hálózatának tulajdonosai számára, amelyeket mobileszközökhöz kell igazítani.

  • Mobify

    • Mobify felismerve a legjobb szolgáltatás azoknak, akik kapcsolatban állnak az e-kereskedelemmel. HTML5 funkcionalitást kínál a tulajdonosoknak, fejlesztőcsapata pedig az Ön kívánságai alapján elkészíti az Ön mobilwebhelyét.

    A gyakorlat azt mutatja, hogy egy teljesen működőképes elektronikus áruház létrehozása az ötlet szakaszától kezdve legfeljebb három hétig tart. Emellett lehetősége van elmerülni a fejlődésében.

    Ha sikerült az összes fent leírt módszert kipróbálnia, de még mindig nem elégedett az eredménnyel, akkor itt az ideje, hogy szakemberek segítségét kérje.


    Tömb ( => 21 [~ID] => 21 => 09/28/2019 13:01:03 [~TIMESTAMP_X] => 09/28/2019 13:01:03 => 1 [~MODIFIED_BY] => 1 => 2019. 09. 21. 10:35:17 [~DATE_CREATE] => 2019.09.21. 10:35:17 => 1 [~CREATED_BY] => 1 => 6 [~IBLOCK_ID] => 6 => [~IBLOCK_SECTION_ID] => => Y [~ACTIVE] => Y => Y [~GLOBAL_ACTIVE] => Y => 500 [~SORT] => 500 => Dmitry Svistunov [~NAME] => cikkei Dmitry Svistunov => 11076 [~PICTURE] => 11076 => 7 [~LEFT_MARGIN] => 7 => 8 [~RIGHT_MARGIN] => 8 => 1 [~DEPTH_LEVEL] => 1 => Dmitry Svistunov [~LEÍRÁS] => Dmitry Svistunov => text [~DESCRIPTION_TYPE ] => text => Dmitry Svistunov cikkei Dmitry Svistunov [~SEARCHABLE_CONTENT] => Dmitry Svistunov cikkei Dmitry Svistunov => statyi-dmitriya-svistunova [~CODE] => statyi-dmitri -svistunova => [~XML_ID] => => [~TMP_ID] => => [~DETAIL_PICTURE] => => [~SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php?SECTION_ID=21 [~SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => blog [~IBLOCK_TYPE_ID] => blog => blog [~IBLOCK_CODE] => blog => [~IBLOCK_EXTERNAL_ID] => => [~EXTERNAL_ID] =>)

    A kapcsolati oldal nagy jelentőséggel bír, ezért a kialakítását meg kell adni Speciális figyelem. Minél kényelmesebb a kapcsolatfelvételi oldal, annál több lehetőség nyílik meg az oldal tulajdonosa előtt. Egy kapcsolatfelvételi oldal, ha megfelelően van megtervezve, jelentős hatással lehet a konverziós arányra: ha a felhasználó könnyen kapcsolatba léphet egy webhely menedzserével vagy rendszergazdájával, akkor pozitív felhasználói élményben lesz része. Minél egyszerűbb a folyamat, annál kevésbé kell a felhasználónak kitöltenie a mezőket vagy űrlapokat, annál jobb a konverzió.

    Egy jó kapcsolatfelvételi oldal javíthatja az oldalt, mert megteremti a feltételeket a jó kapcsolathoz a látogatók és az oldal tulajdonosa között. Nem mindegy, hogy milyen oldalról lesz szó, lehet webáruház is, hírportál vagy webszolgáltatás – rendkívül fontos a visszajelzés.

    Ennek ellenére sok tervező alábecsüli egy jól megtervezett kapcsolattartó oldal értékét azáltal, hogy a fő tartalmi oldalak kialakítására összpontosít.

    Előfordul, hogy a felhasználónak gyorsan fel kell vennie a kapcsolatot a webhely tulajdonosával, vagy kapcsolatba kell lépnie az ügyfélszolgálattal. Azonban semmi sem történik, még akkor sem, ha használja a keresést az oldalon. Néha a szükséges információk megtalálhatók az oldalon, de „rejtve” vannak, mivel a tervező nem gondoskodott a megfelelő navigációról, és a felhasználó egyszerűen nem látja a kívánt hivatkozást. A kétségbeesett felhasználó már készen áll a telefonálásra, de nem találja.

    Nagyon óvatosak azok a cégek, webszolgáltatások, amelyek nagy hangsúlyt fektetnek a kapcsolati oldalak kialakítására. Egyszerűen azért, mert ez az oldal nem csak elérhetőségi adatokat tartalmaz: olyan információkat tartalmaz, amelyekre a felhasználónak szüksége van, és interaktív. És ami a legfontosabb, egy jó kapcsolatfelvételi oldal arra ösztönzi a felhasználót, hogy újra és újra kapcsolatba lépjen az oldallal.

    A kapcsolati oldal egyfajta kommunikációs platform. Ha az oldal tulajdonosa megengedi az ügyfeleknek, hogy kifejtsék véleményüket, akkor ez már párbeszédre való felhívás. A webfejlesztők és a felhasználók profitálhatnak ebből az együttműködésből, ezért kell megfelelően megtervezni.

    Mint tudják, a tervezés funkcionalitása az egyik kulcstényező. A kapcsolati oldal tartalmazza fontos információ, de nincs belőle túl sok, ami időnként a funkcionalitás hibás értékeléséhez vezethet. Az oldal tulajdonosa úgy gondolja, hogy ha elhelyezett egy e-mail címet és egy telefonszámot az oldalon, akkor ez bőven elég. Néha igaza van.

    A működőképesség kettős ellenőrzése azonban több hasznot hoz, mint kárt. A megszakadt linkek vagy az információkkal túlterhelt oldalak mind károsak az elköteleződésre. Előfordulhat, hogy az oldal tulajdonosa nem kap fontos üzenetet, de a legrosszabb akkor történik, ha elavult vagy pontatlan információkat közöl. Egy kapcsolati oldal tervezésénél mindenekelőtt a felhasználókra kell gondolni, hiszen végül is ez az oldal kifejezetten nekik készült.

    Elhelyezkedés

    Feltétlenül gondoskodni kell arról, hogy a kapcsolatfelvételi oldal mindig elérhető legyen a felhasználók számára. Kinézet egy oldal még exkluzív dizájnnal sem jelent semmit, ha a felhasználók nem találják a kapcsolatfelvételi oldalt. Néha meglehetősen összetett kapcsolatfelvételi űrlapokat kell kialakítania, ezért előre kell ügyelnie az utasításokra. A felhasználók könnyebben kapcsolatba léphetnek a webhely tulajdonosával, ha részletes útmutatóval rendelkeznek.

    Egy weboldalt tervező tervezőnek két szempontot kell megjegyeznie:

    • Az elsődleges navigációnak mindig tartalmaznia kell egy kapcsolati oldalt
    • A felhasználóknak meg kell találniuk a kapcsolatfelvételi oldalt a webhely első látogatásától kezdve belső oldalak nem ütöttek

    A tervezők tapasztalatai alapján a felhasználók hajlamosak az oldal jobb oldalán keresni az elérhetőségeket, ezért célszerű a „Kapcsolatfelvétel” linket odatenni. Ugyanakkor emlékeznie kell arra, hogy ezek az információk másodlagos jelentőségűek a felhasználó számára, ezért ne tegye túl észrevehetővé vagy tolakodóvá a webhely ezen részét. A kapcsolati oldalra mutató hivatkozás működik a legjobban, amely az oldal jobb felső sarkában található. És ami a legrosszabb, a link a legördülő menüben, mivel a felhasználók egyszerűen nem veszik észre.

    Egyszerű kapcsolatfelvételi űrlapok

    Kereskedelmi oldalak esetében a kapcsolatfelvételi oldal nagyon fontos, ahogy fentebb említettük. Bár lehet, hogy nem olyan szép, mint a webhely többi oldala, egyszerűnek, felhasználóbarátnak és érthetőnek kell lennie. Ha az információ nem megfelelően strukturált, rosszul működik vagy félrevezető, akkor nem valószínű, hogy a webhely tulajdonosa képes lesz hosszú távú kapcsolatokat kiépíteni ügyfeleikkel.

    Gyakran előfordul, hogy egy felhasználó, aki üzenetet akar hagyni, elhagyja az oldalt, mert nem tudja kitölteni a kapcsolatfelvételi űrlapot. Vagy nem akarja, ha túl hosszú vagy bonyolult. Ma már a felhasználók nem akarnak időt tölteni a részletes űrlapok kitöltésével, ezért érdemes megfontolni azok egyszerűsítését. Minél egyszerűbb az űrlap, annál jobb, beleértve a felhasználói élményt is, ezért az alapvető információk gyűjtésére kell összpontosítania.

    Pontos megfogalmazás

    Ha hivatalos oldalakról beszélünk, akkor minden oldalon, beleértve a kapcsolatfelvételi oldalt is, be kell tartania az egyértelmű és pontos nyilatkozatokat arról, hogy a felhasználó milyen előnyökkel jár, ha a cég ügyfele lesz. Mire való? Megtisztult minden felesleges információtól a leginkább hatékony módon megragadni és lekötni a figyelmet. A szépen összefoglalt adatoknak tömörnek kell lenniük, hogy az emberek könnyen megtalálják, amire szükségük van.

    Ne feledkezzünk meg a vizuális összetevőről sem. ÉS beszélgetünk nemcsak a kapcsolatfelvételi űrlapok vonzó kialakításáról. Ha a cégnek van fizikai címe, akkor a kapcsolatfelvételi oldalon térkép elhelyezésével segíthet a felhasználóknak. A nagyvárosokban található cégek számára nagyon fontos elmagyarázni a felhasználóknak, hogyan lesz kényelmesebb számukra az irodájukba, üzletükbe vagy raktárukba jutás.

    Kapcsolati oldalak válaszkészsége

    Minden online vállalkozásnál a reszponzivitás a legfontosabb. Ez egy szigorú szabály, nincs kivétel. Mivel az internet rohamos ütemben fejlődik, és egyre több új készülék jelenik meg a piacon, ez azt jelenti Elérhetőség elérhetőnek kell lennie, függetlenül attól, hogy az illető milyen böngészőt vagy eszközt használ. Ma nagyon könnyű veszíteni a versenyben - elég, ha nem optimalizáljuk a kapcsolati oldalt a mobileszközökön való megjelenítéshez.

    Integrált komponensek

    Melyik a jobb: e-mail cím vagy kapcsolatfelvételi űrlap? A felhasználóknak szüksége van egyszerű módokon kapcsolatokat a szükséges szolgáltatások szolgáltatóival, így félúton meg kell találkoznia velük. Összpontosíthat az e-mailben történő kommunikációra vagy elküldhet egy kapcsolatfelvételi űrlapot – minden módszernek megvannak a maga előnyei és hátrányai.


    Kapcsolatfelvételi űrlapok

    • A kapcsolatfelvételi űrlap nem kényszerítheti a felhasználókat arra, hogy másik oldalra lépjenek
    • A kapcsolatfelvételi űrlap nem létrehozható fiókot vagy jelentkezz be e-mailben
    • Ha lehetséges, az űrlapnak rendelkeznie kell automatikus kitöltési funkcióval.
    • A kapcsolatfelvételi űrlapnak képesnek kell lennie üzenetek és értesítések küldésére
    Email
    • Az e-mailes kommunikációnak biztonságosnak kell lennie a felhasználó számára
    • Minden beküldött adatot meg kell őrizni későbbi felhasználás céljából.
    • A kapott üzenetekkel végzett munkát szisztematikusan kell végezni, és gondoskodnia kell róla biztonsági mentés adat
    Érvényesítési űrlap

    Az ellenőrző nyomtatványok nagyon fontos amikor többet kell tudnia a webhely felhasználóiról. Ezenkívül az érvényesítési folyamat valamilyen módon arra irányítja a felhasználót, hogy a helyes irányt, mivel felhívhatja a figyelmüket a hibásan megadott adatokra vagy az üres mezőkre. Így az ellenőrző űrlap időt takarít meg az ügyfeleknek, mivel a kitöltési folyamat végén a személy szilárdan meg van győződve arról, hogy üzenete a megfelelő címre fog eljutni.


    Telefonszámok

    Sok cég nem jelzi a kapcsolati oldalon telefonszámok, mert attól tartanak, hogy az állandó hívások megzavarják a munkafolyamatot. A kapcsolatfelvételi oldalon szereplő telefonszámok azonban – akárcsak a kártya esetében – növelik a felhasználó márkába vetett bizalmát, a vásárlók biztonságban érzik magukat, hisznek abban, hogy nehéz helyzetben fel tudják venni a kapcsolatot a cég alkalmazottjával és megbeszélhetik a problémát. A telefonszám lerövidíti a távolságot az oldal tulajdonosa és a felhasználó között, ez vonatkozik mind a hagyományos cégekre, mind a fizikai címmel nem rendelkező online szolgáltatásokra.

    Közösségi média profilok

    Gombok közösségi hálózatok egyre gyakrabban találhatók meg a kapcsolati oldalakon. Ez a megközelítés jelentősen növelheti a webhely képességeit, különösen, ha az ügyfélszolgálat a hét minden napján, 24 órában rendelkezésre áll. Sokak számára kényelmesebb, ha közösségi hálózaton keresztül lépnek kapcsolatba a céggel, ezért érdemes megfontolni a felhasználóval való kapcsolattartás ezen módját.


    Kapcsolati oldal kialakítása

    Igazán jó oldalak kapcsolatok tanúskodnak az azokat tervező tervezők magas képzettségéről. A tervezés legfontosabb része pedig a kapcsolati oldal vizuális stílusa. A kapcsolatfelvételi űrlapok esetében ez nagy mezőket jelent, amelyek megkönnyítik az adatok benyújtását. Ha a forma jól néz ki, jobban működik.

    A tervezés megkezdése előtt a tervezőnek részletesen tanulmányoznia kell az ügyfél által megadott elérhetőségeket. Minden elemnek jól szervezettnek kell lennie, emellett harmonikusan kell kombinálni őket. Ne feledje azt is, hogy a kapcsolatfelvételi oldalnak meg kell egyeznie a webhely színsémájával, hogy a felhasználó egyedileg azonosítsa a webhelyet és a márkát.


    Következtetés

    A kapcsolati oldalnak mindig láthatónak kell lennie. Ez nem csak kezdőlap, hanem a webhely összes többi oldala is. A kapcsolatfelvételi oldal kialakításakor ne feledje, hogy a felhasználók csak a "Kapcsolatfelvétel" lapon látható módon léphetnek kapcsolatba a webhely tulajdonosával vagy a támogatási csapattal. Ebben az esetben a siker kulcsa a kényelem és az egyszerűség. Meg kell adni a felhasználóknak, amit akarnak. Ha a felhasználónak meg kell adnia személyes adatait az oldalon, a legjobb, ha alapvető kérdéseket tesz fel: keresztnév, vezetéknév, e-mail cím. A kapcsolatfelvételi űrlap nem tartalmazhat további mezőket. Gondoskodnia kell a kapcsolati oldal adaptálhatóságáról is - minden böngészőben és bármilyen eszközön meg kell jelenniük. Ha a kapcsolatfelvételi oldalt megfelelően alakították ki, a webhely sikerének esélye jelentősen megnő a felhasználók körében.

    Manapság a reszponzív kialakítás minden webhely szent kötelessége, különösen, ha az oldal kereskedelmi jellegű. Mert mobil közönség lenyűgöző ütemben növekszik. Igen, azt mondod, hogy a mobil közönség már régóta, sok éven át növekszik, de most ez egy új trend, és a növekedés szinte exponenciális. Az okostelefonok mindenütt jelen vannak. Ha elad valamit, akkor a reszponzív tervezés létfontosságú az Ön számára.

    A Yandex-jelentések statisztikái szerint az általános mobilizáció ellenére a felhasználók többet vásárolnak számítógépről, mint okostelefonról, ugyanakkor inkább mobileszközökön keresztül választanak árukat és szolgáltatásokat. A Google azt állítja, hogy a felhasználók közel fele keres termékeket okostelefonján.

    A MediaScope szerint a mobil közönség gyorsabban növekszik, mint mások, 2017-ben 15%-os növekedést mutatott. A teljes mobilközönség 66 millió ember, ami a teljes lakosság 54%-a (2017). Ezzel párhuzamosan az asztali gépeket használók száma csökken.

    A Kommersant újság szerint a Runet közönsége a mobilszegmensben 2017-ben 47%-ról 56%-ra nőtt. Ráadásul a növekedés az idősebb generáció rovására megy, mert a fiatalok körében az internethasználat már régen elérte a maximumot.

    A kapcsolódó szolgáltatások legnagyobb szolgáltatója hálózati technológiák A Cisco teszteli az 5G hálózatokat, amelyek 2020-ban jelennek meg. A Cisco 2016-ban azt jósolta, hogy 2021-re mobilforgalom hétszeresére nő.

    A cipőket és kiegészítőket árusító Rechi webáruház kutatása szerint feltűnt, hogy a mobilvásárlók elszántabbak lettek. Az okostelefont használók akkor is vásárolni kezdtek, amikor sorban állnak, ebéd közben vagy lefekvés előtt.

    Mi az a reszponzív tervezés?

    A reszponzív webdizájn 2011 óta jelenik meg, de ennek ellenére a RuNet webhelyeinek nagy része még mindig ferdén jelenik meg mobileszközökön. Például a menü az egész képernyőt összezavarhatja, vagy fordítva, az oldal elrendezése túlmutat a képernyőn, és rettenetesen kényelmetlen vízszintes görgetést kell alkalmazni, itt még a képernyő megfordítása sem segít. Ezenkívül az adaptív verzió nélkül az okostelefon szövege nagyon kicsi lesz, általában lehetetlen elolvasni.

    A reszponzív webdesign a weboldal oldalainak kialakítása, amely úgy épül fel, hogy minden elem dinamikusan igazodik a képernyőhöz annak méretétől függően, hogy korlátozott körülmények között csak a legfontosabb elemek jelenjenek meg a képernyőn. Minél kisebb a képernyő, annál kevesebb tárgy van rajta, csak a legfontosabbak maradnak. A nagy képernyőkön megszoktuk, hogy egy csomó oldalsávot, menüt, widgetet és más hasonló dolgokat látunk egy weboldalon, amelyeket valójában nagyon ritkán használnak. Ezért az adaptív változatban csak az igazán fontos és működőképes marad meg. Például egy online áruháznál ez egy fejléc telefonnal, transzformátor menüvel és árukkal, a többi felesleges, de ez elég a vásárláshoz.

    Általánosan elfogadott, hogy a mobileszközökre adaptív tervezést előre, még az oldal létrehozása előtt meg kell tervezni, ezért talán csalódni fog a bátor webmester. De ez egy nagy tévhit, ezért egyáltalán nem szükséges a teljes webhelysablont teljesen megváltoztatni csak az alkalmazkodóképesség kedvéért, vagy teljesen megváltoztatni a teljes CMS-t. Jelenlegi webhelyét nagyon gyorsan, jelentős változtatások és bonyodalmak nélkül módosíthatja.

    Van különbség reszponzív és reszponzív weboldaltervezés között?

    Valójában a reszponzív és az adaptív fogalma különbözik. Egyszer régen, amikor az okostelefonok nem is gondoltak a bolygó meghódítására, az elrendezéstervezők és a programozók vitába szálltak. Melyik optimalizálási módszer jobb mobileszközökhöz: a módszer (RWD - reszponzív) vagy a módszer (AWD - adaptív). A különbség közöttük az, hogy a reszponzív módszer az elemek méretét százalékban változtatja: képek, videók, blokkok stb. A reszponzív tervezés azonban nem a böngésző méretétől függ, hanem a felhasználóra összpontosít, és három előre meghatározott elrendezéssel rendelkezik: okostelefonhoz, táblagéphez, laptophoz.

    Most mindkét lehetőséget alkalmazzák az adaptív elrendezésben, kiegészítik egymást. Az oldal elrendezése (rácsa) gyökeresen átépíthető a három fő képernyőtípus méretének megfelelő vezérlőpontokon: monitorok, táblagépek, okostelefonok. Részeként ellenőrzési pontok az elrendezés megnyúlik, hogy elemekkel töltse ki az üres teret. Így a weboldal a képernyő méretétől függetlenül optimálisan fog kinézni.

    Miért kell egy weboldalnak reszponzívnak lennie?

    A keresőmotorok évről évre egyre nagyobb figyelmet fordítanak a webhelyek mobil adaptációjára. Már megjelent külön keresés mobil eszközökhöz. Például a Yandex a Vlagyivosztok algoritmust használja, amely figyelembe veszi a webhely mobileszközökhöz való alkalmasságát, így ha az Ön webhelye nincs mobileszközökhöz igazítva, akkor az okostelefonon keresztül kérést beadó látogató nem fogja látni az Ön webhelyét a keresésben. eredmények. És ha a webhely még mindig a keresési eredmények között van, akkor messze a legalján

    Reszponzív mobilverzió nélkül a látogatók nehézségeket tapasztalnak az Ön webhelyén, ami rossz hatással lesz az egész webhely viselkedési tényezőire. Amikor egy látogató megnyitja a teljes, nehézkes verziót egy okostelefonon, nagy valószínűséggel azonnal bezárja az oldalt anélkül, hogy megpróbálná, és minden ilyen látogató elrontja a viselkedési tényezőket. Viselkedési tényezők nagymértékben befolyásolják a SEO pozíciókat, beleértve az oldalon töltött időt, a megtekintett oldalak számát. Az adaptív verzió bevezetése mindezeket a problémákat megoldja, mellékhatások nélkül. Egyes projektekben a webhely forgalma akár 40%-kal is növekedhet.

    Kényelmes analitikai rendszer a Google Analytics és a Yandex.Metrics szolgáltatásban. A rendszerek automatikusan meghatározzák az Ön webhelyének mobilitását, és kész jelentéseket készítenek forgalmi statisztikákkal és mobileszközökön keresztül végrehajtott konverziókkal. Ez nagyon hasznos a közönség mobilitásának meghatározásához.

    Az adaptív elrendezésnek nincsenek hátrányai. Csak egy mínusz van: a régi generáció nem szereti a túlzottan leegyszerűsített és nagy elemeket, hozzá vannak szokva a nagy képernyőkhöz és a rengeteg kis menüelemhez.

    Melyik a jobb: mobil vagy adaptív verzió?

    Az okostelefonokra való optimalizálás egyik módja a weboldal külön mobil verziójának elkészítése, amely csak okostelefonról nyitható meg. Az eszköztípus észlelése a szerver oldalon történik. Az utóbbi időben egyre ritkábban használják, mert sokkal drágább, mint az adaptív elrendezés, nehezebben fejleszthető és karbantartható. A mobil verzió csak nagyon összetett és nem szabványos webszolgáltatásokhoz alkalmas.

    A gátlástalan nagy ügynökségek ezt kihasználják az ügyfelek becsapásával. Végül is a különálló mobilverzió megvalósításának költsége többszöröse az adaptív elrendezés megvalósításának, így jobban megéri, ha lebeszélnek egy adaptív verzióról.

    Miért jobb egy reszponzív weboldal, mint egy mobil verzió?

    • Az adaptív elrendezésben a kód változásai azonnal megjelennek minden eszközön. Például, ha módosítania kell vagy újat kell hozzáadnia fontos funkcionalitás. Abban az esetben, ha a webhely mobil verzióval rendelkezik, mindkét verziót módosítania kell. És így minden alkalommal, ami megduplázza a programozókra és az elrendezéstervezőkre fordított kiadásokat.
    • Az adaptív webhelyeken a tartalom nem duplikálódik, ellentétben azzal a módszerrel, amikor a webhely mobil verzióját hozzák létre.
    • Az adaptív verzióban az asztali számítógéphez és az okostelefonhoz tartozó oldalon lévő cím ugyanaz marad, így nem kell minden alkalommal átirányítást beállítani.
    • Nem kell minden alkalommal tartalmat generálni külön oldalakon mobil és szabványos eszközök számára.
    • Ráadásul a Google 2016 decemberében az egyik Digital October konferencián azt mondta, hogy adaptív verziót kell készíteni, a mobil verzió pedig teljes nonszensz.

    Life hack! Tudtad, hogy egy weboldal mobilra adaptálása sokkal olcsóbban kivitelezhető, mint gondolnád? Mert valójában ez nem igényel különösebb erőfeszítést, és a munka rövid időn belül elkészül anélkül, hogy bármilyen következményekkel járna az Ön webhelyére. A webstúdiók általában merész árcédulákat kínálnak: 10 000 ₽ és 20 000 ₽ között, és valójában az adaptáció mindössze 500 ₽ áron rendelhető meg távolról a Kwork szabadúszó tőzsdén.

    Hogyan készítsünk mobil verziót az oldalról?

    Mielőtt adaptív elrendezést alkalmazna webhelyén, meg kell terveznie az elrendezést, ehhez meg kell határoznia, mely elemeket hagyja el, és melyeket távolítsa el. És tegye ezt külön okostelefonhoz és táblagéphez. Az okostelefonokon és táblagépeken korlátozott a hely, ezért nem túl fontos blokkokat kell feláldoznunk, és csak funkcionális elemeket kell hagynunk, és csak azt, ami segíti a látogatót.

    A WordPress-en egyébként a legtöbb új prémium téma támogatja a mobil verziót, valamint az erősítő oldalakat is. Nekünk van teljes útmutató««, olvassa el és hozzon létre reszponzív WordPress webhelyeket.

    Például az oldalsávok általában tájékoztató funkciót töltenek be, csúszkák stb. A menü túl hosszú, a bőséges változatban pedig végtelen bulivá válik, így külön gombba kerül. Ugyanez a helyzet a hosszú keresőmezővel. Az elemek nem lehetnek közel egymáshoz, hogy elkerüljék két elem egyidejű megnyomását.



    Adaptív elrendezés A webhely lehetővé teszi, hogy a weboldalak automatikusan igazodjanak a táblagépek és okostelefonok képernyőjéhez. A mobilinternetes forgalom évről évre növekszik, ennek a forgalomnak a hatékony feldolgozásához szükség van a felhasználóknak adaptív, felhasználóbarát felületű oldalak felkínálására.

    A keresőmotorok számos kritériumot használnak annak értékelésére, hogy a webhely mennyire reagál a mobileszközökön. A Google igyekszik leegyszerűsíteni az internethasználatot az okostelefonok és táblagépek tulajdonosai számára, a mobilkeresési találatok között speciális mobilbarát jelöléssel jelölve a mobileszközökre adaptált oldalakat. A Yandexnek van egy algoritmusa is, amely a mobil/adaptív verziójú webhelyeket részesíti előnyben a mobilkereső felhasználók számára.

    Az oldal mobileszközökön való megjelenését a szolgáltatásokon és a.

    Rizs. 1. A Yandex és a Google mobil kibocsátása megjegyzéssel a webhely mobileszközökhöz való alkalmasságáról Mi az adaptív elrendezés

    Az adaptív elrendezés azt jelenti, hogy nincs vízszintes görgetősáv és méretezhető területek, ha bármilyen eszközön nézik, 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, átépítve a sablont úgy, hogy az alkalmazkodjon a különböző eszközök képernyőméreteihez.

    Az adaptív webhely létrehozásának fő technikáit a cikk tartalmazza. A reszponzív tervezéshez a fő webhelytároló szélessége % -ban van beállítva, míg a böngészőablak szélességének 100%-a vagy kisebb lehet. A rácsoszlopok szélessége is %-ban van beállítva. A reszponzív tervezésben a fő tároló és a rácsoszlopok szélessége a px értékekkel van rögzítve.

    Az ebben az oktatóanyagban tárgyalt reszponzív, rugalmas elrendezési technika kiválóan működik egy kétoszlopos sablonon, í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.

    Főoldal elrendezése

    Az oldal három fő blokkból áll: egy fejlécből (fejléc), egy burkolótárolóból a fő tartalomhoz és egy oldalsávból, valamint egy láblécből (lábléc). Vegyünk 768 képpontot és 480 képpontot tervezési töréspontként.

    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 elhelyezkedését, megszakítjuk a közösségi oldalak gombjainak elhelyezését a bejegyzésekben, illetve az oldalláb-oszlopok burkolását.


    Rizs. 2. Példa adaptív elrendezésre 1. Metacímkék és szakasz

    1) Adja hozzá a szükséges fájlokat a szakaszhoz - egy hivatkozás a használt betűtípusokhoz, jQuery könyvtár, valamint a prefixfree beépülő modul (hogy ne írjon böngésző előtagokat a tulajdonságokhoz):

    Reszponzív webhelyelrendezés

    2. Oldalfejléc

    Helyezze a következő tárolóelemeket az oldal fejlécébe:
    logó

    © Copyright 2023, Mastering PC - Internet. Skype. Közösségi média. Windows oktatóanyagok