Cómo hacer que un sitio de WordPress responda a dispositivos móviles

Los sitios web receptivos ahora son el estándar de la industria, debido a la gran cantidad de usuarios que navegan principalmente en dispositivos móviles. Para ilustrar cuán profundo es este impacto, los gigantes de la industria como Google ahora recompensan los sitios optimizados para dispositivos móviles en las clasificaciones de búsqueda, para ayudar a que más sitios atiendan a dispositivos que no son de escritorio.

En resumen, los sitios web receptivos usan el mismo código de sitio en todas las plataformas, pero ofrecen optimización para cada experiencia, independientemente del medio de visualización. Como consecuencia, configurar un sitio receptivo puede significar reconstruir todo su diseño o simplemente hacer algunos ajustes en el existente.

En este artículo, aprenderá cómo los sitios de WordPress se pueden hacer compatibles con dispositivos móviles utilizando un diseño receptivo. También explicaremos la importancia de la capacidad de respuesta para la optimización de motores de búsqueda (SEO). ¡Pongamos manos a la obra!

¿WordPress es compatible con dispositivos móviles?

WordPress es un sistema de gestión de contenido (CMS) que le permite diseñar la interfaz de su sitio para cumplir con sus requisitos exactos. Esto significa que se puede adaptar fácilmente a dispositivos móviles.

Los temas predeterminados receptivos están disponibles desde 2011. Muchos temas de terceros ahora también ofrecen un diseño receptivo listo para usar. Aquellos que no lo son, a menudo están desactualizados en muchas otras áreas.

¿Qué es el Diseño Responsivo?

Veamos cómo se aplicará el diseño receptivo a su sitio de WordPress. El diseño receptivo es una forma de organizar el contenido de su sitio web para que pueda responder dinámicamente al tamaño de la pantalla en la que aparece. Esto significa que la experiencia del usuario es tan buena en un teléfono inteligente como lo sería en una computadora portátil.

Para lograr esta excelente experiencia en todos los dispositivos, los diseñadores crearán cuadrículas de contenido fluidas y flexibilidad de código en imágenes a través del CSS de un sitio para reorganizar el HTML en respuesta directa al tamaño y la resolución de una pantalla.

Si desea un gran ejemplo, abra Mashable.com en una nueva ventana (suponiendo que aún no esté en un dispositivo móvil). Una vez que esté allí, cambie el tamaño de la ventana de su navegador para que sea cada vez más pequeña y observe cómo el sitio web se reorganiza en consecuencia.

A medida que reduce la ventana, las imágenes y los bloques de contenido corren para encajar en la ventana cada vez más pequeña de acuerdo con las cuadrículas fluidas que creó el diseñador. En su forma más pequeña, te queda cómo se vería el sitio de Mashable en un iPhone. Es hermoso, y fácil de leer. Vuelve a abrir la ventana y responden corriendo de vuelta a su configuración de "escritorio".

El sitio se reorganiza porque hay consultas de medios CSS que aplican diferentes reglas a la página, según el tamaño del dispositivo (en este caso, la ventana del navegador) que está viendo el sitio. El HTML sigue siendo el mismo, simplemente se reorganiza con el CSS. Las reglas de CSS se pueden aplicar para reorganizar todo en el sitio, incluida la presentación de varios tamaños de imagen según la resolución del dispositivo. Esto es realmente genial cuando quieres hacer cosas como servir imágenes mejoradas con retina a dispositivos iOS específicamente.

Aplicaciones móviles frente a sitios adaptables

Elegir una aplicación en lugar de un sitio receptivo se reduce al propósito del sitio. La mayoría de los sitios web estarán bien con un diseño receptivo que se pueda adaptar a los dispositivos. Una aplicación móvil entra en juego cuando los usuarios desean una funcionalidad muy específica en su dispositivo móvil que es diferente a la que proporcionaría el sitio completo. Es probable que su banco ofrezca una aplicación móvil para que pueda verificar rápidamente su saldo en línea en Starbucks. Facebook y Twitter también ajustan su funcionalidad en sus aplicaciones para adaptarse al uso del móvil.

Solo si sus usuarios necesitan un conjunto específico de funciones de sus teléfonos, distinto de lo que necesitan de su sitio web principal, una aplicación nativa es algo a considerar.

Consideraciones de rendimiento para sitios adaptables

