Kuidas kõigepealt kokku panna mobiil, jõudlusele orienteeritud WordPressi teema [1. osa]

Oma olemuselt on WordPressi teema kokku panemine üsna lihtne ülesanne. WordPress pakub tõeliselt sõbralikku keskkonda ja teeb selgeks, milliseid PHP funktsioone millisel eesmärgil kasutada.


Kuid. Kuigi see on lihtne, see pole kaugeltki lihtne, ja eriti kui soovite, et teie teema oleks mobiilile optimeeritud.

Seal on hulk ainulaadseid probleeme, millest peaksite üle saama, kui soovite saada kvaliteetset toodet, mis laadib kiiresti, töötab etteaimatavalt ja (mis on kõige tähtsam) on kasutajasõbralik ja juurdepääsetav eri seadmeid kasutavatele inimestele ja ekraanisuurused.

See kaheosaline juhend tutvustab teid protsessis 10 sammuga, loetledes kõige olulisemad asjad, mille eest mobiiltelefoni esmakordse, jõudlusele orienteeritud WordPressi teema loomisel tuleb hoolitseda.

2. osa leiate siit: Kuidas kõigepealt kokku panna mobiil, jõudlusele orienteeritud WordPressi teema [2. osa]

1. Sisu on esikohal

Mobiiltelefonil pole tegelikult palju ruumi, et näidata palju disaini detaile või kasutada kena välimusega elemente just selle huvides.

Ehkki tänapäevased seadmed suudavad kuvada kuni 1136 × 640 piksli (iPhone 5s) graafikat, ärgem unustagem, et ekraan on endiselt ainult nelja tolli laiune. See pole palju kinnisvara, millega töötada.

Asjad, mida tasub teha:

  • vabaneda kõigist lisakujunduselementidest, mis pole sisu esitlemisel olulised,
  • veenduge, et peamine sisuplokk oleks kujunduslõuendil võimalikult kõrgel kohal (mobiilseadmete erineva ekraanisuuruse tõttu ei saa me ennustada, kus "korda" tuleb täpselt),
  • keskenduge tüpograafiale ja sisu loetavaks muutmisele (suurendage fondi suurust, kuid ole ettevaatlik, et ükski tekstirida ei oleks liiga lühike ja seega loetamatu),
  • lisage hea kontrast – tekst vs taust (see on mobiilseadmete jaoks ülioluline, eriti kui keegi proovib lehte lugeda päikeselises piirkonnas seistes).

2. Optimeerige pilte

Kujutise optimeerimine on mobiili jaoks veelgi olulisem kui mis tahes muu stsenaariumi korral. Asi on selles, et kui keegi üritab saidile mobiili kaudu juurde pääseda, on tõenäoliselt tegemist aeglase 3G-ühendusega. Seetõttu peate veenduma, et teema võimaldab piltide laadimist suhteliselt kiiresti, hoolimata sellest asjaolust.

Konkreetsed asjad, mida saate teha:

  • Kaaluge laiska laadimisfunktsiooni integreerimist. Iseenesest on laiska laadimine suurepärane (piltide laadimine toimub ainult siis, kui külastaja nende juurde kerib). Kuid probleem on selles, et lõppkasutajad võivad installida mõned laiskad laadimispistikprogrammid lõppsaidile ise. See võib segada kõike, mille olete juba selle teema sisse integreerinud. Kui soovite siiski riski võtta, oleks kõige parem võimaldada funktsionaalsus sellise lahenduse kaudu nagu jQuery ja selle Lazy Load Plugin. WordPressi pistikprogrammid kasutavad seda teeki ka tavaliselt, nii et vähendate valesti minemise tõenäosuse, kui sama tulemuse saavutamiseks on kaks erinevat skripti. Samuti saate oma teema seadetes deaktiveerida laiska laadimise.
  • Piltide optimeerimine suuruse ja kvaliteedi jaoks. Tavaliselt moodustavad keskmise saidi ribalaiuse tarbimise enamasti pildid, nii et teema loojana peate veenduma, et teie pildid on võimalikult optimeeritud. Selle teostamiseks võite teha kaks toimingut: (1) veenduge, et pildid ei oleks mõõtmetelt suuremad, kui nad vajavad (vt nr 3) – siin saab lisapiksli lisada üsna kiiresti, (2) optimeerida kõik pildid tööriista kaudu nagu Optimole või TinyPNG enne teema avalikkusele avalikustamist.
  • Kasutage igal võimalusel ikoonifonte. Vana kool, mis hõlmas ikoonide lisamist ükskõik millisesse kujundusesse, oli lihtsalt ehitada need Photoshopisse, teisendada kõik PNG- või GIF-failideks ja rullida see välja. Tänapäeval pole see aga lahendustest kõige optimeeritum. Tööriistadega nagu Font vinge, saame oma disaini rikastada sadade kaunilt kujundatud fontidega, hoides samal ajal jõudlust väga korralikuna.

