Kuinka koota mobiili ensin, suorituskykyorientoitu WordPress-teema [osa 1]

Kuinka koota mobiili ensin, suorituskykyorientoitu WordPress-teema [osa 1]

Kuinka koota mobiili ensin, suorituskykyorientoitu WordPress-teema [osa 1]
СОДЕРЖАНИЕ
02 июня 2020

Pohjimmiltaan WordPress-teeman kokoaminen on melko yksinkertainen tehtävä. WordPress tarjoaa todella ystävällisen ympäristön ja tekee selväksi, mitä PHP-toimintoja käytetään mihin tarkoitukseen matkan varrella.


Kuitenkin. Vaikka se on yksinkertaista, se ei ole kaukana helposta, ja varsinkin jos haluat, että teemasi on optimoitu mobiililaitteille.

Siellä on joukko ainutlaatuisia ongelmia, jotka sinun on ratkaistava, jos haluat päätyä laadukkaaseen tuotteeseen, joka latautuu nopeasti, toimii ennustettavasti ja (mikä tärkeintä) on käyttäjäystävällinen ja helposti eri laitteita käyttävien ihmisten käytettävissä. ja näytön koot.

Tämä kaksiosainen opas opastaa sinut prosessin läpi 10 vaiheessa. Siinä luetellaan tärkeimmät asiat, joista on huolehdittava rakennettaessa mobiili ensin, suorituskykyyn suuntautunut WordPress-teema.

Katso osa 2: täältä: Kuinka koota mobiili ensin, suorituskykyorientoitu WordPress-teema [osa 2]

1. Sisältö on etusijalla

Mobiililaitteissa ei todellakaan ole paljon tilaa esitellä paljon suunnittelutietoja tai käyttää hienoja näköisiä elementtejä vain sen vuoksi.

Vaikka nykyaikaiset laitteet kykenevät näyttämään grafiikkaa jopa 1136 × 640 pikseliä (iPhone 5s), älä unohda, että näyttö on silti vain neljä tuumaa. Tämä ei ole paljon kiinteistöjä, joiden kanssa työskennellä.

Tekemisen arvoinen asia:

  • päästä eroon kaikista ylimääräisistä sisustuselementeistä, jotka eivät ole välttämättömiä sisällön esittelyssä,
  • varmista, että pääsisältölohko on mahdollisimman korkea suunnittelupalkalla (mobiililaitteiden erilaisten näyttökokojen vuoksi emme voi ennustaa missä "taittaa" tulee täsmälleen),
  • keskity typografiaan ja sisällön luettavuuteen (lisää fonttikokoa, mutta ole varovainen, ettet tee yhdestä tekstirivistä liian lyhyttä ja siten lukematonta),
  • esitellä hyvä kontrasti – teksti vs. tausta (tämä on ratkaisevan tärkeää mobiililaitteille, varsinkin jos joku yrittää lukea sivua seisoessaan aurinkoisella alueella).

2. Optimoi kuvat

Kuvan optimointi on mobiililaitteille jopa tärkeämpää kuin mikään muu skenaario. Asia on se, että kun joku yrittää päästä sivustoon matkapuhelimen kautta, hänellä on todennäköisesti hidas 3G-yhteys. Siksi sinun on varmistettava, että teema mahdollistaa kuvien lataamisen suhteellisen nopeasti tästä tosiasiasta riippumatta.

