Hogyan állítsunk össze először egy mobil, teljesítményorientált WordPress témát [2. rész]

Hogyan állítsunk össze először egy mobil, teljesítményorientált WordPress témát [2. rész]

Hogyan állítsunk össze először egy mobil, teljesítményorientált WordPress témát [2. rész]
СОДЕРЖАНИЕ
02 июня 2020

Ha lefelé görgette, hogy megnézze, mi itt tárolódik, akkor azon tűnődhet, hogy mi történt az 1-5. Ponttal.


Ó, igaz, hogy megtalálja a választ, akkor vessen egy pillantást e mini sorozat első részére.

Röviden: mi itt vagyunk, útmutatót adunk Önnek hogyan állíthatunk elő nagy teljesítményű mobil témát a WordPresshez. Lehet, hogy nem tűnik eleinte, de a kihívás valójában nagyobb, mint a legtöbb ember gondolná.

Végül is az az általános vélemény, hogy a témát csak reagálóvá kell tenni, és voilà, hogy a mobilra optimalizált, igaz? Nos, nem egészen. Tehát további beavatkozás nélkül térjünk vissza a témához.

Az 1. részről itt olvashat: Hogyan állítsunk össze először egy mobil felhasználót, a teljesítményorientált WordPress téma [1. rész]

6. Tervezés minden mobil böngészőhöz

Nagyon meglepő, hogy egy HTML-kód egy része hogyan viselkedhet eltérően annak a böngészőnek a függvényében, amelyen fut. És ez vonatkozik mind a mobil, mind az asztali számítógépekre. Valószínűleg inkább a mobiltelefonok számára, mivel több száz különféle eszköz és képernyő specifikációnk van, amelyekkel foglalkoznunk kell.

Ezért, amikor a témán dolgozik, ügyeljen arra, hogy emlékezzen a következőkre:

  • tesztelje munkáját az összes főbb böngészőn, miközben megy – ezt hamarosan elvégzi, a hibaelhárítás sokkal könnyebbé válik, szemben a böngészőtesztek elindításával, amikor már a teljes téma elkészült,
  • kapjon kezét a lehető legtöbb eszközre, és nézze meg, hogy a téma hogyan viselkedik rajtuk (próbálkozzon különféle képernyőméretekkel, felbontásokkal és arányokkal, ha lehetséges).

7. Az UX számít

A mobiltelefonon az emberek nagyon eltérően lépnek kapcsolatba a weboldalakkal, mint az asztali számítógépeken.

Ez alapvetőnek hangzik, de hadd mondjak el egy egyszerű példát. Amikor valaki pizzahelyet keres az asztalán, valószínűleg számos részletet érdekel az ellenőrzött étteremről. Például a menü, a galéria, a kapcsolattartási adatok stb.

Ha azonban ugyanazt a webhelyet látogatják meg mobilon, valószínűleg csak egy dolgot érdekelnek – hogyan juthat el a helyre és milyen számot kell hívni a foglaláshoz.

Fontos az, hogy amikor egy témát dolgoz fel a mobiltelefonra, akkor a kialakításnak lehetővé kell tennie a webhelytulajdonos számára, hogy további figyelmet fordítson a konkrét elemekre, amelyek döntő jelentőségűek lehetnek a mobil látogatók számára..

A legegyszerűbb módszer erre a jól megtervezett widget-területeken keresztül, amelyek megjelennek a honlapon, és a képernyő látható részének felső részén maradnak (más néven a hajtás felett tartva)..

A mobiltelefon használata közben az embereknek nagyon kevés ideje van a szükséges információk keresésére. Ez az oka annak, hogy egy jó mobil kialakítás hatékonyan szolgálja ezen információk hozzáférhetővé tételét.

8. Kevesebb több

A kevésbé több fogalom könnyen alkalmazható a téma fejlesztésében a legtöbb forgatókönyvre, és amikor a mobil témákról van szó, ez különbséget jelent a nagyszerű téma és az úgynevezett téma között..

