Kaip pirmiausia sudėti mobilųjį telefoną, orientuotą į našumą „WordPress“ tema [1 dalis]

Iš esmės „WordPress“ temos sukūrimas yra gana paprasta užduotis. „WordPress“ sukuria tikrai draugišką aplinką ir leidžia suprasti, kurias PHP funkcijas naudoti kokiu tikslu pakeliui.


Vis dėlto. Nors tai paprasta, tai toli gražu nėra lengva, ir ypač jei norite, kad jūsų tema būtų optimizuota mobiliesiems.

Yra daugybė unikalių problemų, kurias turite išspręsti, jei norite sukurti kokybišką produktą, kuris greitai įkeliamas, veikia nuspėjamai ir (kas yra svarbiausia) yra patogus naudoti ir prieinamas žmonėms, naudojantiems skirtingus įrenginius. ir ekrano dydžiai.

Šis dviejų dalių vadovas supažindins jus su procesu per 10 žingsnių, kuriame bus išvardyti svarbiausi dalykai, kuriais reikia rūpintis kuriant pirmą mobilią, į našumą orientuotą „WordPress“ temą..

2 dalį skaitykite čia: Kaip pirmiausia susikurti mobilųjį telefoną, orientuota į efektyvumą „WordPress“ tema [2 dalis]

1. Pirmiausia pateikiamas turinys

Tikrai nėra daug vietos mobiliajame telefone, kad būtų galima parodyti daug dizaino detalių arba naudoti gražiai atrodančius elementus tik vardan to.

Nors šiuolaikiniai įrenginiai gali atvaizduoti iki 1136 × 640 taškų („iPhone 5s“) grafiką, nepamirškime, kad ekranas vis tiek yra tik keturių colių skersmens. Tai nėra daug nekilnojamojo turto, su kuriuo reikia dirbti.

Dalykai, kuriuos verta atlikti:

  • atsikratyti visų papildomų dizaino elementų, kurie nėra būtini pateikiant turinį,
  • įsitikinkite, kad pagrindinis turinio blokas yra kuo aukščiau dizaino drobės (dėl skirtingų mobiliųjų įrenginių ekrano dydžių negalime numatyti, kur "sulankstyti" ateis tiksliai),
  • sutelkti dėmesį į tipografiją ir padaryti turinį suprantamą (padidinkite šrifto dydį, tačiau būkite atsargūs, kad nė viena teksto eilutė nebūtų per trumpa ir todėl neįskaitoma),
  • parodykite gerą kontrastą – tekstą ir foną (tai ypač svarbu mobiliesiems įrenginiams, ypač jei kas nors bando skaityti puslapį stovėdamas saulėtoje vietoje).

2. Optimizuokite vaizdus

Vaizdo optimizavimas yra dar svarbesnis mobiliesiems, nei bet kokio kito scenarijaus atveju. Reikalas tas, kad kai kas nors bando patekti į svetainę per mobilųjį telefoną, jis greičiausiai naudoja lėtą 3G ryšį. Todėl jūs turite įsitikinti, kad tema leidžia vaizdus įkelti palyginti greitai, neatsižvelgiant į šį faktą.