Tietyt asiat, joita voit tehdä:

  • Harkitse laiskakuormitustoimintojen integrointia. Itse asiassa laiska lataus on hienoa (kuvien lataaminen vain, kun kävijä vierittää niitä). Mutta ongelmana on, että loppukäyttäjät saattavat joutua asentamaan joitain laiskoja latauslisäosia itse lopulliseen sivustoon. Tämä voi häiritä mitä olet jo integroinut aiheeseen. Jos haluat kuitenkin ottaa riskin, olisi parasta tehdä toiminnallisuus mahdolliseksi jQueryn ja sen kaltaisten ratkaisujen avulla. Laiska Lataa -laajennus. WordPress-laajennuksilla on taipumus käyttää myös tätä kirjastoa, joten minimoit asioiden menemisen todennäköisyyden, kun on olemassa kaksi eri skriptiä, jotka molemmat yrittävät saavuttaa saman tuloksen. Mahdollista myös laiskakuormituksen deaktivointi teeman asetuksissa.
  • Optimoi kuvat koon ja laadun mukaan. Kuvien osuus tavallisen sivuston kaistanleveyden kulutuksesta on yleensä suurin, joten teeman luojana sinun on varmistettava, että kuvasi on optimoitu mahdollisimman paljon. Voit tehdä kaksi asiaa saadaksesi tämän tapahtumaan: (1) varmista, että kuvat eivät ole kooltaan suurempia kuin niiden on oltava (katso # 3) – ylimääräinen pikseli täällä ja siellä voi lisätä melko nopeasti, (2) optimoi kaikki kuvat työkalun kautta kuten Optimole tai TinyPNG ennen teeman julkistamista.
  • Käytä kuvake fontteja aina kun mahdollista. Vanha koulu, joka sisälsi kuvakkeet mihin tahansa suunnitteluun, oli vain rakentaa ne Photoshopiin, muuntaa kaikki PNG- tai GIF-tiedostoiksi ja levittää ne. Nykyään se ei ole kuitenkaan optimoitu ratkaisuista. Työkaluilla, kuten Fontti mahtava, voimme rikastuttaa mallejamme satoilla kauniisti suunnitelluilla kirjasimilla, pitäen samalla suorituskyvyn erittäin kunnollisena.

3. Tee suunnittelusta verkkokalvo valmiiksi (optimoitu erittäin DPI-näytöille)

Lähes kaikissa uusissa laitteissa on nykyisin korkea DPI-näyttö. Näiden näytöiden avulla kaikki näyttävät erittäin teräviltä, ​​mutta vain jos kyseinen asia on optimoitu erittäin DPI-katselua varten. Muutoin käyttäjä näkee paljon pikselöintiä, ja tämä tekee kokemuksesta kaiken kaikkiaan epätyydyttävän.

High-DPI-optimointiin voidaan käyttää kahta pääpikavalintaa:

  • Käytä kuva fontteja – edellä mainitut; Kuva fontit skaalautuvat automaattisesti ja näyttävät hyvältä jokaisella laitteella.
  • Luo vaihtoehtoisia versioita kaikista muista kuvista – kaksi kertaa suurempana – ja vaihda ne CSS: n kanssa aina, kun korkea DPI-laitetta käytetään sisällön katsomiseen. Tässä on opas kuinka voit tehdä tämän.

Viimeinkin, sinun tulisi myös huolehtia teemaasi liittyvistä huijauksista (ja todennäköisesti antaa käyttäjän muuttaa niitä myös, mutta se on toinen asia).

Päivän aikana tarvitsit vain yhden 16 × 16 PNG-kuvan, jonka muunnat sitten ICO: ksi, ja olit kaikki valmiina. Tällä hetkellä se on paljon monimutkaisempi. Esimerkiksi uudet Apple-laitteet yrittävät etsiä suurempia kuvakkeita ja yrittävät sitten käyttää niitä kirjanmerkkeinä.

Jotkut suosikkikoot, joita iOS odottaa löytävänsä, ovat: 76 × 76, 120 × 120, 152 × 152. Tässä on a täydellinen luettelo Apple.com-sivustosta.

Voit joko luoda ne kuvakkeet käsin tai käyttää työkalua kuten Oikea Favicon-generaattori. Se tarvitsee vain yhden aloituskuvan, jota käytetään perustana kaikkien muiden versioiden luomiseen. Tämän lisäksi saat myös oikean HTML-koodin kuvakkeiden upottamiseksi teemaan.

4. Optimoi napauttamista varten

Meidän on muistettava, että suurin osa siellä olevista mobiililaitteista tukee kosketusrajapintoja tai ovat kosketusnäyttöpohjaisia ​​kokonaan. Tämä tarkoittaa, että meidän on tehtävä jokaisesta tappeble-elementistä riittävän suuri, jotta käyttäjä voi käyttää sitä helposti.

Esimerkiksi tekstilinkkejä ei ole kovin optimoitu kosketusta varten, koska ne vaativat paljon keskittymistä käyttäjän osaan napauttaa niitä tarkasti. Teeman käyttöliittymän painikkeilla on parempi muotoiluvaihtoehto. Painikkeet, jotka ovat itse suhteellisen suuria ja joilla on myös suuri kosketusalue.

Toinen mielessä pidettävä asia on, että käyttäjät tekevät suurimman osan napauttamisesta peukaloilla, joten on hyvä idea sijoittaa pää "kehotus toimintaan" napit helposti saatavilla olevissa peukaloalueissa. Esimerkiksi tässä kuinka se soi iPhonessa.

5. Teeman tekeminen reagoivaksi ei ole muuta merkitystä

Lopetamme tämän oppaan ensimmäisen osan yleisimmällä virheellä, jonka ihmiset tekevät suunnitellessaan teemoja mobiililaitteille. Virhe on käsitellä reagoivia malleja lopulliseksi loppupeliksi.

Myönnetään, että teeman tekeminen reagoivaksi on valtava etu, etenkin kun kyse on epästandardeista laitteista ja näyttökooista, mutta se ei ole kaukana taikuusluettelon ratkaisusta. Vain siksi, että malli on reagoiva, ei tarkoita, että se toimii hyvin mobiililaitteissa. Esimerkiksi, se ei ratkaise mitään kuvan optimointiin liittyviä ongelmia tai sitä, että painikkeita on vaikea napauttaa tarkasti jne..

Joten kyllä, tee kaikki mitä voit tehdäksesi teemasi reagoivaksi, mutta samalla huolehdi muista osista, joita tässä oppaassa käydään läpi maksimaalisen mobiiliystävällisen suunnittelun kannalta.

Kutsun teitä virittämään toisen osan saadaksesi loput luettelosta (aiomme käsitellä asioita, kuten UX-suunnittelu, navigointi, JS: n avulla optimoida latausajat hyödyntämällä joitain vähemmän tunnettuja WordPress-toimintoja, ja enemmän). Ja sillä välin, mikä on suurin haaste suunnitellessasi mobiililaitteille?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector