Optimalizálja a weboldalakat okostelefonokkal és táblagépekkel való használatra

Amint egyre több felhasználó internetezik és internetezik az okostelefonján és a táblagépén, egyre fontosabb saját honlapjának optimalizálása az okostelefonokkal és táblagépekkel való használatra. Adunk néhány információt és linkeket, amelyek segíthetnek meglévő webhelyének adaptálásában (ha még nem optimalizálták mobil használatra). Vannak tippek a téma újoncai számára is.

Az asztali PC-k, valamint az okostelefonok és táblagépek kezdőlapjának megvalósítása néhány nehézséggel jár:

A Google keresőmotornak van egy érdekes cikke a mobilinternet témáról és arról, hogy az okostelefonok és táblagépek használata hogyan változtatja meg az életünket a "Döntés pillanatai vagy, angolul: mikro-pillanatok" témakör alatt. Lényegében arról van szó, hogy az internet nagyon sok pillanatban segít bennünket naponta többször, például amikor valamit okostelefonunkon guglizunk, miközben tévézünk, miközben a megfelelő hashtaggel ellátott Twitter-bejegyzéseket nézzük, vagy egy áruházban gyorsan keresünk egy árat az Amazon-on azonnali ár-összehasonlításhoz. Ezek a mikropillanatok teljesen megváltoztatják a viselkedésünket.

Ha tesztelni szeretné, hogy webhelye táblagépekre és okostelefonokra van-e optimalizálva, akkor ezt megteheti a Google-on: google.com/webmasters/tools/mobile-friendly/?hl=de. A Google egy újabb tesztet kínál a testmysite.withgoogle.com/intl/de-de címen - ez egy kicsit részletesebb, mint az első teszt.

A webdizájn workshopon tesztelheti a webhely megjelenítését okostelefonon, táblagépen és asztali számítógépen is: web-designwerkstatt.de/url_test.html. Kérésre a webdesign workshop egy ingyenes ajánlatot készít a weboldalak mobileszközökhöz való igazításáról. Csak a css fájlok változnak, a tartalom változatlan marad.

A következőkben számos lehetséges megoldást mutatunk be a weboldalak mobileszközökre történő optimalizálására:

Példa egy egyszerű adaptív HTML5 kezdőlapra

Az érzékeny HTML5 kezdőlap példaként kifejlesztettünk egy kis sablont, amelynek meg kell felelnie a modern, felhasználóbarát és érzékeny webhely szinte minden követelményének. A webhelyet "tanulási objektumnak" tekintjük, és a következő fórumszálban várjuk a fejlesztésre vonatkozó tippeket és javaslatokat: homepage-forum.de/showthread.php?t=60227. A HTML5 kezdőlap sablon jelenlegi állapotát itt találja: Meine-erste-homepage.com/html5_webseitenvorlage/index.php. Az adaptív HTML5-sablon letölthető ZIP-fájlként is: Meine-erste-homepage.com/html5_webseitenvorlage/responsive-html5-webseiten-vorlage.zip

Mobileszközökre is optimalizált weboldal-készítő készlet használata

Az okostelefonokhoz, táblagépekhez és asztali számítógépekhez optimalizált webhelyek létrehozásának legegyszerűbb módja minden bizonnyal egy olyan weboldal-készítő készlet használata, amely alapértelmezés szerint tartalmazza ezt az optimalizálást. A weboldal tartalma kényelmesen karbantartható, például az asztali PC-n a böngészőben; a felhasználók okostelefonon, táblagépen és asztali számítógépen mindig könnyen és egyszerűen elérhetik az összes tartalmat. Ilyen platformot kínál a Jimdo, az Alfahosting vagy az 1 & 1 a DO-IT-YOURSELF honlapján:

www.jimdo.de - a Jimdo.de webhelyen HTML-ismeretek nélkül létrehozhat egy weboldalt egy weboldal készítővel. Van egy ingyenes csomag és különféle szakmai csomagok - fizetős verziókban, például a saját domainjével is.
1 és 1 Ionos MyWebsite - az 1 & 1 Saját webhely egy teljesen hosztolt CMS, beleértve a tartományt, e-mail címet, vendégkönyvet, látogatói pultot és még sok minden mást. Különböző formatervezési minták közül választhat, például a gyermek születésének privát változatához, esküvőhöz stb. Számos ipari sablont talál a vállalati változathoz. Az 1 és 1 Ionos MyWebsite okostelefonokra és táblagépekre is optimalizált! A honlap elkészítése gyerekjáték (akár előzetes tudás nélkül is) az 1 és 1 Ionos MyWebsite segítségével.

alfahosting.de - az Alfahosting.de webhely-építő készletével hét egyszerű lépésben hozhatja létre webhelyét.

A weboldalkészítő azonban nem mindenki számára való. Ezért további lehetőségek az alábbiakban.

A Dreamweaver kiterjesztés használata

Szembesültünk azzal a feladattal, hogy főként okostelefonokra optimalizált Helmers faiskola számára készítsünk egy weboldalt. Az értékesítés során a QR-kóddal ellátott növényi képcímkék bevezetésével a vonatkozó információkat a mobil interneten keresztül is elérhetővé kellett tenni. Mivel a növényeket a kertközpontban értékesítik, és a vásárlónak állítólag ott kell használnia okostelefonját a QR-kód olvasására, a weboldalakat is erre kellett optimálisan megtervezni.

Mivel csak a Dreamweaver-t használjuk weboldalunk létrehozásához, és már pozitív tapasztalataink vannak a Seven Projectről, mint a jó Dreamweaver kiterjesztések szállítójáról, a projecteven.com kiterjesztése kérdésessé vált a projekt megvalósításakor. Itt található egy áttekintés arról, hogy szerintünk mi a legjobb Dreamweaver kiterjesztés az adaptív webhelyek létrehozásához, és nagyszerű segítségeszközök:

Harmónia: projectseven.com/products/tools/hmy/index.htm - nagyszerű eszköz érzékeny weboldalak készítéséhez a Dreamweaver segítségével.
korszellem: projectseven.com/products/templates/pagepacks/zeitgeist/index.htm - készítsen egy reszponzív weboldalt a Dreamweaverrel - a PVII Page Pack segítségével ez egy kattintással elvégezhető - a weboldal sablonja készen áll. Csak annyit kell tennie, hogy beállítja a tartalmat - ennyi. Demók
Gépírók: projectseven.com/products/templates/pagepacks/typecrafters/index.htm egy másik PVII Page Pack. Demók
harmónium: projectseven.com/products/templates/pagepacks/harmony/harmonium/index.htm - egy másik PVII Page Pack. Demók
Adaptív menüvarázs: projectseven.com/products/menusystems/amm/index.htm - egy teljesen érzékeny navigációs menürendszer. Demók
Art Gallery Magic: projectseven.com/products/galleries/agm/index.htm - képgaléria - teljes körűen reagál és elegáns. Demók

Három sablont szeretnénk ajánlani:
Egyszerű sablon effektek nélkül: on-mouseover.de/templates/hp02/index.html, sablon sok effektussal (adaptív teljes képernyős kép/átlátszóság a CSS-rgba/váltó menü/CSS animációk, például "rengés", " Forgatás "," torzítás "," elhalványul "," diaeffektus "): on-mouseover.de/templates/hp33/index.html, sablon" kulcsképes animációkkal "(kép- és szövegbemutató): on- mouseover.de/templates/hp26/index.html

Egyéb webhelyek, amelyek információkat tartalmaznak a weboldalak mobileszközökön történő optimalizálásáról:

Tudjuk, hogy még csak a fejlődés elején járunk, amikor a weboldalakat okostelefonokra és táblagépekre optimalizáljuk. Ezért arra kérünk minden olvasót, aki rendelkezik linkekkel és tippekkel a számunkra, küldje el nekünk, például a lenti megjegyzés mezőben. Alternatív megoldásként elküldheti nekünk az információt a feliratkozási oldalunkon keresztül.

Talált hibát a weboldalunkon? Mondja el nekünk, hogy kijavítsuk a hibát!