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

U osnovi je sastavljanje WordPress teme prilično jednostavan zadatak. WordPress pruža zaista prijateljsko okruženje i jasno vam govori koje PHP funkcije koriste u koje svrhe na tom putu.


Međutim. Iako je to jednostavno, daleko je to od lakoće, a posebno ako želite da vaša tema bude optimizirana za mobilne uređaje.

Postoji niz jedinstvenih problema koje biste trebali riješiti ako želite dovršiti kvalitetan proizvod koji se brzo učitava, radi na predvidiv način i (što je najvažnije) je jednostavan za upotrebu i dostupan ljudima koji koriste različite uređaje i veličina zaslona.

Ovaj dvodijelni vodič provest će vas kroz postupak u 10 koraka, s popisom najvažnijih stvari koje treba uzeti u obzir pri izradi prve mobilne teme o WordPressu orijentirane na izvedbu..

Za drugi dio, pogledajte ovdje: Kako sastaviti mobilnu prvu, tematsku izvedbu orijentiranu na WordPress [2. dio]

1. Sadržaj je na prvom mjestu

Na mobilnim uređajima nema puno mjesta za prikazivanje mnogo dizajnerskih detalja ili za korištenje elemenata lijepog izgleda samo zarad toga.

Iako moderni uređaji mogu prikazati grafiku do 1136 × 640 piksela (iPhone 5s), ne zaboravimo da je zaslon i dalje samo četiri inča. Ovo nije puno nekretnina za rad.

Stvari koje vrijedi učiniti:

  • riješite se svih dodatnih elemenata dizajna koji nisu bitni za prezentaciju sadržaja,
  • pobrinite se da glavni blok sadržaja bude što viši na dizajnerskom platnu (zbog različitih veličina zaslona mobilnih uređaja ne možemo predvidjeti gdje "preklopiti" doći će točno),
  • usredotočite se na tipografiju i čineći sadržaj čitljivim (povećajte veličinu fonta, ali pazite da niti jedan redak teksta ne bude prekratak i samim time nečitljiv),
  • predstavite dobar kontrast – tekst u odnosu na pozadinu (to je presudno za mobilne uređaje, pogotovo ako netko pokušava pročitati stranicu dok stojite na sunčanom području).

2. Optimizirajte slike

Optimizacija slike još je važnija za mobilne uređaje nego za bilo koji drugi scenarij. Stvar je u tome što kad netko pokuša pristupiti web lokaciji putem mobitela, vjerojatno je na sporoj 3G vezi. Stoga morate biti sigurni da će tema omogućiti relativno brzo učitavanje slika bez obzira na tu činjenicu.

Specifične stvari koje možete učiniti:

  • Razmislite o integriranju funkcionalnosti lijenog opterećenja. Samo po sebi, lijeno učitavanje je sjajno (učitavanje slika samo kad se posjetitelj pomakne na njih). No problem je u tome što bi krajnji korisnici mogli sami instalirati nekoliko lijenih dodataka za učitavanje na krajnjem web mjestu. To bi moglo ometati sve što ste već integrirali u temu. Ako želite preuzeti rizik, ipak bi bilo najbolje da se funkcionalnost omogući rješenjem poput jQueryja i njegovog Lazy Load Plugin. WordPress dodaci često koriste i ovu biblioteku, pa smanjujete vjerojatnost da će stvari poći po zlu kada postoje dvije različite skripte koje obje pokušavaju postići isti rezultat. Također, omogućuju deaktiviranje lijenog opterećenja u postavkama teme.
  • Optimizirajte slike za veličinu i kvalitetu. Slike obično čine većinu potrošnje propusnosti za prosječno web mjesto, tako da kao autor teme morate osigurati svoje slike što je moguće optimiziranije. Možete učiniti dvije stvari da se to dogodi: (1) pobrinite se da slike nisu veće dimenzije nego što trebaju biti (vidi br. 3) – dodatni piksel tu i tamo se može sakupiti prilično brzo, (2) optimizirati sve slike putem alata poput Optimole ili TinyPNG prije puštanja teme u javnost.
  • Koristite fontove ikona kad god je to moguće. Stara škola koja uključuje ikone u bilo koji dizajn bila je samo izgraditi ih u Photoshopu, pretvoriti sve u PNG ili GIF i razvaljati. U današnje vrijeme to nije baš najbolje optimizirano rješenje. S alatima kao što su Awesome slova, možemo obogatiti naše dizajne stotinama lijepo dizajniranih fontova, a istodobno održavamo izvedbu vrlo pristojnom.

3. Neka dizajn bude spreman za mrežnicu (optimiziran za visoke DPI ekrane)

Gotovo svi novi uređaji dolaze s visoko-DPI ekranima ovih dana. Ti zasloni čine da sve izgleda vrlo oštro, ali samo ako je dotična stvar optimizirana za gledanje visoke DPI. U suprotnom, korisnik će vidjeti mnogo piksela i to će učiniti općenito neprivlačno.

Postoje dvije glavne prečace koje možete iskoristiti za optimizaciju visoke DPI:

  • Koristite slikovne fontove – gore spomenute; slikovni fontovi automatski se skaliraju i izgledaju izvrsno na svim uređajima.
  • Napravite alternativne verzije svih ostalih slika – dvostruko veće – i zamijenite ih CSS-om kad god se high-DPI uređaj koristi za pregled sadržaja. Evo vodiča o tome kako to možete učiniti.

Konačno, trebali biste se pobrinuti i za sadržaje u svojoj temi (i vjerojatno dopustiti korisniku da ih također promijeni, ali to je druga stvar).

U tom danu trebala vam je samo jedna PNG slika veličine 16 × 16, koju biste potom pretvorili u ICO, i sve vam je bilo spremno. Sada je mnogo složenije. Na primjer, novi Apple uređaji pokušati će tražiti veće ikone i pokušati ih koristiti kao oznake.

Neke od veličina favicon-a za koje iOS očekuje da pronađu su: 76 × 76, 120 × 120, 152 × 152. Evo kompletan popis na Apple.com.

Te ikone možete izraditi ručno ili upotrijebiti alat poput Pravi Favicon generator. Potreban je samo jedan startni image, koji će se koristiti kao baza za generiranje svih ostalih verzija. Povrh toga dobivate i ispravan HTML kod za umetanje ikona u temu.

4. Optimizirajte za dodir

Moramo se sjetiti da većina tamošnjih mobilnih uređaja podržava dodirna sučelja ili se u potpunosti temelje na dodirnom zaslonu. To znači da moramo svaki element koji se dodiruje učiniti dovoljno velikim da bi mu korisnik mogao pristupiti s lakoćom.

Na primjer, tekstualne veze nisu optimizirane za dodir jer zahtijevaju veliku koncentraciju od strane korisnika da ih precizno dodirnete. Najbolji je izbor dizajna ići s gumbima za sučelje teme. Dugmi koji su sami po sebi relativno veliki i također imaju veliko dodirno područje.

Još jedna stvar koju morate imati na umu je da korisnici većinu svog dodirivanja vrše palcima, tako da je dobra ideja postaviti glavni "poziv na akciju" gumbe na lako dostupnim zonama palca. Na primjer, evo kako se izvodi na iPhoneu.

5. Nije važno samo tema

Završimo prvi dio ovog vodiča s najčešćim pogreškama koje ljudi prave prilikom dizajniranja tema za mobilne uređaje. Pogreška je tretiranje responzivnih dizajna kao krajnje igre.

Odobreno, prilagodba teme je velika prednost, posebno kada je riječ o nestandardnim uređajima i veličinama zaslona, ​​ali daleko je od rješenja čarobnog metka. To što je dizajn responzivan ne znači da će i on biti uspješan na mobilnom uređaju. Na primjer, neće riješiti probleme s optimizacijom slike ili činjenicu da je na gumbe teško precizno pritisnuti itd..

Dakle, da, učinite sve što možete kako biste svoju temu prilagodili, ali istovremeno vodite računa o ostalim elementima kroz koje prolazimo u ovom vodiču za maksimalan dizajn prilagođen mobilnim uređajima.

Pozivam vas da prilagodite drugi dio kako biste dobili ostatak popisa (ući ćemo u stvari poput UX dizajna, navigacije, pomoću JS-a za optimiziranje vremena učitavanja, iskorištavajući neke od manje poznatih WordPress funkcija, i više). I u međuvremenu, koji vam je najveći izazov pri dizajniranju za mobitele?

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