Konkretūs dalykai, kuriuos galite padaryti:

  • Apsvarstykite galimybę integruoti tingių krovinių funkciją. Pati savaime tingus krovimas yra puikus (įkelti vaizdus galima tik tada, kai lankytojas prie jų prisirenka). Tačiau problema yra ta, kad galutiniai vartotojai gali patys patys įdiegti keletą tingios apkrovos papildinių galutinėje svetainėje. Tai gali trukdyti viskam, ką jau įtraukėte į temą. Vis dėlto, jei norite rizikuoti, geriausia būtų padaryti funkcionalumą naudojant tokį sprendimą kaip „jQuery“ ir jo „Lazy Load“ papildinys. „WordPress“ papildiniai taip pat linkę naudoti šią biblioteką, todėl sumažinsite blogo įvykio tikimybę, kai yra du skirtingi scenarijai, kurie abu bando pasiekti tą patį rezultatą. Be to, sukurkite temos nustatymuose galimybę išjungti tingų įkėlimą.
  • Optimizuokite atvaizdus pagal dydį ir kokybę. Vaizdai paprastai sunaudoja didžiąją dalį vidutinės svetainės pralaidumo, taigi, kaip temos kūrėją, turite įsitikinti, kad vaizdai yra kuo geresni. Norėdami tai padaryti, galite padaryti du dalykus: (1) įsitikinkite, kad vaizdai nėra didesnio matmens, nei jie turi būti (žr. 3 #) – papildomas taškas čia gali būti pridedamas gana greitai, (2) optimizuojamas. visi vaizdai naudojant tokį įrankį kaip Optimole arba „TinyPNG“ prieš išleisdami temą visuomenei.
  • Jei įmanoma, naudokite piktogramų šriftus. Senoji mokykla, kurioje buvo įtrauktos piktogramos į bet kokį dizainą, buvo jas tiesiog sukurti „Photoshop“, konvertuoti viską į PNG ar GIF ir panaudoti. Tačiau šiais laikais tai nėra pats optimaliausias sprendimas. Su tokiomis priemonėmis kaip Nuostabus šriftas, mes galime praturtinti savo dizainą šimtais gražiai suprojektuotų šriftų, tuo pačiu išlaikant atlikimą labai padorų.

3. Padarykite tinklinį tinklelio dizainą (pritaikytą dideliems DPI ekranams)

Šiomis dienomis beveik visi nauji įrenginiai yra aprūpinti dideliu DPI ekranu. Tuose ekranuose viskas atrodo labai aštriai, tačiau tik tuo atveju, jei aptariamas dalykas buvo optimizuotas žiūrėti aukštą DPI. Priešingu atveju vartotojas matys daug pikselių, todėl visa patirtis bus nepatraukli.

Yra du pagrindiniai spartieji klavišai, kuriuos galite naudoti optimizuodami aukštą DPI:

  • Naudokite vaizdo šriftus – minėta aukščiau; vaizdo šriftai keičiasi automatiškai ir puikiai atrodo kiekviename įrenginyje.
  • Sukurkite alternatyvias visų kitų vaizdų versijas – dvigubai didesnes – ir pakeiskite jas CSS, kai turinio peržiūrai naudojamas aukšto DPI lygio įrenginys.. Štai vadovas kaip tai padaryti.

Galiausiai taip pat turėtumėte pasirūpinti savo temos fikcijomis (ir turbūt leisti vartotojui jas pakeisti, bet tai jau kitas dalykas).

Dieną jums reikėjo tik vieno 16 × 16 PNG paveikslėlio, kurį vėliau paversite ICO ir viskas buvo nustatyta. Šiuo metu tai yra daug sudėtingiau. Pavyzdžiui, nauji „Apple“ įrenginiai bandys ieškoti didesnių piktogramų ir bandys jas naudoti kaip žymes.

Kai kurie iš „iOS“ tikėtinų surasti „Favicon“ dydžių yra šie: 76 × 76, 120 × 120, 152 × 152. Štai pilnas sąrašas Apple.com.

Galite sukurti šias piktogramas rankomis arba naudoti tokį įrankį kaip Tikras „Favicon“ generatorius. Tam tereikia vieno starterio vaizdo, kuris bus naudojamas kaip pagrindas generuoti visas kitas versijas. Be to, gausite teisingą HTML kodą, kad įterptumėte piktogramas į temą.

4. Optimizuokite bakstelėjimą

Turime atsiminti, kad dauguma ten esančių mobiliųjų įrenginių palaiko jutiklines sąsajas arba yra visiškai pritaikyti jutikliniam ekranui. Tai reiškia, kad kiekvieną elementą, kuriame galima paliesti, turime padaryti pakankamai didelį, kad vartotojas galėtų lengvai juo naudotis.

Pavyzdžiui, teksto nuorodos nėra labai optimizuotos liečiant, nes norint jas tiksliai paliesti, reikia daug dėmesio skirti vartotojo daliai. Geriau pasirinkti dizainą, jei naudojate temos sąsajos mygtukus. Mygtukai, kurie patys yra gana dideli ir turi didelę liečiamą sritį.

Kitas dalykas, kurį reikia atsiminti, yra tai, kad vartotojai didžiąją dalį savo bakstelėjimo daro nykščiais, todėl verta dėti pagrindinius "raginimas veikti" mygtukai lengvai pasiekiamose nykščio zonose. Pavyzdžiui, štai kaip tai atkuriama „iPhone“.

5. Ne viskas, kas svarbu, kad tema būtų atsakinga

Pabaigsime pirmąją šio vadovo dalį su dažniausiai pasitaikančia klaida, kurią žmonės daro kurdami temas mobiliesiems. Klaida yra tai, kad reaguojančius dizainus traktuojame kaip galutinį žaidimą.

Pripažįstame, kad jūsų tema reaguoja į tai, kad tai yra didžiulis pranašumas, ypač kai tai susiję su nestandartiniais įrenginiais ir ekrano dydžiais, tačiau tai toli gražu nėra stebuklinga kulka. Vien todėl, kad dizainas reaguoja, dar nereiškia, kad jis veiks gerai mobiliajame įrenginyje. Pvz., Jis neišspręs jokių vaizdo optimizavimo problemų ar to, kad mygtukus sunku tiksliai bakstelėti ir pan..

Taigi taip, darykite viską, ką galite, kad jūsų tema reaguotų, tačiau tuo pačiu pasirūpinkite ir kitais elementais, kuriuos išgyvename šiame vadove, kad sukurtumėte maksimalų mobiliesiems pritaikytą dizainą..

Kviečiu nusiteikti antrajai daliai, kad gautumėte likusį sąrašą (mes imsimės tokių dalykų kaip UX dizainas, navigacija, JS naudojimas optimizuojant įkėlimo laiką, pasinaudojant kai kuriomis mažiau žinomomis „WordPress“ funkcijomis, ir dar). Ir tuo tarpu, koks jūsų didžiausias iššūkis kuriant mobilųjį telefoną?

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