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

Kui olete kerinud alla, et näha, mis siin laos on, võite mõelda, mis juhtus punktidega 1-5.


Ah jaa, vastuse leidmiseks peaksite tutvuma selle minisarja esimese osaga.

Lühidalt, mida me siin jälgime, on teile juhised kuidas luua WordPressi suure jõudlusega mobiilteema. See ei pruugi alguses tunduda, kuid väljakutse on tegelikult suurem, kui enamik inimesi arvab.

Lõppude lõpuks on üldine arvamus, et peate selle teema muutma ainult reageerima ja voilà, see on mobiilile optimeeritud, eks? Noh, mitte päris. Jätkame siis teema juurde tagasi ilma täiendava vaevata.

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

6. Kujundus kõigile mobiilibrauseritele

On tõesti üllatav, kui erinevalt HTML-kood võib käituda selle brauseri põhjal. See kehtib nii mobiil- kui lauaarvutite kohta. Tõenäoliselt veelgi enam mobiiltelefonide jaoks, kuna meil on tegelemiseks sadu erinevaid seadmeid ja ekraanispetsifikaate.

Seetõttu pidage oma teema kallal töötades meeles järgmist:

  • testige oma käiku kõigi suuremate brauseritega – varakult tehes teeb see tõrkeotsingu palju lihtsamaks, kui brauseri testide alustamiseks, kui kogu teema on juba valmis,
  • andke oma käed võimalikult paljudele seadmetele ja vaadake, kuidas teema nendes käitub (kui võimalik, proovige erinevaid ekraanisuurusi, eraldusvõimet ja suhteid).

7. UX on oluline

Mobiilis suhtlevad inimesed veebisaitidega väga erinevalt kui lauaarvutites.

See kõlab lihtsalt, kuid lubage mul tuua teile lihtsalt üks näide. Kui keegi otsib oma töölaualt pitsakohta, huvitab teda ilmselt arvukalt üksikasju selle restorani kohta, mida nad kontrollivad. Näiteks menüü, galerii, kontaktandmed ja nii edasi.

Kui nad külastavad sama veebisaiti mobiilis, siis hoolib nad tõenäoliselt ainult ühest asjast – kuidas kohale jõuda ja millisele numbrile broneeringu tegemiseks helistada.

Selle kõige mõte on see, et kui loote teemat mobiiltelefonidele, peaks kujundus võimaldama saidi omanikul pöörata rohkem tähelepanu konkreetsetele elementidele, mis võivad olla mobiilikülastajate jaoks ülitähtsad.

Lihtsaim viis seda teha on hästi kujundatud vidinaalade kaudu, mis ilmuvad kodulehele ja jäävad ekraani nähtava ala ülaossa (ehk hoides neid voldi kohal).

Mobiilis olles on inimestel väga vähe aega vajaliku teabe otsimiseks. Seetõttu peaks hea mobiilne kujundus selle teabe juurdepääsetavaks muutmisel olema tõhus.

8. Vähem on rohkem

Mõistet „mida vähem on” saab hõlpsasti rakendada enamiku teemaarenduse stsenaariumide korral ja kui rääkida mobiilteemadest, tähendab see erinevust suurepärase teema ja nii-öelda teema vahel.

Siin on, mida saate teha vähemaga enama saavutamiseks:

  • Jätke brändielementide jaoks vähem ruumi. Saidi logo jaoks on natuke ruumi, see on ilmne. Kuid see pole ikkagi nii oluline kui tegelik sisu, nii et ärge laske logol hõivata enamikku klapi kohal olevat ruumi.
  • Tutvustage juurdepääsetavaid menüüsid. Menüüd on alati olnud probleemiks mobiilis. Ühest küljest vajavad veebisaidid menüüd. Kuid teisest küljest võib isegi lühike menüü (millel on kõigest neli eset) enamikus mobiilseadmetes hõlpsalt kasutada kahte tekstirida, mis lükkab sisu lehe veelgi alla. Selle lahendamiseks saate teha järgmist: (1) kuvage menüü tavapäraselt, kui see mahub ühele tekstireale; (2) muutke see rippmenüüks, kui seda pole.
  • Vabanege ebaolulisest menüüst. Ma riskiksin öelda, et enamasti ei anna jaluse menüü mobiilikülastajale mingit väärtust. Töölaual toimib see omamoodi kõikehõlmava menüüna, kust külastajad leiavad linke kõigile teistele lehtedele, kuid mobiilis pole vaevalt põhjust, miks keegi seda kasutaks. Kaaluge oma teema mobiilsel vaatamisel seda täielikult lahti saada.
  • Ole veebisaidi lisafunktsioonidega ettevaatlik. Uue WordPressi teema kohandatud funktsioonide tutvustamiseks on lugematu arv võimalusi. Saate rakendada selliseid asju nagu pildiliugurid, sotsiaalse meedia integreerimine, kohandatud galeriid ja paljud teised. Aga kas peaks? Ehkki need funktsioonide ideed on suurepärased, võivad need põhjustada mobiilikasutajatele teatavaid probleeme. Kui soovite veenduda, et teie teema töötab enamikul platvormidel korralikult, kasutage oma emakeelt wp_is_mobile () funktsiooni. See võimaldab teil vahet teha mobiilikülastajatel ja lauaarvuti külastajatel, nii et saate probleemide vältimiseks lihtsustada nende liidest.

9. Laadige ainult vajalikud failid

Nendel päevadel saavad inimesed veebi juurde pääseda suure hulga mobiilseadmete kaudu, seega on mõned neist seadmetest paratamatult väga vananenud ega saa toetada tänapäevaseid veebifunktsioone. Seetõttu peaksite alati kontrollima, milline raamatukogu või moodul on antud funktsiooni täitmiseks vajalik.

Üks parimaid viise selleks on lahendus, näiteks Modernizr. Lühidalt öeldes on see JavaScripti teek, mis tuvastab HTML5 ja CSS3 funktsioonid kasutaja brauseris. See võimaldab teil kirjutada tingimusliku koodi selle põhjal, kas antud funktsioon on vaikimisi brauserisse kaasatud või mitte. Siis, kui selleks on vajadus, saab vajalikud teegid importida.

moderniseerija

Kuid Modernizr ei ole kõigeks lahenduseks. Siin on mõned muud juhised, mida tasub meeles pidada:

  • Üldreeglina ärge unustage teeke mitte importida, kui need pole teema funktsionaalsuse jaoks tingimata vajalikud. Mida rohkem on raamatukogusid ja väliseid skripte, seda rohkem aega võtab lõpliku saidi laadimine (eriti mobiilis).
  • Proovige JavaScripti faile alati laadida HTML-i struktuuri lõppu, mitte algusesse.
  • Proovi minimeerida DOM-i elementide arvu teie HTML-i struktuur kasutab.
  • Laadige CSS-failid ja JavaScript igale lehele eraldi. Näiteks kui teil on CSS-fail, mida nõutakse ainult ühel konkreetsel lehel, kasutage tingimuslause sees funktsiooni is_page () ja sisestage stiil ainult sellel lehel.

10. Tehke kiirustestid testiserveris

Kohaliku testiserveri omamine on arendamise algusjärgus piisavalt hea, kuid peate kiiresti tutvustama täpsemat testimisseadet.

Fakt on see, et te ei saa kunagi kindlalt teada, kui optimeeritud on teie teema, kuni installite selle käputäitesse testimiskeskkondadesse ja näete, kuidas see reaalses elus töötab.

Kui hoiate kulusid endiselt madalal, saate seda teha, installides oma teema paarile odavad jagatud hostimise kontole (kuna tõenäoliselt kasutavad enamik lõppkasutajaid neid ikkagi). Seejärel saate järgmisi tööriistu kasutades käivitada erinevaid teste:

  • PageSpeed ​​Insights. Google’i loodud tööriist. See annab teile häid andmeid nii teie mobiiltelefoni kui ka töölaua jõudluse kohta ning sisaldab näpunäiteid asja paremaks muutmiseks.
  • Pingdomi veebisaidi kiirustest. See tööriist annab teile täieliku jaotuse selle kohta, kui kaua kulub iga teie saidil vajaliku skripti / faili laadimiseks.
  • Ghostlab. Väga mugav tööriist sünkroonitud brauseri testimiseks nii veebi kui ka mobiiliga samaaegselt.
  • Mobitesti mobiilse jõudluse testimine. Võimaldab teil oma saiti testida tegelikes mobiilsetes seadmetes, mitte ainult üldises emuleeritud mobiilikeskkonnas.
  • BrowserStack. Annab teile kohest juurdepääsu iga populaarse mobiil- ja lauaarvuti brauseri igale versioonile. Selle tööriista abil ei pea te mõtlema, kuidas teie teema aegunud brauseris välja näeb, vaid mõne klõpsuga saate luua ekraanipildi.

leheküljekiirus

See võtab kokku meie kümneastmelise juhendi mobiilse esimese, jõudlusele orienteeritud WordPressi teema loomiseks. Loodan, et saate sellest lahedaid ideid ja see aitab teil muuta teie järgmise teema tõeliseks performance-koletiseks!

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