Kako sastaviti mobilnu prvu, orijentiranu na performanse WordPress temu [2. dio]

Ako se krećete prema dolje da vidite što se ovdje nalazi, možda se pitate što se dogodilo s točkama 1-5.


Ah, u redu, kako biste pronašli odgovor, pogledajte prvi dio ove mini-serije.

Ukratko, ono što mi želimo poslije toga daje vam upute o tome kako izraditi visoko učinkovitu mobilnu temu za WordPress. Možda se u početku neće činiti tako, ali izazov je zapravo veći nego što većina ljudi misli.

Napokon, opće je uvjerenje da tematiku trebate učiniti odgovornom i, voilà, to je optimizirana za mobilne uređaje, zar ne? Pa, ne baš. Dakle, bez dodatnog divljanja, vratimo se na temu.

Prvi dio pogledajte ovdje: Kako sastaviti mobilnu prvu, tematsku izvedbu orijentiranu na WordPress [1. dio]

6. Dizajn za sve mobilne preglednike

Zaista je iznenađujuće kako se različiti HTML kod može ponašati na temelju web preglednika na kojem se pokreće. To vrijedi i za mobilna i za desktop računala. Vjerojatno više za mobilne uređaje, budući da imamo stotine različitih uređaja i zaslona naočale.

Stoga, kada radite na svojoj temi, imajte na umu sljedeće:

  • testirajte svoj rad na svim glavnim preglednicima dok idete zajedno – postupanje ovog ranog postupka znatno će olakšati rješavanje problema, za razliku od pokretanja testova preglednika kada već imate gotovu temu,
  • uhvatite se na što više uređaja i pogledajte kako se tema ponaša na njima (pokušajte različite veličine, rezolucije i omjere zaslona ako je moguće).

7. NX je bitan

Na mobilnom uređaju ljudi komuniciraju s web lokacijama drugačije nego na radnoj površini.

Zvuči osnovno, ali dopustite mi da vam dam jedan jednostavan primjer. Kad netko na svom radnom stolu traži mjesto za pizzu, vjerojatno ih zanima niz pojedinosti o restoranu koji provjerava. Na primjer, stvari poput izbornika, galerije, podataka o kontaktima i tako dalje.

Međutim, ako istu mobilnu stranicu posjete na istoj web stranici, vjerojatno ih zanima samo jedno – kako doći do mjesta i koji broj nazvati kako biste rezervirali.

Sve se svodi na to da kada izrađujete temu za mobilne uređaje, dizajn bi trebao vlasniku web lokacije omogućiti dodatni fokus na specifične elemente koji mogu biti presudni za posjetitelje mobilnih uređaja.

Najlakši način je to kroz dobro dizajnirana područja widgeta koja se pojavljuju na početnoj stranici i ostaju u gornjem dijelu vidljivog područja zaslona (aka ih držite iznad preklopa).

Dok su mobilni, ljudi imaju vrlo malo vremena za traženje informacija koje su im potrebne. To je razlog zašto bi dobar mobilni dizajn trebao biti učinkovit u omogućavanju dostupnosti tih podataka.

8. Manje je više

Koncept što je manje više može se lako primijeniti na većinu scenarija u razvoju tema, a kada je riječ o mobilnim temama, to znači razliku između sjajne teme i teme koja je tako dobra.

Evo što možete učiniti za postizanje više s manje:

  • Ostavite manje prostora za elemente markiranja. Važan je prostor za logotip web lokacije, to je očito. No, i dalje nije toliko bitan koliko stvarni sadržaj, pa nemojte dopustiti da logotip zauzme većinu prostora iznad preklopa..
  • Unesite pristupačne izbornike. Izbornici su oduvijek bili problem na mobilnim uređajima. S jedne strane, web stranice trebaju izbornike. No s druge strane, čak i kratki izbornik (koji sadrži samo četiri stavke) može lako koristiti dva retka teksta na većini mobilnih uređaja, što sadržaj gura dalje prema stranici. Evo što možete učiniti da to riješite: (1) prikazuju izbornik normalno ako se uklapa u jedan redak teksta, (2) čine ga padajućim ako nije.
  • Riješite se nevažnih izbornika. Riskirao sam da većina vremena izbornik podnožja ne donosi nikakvu vrijednost mobilnom posjetitelju. Na radnoj površini on služi kao svojevrstan izbornik na kojem posjetitelji mogu pronaći veze do svih ostalih stranica, ali na mobilnim uređajima, teško da postoji razlog zašto bi ga netko koristio. Razmislite o tome da se u potpunosti riješite dok se tema gleda na mobilnom uređaju.
  • Budite oprezni s dodatnim značajkama web mjesta. Nebrojeno je mogućnosti kada je u pitanju prilagođavanje značajki u novoj WordPress temi. Možete implementirati stvari poput klizača slika, integracije društvenih medija, prilagođenih galerija i mnogih drugih. Ali trebali biste? Iako su sve ideje o značajkama sjajne, mogu uzrokovati neke probleme mobilnim korisnicima. Ako želite biti sigurni da vaša tema ispravno radi na većini platformi, koristite izvorno wp_is_mobile () funkcija. Omogućit će vam razlikovanje između mobilnih i stolnih posjetitelja, tako da možete pojednostaviti sučelje za prve da biste izbjegli probleme.

9. Umetnite samo potrebne datoteke

Ovih dana ljudi mogu pristupiti webu s velikog broja mobilnih uređaja, pa će neizbježno neki od tih uređaja biti vrlo zastarjeli i neće moći podržati moderne web značajke. Zbog toga biste uvijek trebali provjeriti koja je biblioteka ili modul potreban za izvršavanje određene funkcije.

Jedan od najboljih načina za to je rješenje poput Modernizr. Ukratko, to je JavaScript biblioteka koja otkriva HTML5 i CSS3 značajke u korisničkom pregledniku. Omogućuje vam pisanje uvjetnog koda na temelju toga je li određena značajka podrazumijevano uključena u preglednik ili ne. Zatim, ako postoji potreba, potrebne knjižnice se mogu uvesti.

modernizr

No Modernizr neće biti rješenje za sve. Evo još nekoliko smjernica koje vrijedi imati na umu:

  • Kao općenito pravilo, zapamtite da ne uvozite knjižnice ako nisu apsolutno ključne za funkcionalnost teme. Što je više knjižnica i vanjskih skripti, to će trebati više vremena za učitavanje konačnog mjesta (posebno na mobilnom uređaju).
  • Uvijek pokušajte učitati JavaScript datoteke na kraju HTML strukture, a ne na početku.
  • Pokušati svesti broj DOM elemenata vaša HTML struktura koristi.
  • Učitajte CSS datoteke i JavaScript za svaku stranicu pojedinačno. Na primjer, ako imate CSS datoteku koja je potrebna samo na jednoj određenoj stranici, koristite funkciju is_page () unutar uvjetne izjave i upišite stil samo na toj stranici.

10. Izvršite ispitivanja brzine na testnom poslužitelju

Imati lokalni testni poslužitelj bit će dovoljno dobar u početnim fazama razvoja, ali brzo ćete trebati uvesti naprednije postavljanje testiranja.

Činjenica je da nikad nećete sigurno znati koliko je tema optimizirana dok je ne instalirate na pregršt testnih okruženja i ne vidite kako se izvodi u stvarnom životu.

Iako još uvijek držite niske troškove, to možete učiniti instaliranjem svoje teme na nekoliko jeftinih dijeljenih računa za hosting (jer će ih većina krajnjih korisnika ionako koristiti). Zatim možete pokrenuti različite testove pomoću sljedećih alata:

  • PageSpeed ​​Insights. Alat koji je izgradio Google. Dati će vam dobre podatke o učinku vašeg mobilnog i radnog prostora, kao i nekoliko savjeta o tome kako stvari poboljšati.
  • Test brzine internetske stranice Pingdom. Ovaj će vam alat pružiti potpunu raščlambu o tome koliko vremena je potrebno za učitavanje svake pojedinačne skripte / datoteke koju vaša web stranica zahtijeva.
  • Ghostlab. Vrlo zgodan alat za sinkronizirano testiranje preglednika za web i mobilne uređaje istovremeno.
  • Mobitestovo testiranje performansi. Omogućuje vam testiranje web lokacije na stvarnim mobilnim uređajima, a ne samo na općenitom, simuliranom mobilnom okruženju.
  • BrowserStack. Omogućuje vam trenutni pristup svakoj verziji svakog popularnog preglednika mobilnih i stolnih računala. Pomoću ovog alata ne morate se pitati kako će izgledati vaša tema u zastarjelom pregledniku, možete stvoriti snimku zaslona sa samo nekoliko klikova.

Brzina stranice

Ovo je rezime našeg vodiča u 10 koraka za izgradnju prve, mobilne teme orijentirane na performanse. Nadam se da ćete iz toga izvući nekoliko sjajnih ideja i da će vam pomoći da svoju sljedeću temu pretvorite u pravo čudovište performansa!

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