Az alábbiak szerint mit tehet többet elérve kevesebbtel:

  • Hagyjon kevesebb helyet a márkanevek számára. Fontos, hogy van bizonyos hely a weboldal logójának, ez nyilvánvaló. Ez azonban továbbra sem olyan fontos, mint a tényleges tartalom, ezért ügyeljen arra, hogy ne hagyja, hogy a logó a hajtás feletti hely nagy részét elfoglalja.
  • Bemutatja a hozzáférhető menüket. A menük mobiltelefonon mindig problémát jelentettek. Egyrészt a webhelyeknek menükre van szükségük. De másrészt, akár egy rövid menü (akár csak négy elemből áll) könnyen felhasználhat két szöveges sort a legtöbb mobil eszközön, ami tovább tolja a tartalmat az oldalon. Az alábbiak szerint dönthet úgy: (1) normál módon jelenítse meg a menüt, ha az egyetlen szöveges sorba illeszkedik, (2) ha nem, akkor válassza ki a legördülő menüt..
  • Megszabaduljon az irreleváns menükről. Azt kockáztatnám, hogy azt állítom, hogy a lábléc menü általában nem jelent értéket a mobil látogató számára. Asztali számítógépen ez egyfajta átfogó menüként szolgál, ahol a látogatók az összes többi oldalra mutató hivatkozásokat találhatnak, de a mobiltelefonon alig van oka annak, hogy bárki használná. Fontolja meg teljesen megszabadulásától, amikor a témát mobilon nézi.
  • Legyen óvatos a weboldal további szolgáltatásaival. Számos lehetőség rejlik az egyedi szolgáltatások bevezetésében egy új WordPress témában. Végrehajthat olyan dolgokat, mint a képcsúszkák, a közösségi médiaintegráció, az egyedi galéria és még sok más. De kell? Noha ezek a funkció-ötletek mind nagyszerűek, problémákat okozhatnak a mobil felhasználók számára. Ha azt szeretnénk, hogy megbizonyosodjon arról, hogy a témája a legtöbb platformon megfelelően működik, akkor használja az natív eszközt wp_is_mobile () funkció. Ez lehetővé teszi a mobil és az asztali látogatók megkülönböztetését, így egyszerűsítheti az előbbi felhasználói felületét a problémák elkerülése érdekében.

9. Csak a szükséges fájlokat töltse be

Manapság az emberek a mobil eszközök széles választékával érhetik el az internetet, így elkerülhetetlenül ezeknek az eszközöknek a része nagyon elavult, és nem fogják tudni támogatni a modern internetes funkciókat. Emiatt mindig ellenőriznie kell, hogy mely könyvtár vagy modul szükséges egy adott funkció végrehajtásához.

Ennek egyik legjobb módja egy olyan megoldás, mint például Modernizr. Röviden: egy JavaScript könyvtár, amely felismeri a HTML5 és CSS3 funkciókat a felhasználó böngészőjében. Ez lehetővé teszi, hogy feltételes kódot írjon annak alapján, hogy egy adott funkció alapértelmezés szerint szerepel-e a böngészőben, vagy sem. Ezután, ha erre van szükség, a szükséges könyvtárakat importálhatjuk.

modernizr

De a Modernizr nem lesz megoldás mindenre. Íme néhány további útmutatás, amelyet érdemes szem előtt tartani:

  • Általános szabály: ne felejtse el importálni a könyvtárakat, ha ezek nem feltétlenül szükségesek a téma funkcionalitásához. Minél több könyvtár és külső szkript van, annál több időt vesz igénybe a végső webhely betöltése (különösen mobilon).
  • Mindig próbáljon betölteni a JavaScript fájlokat a HTML struktúra végére, nem pedig az elejére.
  • Megpróbálni minimalizálja a DOM elemek számát a HTML szerkezete használja.
  • Töltsön CSS fájlokat és a JavaScriptet minden oldalra külön-külön. Például, ha van egy CSS-fájl, amelyre csak egy adott oldalon van szükség, akkor használja az is_page () függvényt egy feltételes nyilatkozaton belül, és csak ezen az oldalon ragadja meg a stílust..

10. Végezzen sebesség-teszteket egy tesztszerveren

A helyi tesztkiszolgáló elegendő lesz a fejlesztés kezdeti szakaszában, de gyorsan be kell vezetnie egy fejlettebb tesztelési beállítást.

A helyzet az, hogy soha nem fogja biztosan tudni, hogy mennyire optimalizálja a témáját, amíg nem telepíti egy maroknyi tesztkörnyezetbe, és nem látja meg, hogyan teljesít a valóságban..

Miközben továbbra is alacsony a költségek, ezt megteheti úgy, hogy telepíti a témát néhány olcsó megosztott tárhely-fiókra (mivel a végfelhasználók többsége valószínűleg ezeket is használja). Ezután különféle teszteket futtathat a következő eszközök használatával:

  • PageSpeed ​​Insights. A Google által készített eszköz. Jó adatokat fog kapni mind a mobil, mind az asztali teljesítményről, valamint néhány tippet ad a jobb dolgok javításához.
  • Pingdom webhelysebesség-teszt. Ez az eszköz teljes leírást ad arról, hogy az egyes webhelyekhez szükséges egyes szkriptek / fájlok betöltése milyen hosszú ideig tart.
  • Ghostlab. Nagyon praktikus eszköz a szinkronizált böngésző teszteléshez egyszerre az interneten és a mobilon.
  • Mobil teljesítmény tesztelés a Mobitest által. Lehetővé teszi webhelyének tesztelését a tényleges mobil eszközökön, és nem csak egy általános, emulált mobil környezetben.
  • BrowserStack. Azonnali hozzáférést biztosít minden népszerű mobil- és asztali böngésző minden verziójához. Ezzel az eszközzel nem kell eldöntenie, hogy hogyan fog kinézni a témája egy elavult böngészőn, csak pár kattintással előállíthat egy képernyőképet.

Weboldalsebesség

Ez összefoglalja a mobiltelefon első, teljesítményorientált WordPress témájának 10 lépésről szóló útmutatóját. Remélem, hogy kiváló ötleteket kap belőle, és ez segít abban, hogy a következő témád valódi előadói szörnyé váljon.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector