Hogyan állítsunk össze egy mobiltelefonként először a teljesítményorientált WordPress témát [1. rész]

Hogyan állítsunk össze egy mobiltelefonként először a teljesítményorientált WordPress témát [1. rész]

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

A WordPress téma összeállítása lényegében meglehetősen egyszerű feladat. A WordPress igazán barátságos környezetet biztosít, és világossá teszi, hogy mely PHP funkciókat használja az út során valamilyen célra.


Azonban. Annak ellenére, hogy egyszerű, ez messze nem könnyű, és különösen akkor, ha azt akarja, hogy a témája mobilra optimalizált legyen.

Számos olyan egyedi kérdés létezik, amelyeket le kell küzdenie, ha olyan minőségi termékkel akar végül eljutni, amely gyorsan betöltődik, kiszámítható módon működik, és (ami a legfontosabb) felhasználóbarát és elérhető az emberek számára, akik különböző eszközöket használnak. és a képernyő méretét.

Ez a két részből álló útmutató 10 lépésben végigvezeti a folyamatot, felsorolva a legfontosabb dolgokat, amelyekre ügyelni kell, amikor először építenek egy mobil, teljesítményorientált WordPress témát.

A 2. 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 [2. rész]

1. A tartalom az első

A mobiltelefonon tényleg nincs sok hely a sok apró részlet megmutatására, vagy szép megjelenésű elemek használatára.

Annak ellenére, hogy a modern eszközök képesek akár 1136 × 640 pixel (iPhone 5s) grafikákat megjeleníteni, ne felejtsük el, hogy a képernyő még mindig négy hüvelyk átmérőjű. Ez nem sok olyan ingatlan, mellyel dolgozni lehet.

Érdemes megtenni:

  • megszabaduljon minden olyan extra elemtől, amely nem elengedhetetlen a tartalom bemutatásához,
  • győződjön meg arról, hogy a fő tartalmi blokk a lehető legmagasabb legyen a tervezővászonon (a mobil eszközök különböző képernyőméretének miatt nem tudjuk megjósolni, hol a "szeres" pontosan fog jönni),
  • összpontosítson a tipográfiára és a tartalom olvashatóságára (növelje a betűméretet, de vigyázzon, nehogy egyetlen szöveges sor ne legyen túl rövid és így olvashatatlan),
  • vezessen be jó kontrasztot – szöveg vagy háttér (ez alapvető fontosságú a mobil eszközök számára, különösen, ha valaki napos környezetben állva próbálja megoldani az oldalt).

2. Optimalizálja a képeket

A képoptimalizálás még fontosabb a mobiltelefonok számára, mint bármely más forgatókönyv esetében. A helyzet az, hogy amikor valaki mobiltelefonon próbál hozzáférni egy webhelyhez, valószínűleg lassú 3G kapcsolaton van. Ezért meg kell győződnie arról, hogy a téma lehetővé teszi a képek viszonylag gyors betöltését ettől a ténytől függetlenül.

Konkrét dolgok, amelyeket megtehetsz:

  • Fontolja meg a lusta betöltési funkció integrálását. Önmagában a lusta töltés nagyszerű (a képeket csak akkor töltheti be, ha a látogató hozzájuk görget). De a probléma az, hogy a végfelhasználók maguknak telepíthetnek néhány lusta betöltési plugin-t maguknak a végső webhelynek. Ez zavarhatja azt, amit már beépített a témába. Ha azonban kockáztatni szeretne, akkor a legjobb, ha a funkcionalitást olyan megoldás révén teheti lehetővé, mint a jQuery és annak Lazy Load plugin. A WordPress bővítmények általában ezt a könyvtárat is használják, így minimalizálhatja annak valószínűségét, hogy a dolgok rosszul forduljanak elő, ha két különböző szkript létezik, amelyek mindkettőt ugyanazt az eredményt érik el. Ezenkívül lehetővé teheti a lusta terhelés deaktiválását a téma beállításainál.
  • Optimalizálja a képeket a méret és a minőség szempontjából. A képek általában az átlagos webhely sávszélesség-fogyasztásának felelnek meg, így a téma készítőjének gondoskodnia kell arról, hogy képei a lehető legoptimálisabbak legyenek. Két dolgot tehet ennek megvalósításához: (1) győződjön meg arról, hogy a képek mérete nem nagyobb, mint amennyire szükségük lenne (lásd # 3) – egy extra pixel itt-ott elég gyorsan összeadható, (2) optimalizálható minden kép olyan eszközön keresztül, mint a Optimole vagy TinyPNG mielőtt a témát nyilvánosságra hozzák.
  • Használjon ikon betűkészleteket, amikor csak lehetséges. A régi iskola, amelybe bármilyen formában belefoglaltak az ikonokat, az volt, hogy csak felépíti őket a Photoshopba, konvertál mindent PNG vagy GIF formátumba, és gördítse le. Manapság azonban nem ez a legoptimálisabb megoldás. Olyan eszközökkel, mint a Fantasztikus betűtípus, gazdagíthatjuk terveinket száz gyönyörűen megtervezett betűtípussal, ugyanakkor nagyon tisztességes a teljesítmény.

3. Készítse el a retina-készítményeket (nagy DPI-képernyőkre optimalizálva)

Szinte minden új eszköz magas DPI-kijelzővel érkezik manapság. Ezeknek a képernyőknek köszönhetően minden nagyon élesnek tűnik, de csak akkor, ha a szóban forgó dolgot optimalizálták a magas DPI-vel történő megjelenítéshez. Ellenkező esetben a felhasználó sok pixelációt fog látni, és ez az élményt általában vonzóvá teszi.

Két fő hivatkozás van a magas DPI-szintű optimalizálásra:

  • Használjon betűkészleteket – a fent említett; A betűtípusok automatikusan méretezhetők, és minden eszközön jól néznek ki.
  • Készítsen alternatív verziókat az összes többi képről – a kétszer nagyobb méretben -, és cserélje ki azokat CSS-rel, amikor egy nagy-DPI-eszközt használnak a tartalom megtekintésére. Itt egy útmutató hogyan lehet ezt megtenni.

Végül, a témában szereplő fiktívokról is gondoskodnia kell (és valószínűleg hagyja, hogy a felhasználó ezeket megváltoztassa, de ez egy másik dolog).

A nap folyamán csak egy 16 × 16 PNG-képre volt szüksége, amelyet azután ICO-ra konvertál, és mindenki készen áll. Jelenleg sokkal bonyolultabb. Például az új Apple eszközök megkísérlik megnézni a nagyobb ikonokat, majd megkísérelik őket könyvjelzőként használni.

Az iOS által várhatóan található favicon-méretek közül néhány: 76 × 76, 120 × 120, 152 × 152. Itt van egy teljes lista az Apple.com oldalon.

Készítheti ezeket az ikonokat kézzel is, vagy használhat olyan eszközt, mint a Igazi Favicon generátor. Csak egy kezdőképre van szüksége, amelyet alapul fognak használni az összes többi verzió előállításához. Ezen felül megkapja a megfelelő HTML kódot az ikonok beillesztéséhez a témába.

4. Optimalizálja a megcsapolást

Nem szabad megfeledkeznünk arról, hogy a kimenő mobil eszközök többsége érintő felületeket támogat, vagy teljesen érintőképernyő-alapúak. Ez azt jelenti, hogy minden csavarozható elemet elég nagynak kell lennie, hogy a felhasználó könnyedén hozzáférhessen hozzá.

Például a szöveges hivatkozásokat nem igazán érintésoptimalizálják, mert sok figyelmet igényelnek a felhasználó részén, hogy pontosan megérintsék őket. Jobb dizájn választás, ha a téma kezelőfelületén lévő gombokkal működik. Gombok, amelyek maguk is viszonylag nagyok és nagy érintési területük is vannak.

Egy másik dolog, amelyet szem előtt kell tartani, hogy a felhasználók nagy részüket hüvelykujjjal végzik el, ezért érdemes a fő "cselekvésre ösztönzés" gombok a könnyen elérhető hüvelykujj zónákon. Például itt van hogyan játszik le az iPhone-on.

5. A téma érzékenyvé tétele nem csak számít

Végezzük el az útmutató első részét azzal a leggyakoribb hibával, amelyet az emberek követnek el, amikor mobil témákat terveznek. A hiba az érzékeny formatervezés mint végső játék.

Nyilvánvaló, hogy a témájának érzékenyvé tétele óriási előnyt jelent, különösen, ha a nem szabványos eszközökkel és a képernyőméretekkel foglalkozik, de ez messze nem egy varázslatos golyó megoldástól. Csak azért, mert a formatervezés érzékeny, nem azt jelenti, hogy jól fog működni a mobiltelefonon is. Például nem oldja meg a képoptimalizálással kapcsolatos kérdéseket, vagy azt a tényt, hogy a gombok nehéz pontosan megérinteni, és így tovább.

Tehát igen, tegyen meg minden tőle telhetőt, hogy a témája reagáljon, de ugyanakkor vigyázzon a többi elemre is, amelyekkel ebben az útmutatóban megyünk keresztül a maximálisan mobilbarát kialakítás érdekében.

Felkérem Önt, hogy hangolja be a második részt, hogy megkapja a lista többi részét (olyan dolgokba fogunk belemenni, mint az UX tervezése, navigáció, a JS használatával a betöltési idő optimalizálása érdekében, kihasználva néhány kevésbé ismert WordPress funkciót, és több). Időközben, mi a legnagyobb kihívás a mobilra tervezéskor??

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