Un diseño receptivo afectará el rendimiento general de su sitio. Cargar mucho CSS y varios tamaños de imágenes para responder a los tamaños de los dispositivos puede ser costoso desde la perspectiva del procesamiento de back-end. Como parte de la evaluación del diseño receptivo, es importante priorizar el rendimiento como característica. Los usuarios aún esperan que un sitio móvil sea un poco más lento, pero no lo perdonarán si intentan acceder a su sitio para mostrárselo a un amigo o a su cita, y tienen que esperar más de unos segundos.

Desde una perspectiva técnica, cuando entrega su sitio a un dispositivo móvil que usa datos móviles, tiene una desventaja de hasta 0,5 segundos desde el principio. Por ejemplo, obtener 40 KB en 4G requiere 700 ms en condiciones óptimas. La latencia de la red y las variaciones situacionales solo aumentarán su tiempo de carga también. No puede controlar las variables de la red celular, por lo que es fundamental que construya su sitio receptivo con el rendimiento como una característica desde el principio.

Asegúrese de haber hecho lo siguiente para garantizar que su sitio esté optimizado para dispositivos móviles.

• Optimice sus imágenes: detecte automáticamente el tamaño de la pantalla del dispositivo para crear, almacenar en caché y entregar el tamaño de imagen correcto.
• Reduzca sus solicitudes HTTP: minimice la cantidad de CSS y JavaScript que necesita usar y luego almacene en caché todo lo demás.
• Carga condicional de activos: los botones, imágenes y similares de redes sociales grandes son excelentes para un dispositivo más grande, pero no afectarán la experiencia del usuario para los más pequeños. Planifica tu diseño para cargar solo lo absolutamente necesario.
• Lazy Loading: si puede salirse con la suya cargando ciertos activos, JavaScript en particular, después de los elementos de página más importantes, hágalo. Para cuando sus usuarios hayan consumido el contenido que querían en primer lugar, esos otros activos se habrán cargado.

¿Su sitio de WordPress necesita ser receptivo?

Cada vez más, la respuesta predeterminada a esta pregunta será sí, particularmente con la amplia disponibilidad de temas responsivos de WordPress. Si su sitio necesita un rediseño o está en proceso de diseño, es importante ofrecer a sus usuarios una experiencia de calidad en cualquier dispositivo en el que se encuentren.

Con eso en mente, terminaré con algunas preguntas para que usted y su equipo evalúen si su WordPress debe diseñarse de manera receptiva.

• ¿Cuál es el caso de uso de su sitio? ¿Será importante el consumo del móvil? Lo más probable es que la respuesta a esto sea "sí, y cada vez más cada año". Habrá excepciones, pero no muchas.
• ¿Quiénes son sus usuarios? Cuanto más técnicos sean, más vanguardistas y más probable es que esperen un sitio receptivo para cada marca con la que se asocien.
• ¿Tienes el presupuesto? Este es un grande. Un sitio receptivo es un poco más costoso de construir inicialmente, pero es más económico crear un solo sitio receptivo que planear construir dos versiones separadas de su sitio y luego administrar el mantenimiento de ambos.
• ¿Estás listo para aprender un nuevo tipo de diseño? El diseño receptivo introduce una gran cantidad de nuevos conceptos y formas de entender el contenido digital. Será importante trabajar con un equipo de diseño que no solo pueda diseñar algo hermoso, sino que también lo eduque en el camino.

Creación de un diseño web responsivo de WordPress

Los diseños estáticos existentes a menudo se pueden convertir en temas receptivos. Estos son algunos de los elementos a considerar durante el proceso de conversión:

• Zoom predeterminado del navegador
• Anchos y altos de elementos fluidos
• Optimización de imagen
• Puntos de interrupción específicos del diseño
• Menús receptivos separados para dispositivos móviles

También debe probar su diseño actualizado en varios dispositivos y considerar elementos adicionales como tablas receptivas en sus pruebas. Sin embargo, la forma más fácil de hacer que WordPress sea receptivo es elegir un tema receptivo prediseñado desde el principio.

Elegir el tema de WordPress adecuado

Antes de comenzar a buscar entre los más de 10,000 temas de WordPress que están disponibles hoy en día, es una buena idea hacer una lista de las funciones que desea que tenga su sitio y usar esa lista como punto de partida.

Si no está seguro de los tipos de funciones que debe buscar, hay un par de líneas de base en las que puede insistir para ayudarlo a reducir las cosas: la optimización de motores de búsqueda (SEO) y los tiempos rápidos de carga de páginas (independientemente del dispositivo) son dos cosas que cualquier tema debe tener.

Si bien hay muchos temas de WordPress que no tienen esta funcionalidad incorporada, usar un tema que tenga ambas características hará que la experiencia del usuario final en su sitio sea mucho mejor.

El conjunto de temas premium de WordPress de WP Engine, por ejemplo, está optimizado para motores de búsqueda y responde a dispositivos móviles, lo que significa que todos se cargan rápidamente en cualquier dispositivo. Estos atractivos temas se crearon para una amplia variedad de casos de uso, y las empresas de todas las formas y tamaños los utilizan para impulsar su presencia en línea.

El acceso a estos temas también se incluye con cada plan de WP Engine, lo que significa que los clientes de WP Engine pueden usarlos todos sin cargo adicional.

Complementos móviles de WordPress

Los teléfonos móviles abren un gran potencial para funciones como notificaciones automáticas y carga persistente en conexiones lentas. Sin embargo, si bien existen soluciones para ayudar a convertir su sitio web en una aplicación web móvil y llevar el concepto optimizado para dispositivos móviles al siguiente nivel, muchas aún están en fase de desarrollo y prueba.

Esto significa que es posible que falte parte de la funcionalidad esperada. Sin embargo, hay una serie de complementos móviles de WordPress que pueden ayudarlo a mejorar su sitio de varias maneras.

1. Mochila propulsora

Si bien hay muchas soluciones disponibles, el complemento Jetpack es una opción muy popular. Lo encontrará en el Directorio de complementos, pero también tiene opciones para crear un tema móvil simple en su sitio.

Una de las mejores cosas de Jetpack es que está bien mantenido. Esto significa que habrá actualizaciones frecuentes para garantizar su seguridad y funcionalidad. También es una de las herramientas con más funciones que puedes encontrar. El complemento base es gratuito y viene con muchas opciones. La desventaja es que hay tantas funciones que la interfaz puede parecer confusa al principio.

Además, si desea copias de seguridad diarias, temas personalizados y herramientas de SEO, deberá invertir en la versión premium de Jetpack. Dependiendo de sus necesidades, puede obtener el complemento premium para uso personal a $ 39 por año, con el nivel superior a $ 299 por año.

2. WPtouch

Además, puede explorar WPtouch, un complemento popular que puede crear un sitio web móvil desde su sitio existente. Uno de los principales beneficios de usar este complemento es que puede personalizar la versión móvil sin interrumpir o cambiar su sitio web original.

La versión gratuita también tiene una funcionalidad bastante robusta. Sin embargo, si está buscando una apariencia diferente, tendrá que comprar la versión pro. Los planes de precios profesionales comienzan en $ 79 por año y van hasta $ 359 por año para licencias de nivel empresarial.

3. Paquete móvil de WordPress

Si bien WordPress Mobile Pack no se probó con la última versión de WordPress, es un complemento popular para crear una aplicación web progresiva (PWA) a partir de su sitio web existente. Esto significa que los usuarios de su sitio obtendrán una experiencia 'similar a una aplicación', sin necesidad de que invierta recursos en la programación de una aplicación descargable para una tienda de aplicaciones.

Con este complemento, podrá enviar mensajes de banner a los usuarios, alertándolos sobre la opción de agregar su sitio web a sus pantallas de inicio. Sus páginas se almacenarán en caché y se cargarán muy rápidamente. La funcionalidad básica es gratuita para este complemento, pero deberá comprar la versión pro para obtener acceso a más temas, opciones de personalización y la capacidad de sincronizar cierto contenido.
La versión pro del complemento tiene tres niveles para elegir. El paquete Freelancer comienza en $ 99 por año y se puede usar en tres dominios. Los niveles de precios superan con la opción VIP, a $499 por año por diez licencias de dominio.

Imágenes receptivas

WordPress ha ofrecido imágenes responsivas destacadas por defecto desde la versión 4.4. Sin embargo, especialmente para los sitios que usan el código anterior, hay un fragmento simple que puede agregar a su hoja de estilo para asegurarse de que las imágenes nunca se vean demasiado grandes en dispositivos pequeños:

img {
max-width: 100%;
height: auto;
}

Si bien hay muchas maneras de garantizar un rendimiento de imagen receptivo óptimo, este fragmento garantiza que todas sus imágenes respondan como referencia.

