Szergej Lukoskin
2015.03.26. | | 0 hozzászólás
Az internet drámaian megváltoztatta a fogyasztói magatartást. Hosszú ideig nem mennek el a boltba, hogy terméket válasszanak. Éppen ellenkezőleg: először „szörfölnek” az interneten, keresnek egy terméket, összehasonlítanak a versenytársakkal, majd keresnek egy boltot, összehasonlítják másokkal, és csak ezután döntik el, hol vásároljanak.
Csak ezután mennek a kiválasztott üzletbe, vagy egyszerűen rendelnek árut az interneten keresztül. Ma a vásárlók több mint 60%-a ezt teszi.
Úgy tűnik, hogy a sikerhez szüksége van a cégének weboldalra vagy online áruházra, és ennyi. Ez azonban már nem elég.
Miért fontos egy webhely mobil verziója vagy az adaptív dizájn egy vállalkozás számára?
A helyzet az, hogy az okostelefonok és táblagépek megjelenésével egyre több vásárló keres árukat és szolgáltatásokat az interneten ezen eszközök segítségével, nem pedig asztali számítógépek vagy laptopok. És mindezt azért, mert nagyon kényelmes. A vásárló bárhol is van, közvetlenül a mobiltelefonjáról kereshet, és nem kell bekapcsolni a számítógépet.
Ez nagyszerű, de egy hordható kütyü fizikai képernyőmérete, legyen az táblagép vagy okostelefon, meglehetősen kicsi, ezért egy számítógépen vagy laptopon jól mutató webhelyet nagyon kényelmetlen a mobil képernyőjén megtekinteni.
Ezért most minden eddiginél fontosabb, hogy webhelye okostelefonon, táblagépen vagy phableten való használatra alkalmas (a phablet az okostelefon és a táblagép keresztezése).
Hogyan lehet egy weboldalt mobilbaráttá tenni?
Két megközelítés létezik a probléma megoldására:
- Hozzon létre egy külön verziót a webhelyről, amely megnyílik egy mobileszközön
- Hozzon létre egy weboldalt reszponzív kialakítással, amely bármilyen képernyőmérethez igazodik
Ez a második lehetőség, amelyet legszélesebb körben alkalmaznak, mivel olcsóbb a fejlesztése. A legtöbb modern webhelyet kezdetben úgy tervezték, hogy egyformán láthatóak legyenek a különböző képernyőkön.
A reszponzív weboldal automatikusan alkalmazkodik annak az eszköznek a képernyőméretéhez, amelyen megtekintik.
Például a laboratóriumunk helyszíne. Így néz ki a számítógép képernyőjén
És így néz ki egy okostelefon képernyőjén 
Mint látható, még egy okostelefonon sem kell semmit nagyítani. Minden vezérlő, hivatkozás, valamint kép és betűtípus nagyon könnyen használható, még kis képernyőn is.
Természetesen egy reszponzív weboldal költsége és fejlesztési ideje meghosszabbodott, ugyanakkor bármilyen piacon is dolgozol, egy reszponzív dizájnú weboldal nagyon időszerű befektetés a vállalkozásodba. És itt van egy lista a legfontosabb okokról.
Az 5 legfontosabb ok, amiért reszponzív üzleti webhelyet kell készíteni
Mobil keresés. A statisztikák szerint (az írás idején) a vásárlók több mint 50%-a mobileszközökről keres árukat és szolgáltatásokat az interneten. És ez a szám nagyon gyorsan növekszik. A közelmúltban a Google arról számolt be, hogy azok a webhelyek, amelyek nem rendelkeznek mobilverzióval, nagyon alacsonyan helyezkednek el a mobilos keresési eredmények között. Ezért, ha nem rendelkezik a webhely mobil verziójával, ne lepődjön meg, hogy okostelefonról történő keresés során nehéz lesz megtalálni.
Kényelem a felhasználók számára. Ugyanezek a statisztikák szerint a felhasználók több mint 40%-a nyilatkozott úgy, hogy elmenne egy másik oldalra, ha a jelenleginek nem lenne mobil verziója. És ismét, arányuk folyamatosan növekszik. Vállalkozások számára ez azt jelenti, hogy a vevő figyelmét az a szállító ragadja meg, akinek a webhelye bármilyen eszközön kényelmes.
Közvetlen kapcsolat. Az okostelefon lehetővé teszi a felhasználó számára, hogy azonnal hívást kezdeményezzen az oldalon feltüntetett telefonszámon (ha az oldal rendelkezik kattintással hívható funkcióval). Így sokkal közelebb kerülhet egy potenciális vásárlóhoz.
Új promóciós lehetőségek. Manapság a mobilhirdetés egyre elterjedtté válik, de ha nincs mobilwebhelye, akkor annak hatékonysága katasztrofálisan alacsony lesz. Éppen ellenkezőleg, a mobilbarát webhelyek egy másik hatékony promóciós csatornát kapnak.
Versenyelőny.És az utolsó. Ellenőrizze, hogy versenytársainak van-e mobil verziója webhelyeikről. Ha nem, akkor van egy nagy lehetőség, hogy hozzon létre egy erős versenyelőnyés szerezze meg azokat az ügyfeleket, akik elhagyják ellenfelei elavult webhelyeit.
Az Internet korszakában az nyeri a versenyt, aki a legtöbb hálózathasználó számára elérhető, akit könnyebben megtalál, akivel könnyebben kommunikálhat bármilyen eszközről.
Még mindig nem biztos benne, hogy szüksége van-e? mobil verzió oldal ill adaptív kialakítás?
Ma már a legtöbben mobilkütyükön keresztül interneteznek – tabletek, telefonok, e tekintetben az oldaloptimalizálás is új szintre lép. Ha a felhasználó bejön, és azt látja, hogy az oldal nincs mobileszközökre optimalizálva: a kép nem látható, a gombok kimozdultak, a betűtípusok kicsik és olvashatatlanok, a dizájn ferde – a 100%-ból 99%-ban kilép és kezdj el keresni egy másik kényelmesebbet. A bejelöli azt a négyzetet, hogy az erőforrás irreleváns, azaz nem egyezik a keresési lekérdezéssel. Ezért az oldal kialakítását a különféle mobileszközökhöz kell igazítani. Mi az oldal mobil verziója, hogyan kell elkészíteni, és mi a legjobb módja az alkalmazásnak? További információ ebben a cikkben.
Tehát négy kulcsfontosságú módja van a webhely mobil verzióhoz való igazításának.
Első módszer – Reszponzív tervezés
Az adaptív sablonok a képernyő méretétől függően módosítják a webhely képét. Általában szabványos 1600, 1500, 1280, 1100, 1024 és 980 pixelre vannak beállítva. A végrehajtáshoz lekérdezéseket használnak. Nem változik önmagában.
Ennek a módszernek az előnyei a következők:
- kényelmes fejlesztés, mivel maga a struktúra alkalmazkodik a képernyő paramétereihez, és minden frissítés nem igényel a semmiből a tervezés fejlesztését, elég a CSS és a HTML módosítása;
- egy URL-cím - a felhasználónak nem kell több nevet megjegyeznie, nincs szükség átirányításra (egyik címről a másikra való átirányításra), ami megnehezítheti a webmester munkáját, és a keresőmotor számára könnyebb a rendezés és a rangsorolás egyetlen címmel rendelkező erőforrás.
Természetesen az adaptív sablonoknak vannak hátrányai, amelyek mellesleg több, mint előny. Ennek ellenére sok fejlesztő ragaszkodik ehhez a koncepcióhoz, például a Google Corporation, amelynek a webhely mobil verziója adaptív kialakítású. Szóval hátrányok:
- A reszponzív tervezés nem támogatja ugyanazokat a feladatokat mobilon, mint asztali számítógépen. Ha ez például egy bank weboldalának mobil verziója, ahol az árfolyamra vagy a legközelebbi ATM-ekre vonatkozó információk nagyobb valószínűséggel fontosak a felhasználó számára, akkor ez a kialakítás bőven elég. De ha ez egy összetett strukturált erőforrás sok szekcióval és alszekcióval, akkor valószínűleg nem fog tetszeni a látogatóknak.
- A lassú betöltés egy kedvenc webhelyet gyűlöletkeltővé változtat. Ez különösen igaz azokra az erőforrásokra, ahol rengeteg animáció, videó, felugró ablak és egyéb aktív elemek találhatók. A nagy súly miatt az oldal egyszerűen „lelassul”, a felhasználó mérges lesz és elmegy, és keresési pozíciók helyszín - ősz.
- Egy másik jelentős hátrány, hogy nem lehet letiltani a mobil verziót. Ha egy ilyen elrendezés elrejt egy elemet, akkor semmit sem tehet a megnyitásához, ellentétben azokkal a webhelyekkel, ahol kikapcsolhatja, és normál tartományra válthat.
Ennek ellenére a webhely ilyen mobil verziója gyorsan, speciális készségek és költségek nélkül lehetővé teszi az erőforrások bármilyen modulhoz való igazítását. De a felsorolt hiányosságok miatt kicsi, egyszerű erőforrásokhoz, minimális információval és multimédiával, bonyolult navigáció és animáció nélkül fog megfelelni. Összetett helyszín esetén 2 másik módszer is megfelelő.
Második módszer - a webhely különálló változata
Ez a módszer nagyon elterjedt, és gyakran sikeresen teszi olvashatóbbá a webhelyet mobileszközön. Lényege az oldal külön verziójának létrehozása, amelyet az alkalmazáshoz készítenek, és külön URL-en vagy aldomainben, például m.vk.com-on találhatók. Ugyanakkor a fő funkcionalitás megmarad, a webhely kialakítása csak másképp néz ki. Ennek a módszernek az előnyei nyilvánvalóak:
- felhasználóbarát felület;
- könnyen módosítható és szerkeszthető, mivel a verzió a fő erőforrástól különállóan létezik;
- az alacsony súly miatt az oldal külön verziója sokkal gyorsabban működik, mint reszponzív sablon;
- leggyakrabban mobilról lehet az oldal fő verziójára lépni.
De még itt sem volt hiányosságok nélkül:
- Számos cím – az oldal asztali és mobil verziója. Hogyan emlékeztessen a felhasználóval két lehetőségre? A webmesterek gyakran írnak elő az asztali verziótól a mobil verzióig, de ha ez az oldal nem létezik a mobil verzióban, akkor a felhasználó hibaüzenetet kap. Itt nehézségek merülnek fel a keresőmotorokkal, amelyeknek nehéz 2 azonos erőforrást rangsorolni, és ez közvetlenül befolyásolja a promóciót.
- Az oldal számítógépről készült mobil verziója, ha a felhasználó véletlenül látogatja meg, nevetségesen fog kinézni, ami szintén befolyásolhatja a forgalmat.
- Ez a verzió gyakran erősen szűkített, asztali, így a felhasználó nagyon korlátozott funkciókat kap. De ugyanakkor, ha valami hiányzik, a látogató odamehet teljes verzió oldalakat.
Általánosságban elmondható, hogy egy külön mobilwebhely indokolja magát, és ez a legáltalánosabb módja annak, hogy egy erőforrást mobileszközökhöz igazítsunk. Népszerű a nagy online áruházak, például az Amazon körében.
A harmadik út - RES-design
A Google keresőmotorja aktívan támogatja a mobiltervezés ezen irányát. Ez a legbonyolultabb, legköltségesebb, de leghatékonyabb módszer az oldal telefonhoz vagy táblagéphez igazítására. RESS-nek hívják. Ez erőforrás-célzás egy mobilalkalmazásban, amely minden eszközre külön-külön letölthető. Androidra - GooglePlay-vel, Apple-re pedig iTunes-szal.
Az ilyen alkalmazások gyorsak, ingyenesek, kényelmesek, képesek fogadni különféle fajták információkat, miközben a telefon memóriája és az internetes forgalom sem emészti fel ugyanúgy, mint amikor böngészőn keresztül látogatunk az oldalra. Könnyen elérhetőek, mivel a link mindig a képernyőn lesz kéznél, és nem kell bonyolult nevet megadni. címsor böngésző.
Természetesen vannak itt hátrányok is, például a fejlesztés bonyolultsága, a magas munkaerőköltségek. egy nagy szám programozók, több elrendezési lehetőség elkészítésének szükségessége. Néha mobil eszköz az alkalmazás nem ismeri fel. Szabályos technikai támogatás, hiányosságok kijavítása. Mindazonáltal ezt a lehetőséget tartják a legjobbnak a három javasolt közül, produktív, megszakítás nélküli működése miatt.
Mobilwebhely készítésének legolcsóbb módja
A fenti módszerek mindegyike magában foglalja, bár nem mindig hosszú és bonyolult, de mégis fizetett webmester munkáját. Ha nem látja sürgős szükségét egy ilyen fejlesztésnek, akkor az oldal egyszerű és ingyenes mobil verziója megfelel Önnek. Hogyan lehet a legegyszerűbben elkészíteni?
Tölts le speciális sablonokat (bővítményeket) a reszponzív tervezéshez. Például a WP Mobile Detector, a WordPress Mobile Pack, a WPSmart Mobile és mások. Segítenek az oldal pontosabb megjelenítésében a telefonon, miközben kapsz néhány tippet, hogy mit kell javítani, hogy az oldal jobban illeszkedjen a mobil verzióhoz.
Természetesen, ez a módszer aligha alkalmas komoly erőforrásokra. Inkább azt ingyenes lehetőség kicsi és egyszerű oldalakhoz, blogokhoz, hírfolyamokhoz készült. Azt sem szabad elfelejteni Google kereső, akárcsak a Yandex, ma is komoly követelményeket támaszt a mobil verziókkal szemben, így ezzel a módszerrel óriási esély van arra, hogy lejjebb kerüljön pozíciói.
Ezzel a módszerrel nagy valószínűséggel a hirdetések és a felugró bannerek le lesznek vágva, de az oldal gyorsan és „késések” nélkül töltődik be.
A mobil verziók létrehozásának elvei
Nem számít, hogy az oldal mobil verziója ingyenesen, vagy webmesterek segítségével készült, a RESS rendszeren, vagy adaptív sablon segítségével készült. A legfontosabb, hogy hatékony működéséhez több rendkívül fontos alapelvet is be kell tartani. Tehát mi legyen a webhely mobil verziója? Hogyan tegyük produktívvá, hatékonysá és eredményessé?
Minden feleslegeset eltávolítunk
A minimalizmusra kell törekednie az oldal mobil verziójának fejlesztőjének. Képzeld el, milyen nehéz felfogni az információkat, amelyek tele vannak színekkel, gombokkal, transzparensekkel, és amelyeket végtelenül végig kell görgetni a megfelelő anyag keresése érdekében. Mobil design egyszerűnek és tisztának kell lennie. Válasszon 2-3 színt a tér elosztásához (például márkás). Jobb, ha az egyik fehér. Ossza fel egy kis képernyő terét érthető és olvasható zónákra. Virtuális kulcsok láthatónak kell lennie, hogy a felhasználó egyértelműen tudja, hova kell kattintania és lássa - itt a termék, itt az adatkitöltési űrlap, itt a szállítási és fizetési információk.
Összes további beállítások, ami az asztali verzióban hasznos lenne, és megkönnyítené a felhasználó életét, itt csak nehézségeket fog hozni. Csak a legfontosabb elemeket hagyja meg. Élénkség, reklám bannerek, a multimédia valószínűleg csak lelassítja a webhely vagy az alkalmazás munkáját, és elvonja a figyelmet a fő dologról.
igazítás
Az igazítás kérdése nem kevésbé akut, mert ha helytelenül történik, a felhasználó csak végződéseket kap fontos szavakat. A balra igazított és függőleges igazítás általánosan elfogadott. Képzelje el, hogy a telefon hírfolyamát görgeti. Felülről lefelé csinálod, de nem balra vagy jobbra.
Egy egyesület
Ha nincs lehetőség az átmenetek hosszú láncolatára, próbáljon meg több lépést egybe kombinálni. Például a webhely több szakaszban megköveteli az adatbevitelt - egy név, majd egy cím, ahol minden egyes cella külön házat, utcát, lakást stb. tartalmaz. Annak érdekében, hogy ne kényszerítse a felhasználót arra, hogy megpróbáljon sok kis cellát eltalálni, kérdezze meg csak 2 - nevet és címet kell kitöltenie.
És szétkapcsolás
Néha éppen ellenkezőleg, túl sok információt kell elkülöníteni. Például a legördülő menüben több mint 80 város listája található, ahol a szállítást végzik. Csoportosítsa őket régiók szerint, hogy a felhasználónak ne kelljen végiggörgetnie ezt a hatalmas listát. Amikor az egérmutatót a regionális központ vagy régió fölé viszi, egy másik városlista kiesik.
Listák
Egyébként a listákról. Ezek közül kettő van - ábécé vagy más sorrendben rögzítve és helyettesítéssel. Választásuk attól függ, hogy mi lesz felsorolva.
A Fix akkor hasznos, ha a felhasználó pontosan tudja, mit keres. Például város, szám vagy dátum. A második lehetőség hosszú, összetett nevek esetén megfelelő, vagy olyan esetekben, amikor egy névnek sok változata van, és mindegyik egy lépéssel közelebb viszi a felhasználót a célhoz. Az automatikus helyettesítés lehetőségét gyakrabban használják, ha a látogatónak segítségre van szüksége. Például egy kötőhely kötőtű vásárlását kínálja. Felhasználó belép keresési lekérdezés„Fém kötőtű”, de az eszköztippben „5 mm-es kötőtű”, „4,5 mm-es kötőtű” stb.
Automatikus kiegészítés
Ez a pont különösen igaz azokra az oldalakra, ahol online árusítanak valamit, és szabványos fizetési, szállítási stb. űrlapokat kell kitölteni. Ha valaki telefonról vásárol, akkor nagy valószínűséggel nincs ideje eljutni számítógép, ami azt jelenti, hogy a folyamatvásárlásokat a lehető leggyorsabban és kényelmesebben kell lebonyolítani.
Ehhez az űrlapok tartalmazhatnak már kitöltött adatokat, a legnépszerűbb válaszokhoz folyamodhat. Például adja meg a mai dátumot, készpénzes fizetési módot, várost, ha ugyanabban a régióban dolgozik. Változtathatók, de ha célba talál, a felhasználó ideje megspórolható.
Mindent elolvasnak, mindent megnéznek
Az oldal mobil verziójának kialakítása során ne feledje, hogy mindenkinek más a telefonja, és a látása is. Lehetséges, hogy az oldala kis képernyőről fog megjelenni, tehát a betűtípusok legyenek egyszerűek és olvashatók, a gombok legyenek elég nagyok, hogy anélkül lehessen rájuk kattintani, hogy másik oldalra kerüljenek, és a képek külön-külön, nagyban nyíljanak meg, különösen akkor, ha az Internetre jön.-shop.
Néhány statisztika
A webhely mobileszközökhöz való igazításáról szólva nem lehet mást tenni, mint a statisztikákhoz folyamodni, hogy megértsük, mennyire fontos ez a folyamat az online promócióban.
A számok a következők. Ma a lakosság 87%-a használ kütyüt, a legkisebb gyerekek és néhány idős ember kivételével. A közgazdászok növekedést jósolnak mobil kereskedelem 100-szor a következő 5 évben. Ugyanakkor a webhelyek mindössze 21%-a alkalmas mobileszközökkel való együttműködésre. Ez azt jelenti, hogy az internetes forgalom és a piac e-kereskedelem csak egy kis 5. rész foglalta el.
Gondolj ezekre a számokra. Van értelme hozzáigazítani az erőforrást? Természetesen igen. Sőt, miközben olyan sok van szabad hely ezen a piacon felveheti a saját szegmensét.
Hol kell a mobil verzió?
A mobil verzió használatának minden olyan platformon van értelme, amely magas helyezést kíván elérni. Végül is ez közvetlen hatással van a felhasználóra, kényelmes feltételeket teremtve számára, hogy az Ön webhelyén maradhasson.
Mobil verzió nélkül nem létezhet:
- hírportálok, mivel legtöbbjüket munkába vagy tanulásba menet telefonról nézik;
- közösségi hálózatok- ugyanezért, plusz van egy online kommunikációs faktor, ami azt jelenti, hogy ehhez egy kényelmes, érthető chatet kell létrehozni;
- hivatkozások, navigációs oldalak stb., ahová az emberek mennek, amikor valamit keresnek;
- online vásárlás - lehetőség olyan ügyfelek vonzására, akik nem vesztegetik az idejüket a vásárlásra, hanem mindent a mobil interneten keresztül vásárolnak.
Konklúzió helyett
Ma mobil technológiák Az aktív növekedés és fejlődés szakaszában vannak, ezért a piacon vezető szerepre törekedve minden vállalatnak biztosítania kell, hogy internetes erőforrása megfeleljen a követelményeknek. A növekvő felhasználói igények miatt az oldalakat folyamatosan frissíteni kell és hozzá kell igazítani a különböző eszközökhöz. Nyilvánvaló, hogy ha az embernek kényelmetlen egy adott erőforráson tartózkodni, nem tud ott információt kapni egy termékről vagy árról, nem tud rendelést leadni, nem tájékozódhat a szállításról, akkor megtalálja azt az oldalt, ahol mindez lehetséges lesz. . Ezért a verseny megnyeréséhez fontos egy rugalmas, kényelmes, funkcionális és érdekes erőforrás.
Az Android vagy az Ios webhely mobil verziója segít ebben. Ehhez válassza ki a fenti újratervezési módszerek egyikét - egy adaptív sablont, hozzon létre egy új webhelyet egy aldomainben, és lépjen rá átirányítással, használja ingyenes sablonok vagy teremtés mobilos alkalmazás, amellyel a felhasználó kényelmesebben léphet be és tartózkodhat az oldalon.
Kiadtunk egy új könyvet, "Közösségi médiás tartalommarketing: Hogyan juthat el az előfizetők fejébe, és szeretheti meg velük a márkáját."
A webhely mobil verziója a fő webhely duplikált verziója, amelyhez speciális elrendezést használnak, amely lehetővé teszi az erőforrás oldalainak kényelmes megtekintését és navigálását. mobiltelefonokés tabletták.
Még több videó a csatornánkon – tanulja meg az internetes marketinget a SEMANTICA segítségével
A mobiltelefon lett a legjobb barát a legtöbb ember számára a bolygón. A modern mobil kütyük szinte teljesen átvették az asztali számítógépek szerepét, és gyökeresen megváltoztatták a felhasználók internetes viselkedését. Egyszerre információforrásként szolgálnak, és számos feladat végrehajtásának eszközei. Az élet dinamikája megköveteli az idő leghatékonyabb felhasználását, ezért már régóta tanulunk, vásárolunk és foglalunk útközben.
Minden internetes projektnek megvan a saját főoldala, de a mobileszközök képernyőfelbontása eltér a számítógépekétől és a laptopokétól. Ennek eredményeként az oldalt szinte lehetetlen telefonról használni, mivel a megjelenítése nagyon kényelmetlen. Ezért volt szükség az oldal optimalizált verziójára, amely a zsebkütyük számára is olvasható.
Miért van szüksége a webhely mobil verziójára?
Az azonos web-források bősége, információs és értékesítési szempontból egyaránt, a látogatók hűséghiányát idézi elő. Az internetezőknek van választási lehetőségük, így ha egy látogató belebotlik például egy kényelmetlen erőforrás-navigációba, inkább nem vesztegeti az idejét, hanem elhagyja az oldalt, és egy versenytárshoz megy. Ez a helyzet arra kényszeríti az adminisztrátorokat, hogy a legkényelmesebb feltételeket teremtsék meg, hogy ne csak vonzzák a látogatókat, hanem motiválják őket a tartózkodásra.
Maximális lefedettség célközönségés kényelmes körülményeket teremteni számára – erre való az oldal mobil verziója.
Az oldal külön mobil verziója a mobil eszközökről történő kényelmes hozzáférés megvalósítása, amelyet régóta használnak. Az okostelefonokban az oldal egy oszlopban jelenik meg, így a fejlesztőnek az oldal mobil verziójának elkészítése előtt alaposan át kell gondolnia a dizájnt – mindent úgy kell elhelyezni, hogy a funkcionalitásban ne csökkentse a látogatót, és ugyanakkor tegye a lehető legkényelmesebbé az erőforrással való interakciót.
Hogyan működik
Az az elv, amely alapján meghozzák a döntést, hogy melyik verziót mutassák meg a látogatónak, hogy amikor a felhasználó belép az oldalra, automatikus észlelés eszköz képernyőjén. Ha a képernyő szélessége mobil modulként van azonosítva, akkor a rendszer átirányítást indít az erőforrás mobil verziójára, amely egy külön aldomainben található. Annak elkerülése érdekében, hogy a keresőmotorok ezt a verziót külön forrásként kezeljék a jövőben, jobb, ha egy aldomaint ugyanazon a domainen helyeznek el, mint a fő webhely, különben a webhely mobil verziójának népszerűsítése kontraproduktív lesz.
Hogyan fordítsuk le a webhelyet mobil verzióra
Vannak bizonyos alapelvek, amelyek megvalósításához programozási és elrendezési ismeretek szükségesek.
A mob. verziónál meg kell tartani az általános koncepciót az asztali verziónál, ugyanakkor külön tervezési megoldásokat kell kidolgozni, valamint a használhatóság szempontjából legkényelmesebb felületet. A látogató képernyőjén az erőforráselemeket megfelelő távolságban kell elhelyezni, és elég nagynak kell lenniük ahhoz, hogy könnyen megérintsék őket. Ezt követően a tesztelés és a végső indítás következik.
Mobil verzió vs adaptív elrendezés
Az oldal különálló mobil verziójával párhuzamosan van egy másik értelmezett változat is - az adaptív kialakítás.
Próbáljuk kitalálni, miben különbözik a webhely mobil verziója az adaptív verziótól.
A reszponzív webhely nem az erőforrás különálló változata, hanem a fő webhely, és automatikusan alkalmazkodik annak az eszköznek a felbontásához, amelyről bejelentkezik.
A reszponzív elrendezés előnyei közé tartozik, hogy ugyanaz a címe, mint a fő webhelynek, így nincs szükség átirányításra. Ez pedig jelentősen javítja az oldal pozícióját a rangsoroláskor. kereső motorok. A megnyitás során teljesen azonos oldaltartalom és annak funkcionalitása jelenik meg, de megjelenése igazodik az ablak méretéhez. Ezenkívül lehetőség van az erőforrás optimalizálására.
Az adaptív változat kidolgozása azonban időigényesebb folyamat, ennek megfelelően a rendezvény költséges része is nagyobb lesz.
A reszponzív dizájn olyan erőforrások esetében releváns, amelyek nem rendelkeznek nagy látogatói forgalommal - online áruházak, blogok, névjegykártyák, valamint weboldalak, fő feladatuk a tartalom szállítása.
A mobil verzió előnyei és hátrányai
A mobil verzióban több van Magassebesség letöltések és könnyű navigáció. Mivel a látogató minimális zavaró információt lát, nagyobb a valószínűsége, hogy pozitív cselekvést hajt végre. Ezenkívül egy külön mobil verzió teljesen független az asztali verziótól. Ez lehetővé teszi, hogy külön dolgozzanak velük.
Az ilyen koncepció hátrányai közé tartoznak bizonyos nehézségek a területen SEO promóció. Mivel ugyanazon tartalom elhelyezése ismétlődésnek minősül, ehhez külön intézkedésekre van szükség a webhely promóciós folyamatára gyakorolt negatív hatások kiküszöbölésére. Tekintettel arra, hogy a mobil verzió nem univerzális, ezért a főoldal tartalmán kívül külön költségtételt igényel.
Az oldal ezen verziója olyan nagy projektekhez alkalmas, amelyek eleve nagy forgalmat bonyolítanak le a főoldalon, de újratervezés nélkül szeretnék növelni a mobileszközök iránti hűséget. A legtöbb esetben egy külön mobil verzió releváns azokhoz az erőforrásokhoz, ahol fontos a letöltési sebesség - közösségi hálózatok, postai szolgáltatások, hírportálok.
Összefoglalva, csak azt mondhatjuk, hogy ma minden internetes projekt ésszerű igénye a webhely helyes megjelenítése a mobileszközökön. Ennek megvalósítása a webhely céljaitól és célkitűzéseitől, a költségvetéstől és a lehetőségektől függ.
A legegyszerűbb, ha megnézi, hogyan néz ki a webhely mobileszközön. Ezenkívül egy ilyen valódi eszközről készült képernyőkép a webhely legpontosabb megjelenítése a mobileszközökön, nem pedig emulátor használata.
Ha számítógépen kell ellenőriznie a webhely mobil verzióját, akkor a mobileszköz-emulátorok segítenek. Ezek közül a legpontosabbak a mobilfejlesztők számára készült eszközök. operációs rendszer, amelyek közül a legnépszerűbbek az Android Studio és az Apple Xcode . Ezek a készletek a legteljesebb emulátorokkal rendelkeznek különféle eszközökés az oldal mobil verziójának ellenőrzése a legpontosabban egy valódi mobileszközhöz fog közelíteni. A fejlesztői eszközök telepítése egy tipikus számítógépre azonban sok időt, tapasztalatot és szoftverismeretet igényel.
Egyszerű módszerek a webhely mobil verziójának ellenőrzésére
Önmagával ellentétben bonyolult módon az előző bekezdésben tárgyalt oldal mobileszközökön történő ellenőrzése a legtöbb egyszerű módon a böngészőablak szélességét szűk oszlop méretére csökkenti. Ha webhelye alkalmazkodik ehhez a szélességhez, akkor a webhely mobil verziója adaptív tervezési technológiával készül.
Ez a módszer azonban nem működik, ha az oldal mobil verziója külön tervezéssel készül. Ebben az esetben a webhelyet tároló szervernek kifejezetten jeleznie kell, hogy a látogató mobileszközről érkezett. A szerver megkapja ezeket az adatokat a karakterláncból Felhasználói ügynök, amelyet minden felkeresett webhely kötelező a böngészőjéből kérni. Ezért ahhoz, hogy lássa, hogyan néz ki a webhely mobileszközökön, "becsapnia" kell a szervert, és a telefonról kell megadnia a User Agent karakterláncot, nem pedig a számítógépről.
A második legnehezebb lehetőség, amely lehetővé teszi a webhely mobil verziójának számítógépen keresztüli ellenőrzését, egy speciális böngésző telepítése. Például Opera Mobile Classic Emulator. Léteznek belőle Windows, Mac és Linux verziók. Sajnos ez a fejlesztés a régi Presto motoron alapul, amelyet az Opera böngésző 12-es verziója előtt használtak, és nem igazán mutatja meg, hogyan jelenik meg az oldal egy modern mobil böngésző. 2013 óta Opera böngésző működik a Blink szoftvermotoron, ezért jobb, ha megnézi a mobiloldalt modern böngésző. Ez lehet Opera vagy Króm amelyek ugyanazon a WebKit-alapú Blink motoron futnak, mint az Apple Safariban.
Be kell foglalni meghatározott böngészők speciális fejlesztői mód (F12 Chrome-ban vagy Ctrl+Shift+i Opera esetén), és váltson mobileszköz módba:
Ezt követően könnyen megtekintheti, hogyan néz ki az oldal mobileszközön.
Ha egy vizuális személyes értékelés nem elegendő egy mobilwebhely ellenőrzéséhez, akkor vannak ilyenek speciális programok, amely képes elemezni az oldalt egy mobil eszköz szemszögéből, és nem csak mennyiségi értékelést ad az oldal mobilitásáról, hanem javaslatokat is ad arra, hogyan javítható az oldal okostelefonokon való láthatósága. Oldalunkon éppen ilyen technológián alapuló szolgáltatás található Google mobilbarát. Csak be kell írnia webhelye címét egy speciális sorban, és kattintson az "Ellenőrzés" gombra. A robot oda fog menni megadott címet, képernyőképet készít az oldalról mobileszköz-formátumban, és véleményt ad mobilwebhelye minőségéről.
Például ezt.
A mobileszköz-robbanás megjelenésével a fejlesztők választás elé kerültek: megtartsák webhelyeik mobil verzióit a „teljes értékűek” mellett, vagy az oldalak váljanak reszponzívvá és alkalmazkodjanak a különböző képernyőméretekhez?
Jelenleg a webhelyek mobilverzióinak készítése során három fő módja van ezek létrehozásának:
- Adaptív kialakítás;
- Az oldal külön mobil verziója;
- RESS (Responsive Design + Server Side).
Adaptív kialakítás
A CSS3 médialekérdezéseket általában az adaptív tervezés megvalósítására használják. A képernyő méretétől függően a felhasználó más képet fog látni:@média képernyő és (max. szélesség: 1600px) ( div.például (szélesség: 1500px;) ) @média képernyő és (max. szélesség: 1280px) ( div.például (szélesség: 1100px;) ) @media képernyő és (max. szélesség: 1024 képpont) ( div.például (szélesség: 980 képpont;) )
A reszponzív tervezés előnyei
- Könnyű fejlesztés - Az adaptív elrendezéssel a webhely teljes szerkezete automatikusan alkalmazkodik a különböző képernyőszélességekhez. Ahhoz, hogy működő terméket kapjunk, nem kell mindent a semmiből megírni – elég csak a CSS-t és a HTML-t megcsípni... Tekintettel a Bootstrap-hoz hasonló keretrendszerek elérhetőségére, az ilyen fejlesztés nem túl nehéz egy szabványos implementációval. Ráadásul egy ilyen termék támogatása viszonylag egyszerű feladat lenne.
- Egy URL - megkímél minket a felesleges átirányításoktól, és attól, hogy a felhasználónak meg kell jegyeznie a mobil verzió címét (még akkor is, ha az csak az m. előtag). Ezenkívül egyetlen cím jelenléte pozitívan befolyásolja a webhely népszerűsítését, mivel „kényelmesebb” lesz a keresőmotorok számára.
A reszponzív tervezés hátrányai
- Vegyes feladatok - a nagy oldalak "mobil" felhasználóinak tipikus feladatai általában eltérnek a PC-felhasználókétól. Ha Ön banki ügyfél, akkor valószínűleg a webhely mobil verziójában nagyon korlátozott mennyiségű információ érdekli - a legközelebbi fiókok, ATM-ek stb.
Általánosságban elmondható, hogy az adaptív elrendezésnél a legelterjedtebb megközelítés egy normál webhely másolatának elkészítése, a célközönség minden csoportjának igényeinek megvalósítása a telefonok elrendezésében. De akkor elfelejtheti a használhatóságot. A látogatók öt százaléka számára szükséges másodlagos részek az ügyfelek nagy részének kellemetlenséget okoznak. Az oldalak „súlya” továbbra is komoly akadályt jelent a mobiltelefon-használók számára. Ez azt jelenti, hogy az asztali webhelyekre jellemző néhány aktív elemet, beleértve a beágyazott térképeket, videókat, hitelkalkulátorokat és a mobiloldalak animált menüit, le kell cserélni könnyebb alternatívákkal. A reszponzív tervezés megadhatja nekünk ezt a képességet? Egy népszerű megvalósításban a kis képernyővel rendelkező felhasználónak az egész oldalt be kell töltenie, hogy csak egy részét lássa. Például, ha a fő elrendezés asztali verziója 200 Kb, a mobil verzió pedig további 50 Kb, akkor a megtekintéséhez 250 Kb-ot kell letöltenie. Természetesen használhatja az oldalkód tömörítését, de extra kérések továbbra is a szerverre megy.
- Reménytelenség - A mobil verzió egyik vitathatatlan előnye: ha nem tetszik, akkor kikapcsolhatod és normál domainre válthatsz. A reszponzív tervezésű webhelyek nem kínálják ezt az egyszerű, de fontos választást. Ha az egyéni elrendezés kényelmetlen, hibás, vagy ha egy fontos navigációs elemet rejt, hagyja békén: semmit sem tehet, hogy újra láthassa. Futnia kell egy asztali számítógép vagy a versenytárs webhelyének kereséséhez. Kitalálhat „mankókat” ennek a korlátozásnak a megkerülésére (használjon sütiket és vegyen fel különböző stíluslapokat). De ez a megközelítés bonyolítja a fejlesztést.
Az oldal külön mobil verziója
Annak érdekében, hogy a webhely kényelmes legyen a mobilfelhasználók számára, gyakran külön webhely-verziókat is létrehoznak - kifejezetten az okostelefonnal / táblagéppel rendelkező felhasználó számára. A leggyakoribb gyakorlat a mobilfelhasználók átirányítása egy speciális aldomainre (m.example.com, mobile.example.com stb.). Valószínűleg az esetek 99%-ában a mobil verzió egy lecsupaszított főverzió - csak azzal a funkcióval, amely a fejlesztők szerint szükséges és hasznos lesz a mobileszközök és táblagépek felhasználói számára.A mobil verzió előnyei
- Könnyű váltás mivel az oldal de facto a főverziótól elkülönülten létezik, sokkal egyszerűbb csak a mobil verzióhoz kapcsolódó változtatásokat végrehajtani rajta, hiszen a mobil verzió legtöbbször nem biztosít redundáns, felesleges funkcionalitást.
- Felhasználóbarátság - a mobil verzió általában jelentősen leegyszerűsödik az asztali verzióhoz képest, így a felhasználónak nem kell messzire mennie a szükséges információkért.
- Sebesség - az oldal ugyanolyan egyszerűsítése miatt a mobil verzió gyorsabban töltődik be. Ez elengedhetetlen azoknak a felhasználóknak, akik még mindig GPRS-t vagy gyenge 3G-t használnak.
- Választás- leggyakrabban a mobil verzióban lehet váltani a webhely fő verziójára.
A mobil verzió hátrányai
- Több cím -
- Felhasználói kényelmetlenség - különböző címek az asztali és mobil verziókhoz. Egyesek számára ez plusznak bizonyulhat, mások számára rendkívül bosszantó tényező lehet, amikor az oldal kényelmes megtekintéséhez még egy címet kell megjegyeznie. A keresőmotorokkal is vannak gondok: az ismétlődő tartalmak elkerülése érdekében a keresőoptimalizálóknak a rel="alternative" és a rel="canonical" metacímkéket kell használniuk. Ezen kívül, ha egy mobil felhasználó Google kereső Ha rákattint a találatok között található linkre, a rendszer átirányítja az asztali verzióra, vagy átirányítja a mobil verzióra. De ha ennek az oldalnak a mobil verziója nem létezik, hibaüzenetet kap.
- Korlátozás - külön mobilwebhely létrehozása azt jelenti, hogy megszabadulunk a tartalom és a funkciók egy részétől. Ezenkívül két különböző tartalomkészlettel rendelkezhet, amelyek negatívan befolyásolhatják az általános információs képet.
Általánosságban elmondható, hogy a webhelyek mobil verzióinak létrehozása meglehetősen jól indokolja magát, különösen nagy projektek esetén. Például az Amazon a webhely speciális, mobil verzióját használja.
RES
Maga a Google, bár támogatja a reszponzív tervezés webmesterek általi használatát, más rendszert használ termékeiben. Ha ellátogatsz pl. kezdőlap a különböző felhasználói ügynökök alatt különböző HTML-kódokat láthat a különböző eszközökhöz. RESS – Reszponzív tervezés + szerveroldal. Megvalósítási példa, "térdre" felvázolva:$DS = DIRECTORY_SEPARATOR; request_once(dirname(__FILE__) . $DS . "könyvtárak" . $DS . "böngésző.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "sablon.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "sablon.t.php";) else( $tmpl = "sablon .php"; ) include(dirname(__FILE__) . $DS . "sablonok" . $DS . $tmpl);
A RES előnyei
Valójában a módszer magában foglalhatja a webhelyek különálló mobil- és reszponzív verziójának előnyeit is, a megvalósítástól függően. Az újdonságokból:- Forgalom minimalizálás - A szükségtelen JavaScript eltávolítható a HTML-ből, ami CPU-t, memóriát és gyorsítótárat szabadít fel a mobileszközön. Lehet speciálisan optimalizált html és css is.
- Lehetőség van célzás használatára - például Android-eszközök esetén ajánlja fel az alkalmazás letöltését a GooglePlay-ről, az Apple-nél pedig az iTunes-ról. Mindegyik eszközhöz elkészítheti saját elrendezését.
Hátrányok
- Fejlesztési nehézség egy ilyen módszer megfelelő szerverkonfigurációt és több programozó munkáját igényel. Ezenkívül több különböző elrendezési lehetőséget is meg kell adni.
- Eszközészlelési mechanizmus - Sajnos még a mi korunkban sem sikerült tökéletesre hozni. Elég gyakran bukkannak fel történetek arról, hogy valaki ritka telefonját nem definiálják mobileszközként.
Általában a RESS a legjobb a három javasolt lehetőség közül, azonban sokkal több erőfeszítést igényel a fejlesztés során.