miután a mobil változata a honlapon is kell manapság, és az egyetlen holtbiztos módja annak, hogy a webes projekt elérhető a mobil eszközök. Tehát, ha igaza van egy weboldal elindításában, akkor ezt a kérdést figyelembe kell vennie, hogy sikeres legyen. Van már weboldala, és szeretné frissíteni annak érdekében, hogy mobilbarát legyen? Az alábbi információ hasznos lesz az Ön számára is.
számos módja van a mobil weboldal elindításának ma. A legmegfelelőbb megoldás kiválasztása számos tényezőtől függ, mint például a weboldal típusa, kora és jellemzői, Saját webdesign céljai, készségei és követelményei. A legelterjedtebb megoldások a következők:
- Responsive design creation, amikor a felhasználó ugyanazt a weboldalt látogatja (amely a speciális CSS-hez kapcsolódó szabályok tekintetében eltérően jelenik meg) asztali és mobil eszközökről;
- különálló mobil weboldal verzió a csak mobil megközelítés alapján, amikor két, következetesen működő interfész van, és akár különböző domaineken/aldomaineken is tárolható;
- teljes értékű mobilalkalmazás, amely lehet önálló termék, előre megtervezett architektúrával, amelyet egy adott platformra fejlesztettek ki, vagy egy különálló előnézeti eszköz (például egy webböngésző), amely csak egy webhelyre alkalmazható.
ezen opciók bármelyike kiválóan működik mobil webhely létrehozásához. A tulajdonos csak a legmegfelelőbb megoldást választja. Vessünk egy pillantást a mobil projektfejlesztés legelterjedtebb (és legkényelmesebb) módjaira.
Hogyan készítsünk egy weboldal mobil verzióját (weboldal készítő)
ha még nincs weboldala, akkor érdemes olyan szolgáltatást választani, amely reszponzív tervezési támogatással és/vagy külön integrált mobilszerkesztővel rendelkezik. A weboldal-készítő erre a célra fog a legjobban működni, mivel ezek a platformok többnyire mobilbarát webhelyek fejlesztésére készülnek, így kezdetben alapértelmezés szerint minden blokkjukat, widgetjüket és interfészelemüket reagálnak. Ennek eredményeként a velük épített projektek nagyszerűen jelennek meg asztali és mobil képernyőkön anélkül, hogy külön mobil verziót kellene létrehozni. Nézzük át ezt a lehetőséget a Wix website builder használatával.
a Wix a világszerte népszerű all-in-one SaaS weboldal készítő, amely lehetővé teszi bármilyen típusú webes projekt indítását/kezelését, legyen az blog, Portfólió, céloldal, üzleti weboldal vagy akár webáruház. A kiterjedt galériájában elérhető összes sablon (jelenleg több mint 550 van itt), valamint a felhasználók által a semmiből létrehozott weboldalak automatikusan alkalmazkodnak a mobil böngészéshez.
itt külön beállítható az asztali és a mobil weboldal verziója, de még nincs táblagép előnézeti lehetőség. Amit itt tehet, az a kiválasztott blokkok és interfész elemek elrejtése, valamint az egyedi hátterek módosítása/beállítása. Mi több, a Wix speciális mobilhoz kapcsolódó funkciókkal rendelkezik, például:
- a gyorsindító panel megjelenítése (hozzáadhat egy telefonhívás gombot, linkeket a közösségi hálózatokhoz/hírvivőkhöz stb. itt);
- a ” Fel ” gomb;
- üdvözlő képernyő (egyfajta animált betöltő képernyő, amely lehetővé teszi érzelmi üdvözlet megjelenítését vagy márka/védjegy bevezetését, mielőtt ténylegesen hozzáférne egy weboldalhoz);
- egyedi színséma a Chrome böngésző panelhez;
- az automatizált tartalom és a weboldal elrendezésének optimalizálása mobil eszközökhöz (ez elég kényelmes lehetőség a tapasztalatlan tervezők által létrehozott weboldalak számára).
a Wix rendelkezik egy mobilalkalmazással is, amely lehetővé teszi a webhely kezelését, ha olyan előfizetést kap, amely hozzáférést biztosít a professzionális üzleti eszközökhöz.
Hogyan készítsünk egy mobil változata CMS honlap (WordPress)
mint minden más CMS, WordPress nem figyel a használt eszköz, hogy elérje a honlapon. A platform csak az alapértelmezett beállításokban megadott tervezési változatot biztosítja.
még mindig van értelme kiemelni a webfejlesztők szolgáltatásait, mivel a WordPress egyike azoknak a CMS-eknek, amelyek adminisztrációs paneljének kialakítása alkalmazkodhat a mobil eszközökhöz (ez azt jelenti, hogy egy weboldal nemcsak a látogatók, hanem a tulajdonos számára is kényelmes lesz, aki képes lesz szerkeszteni, beállítani és kitölteni egy mobil eszköz tartalmával). Ezenkívül vannak olyan alkalmazások okostelefonokra, amelyek nemcsak a klasszikus CMS-re, hanem a felhőre is alkalmazhatók WordPress.com platform is.
ennek eredményeként a mobil weboldal verziója az esetek 99% – ában maga a sablon érdemének bizonyul. Az egyetlen kivétel a speciális bővítmények vagy szkriptek, amelyek átirányíthatják a felhasználókat egy külön mobil témára (például képernyőfelbontás vagy eszközmodell alapján).
Hogyan hozzunk létre mobil weboldal verziót a WordPress segítségével a semmiből
ha csak egy weboldal elindítását tervezi, akkor a probléma nem olyan akut – csak ki kell választania a megfelelő sablont. A reszponzív témák választéka még a hivatalos CMS katalógusban is elegendő. Meg kell győződnie arról, hogy a kiválasztott kialakítás teljesen megfelel-e a deklarált funkcióknak. Ugyanez vonatkozik az olyan alternatív platformokra, mint a ThemeForest vagy a TemplateMonster.
ha a betöltési sebesség és a magas Oldalsebesség-betekintési paraméterek valóban számítanak Önnek, akkor vannak speciális sablonok, amelyek akár 100 pontot garantálnak a Profiltesztekben, például a Neve témában. Azonban azok a tervek, amelyek nem tudnak alkalmazkodni az okostelefon képernyőkhöz, manapság nem elég elterjedtek.
Hogyan cserélje ki a WordPress sablont egy Reszponzívra
ha már elég hosszú ideig rendelkezik egy weboldallal, és a sablonja elavult, hogy eredetileg nagyméretű képernyőformátumokhoz illeszkedjen, akkor fontolóra kell vennie annak lehetőségét, hogy egy régi weboldal-kialakítást egy újra cseréljen. Az ilyen megközelítésnek számos előnye van, nevezetesen:
- az asztali és a mobil weboldal verziója azonos stílusú lesz;
- a két interfésztípus kezelésének szükségessége megszűnik;
- nem kell összetett funkciókat és algoritmusokat írni a képernyő felbontásának és az eszköz típusának meghatározásához, amelyet a felhasználónak külön tervezésre kell átirányítania;
- a kereskedelmi témák gyakran technikai támogatással járnak, így minden kérdésére választ kaphat, és új témát állíthat be, amely nem rosszabb, mint az előző.
hátrányok itt is elérhetők. A sablonok gyakran írásos analitikai kódokkal, számlálókkal, hirdetési blokkokkal stb. Némelyikük még külön anyagtípusokat is bevezet, ami szükségessé teszi ezeket az elemeket egy új sablonba. Az összes lehetséges hiba negatív hatással lehet a keresőmotor eredményeire. Ha rendszeres felhasználói vannak, előfordulhat, hogy nem tetszik nekik az ötlet, sőt megtagadhatják a webhely látogatását. Így alaposan elemeznie kell a közelgő tervezési kapcsolót, hogy figyelembe vegye az összes lehetséges árnyalatot.
Hogyan készítsünk egy elavult sablont?
az elavult sablon adaptívvá tételének ötlete nem olyan bonyolult, mint amilyennek kezdetben tűnhet. Azonban nem igazán van értelme kipróbálni, ha hiányoznak a niche készségek vagy legalább a webdesign alapjai. Különben is, mindig van egy lehetőség, hogy bérel egy web designer, hogy segítsen, hogy.
a fő ötlet a CSS média lekérdezések hozzáadása, amelyek alapján a lépcsőzetes stílusokat speciálisan hozzáadják a szükséges képernyőfelbontásokhoz. Vessen egy pillantást a példára most:
@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}
például, ha a fő rács így nézett ki:
ez lesz a következő megjelenés HTML:
<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>
ezeknek a dobozoknak a stílusai CSS sablonfájlokba kerülnek, az elején álló ponttal jelezve, hogy ez a CSS osztály:
.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}
ha a rögzített vagy relatív szélességet 100% – ra cseréljük a javasolt képernyőfelbontáshoz, akkor a rács a következőképpen néz ki:
az ilyen eredmény eléréséhez elegendő a Média lekérdezést hozzáadni a stíluslapokhoz (az alábbi példa minden olyan eszközre vonatkozik,amelynek képernyő szélessége 1024 pixel vagy annál alacsonyabb):
@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}
ne feledje, hogy a zárójelben szereplő megjegyzéseket kizárólag mintaként említik, nem vihetők át a tényleges CSS-kódba.
milyen buktatók merülhetnek fel egy ilyen érzékeny tervezési megvalósítással? Sajnos sokan vannak:
- a weboldal teljes elrendezése sérülhet, mivel nem csak az oldalon elérhető kulcsblokkok rögzített szélességűek lehetnek. Ezek lehetnek képek,hírblokkok egy honlapon / kategóriában, szerzői leíró blokkok és egyéb elemek. Lehetetlen mindegyiket egyszerre azonosítani. Mindegyiket szerkeszteni kell, amint azonosítják.
- a weboldal mennyisége nem változik, ami negatív hatással lesz a letöltési sebességre lassú internetkapcsolat esetén (ilyen körülmények között nem lesz lehetséges optimalizálás).
- a keresőmotor ajánlásai szerint a mobileszközökön lévő betűtípusoknak könnyen olvashatónak kell lenniük nagyítás nélkül. Ez szükségessé teszi a címsorok, törzsszövegek, idézetek, listák (számozott és számozatlan) stb.
- a fejlécet és a komplex menüt teljesen át kell alakítani. Érdemes csak egy kis weboldal logót hagyni, egy keresési ikont (ha van ilyen lehetőség) és egy profil ikont (ha engedélyezési rendszert használnak). Az asztali menüt jobban el kell rejteni, és helyettesíteni kell egy “szendvics” ikonnal (menü ikon). A népszerű reszponzív sablonok többségében ezt két párhuzamos menü valósítja meg: az első asztali képernyőkhöz készült, és csak PC-n jelenik meg, míg a második csak mobileszközökre vonatkozik (csak ugyanazon média lekérdezések alapján jelenik meg csak mobileszközökön).
- ha a fő dobozok szerkezete eltér, például az oldalsáv a bal oldalon jelenik meg, de nem a jobb oldalon, míg az összes kütyü a fő tartalom előtt jelenik meg, bár logikusabb őket alacsonyabbra helyezni.
- a CSS fájlokon kívül a webhelystílusok helyettesíthetők JS szkriptekkel, így nehezebb lesz megtalálni és szerkeszteni őket.
ezek csak néhány lehetséges buktató. Ezért van értelme egy webdesign szakértőt felvenni a feladat elvégzésére.
a média lekérdezések előnyei lehetővé teszik a helytelen kód törlését bármikor. Ezek a stílusok nem jelennek meg a fő weboldalon.
Hogyan adhatunk hozzá reszponzív weboldal verziót pluginekkel
néhány CMS saját kiterjesztéskészletet használ, míg mások egyáltalán nem rendelkeznek velük. WordPress koedukált a leginkább figyelemre méltó plugin érzékeny honlap létrehozása, nevezetesen:
- Jetpack-az automatizált mobil verzió létrehozási funkció 2020 márciusa óta megszűnt;
- WPtouch-ingyenes és fizetős verziókban érhető el, a bővítménynek saját bővítményei és témái vannak, mint például a különálló gyorsítótár-szervezési plugin, a webalkalmazás-létrehozási plugin, a képoptimalizálási plugin, az AMP-létrehozási plugin stb. Az asztali számítógépről a mobil témára való váltás a WPtouch segítségével befejeződik a weboldal URL-jeinek megváltoztatása nélkül, ami sokat számít a SEO számára;
- WP Mobile Menu – érzékeny menü a mobil eszközök (ez jól jön az Ön számára, ha ki kell cserélni egy terjedelmes és összetett menü az asztali honlap verzió egy érzékeny és kompakt menü mobil eszközök);
- WP Mobile Detect – a plugin kezdetben meghatározza, hogy egy személy használ egy mobil eszköz, és biztosítja az eredményt, mint egy igaz/hamis értéket. Ez alkalmazhatóvá teszi a sablonkapcsoló opció megvalósításához vagy bizonyos interfészblokkok megjelenítéséhez;
- WP Mobile Edition – a plugin képes átalakítani WordPress weboldalak teljes funkcionalitású webes alkalmazások. A felhasználók hozzáadhatnak egy webhely ikont okostelefonjukhoz/táblagépükhöz, hogy teljes képernyős formátumban használhassák (keretek és böngészőfülek nélkül);
- Mobile Smart – egy plugin azonosítja, hogy az eszköz a mobil osztályra utal, majd átkapcsolja a témákat az alternatívára, amely kompatibilis a mobil eszközökkel. A Pro verzió a mobil menük integrált támogatásával, speciális widgetekkel, plugin-kezelési opcióval (külön készlet biztosítható a mobil eszközökhöz), domain kapcsolóval (két független weboldal verzió helyes munkájának megvalósításához) stb.
a webfejlesztők gondoskodtak arról, hogy a bővítmények továbbra is igénytelenek maradjanak, mivel sok webhelytulajdonos úgy döntött, hogy érzékeny sablonverziókra vált. Így ezeknek a bővítményeknek a többségét nem frissítették elég hosszú ideig, ami a platform jelenlegi verziójával való összeférhetetlenséghez vezethet. Az egyetlen kivétel a WPtouch.
az egyes bővítményekkel való munka sajátos sajátosságai lesznek. Némelyikük kész mobil sablonokat kínál, míg mások harmadik féltől származó bővítmények letöltését vagy saját kiterjesztések létrehozását javasolják.
ha előnyben részesíti a mobil webhely verziójának használatát az aldomain/alternatív címen, akkor itt vannak azok az árnyalatok, amelyekkel tisztában kell lennie:
- ezek különböző weboldalak a keresőmotorok számára, és nagyon rossz, hogy tartalmuk nem egyedi;
- ahhoz, hogy a keresőmotorok” ragasztják “az URL-t, és megértsék, hogy ez ugyanaz a weboldal, az összes link attribútumot megfelelően kell megszervezni:
-
- attribútum link … rel= “alternatív”href=” URL-mobil oldal” – asztali verziókhoz;
- attribútum link … rel=” canonical”href=” URL-asztali weboldalak ” – mobil sablonokhoz.
- ha a weboldal különböző verzióiban lévő tartalom eltér, fennáll annak a kockázata, hogy szankciókat kap az álcázásért (tartalomcsere esetén).
How To Make Mobile Version of HTML Website
amennyiben a HTML weboldalak nem rendelkeznek dinamikus funkciókkal, akkor nem lesz képes elemezni egy eszköz képernyőfelbontását, és az eredmény alapján átváltani az asztali sablonról a mobil témára. Mindössze annyit kell tennie, hogy teljesen újratervezi a problémás elemek elrendezési rácsát és stílusát.
már áttekintettük, hogyan kell ezt megtenni – ez média lekérdezéseken keresztül történik. A legnehezebben adaptálható elrendezések azok, amelyek rögzített szélességgel és elemek helyzetével rendelkeznek.
semmi sem fog működni speciális niche készségek és CSS/HTML kód bemerítés nélkül. Logikus, hogy akár bérel egy web design pro már a kezdetektől, vagy változtatni a design egy másik meg lehet vásárolni vagy rendelni, vagy egyszerűen dolgozzon ki egy teljesen új weboldalt a semmiből, például a Mobirise offline website builder, például. Végül, lehet, hogy itt az ideje, hogy áttérjen a felhő infrastruktúrára, és válasszon egyet az online weboldal készítők közül.
különálló webhelyek mobil és asztali vagy egy weboldal számára: melyik a jobb?
mint fentebb említettük, a mobil webhely megléte minden vállalkozás tulajdonosának kötelező. Ez egy biztos módja annak, hogy biztosítsa a minőségi üzleti prezentációt az interneten, forgalmat generáljon és garantálja a felülmúlhatatlan felhasználói élményt. A kérdés az, hogy van-e értelme két különálló webhelyverziót létrehozni a mobil és az asztali képernyőkhöz, vagy olyan reszponzív webhelyet építeni, amely mindkét típusú eszközön nagyszerűen jelenik meg?
általában egy reszponzív weboldal indítása hatékonyabb és praktikusabb megoldás. Ez kiküszöböli annak szükségességét, hogy két különböző webhelyet hozzon létre különböző domainekkel/aldomainekkel, URL-ekkel és belső struktúrával. Az ilyen webhelyek gyakran összekeverik a látogatókat, és problémákat okozhatnak, amikor a SEO optimalizálásról, az internetes marketingről és más kapcsolódó promóciós módszerekről van szó. Ehelyett egy olyan projektet kap, amely ugyanolyan jól jelenik meg az asztali és a mobil képernyőkön.
Mennyibe kerül egy weboldal mobil verziója?
a weboldal mobil verziójának költsége általában attól függ, hogy milyen platformon indítja el. Ha olyan online weboldal-készítőt választ, mint a Wix, akkor teljesen ingyenes lehet, mivel a rendszer lehetővé teszi alapértelmezés szerint mobilra kész webhelyek létrehozását. Az ingyenes Wix terv azonban nem teszi lehetővé a saját domain név összekapcsolását, ami lehetetlenné teszi a lehető legtöbbet a projekt teljesítményéből.
amennyire a Wix meglehetősen egyedi és sokoldalú árpolitikával rendelkezik, kiválaszthatja bármelyik tervét, hogy elindítson egy weboldalt. Csak vegye figyelembe a webdesign céljait, a projekt típusát és specializációját, valamint a költségvetést, amelyet készen áll arra, hogy befektessen, miközben kiválasztja a legelőnyösebb előfizetést. Minden Wix csomag számos speciális funkcióval és kifejezéssel rendelkezik, amelyek befolyásolják a végső költséget. A legolcsóbb weboldal-előfizetés havi 13 dollárba kerül, míg a legolcsóbb üzleti Alapterv ára havi 23 dollárról indul.
eldöntötte már, hogy a WordPress-t használja a reszponzív weboldal létrehozásához? Ezután a projekt költsége végül a pluginek árától függ. A WordPress kiterjesztések általában ingyenesek, de funkcióik egy része továbbra is elérhetővé válik, miután frissített a Pro verzióra. Például a WPtouch Pro költsége évi 79 dollártól 359 dollárig terjed. Pontosan ezért ésszerűnek tűnik egy kész reagáló sablonra váltani. Az ilyen témákat egyszer vásárolják meg, míg költségük 40-80 dollár körül mozog. Abban az esetben, ha továbbra is úgy dönt, hogy bérel egy professzionális webfejlesztőt, hogy újratervezzen egy elavult témát az Ön számára, a költségeket a projekt összetettségétől függően külön-külön tárgyaljuk.
alsó sor
nem titok, hogy minden weboldalnak rendelkeznie kell Mobil verzióval, hogy ma is igény legyen a célközönség iránt. Vannak szinte az emberek, akik nem használják a mobil eszközök böngészni az interneten, keresi a szolgáltatásokat és termékeket, amelyekre szükségük van. Így a webhely mobil optimalizálásának folyamata végül a kiválasztott platformtól függ.
ha csak egy weboldal elindítását tervezi, akkor érdemes előnyben részesíteni az egyik legnépszerűbb online weboldal-készítőt. A Wix erre a célra fog a legjobban működni. Abban az esetben, ha már futtat egy olyan weboldalt, amelyet a CMS működtet, mint például a WordPress, akkor jobb, ha azt egy érzékeny témával helyettesíti. A mobil támogatást kínáló bővítmények azonban meglehetősen drágák lehetnek, míg a sablon teljes átalakítása valódi kihívás lesz, különösen, ha önállóan kíván megbirkózni a feladattal.
különben is, nincs értelme, hogy hozzon létre egy külön mobil változata a honlapon. A projektfejlesztéssel és annak további támogatásával kapcsolatos problémákkal kell szembenéznie. Egy sokkal egyszerűbb és ésszerű megoldás az, hogy a honlap mobil-érzékeny a kezdetektől.