3. Tehke disain võrkkestaks valmis (optimeeritud kõrge DPI-ga ekraanide jaoks)

Peaaegu kõigil uutel seadmetel on tänapäeval suure DPI-ekraaniga ekraanid. Need ekraanid muudavad kõik väga teravaks, kuid ainult siis, kui asjaomane asi on optimeeritud kõrge DPI-ga vaatamiseks. Vastasel juhul näeb kasutaja palju pikseldamist ja see muudab kogemuse üldiselt ebaatraktiivseks.

Suure DPD-ga optimeerimiseks on kaks peamist otseteed:

  • Kasutage pildi fonte – eespool mainitud; pildifondid skaleeruvad automaatselt ja näevad kõikides seadmetes suurepärased välja.
  • Looge kõigi teiste piltide alternatiivsed versioonid – kahel korral suuremad – ja vahetage need CSS-iga alati välja, kui sisu vaatamiseks kasutatakse suure DPI-ga seadet. Siin on juhend kuidas seda teha.

Lõpuks peaksite hoolitsema ka oma teema fiktiivide eest (ja tõenäoliselt lubama kasutajal ka neid muuta, kuid see on teine ​​asi).

Päeval oli teil vaja ainult ühte 16 × 16 PNG-pilti, mille siis teisendaksite ICO-ks ja olite kõik valmis. Praegu on see palju keerulisem. Näiteks proovivad uued Apple’i seadmed otsida suuremaid ikoone ja seejärel kasutada neid järjehoidjatena.

Mõned favoonsuurused, mida iOS loodab leida, on järgmised: 76 × 76, 120 × 120, 152 × 152. Siin on a täielik nimekiri saidil Apple.com.

Need ikoonid saate luua käsitsi või kasutada mõnda sellist tööriista Päris Faviconi generaator. Vaja läheb vaid ühte käivituspilti, mida kasutatakse kõigi teiste versioonide genereerimiseks alusena. Lisaks saate ka teemakohaste ikoonide manustamiseks õige HTML-koodi.

4. Optimeerige koputamiseks

Peame meeles pidama, et enamik seal pakutavaid mobiilseadmeid toetab puutetundlikke liideseid või on täielikult puutetundlikul ekraanil põhinevad. See tähendab, et peame tegema iga koputatava elemendi piisavalt suureks, et kasutaja saaks sellele hõlpsasti juurde pääseda.

Näiteks pole tekstilinkid puutetundlikult optimeeritud, kuna nende täpseks koputamiseks vajavad kasutajad palju keskendumist. Parem kujundusvalik on minna teema liidese nuppudega. Nupud, mis ise on suhteliselt suured ja millel on ka suur puutetundlikkus.

Veel üks asi, mida tuleks meeles pidada, on see, et kasutajad teevad suurema osa oma koputamisest pöidlaga, seega on hea mõte panna "üleskutse tegevusele" nupud kergesti ligipääsetavatel pöidlatsoonidel. Näiteks siin kuidas see iPhone’is välja mängib.

5. Teema reageerimise muutmine pole sugugi oluline

Lõpetagem selle juhendi esimene osa kõige sagedasema veaga, mida inimesed teevad mobiilide jaoks kujunduse kujundamisel. Viga on reageerivaid disainilahendusi käsitledes kui ülimat lõppmängu.

On selge, et teie teema tundlikuks muutmine on tohutu eelis, eriti kui tegemist on mittestandardsete seadmete ja ekraanisuurustega, kuid see pole kaugeltki kui võlukunsti lahendus. See, et kujundus on tundlik, ei tähenda veel, et see toimiks hästi ka mobiilis. Näiteks ei lahenda see ühtegi pildi optimeerimisega seotud küsimust ega seda, et nuppe on keeruline täpselt koputada jne..

Nii et jah, tehke kõik endast olenev, et muuta oma teema tundlikuks, kuid hoolitsege samal ajal ka muude elementide eest, mida selles juhendis maksimaalse mobiilisõbraliku kujunduse jaoks läbi vaatame.

Kutsun teid üles ülejäänud nimekirja saamiseks häälestama teist osa (käsitleme näiteks UX-i kujundamist, navigeerimist, JS-i kasutamist laadimisaegade optimeerimiseks, kasutades ära mõnda vähem tuntud WordPressi funktsiooni, ja veel). Ja vahepeal, mis on teie suurim väljakutse mobiilseadmetele disainimisel?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map