Com combinar un tema de WordPress orientat al rendiment en primer lloc per a mòbils [1a part]

En el seu nucli fonamental, la confecció d’un tema de WordPress és una tasca bastant senzilla. WordPress proporciona un entorn realment agradable i deixa clar quines funcions PHP heu d’utilitzar per a quins propòsits al llarg del camí.


Malgrat això. Tot i que és senzill, és molt fàcil, i sobretot si voleu que el vostre tema sigui optimitzat per a mòbils.

Hi ha una sèrie de problemes únics que heu de superar si voleu acabar amb un producte de qualitat que es carrega ràpidament, funciona de manera previsible i (el que és més important), és fàcil d’utilitzar i és accessible a les persones que utilitzin diferents dispositius. i mides de pantalla.

Aquesta guia de dues parts us detallarà el procés en 10 passos, on es recullen les coses més importants a tenir en compte a l’hora de crear un tema de WordPress orientat al rendiment per a mòbils..

A la part 2, vegeu aquí: Com combinar un tema de WordPress orientat al rendiment en primer lloc per a mòbils [Part 2]

1. El contingut arriba primer

Realment no hi ha gaire espai per a mòbils per mostrar molts detalls de disseny ni per utilitzar elements que semblin agradables.

Tot i que els dispositius moderns són capaços de mostrar gràfics de fins a 1136 × 640 píxels (iPhone 5s), no oblidem que la pantalla té tan sols una polzada. No es tracta de treballar amb molts béns immobles.

Coses que val la pena fer:

  • desfer-se de tots els elements de disseny addicionals que no són essencials per a la presentació de contingut,
  • assegureu-vos que el bloc de contingut principal sigui el més alt possible del llenç de disseny (a causa de les diferents mides de pantalla dels dispositius mòbils, no podem predir on "plegar" vindrà exactament),
  • centrar-se en la tipografia i fer que el contingut sigui llegible (augmentar la mida del tipus de lletra, però tingueu cura de no fer una sola línia de text massa curta i, per tant, il·legible),
  • introduïu un bon contrast: text i fons (això és crucial per a dispositius mòbils, sobretot si algú intenta llegir la pàgina mentre es troba en una zona assolellada).

2. Optimitza les imatges

L’optimització d’imatges és encara més important per a mòbils que per a qualsevol altre escenari. El cas és que quan algú intenta accedir a un lloc via mòbil, probablement estiguin en connexió 3G lenta. Per tant, heu d’assegurar-vos que el tema permet que les imatges es puguin carregar relativament ràpidament independentment d’aquest fet.

Coses específiques que podeu fer:

  • Penseu en integrar la funcionalitat de càrrega mandrosa. En si mateix, la càrrega mandrosa és excel·lent (carregar imatges només quan el visitant s’hi desplaça). Però el problema és que els usuaris finals podrien acabar instal·lant alguns plugins de càrrega mandrosos al lloc final. Això pot interferir amb qualsevol cosa que ja hàgiu integrat en el tema. Si voleu arriscar-vos, però, el millor seria fer possible la funcionalitat mitjançant una solució com jQuery i Plugin de càrrega pereçosa. Els complements de WordPress solen utilitzar aquesta biblioteca també, de manera que minimitzeu la probabilitat que les funcions no funcionin quan hi ha dos scripts diferents que intenten aconseguir el mateix resultat. A més, permeten desactivar la càrrega mandrosa a la configuració del tema.
  • Optimitza les imatges per mida i qualitat. Les imatges solen tenir la majoria del consum d’ample de banda del lloc mitjà, de manera que, com a creador de temes, heu d’assegurar-vos que les vostres imatges siguin el més optimitzades possible. Podeu fer dues coses perquè això passi: (1) assegureu-vos que les imatges no tinguin una dimensió més gran que la que es necessita (vegeu # 3): un píxel addicional aquí i hi podeu afegir prou ràpidament (2). totes les imatges mitjançant una eina com Optimol o TinyPNG abans de llançar el tema al públic.
  • Utilitzeu tipus de lletra d’icones sempre que sigui possible. L’antiga escola d’incloure icones en qualsevol disseny era simplement construir-les a Photoshop, convertir-ho tot a PNG o GIF i desplegar-lo. Avui en dia, no és la més optimitzada de solucions. Amb eines com Tipus impressionants, podem enriquir els nostres dissenys amb centenars de tipus de lletra bellament dissenyats i, al mateix temps, mantenir un rendiment molt decent.

3. Feu el disseny preparat per a la retina (optimitzat per a pantalles d’alt DPI)

Gairebé tots els dispositius nous disposen de pantalles d’alta DPI en aquests dies. Aquestes pantalles fan que tot sembli molt nítid, però només si s’ha optimitzat el tema en qüestió per a la visualització d’alta DPI. En cas contrari, l’usuari veurà molta píxelada i això farà que l’experiència en general sigui poc atractiva.

Hi ha dues dreceres principals que podeu portar a l’optimització d’alta DPI:

  • Utilitzeu tipus de lletra d’imatge – esmentats anteriorment; Tipus de lletra d’escala de forma automàtica i es veuen excel·lents en tots els dispositius.
  • Creeu versions alternatives de totes les altres imatges (dues vegades més grans) i canvieu-les amb CSS sempre que s’utilitzi un dispositiu de DPI alt per visualitzar el contingut.. Aquí teniu un guia sobre com podeu fer-ho.

Finalment, també heu de tenir cura dels preferits del vostre tema (i probablement permeteu que l’usuari també els canviï, però és una altra cosa).

En aquell moment, només necessitava una imatge PNG 16 × 16, que després convertiríeu en ICO, i tots havíeu definit. Ara mateix és molt més complicat. Per exemple, els nous dispositius Apple intentaran buscar icones més grans i intentar-les utilitzar com a punts d’interès.

Algunes de les mides de favicon que iOS espera trobar són: 76 × 76, 120 × 120, 152 × 152. Aquí hi ha un llista completa a Apple.com.

Podeu crear aquestes icones a mà o utilitzar una eina com Generador real de Favicon. Només necessita una imatge d’inici, que s’utilitzarà com a base per generar totes les altres versions. A més, també s’obté el codi HTML correcte per incrustar les icones al tema.

4. Optimitza per tocar

Hem de recordar que la majoria dels dispositius mòbils que hi ha són compatibles amb interfícies tàctils o es basen en pantalla tàctil totalment. El que això vol dir és que hem de fer que cada element tappable sigui prou gran perquè l’usuari hi pugui accedir amb facilitat.

Per exemple, els enllaços de text no estan molt optimitzats pel tacte perquè requereixen molta concentració per part de l’usuari per tocar-los amb precisió. És una millor opció per dissenyar amb botons per a la interfície del tema. Els botons que són relativament grans i tenen una àrea de tacte molt gran.

Una altra cosa a tenir en compte és que els usuaris fan la major part de polze, per la qual cosa és una bona idea posar-ne el "crida a l’acció" botons a les zones de polze de fàcil accés. Per exemple, aquí està com es reprodueix a l’iPhone.

5. Que el tema sigui sensible no és tot el que importa

Acabem la primera part d’aquesta guia amb l’error més comú que cometen les persones quan dissenyen temes per a mòbils. L’error és tractar dissenys sensibles com el joc final final.

Permet respondre el vostre tema és un avantatge molt important, sobretot quan es tracta de dispositius no estàndard i de mides de pantalla, però està lluny d’una solució de vinyetes màgiques. El fet que un disseny respongui no vol dir que funcioni bé al mòbil. Per exemple, no solucionarà cap problema d’optimització d’imatges o el fet que els botons siguin difícils de tocar amb precisió, etc..

Així que sí, feu tot el que pugueu per donar resposta al vostre tema, però, al mateix temps, tingueu cura dels altres elements que estem passant en aquesta guia per obtenir un disseny idoni per a mòbils..

Us convido a sintonitzar la segona part per obtenir la resta de la llista (aprofundirem en el disseny d’UX, la navegació, utilitzant JS per optimitzar els temps de càrrega, aprofitant algunes de les funcions de WordPress menys conegudes, i més). I mentrestant, quin és el vostre repte més gran a l’hora de dissenyar per a mòbils?

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