Finalmente, la mayoría de las imágenes son adecuadas para su inclusión en un sitio receptivo, aunque la escalabilidad debería ser un factor. Por ejemplo, si incluyes una imagen con mucho texto, puede que no sea fácil de leer en dispositivos móviles. En este caso, puede ser mejor elegir una imagen diferente o proporcionar una forma de que el texto se lea independientemente de la imagen.

Menús responsivos

Hay dos escuelas primarias de pensamiento con respecto a la creación de menús receptivos:

1. Haga un menú que funcione en todos los tamaños.
2. Cree dos menús: uno para pantallas grandes y otro para experiencias en pantallas pequeñas. Solo se mostrará uno a la vez, según el tamaño de pantalla que se utilice.

El enfoque de talla única funciona mejor para menús más pequeños, ya que la optimización de CSS para la legibilidad móvil requiere solo algunos ajustes simples. En esa situación, el menú siempre está visible para el usuario, independientemente del tamaño del dispositivo.

Sin embargo, si un menú es demasiado grande para reducirse fácilmente para dispositivos móviles, es posible que necesite una segunda versión dedicada a pantallas más pequeñas. En este caso, el menú grande solo es visible en pantallas grandes, y un ícono de menú móvil está presente en pantallas más pequeñas.

Un ejemplo típico de este enfoque es el ícono del menú de hamburguesas, que desliza el menú móvil completo a la vista cuando se hace clic en él. También puede hacer uso de la diversa selección de complementos de WordPress para ayudarlo con la creación de su menú receptivo. Veamos tres opciones.

1. UberMenú

Una opción que puedes probar es UberMenu. Por $25, tendrá acceso a futuras actualizaciones y seis meses de soporte. UberMenu puede ayudarlo a crear menús totalmente receptivos y fáciles de tocar. Desafortunadamente, a menos que su tema sea específico de UberMenu, es probable que tenga que hacer algunos cambios manuales para que su tema funcione correctamente.

2. Max Mega Menú

Otra opción es el complemento Max Mega Menu. Esta herramienta tiene una opción gratuita en el directorio de complementos de WordPress y funciona con sus menús existentes para convertirlos en 'mega' menús:

La versión gratuita también tiene muchas funciones de menú móvil, como soporte nativo para pantallas táctiles. Para obtener acceso a más fuentes y opciones de alternancia móvil, deberá consultar uno de los tres niveles de precios. La versión premium del complemento comienza en $ 29 por año y varía hasta $ 99 por año para licencias de sitios múltiples.

3. Menú receptivo

Otro complemento popular y bien calificado que puede consultar para hacer que sus menús sean compatibles con dispositivos móviles es el complemento Responsive Menu. Esta solución tiene más de 150 opciones de personalización diferentes, todo dentro de una interfaz fácil de usar.

Tendrá la flexibilidad de cambiar casi todos los aspectos de sus menús desde la página de configuración de su complemento. Sin embargo, si está buscando animaciones y más fuentes, deberá consultar la actualización del complemento Responsive Menu.

La versión gratuita del complemento puede traer las funciones que necesita, ya que la lista de opciones es bastante extensa. Si actualiza, puede obtener una licencia para un solo sitio por $29 u obtener licencias ilimitadas por $99. El costo del complemento es una tarifa única y recibirá actualizaciones gratuitas de por vida.

Tablas receptivas

De forma predeterminada, las tablas ocupan tanto espacio como su contenido (o más). Esto puede provocar que las tablas demasiado anchas arruinen los diseños móviles.

Desafortunadamente, las tablas llenas de contenido se vuelven difíciles de leer cuando se reducen para ajustarse al ancho de una página móvil. El diseño receptivo no se trata solo de comprimir datos en una pantalla pequeña. En cambio, se trata de hacer que todo sea fácil de usar, independientemente del dispositivo.

Para una solución rápida y sucia, puede agregar capacidad de respuesta básica a sus tablas con este fragmento de CSS:

table {
width: 100%;
border-collapse: collapse;
}

Sin embargo, no tienes que detenerte allí. A menos que tenga tablas pequeñas, le recomendamos optimizar cada una según el tipo de contenido que presenta. Dependiendo de los datos dentro de sus tablas, hay una serie de opciones de respuesta entre las que puede elegir para obtener la mejor legibilidad posible.

Sin embargo, si está buscando una solución de complemento para tablas receptivas, ¡está de suerte! Hay varias opciones, pero te vamos a recomendar tres en concreto.

1. Prensa de mesa

En primer lugar, el complemento TablePress es una opción popular, bien mantenida y altamente calificada. Podrá crear e incrustar hermosas tablas con códigos abreviados. Sin embargo, para lograr tablas realmente receptivas, deberá instalar una extensión de TablePress. Si bien estos también son gratuitos, se recomienda que haga una donación al desarrollador.

2. Generador de tablas WP

Si está buscando una opción de creación de tablas de arrastrar y soltar de cinco estrellas, WP Table Builder podría ser para usted. Un complemento algo nuevo pero bien recibido, su interfaz de arrastrar y soltar facilita la creación de tablas receptivas para su sitio web.

Este es un complemento completamente gratuito también. El único inconveniente real de esta opción es que solo viene con cinco opciones de datos en este momento. Está algo limitado a texto, imágenes, botones, listas y clasificaciones de estrellas.

3. tablas de datos wp

El tercer complemento que recomendamos revisar es wpDataTables. Con esta herramienta, puede crear rápidamente tablas y gráficos a partir de Excel, CSV, PHP u otros datos existentes. Esto significa que puede tomar grandes conjuntos de datos y hacerlos accesibles en su sitio web.

Este complemento también está listo para Gutenberg, por lo que es fácil agregar tablas a las páginas y publicaciones de su sitio una vez que las haya personalizado en la configuración del complemento. Sin embargo, estará algo limitado por la versión gratuita de este complemento.
Por ejemplo, no podrá crear tablas basadas en consultas MSQL ni extraer información de las hojas de cálculo de Google a menos que actualice. La versión premium comienza en $ 59 por año para el nivel de precios básico y alcanza un máximo de $ 249 por año para el paquete de desarrollador.

Adición de capacidades multilingües

A medida que la adopción de WordPress ha seguido aumentando en todo el mundo, ha provocado una creciente necesidad de funcionalidad multilingüe, lo que permite que los sitios se traduzcan a los idiomas locales en función de la ubicación del usuario.

Este tipo de funcionalidad es enorme para empresas con clientes en varios países, y con WordPress, agregarlo a su sitio no es tan desafiante como podría pensar. De hecho, se puede lograr instalando un complemento como Weglot, que le permite hacer que su sitio web sea multilingüe en minutos, sin necesidad de código.

Weglot también es compatible con todos los temas y complementos de WordPress, lo que significa que funcionará en cualquier tema que termine usando y no causará problemas con sus otros complementos. Cuando se agrega a uno de los temas premium de WordPress de WP Engine, Weglot ayuda a los propietarios de sitios a crear un sitio con capacidad de respuesta móvil compatible con SEO al que se puede acceder en cualquier idioma.

Consulte esta guía para obtener más información y visite WP Engine para conocer nuestros diferentes planes y las otras características y funcionalidades que vienen con nuestra plataforma de experiencia digital para WordPress.

Capacidad de respuesta móvil para SEO

En pocas palabras, los sitios web optimizados para dispositivos móviles son recompensados ​​por Google en los resultados de búsqueda orgánicos. Entre 2015 y 2016, se agregaron varias actualizaciones al algoritmo de clasificación para favorecer los sitios web receptivos. Es importante tener en cuenta que debido a que la velocidad juega un papel muy importante en la facilidad de uso para los usuarios de dispositivos móviles, esto también contribuye a una mejor clasificación en los motores de búsqueda.

Por supuesto, los sitios web receptivos de carga rápida dependen de un alojamiento estelar para tener éxito. Cuando elige una empresa de alojamiento de calidad como WP Engine (ofrecemos PHP 7 como estándar y una red de entrega de contenido gratuita en planes de nivel superior), notará tiempos de carga más rápidos y una operación más fluida en general.

Cree de forma receptiva con WP Engine

Trabajar para lograr un sitio web receptivo debe ser una prioridad en nuestro mundo dependiente de dispositivos móviles. Hay mucho de lo que hacer un seguimiento, pero aquí en WP Engine podemos ayudarlo a orientarlo hacia los mejores recursos para desarrolladores de WordPress y temas altamente receptivos para usuarios móviles.

Adicionalmente, contamos con una amplia variedad de planes y soluciones para tu sitio web. ¡Lo ayudaremos a construir de manera receptiva en nuestra plataforma de experiencia digital, y no tendrá que preocuparse por perder visitantes debido al tamaño de la pantalla!