Cómo armar un tema de WordPress basado en el rendimiento y primero en dispositivos móviles [Part 2]

Cómo armar un tema de WordPress basado en el rendimiento y primero en dispositivos móviles [Part 2]

Si se ha desplazado hacia abajo para ver lo que le espera aquí, es posible que se pregunte qué sucedió con los puntos 1-5.

Ah sí, para encontrar la respuesta deberías echar un vistazo a la primera parte de esta miniserie.

En definitiva, lo que buscamos aquí es darte una guía sobre cómo crear un tema móvil de alto rendimiento para WordPress. Puede que no lo parezca al principio, pero el desafío es en realidad mayor de lo que la mayoría de la gente cree.

Después de todo, la creencia general es que solo tienes que hacer que el tema sea receptivo y, listo, está optimizado para dispositivos móviles, ¿verdad? Bueno no exactamente. Entonces, sin más preámbulos, volvamos al tema de inmediato.

Para la Parte 1, consulte aquí: Cómo ensamblar un tema de WordPress basado en el rendimiento y en primer lugar para dispositivos móviles [Part 1]

6. Diseño para todos los navegadores móviles

Es realmente sorprendente lo diferente que puede comportarse un fragmento de código HTML según el navegador web en el que se esté ejecutando. Y eso se aplica a las computadoras portátiles y de escritorio. Probablemente más para móviles, ya que tenemos cientos de dispositivos y especificaciones de pantalla diferentes con los que lidiar.

Por lo tanto, cuando trabaje en su tema, tenga en cuenta los siguientes puntos:

  • pruebe su trabajo en todos los navegadores principales sobre la marcha; esto hará que la resolución de problemas sea mucho más fácil, en lugar de iniciar las pruebas de su navegador cuando ya haya completado todo el tema,
  • Ponga sus manos en tantos dispositivos como pueda y vea cómo se comporta el tema en ellos (pruebe con diferentes tamaños de pantalla, resoluciones y proporciones si es posible).

7. UX importa

En el móvil, las personas interactúan con los sitios web de una manera muy diferente a como lo hacen en una computadora de escritorio.

Suena básico, pero déjame darte un ejemplo sencillo. Cuando alguien está buscando una pizzería en su escritorio, probablemente esté interesado en una serie de detalles sobre el restaurante que está visitando. Por ejemplo, cosas como menú, galería, detalles de contacto, etc.

Sin embargo, si visitan el mismo sitio web desde un dispositivo móvil, probablemente solo les importe una cosa: cómo llegar y a qué número llamar para hacer una reserva.

En resumen, al crear un tema para dispositivos móviles, el diseño debe permitir al propietario del sitio centrarse más en elementos específicos que pueden ser cruciales para los visitantes móviles.

La forma más fácil de hacer esto es usar áreas de widgets bien diseñadas que aparecen en la página de inicio y permanecen en la parte superior del área visible de la pantalla (es decir, manteniéndolas en la parte superior del pliegue).

Cuando utilizan dispositivos móviles, las personas tienen muy poco tiempo para buscar la información que necesitan. Por eso, un buen diseño móvil debería ser eficaz para hacer accesible esta información.

8. Menos es más

El concepto de menos es más se puede aplicar fácilmente a la mayoría de los escenarios de desarrollo de temas, y cuando se trata de temas móviles, eso significa la diferencia entre un gran tema y un tema regular.

Esto es lo que puede hacer para hacer más con menos:

  • Deje menos espacio para los elementos de la marca. Un poco de espacio para el logo del sitio es importante, eso es obvio. Sin embargo, todavía no es tan importante como el contenido real, así que asegúrese de no permitir que el logotipo ocupe la mayor parte del espacio por encima del pliegue.
  • Presentar menús accesibles. Los menús siempre han sido un problema en el móvil. Por un lado, los sitios web necesitan menús. Pero, por otro lado, incluso un menú corto (que contiene solo unos cuatro elementos) puede usar fácilmente dos líneas de texto en la mayoría de los dispositivos móviles, empujando el contenido hacia abajo en la página. Esto es lo que puede hacer para resolver este problema: (1) mostrar el menú normalmente si cabe en una sola línea de texto, (2) convertirlo en una lista desplegable si no cabe.
  • Deshazte de los menús sin importancia. Me atrevería a decir que la mayoría de las veces el menú de pie de página no agrega valor al visitante móvil. En el escritorio, sirve como una especie de menú general donde los visitantes pueden encontrar enlaces a todas las demás páginas, pero en el móvil, hay pocas razones para que alguien lo use. Recuerde deshacerse de él por completo cuando su tema se muestre en el móvil.
  • Tenga cuidado con las funciones adicionales del sitio web. Hay infinitas posibilidades para introducir funciones personalizadas en un nuevo tema de WordPress. Puede implementar cosas como controles deslizantes de imágenes, integración de redes sociales, galerías personalizadas y muchos más. ¿Pero deberías? Si bien estas ideas de funciones son excelentes, pueden causar problemas a los usuarios de dispositivos móviles. Si desea asegurarse de que su tema funcione bien en la mayoría de las plataformas, use el nativo. wp_is_mobile () función. Te permitirá diferenciar entre visitantes móviles y de escritorio, así podrás simplificar la interfaz de los primeros para evitar cualquier problema.

9. Cargue solo los archivos que necesite

Hoy en día, las personas pueden acceder a la web desde una amplia gama de dispositivos móviles, por lo que, inevitablemente, algunos de estos dispositivos estarán muy desactualizados y no podrán admitir funciones web modernas. Por esta razón, siempre debe verificar qué biblioteca o módulo se necesita para ejecutar una función determinada.

Una de las mejores formas de hacer esto es utilizar una solución como Modernizar. En resumen, es una biblioteca de JavaScript que detecta la funcionalidad HTML5 y CSS3 en el navegador del usuario. Le permite escribir código condicional dependiendo de si una característica determinada está incluida en el navegador predeterminado o no. Luego, si es necesario, se pueden importar las bibliotecas requeridas.

modernizar

Pero Modernizr no será la solución para todo. Aquí hay algunas otras pautas para tener en cuenta:

  • Como regla general, recuerde no importar bibliotecas si no son absolutamente esenciales para la funcionalidad del tema. Cuantas más bibliotecas y scripts externos haya, más tiempo llevará cargar el sitio final (especialmente en dispositivos móviles).
  • Intente siempre cargar archivos JavaScript al final de la estructura HTML en lugar de al principio.
  • tratar minimizar la cantidad de elementos DOM su estructura HTML utiliza.
  • Cargue archivos CSS y JavaScript para cada página de forma individual. Por ejemplo, si tiene un archivo CSS que solo se requiere en una página específica, use el is_page () funcionan dentro de una declaración condicional y ponen en cola el estilo solo en esa página.

10. Realice pruebas de velocidad en un servidor de prueba.

Tener un servidor de prueba local será suficiente al inicio del desarrollo, pero necesitará introducir rápidamente una configuración de prueba más avanzada.

El punto es que nunca sabrá con certeza qué tan optimizado está su tema hasta que lo instale en un puñado de entornos de prueba y vea cómo funciona en la vida real.

Si bien mantiene los costos bajos, puede hacer esto instalando su tema en algunas cuentas de alojamiento compartido baratas (ya que la mayoría de los usuarios finales probablemente las usarán de todos modos). Luego, puede ejecutar varias pruebas utilizando las siguientes herramientas:

  • PageSpeed ​​Insights. Una herramienta diseñada por Google. Le proporcionará buenos datos sobre el rendimiento de su dispositivo móvil y de escritorio, así como consejos sobre cómo mejorar las cosas.
  • Prueba de velocidad del sitio web de Pingdom. Esta herramienta le dará un desglose completo del tiempo que lleva cargar cada script / archivo individual que su sitio necesita.
  • Ghostlab. Herramienta muy útil para probar simultáneamente el navegador web y móvil.
  • Prueba de rendimiento móvil de Mobitest. Le permite probar su sitio en dispositivos móviles reales, no solo en un entorno móvil general y emulado.
  • BrowserStack. Le brinda acceso instantáneo a todas las versiones de todos los navegadores de escritorio y móviles populares. Con esta herramienta, no tiene que preguntarse cómo se verá su tema en un navegador desactualizado, puede generar una captura de pantalla con solo unos pocos clics.

velocidad de la página

Eso resume nuestra guía de 10 pasos para crear un tema de WordPress orientado al rendimiento y centrado en dispositivos móviles. ¡Espero que obtengas algunas ideas interesantes y te ayude a convertir tu próximo tema en un verdadero monstruo de rendimiento!

O inicie la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. Únase a él ahora es gratis)!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba