Una vez que Google ha hecho oficial que va a tener en cuenta si las páginas web están optimizadas para móviles en sus resultados de búsqueda (artículo Google y la optimización móvil) , nace la necesidad de buscar plantillas wordpress responsive y/o averiguar si la plantilla que estamos utilizando lo es.

Cuando hablamos de plantillas wordpress responsive nos referimos a aquellas plantillas para wordpress que se adaptan a diferentes dimensiones de interfaces (Escritorio, tablets y móviles).

 


 
 

ÍNDICE:

1.- Que características ha de tener una plantilla wordpress responsive

Modificando el tamaño de la ventana del navegador web podemos obtener una primera aproximación para conocer si nuestra plantilla wordpress es responsive. Conforme vamos reduciendo el tamaño de la ventana del navegador debemos fijarnos en varias cosas:

 

a.- Elementos de menú que se transforman en un botón desplegable

Utilizando plantillas wordpress responsive, los diferentes elementos o ítems de menús horizontales deben transformarse en un botón desplegable cuando el espacio de la interface disponible para ellos sea muy reducido. Es decir, cualquier menú horizontal de la web debe transformarse en un botón desplegable al reducir el tamaño de la ventana del navegador.

Comprobar si la Plantilla wordpress es responsive modificando la ventana navegador

Modificamos el tamaño de la interface del navegador para ver si la plantilla wordpress es responsive

 

b.- Imágenes sin cortar

Las imágenes de la página web van reduciendo sus dimensiones conforme vamos reduciendo la ventana del navegador. Si al reducir el tamaño de la ventana del navegador las imágenes quedan cortadas es signo inequívoco de que la plantilla no está optimizada para móviles. Es decir, no es una plantilla wordpress responsive.

 

c.- texto sin cortar

Al utilizar plantillas wordpress responsive, a pesar de ir reduciendo las dimensiones de la ventana del navegador el texto debe poder leerse perfectamente. Es decir, el texto no puede aparecer cortado. Los párrafos deben ir reduciendo su anchura manteniéndose el texto siempre legible.

 

d.- no es necesario utilizar un scroll horizontal

Otro signo de utilización de plantillas wordpress no responsive es la aparición de una barra de scroll horizontal cuando disminuimos la anchura de la pantalla del navegador web. Por el contrario si es normal que aparezca una barra de scroll vertical.

 

2.- Cómo saber si tengo una plantilla wordpress responsive: Herramientas online

Te presento un par de herramientas online que nos permitirán simular el aspecto de una página web en dispositivos móviles o tablets:

 

a.- Mobil test me:

Accede a la herramienta online Mobil test me

Una vez accedamos a la herramienta online, para saber si utilizamos una plantilla wordpress responsive, simplemente debemos elegir un dispositivo. A continuación debemos introducir en el campo te texto la url de la página web cuya visualización móvil queremos simular.

Una vez nos aparezca la simulación de la visualización móvil debemos comprobar que se cumplen todos los puntos del apartado 1 (características ha de tener una plantilla wordpress responsive).

 

b.- Quirktools:

Accede a la herramienta online Quirktools

Esta herramienta online es bastante similar a la anterior aunque con más posibilidades de configuración.

Para saber si estamos utilizando una plantilla para wordpress responsive u optimizada para móviles, lo primero que haremos será introducir la url de la página web que queremos analizar.

En primer lugar nos aparecerá una visualización de la web en escritorio. Para cambiar a una visualización tipo Tablet, móvil o tv deberemos pulsar el icono correspondiente de la parte superior. Al pulsar cualquiera de estos iconos podremos elegir entre diferentes tamaños de interface.

Herramienta para saber si utilizamos una plantilla wordpress responsive

Herramienta online para saber si utilizamos una plantilla WordPress Responsive

Con el icono: “custom screen size” podemos configurar un tamaño personalizado para la interface.

Puedes utilizar el icono: “Rotate Screen” para girar la interface y el icono:” Allow scrolling” para activar las barras de desplazamiento (barras de scroll).

Si quieres saber más sobre esta herramienta visita esta entrada de blog: Quirktools para identificar páginas web responsive

 

3.- Visualizar la página web en diferentes dispositivos móviles

La prueba de fuego para saber si tenemos una plantilla wordpress responsive es visualizar la página web en diferentes móviles con diferentes sistemas operativos y navegadores.

Una vez visualives la web en un dispositivo móvil comprueba que se cumplen las condiciones que vimos en el apartado 1.

Aunque como norma general podemos decir que una página web no responsive se verá tan pequeña en un dispositivo móvil que para poder leer el texto tendremos que realizar ampliaciones.  También ten en cuenta que no deben aparecer los diferentes elementos del menú horizontal a no ser que pulsemos un botón desplegable.

Si queremos comprobar como se ve la página web en diferentes navegadores y sitemas operativos:

Probar con un móvil con sistema operativo android y visualizar la web con el navegador Android Browser (el que viene por defecto), con el Chrome para móviles y el Opera mini.

También prueba con un iphone y con Safari su navegador por defecto. Ya que estás también puedes probar con un móvil con sistema operativo Windows Phone.

De esta manera podrás comprobar si tu página web se visualiza de la misma manera en todos los navegadores móviles.

 

4.- ¿Es mi plantilla wordpress responsive para Google?

Ahora queda saber qué opina Google sobre la plantilla wordpress que estoy utilizando. Para ello vamos a visitar la página de pruebas de Google Friendly

En el campo de texto que aparece en esta página debemos introducir la url de la página web que queremos analizar. A continuación pulsaremos el botón analizar

Tras unos momentos la herramienta online de google nos dirá si nuestra página está optimizada para móviles o no.

Para ver una descripción más detallada podemos acceder a nuestra cuenta Webmaster tools asociada a la página web que estamos analizando. Si todavía no tienes una cuenta de Webmaster tools asociada a tu cuenta, te recomiendo encarecidamente que te crees una ya que es podrás obtener información muy relevante sobre tu página web. Una vez estás en Webmaster tools, selecciona en el menú lateral izquierdo: Tráfico de búsqueda > Usabilidad móvil. Aquí nos dará una descripción más precisa de los errores, en caso de existir.

 

5.- DIVI una plantilla WordPress responsive multipropósito

En este punto te voy a recomendar una plantilla WordPress Responsive que yo utilizo muy habitualmente. La plantilla se conoce como Plantilla wordpress DIVI y es una plantilla Responsive multipropósito.

La plantilla está creada por Elegant Themes, una de las empresas más importantes en diseño de plantillas WordPress. La plantilla DIVI es multi licencia, es decir, que podemos utilizarla en todos los proyectos que queramos. Como sabéis, las plantillas que se venden el Themeforest tienen licencia única (sólo se pueden utilizar en una web) a no ser que pagues una multilicencia que cuesta en torno a los 2000 €.

Divi, plantillas wordpress multipropósito

Divi, plantilla wordpress responsive, multipropósito y multi licencia

Por el precio de una plantilla en Themeforest en Elegant Themes podrás acceder a más de 87 plantillas (multilicencia) y a 6 plugins. Aunque es DIVI la plantilla más potente y de más calidad con mucha diferencia con respecto al resto de plantillas del paquete.

Por sólo 89$ tendrás acceso a las 87 plantillas y los 6 plugins (si los plugins no te interesan sólo te costará 69$).

Aquí te dejo algunas entradas de blog relacionadas con Divi:

  1. Elegir un paquete de plantillas: ElegantThemes frente a Woothemes
  2. Categoría Divi: Entradas de blog realacionadas con DIVI.
Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO BLOOM + MAILCHIMP (7 Clases)
4.- CURSO SEO (19 Clases)
5.- CURSO BLOG WORDPRESS (32 Clases)
6.- CURSO WOOCOMMERCE (39 Clases)
7.- CURSO FLATSOME WORDPRESS (36 Clases)
8.- CURSO COLORES WEB (9 Clases)
9.- CURSO ANALYTICS (10 Clases)
10.- CURSO GESTIÓN IMÁGENES WEB (15 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.