página web responsiva Archivos

Para empezar a hablar de diseño responsive hay que empezar hablando del móvil. Como ya sabrás, el móvil ha cambiado la forma en la que nos conectamos a internet y es, actualmente, el primer recurso al que recurrimos para solucionar casi todas las necesidades de nuestro día a día.

De hecho, según un informe realizado por Statista, el móvil es el dispositivo más utilizado en España para acceder a internet, usado ya por el 93,1% de los españoles frente al 71,4% de los que usan un ordenador portátil para navegar por internet. Esto es, hay más gente con móviles que personas con un ordenador. Y cada día los usuarios “solo móvil” están creciendo más y más.

Tener un sitio web responsive, es decir, que sea compatible con todos los dispositivos, ya no es un lujo, es una necesidad. Si tienes un sitio web, es muy importante que los usuarios puedan acceder a él desde cualquier dispositivo, no solo desde un ordenador. Por lo que realizar un diseño web responsive es esencial si quieres que tu marca crezca.

Por eso, en este post te explicaremos qué es el diseño responsive, cómo implementarlo en tu web y las ventajas de tener una página que se ajuste al ancho de pantalla de cualquier dispositivo.

Qué es el diseño responsive

Antes de descubrir cómo hacer un diseño web responsive, es importante saber qué es y en qué consiste.

Un diseño web adaptable es el diseño que es capaz de adaptarse a diferentes tipos de dispositivos. El sistema detecta el ancho de la pantalla y a partir de ahí adapta todos los elementos de la página para ofrecer una mejor experiencia al usuario.

Algunas veces, el significado de web responsive se puede confundir con webs para móviles. En el primer caso lo que se tiene es un mismo sitio web que puede adaptarse a diferentes dispositivos, ya sea ordenadores, móviles o tablets.

Por otro lado, en las webs para móviles el diseño es creado desde cero para adaptarse a los dispositivos móviles. Es decir, se tienen dos sitios diferentes, duplicando así las tareas de mantenimiento y actualización.

Ahora que sabes qué significa responsive, ya puedes empezar a transformar tu sitio web para que se adapte a todos los dispositivos.

Ventajas del diseño responsive

1. Elimina los riesgos de crear contenido duplicado

Si no estás optando por un diseño responsive, eso significa que debes crear sitios web diferentes para cada dispositivo. Por ejemplo, necesitarías uno para teléfono móvil y otro para ordenador de escritorio.

Necesitar dos versiones de una misma página web puede ser negativo para el SEO, ya que ambas páginas presentan contenido idéntico. Google actúa severamente ante el contenido y reduce la clasificación de la web o expulsa el contenido copiado de las búsquedas por completo.

Tampoco es fácil ejecutar las mismas páginas para diferentes configuraciones, ni es aconsejable, ya que se corre el riesgo de cargar o actualizar solo una versión y no hacerlo en la otra. En pocas palabras, es mucho más fácil hacer un seguimiento de tu sitio web y tus progresos cuando solo tienes uno que analizar.

2. Respeta las pautas de Google

Google es, sin duda, el motor de búsqueda más popular. Cuando se trata de darte a conocer entre usuarios y clientes, es el número uno. Así que debes cumplir sus reglas. Y a Google le encanta el diseño responsive.

Dado que la efectividad en el posicionamiento web tiene mucho que ver con su motor de búsqueda, no hay absolutamente ninguna razón por la que debas ir en contra de los requisitos de Google. El buscador dice claramente que la configuración recomendada es full responsive design y favorece el diseño web responsive porque facilita el proceso de mostrar la web en diversos dispositivos.

3. Mejora las clasificaciones de búsqueda en dispositivos móviles

Las búsquedas en dispositivos móviles han superado a las búsquedas web en todo el mundo, por lo que Google clasifica las URL optimizadas para estos dispositivos por encima de las que no lo están, cuando se trata de búsquedas en dispositivos móviles.

Hay que tener en cuenta, al hablar de SEO y sitios web móviles, que Google reconoce para qué dispositivo se ha creado cada sitio web (dispositivos móviles, ordenadores…) y divide los resultados de búsqueda en función del dispositivo donde se esté buscando. Esto explica que un sitio web para móviles no siempre estará bien situado y clasificará mejor en una SERP de escritorio.

Un problema de crear una versión móvil desde cero es que supone comenzar una estrategia SEO completamente nueva, debido a que una nueva versión implica una nueva URL y nuevo código HTML. La autoridad acumulada de las webs de origen no se transferirá a la versión móvil, lo que supone una gran desventaja en el SEO.

Con el diseño web responsive no existe este problema, ya que solo existe una URL y toda la autoridad del sitio web se acumula en esa única URL. La suma de visitas desde cada dispositivo refuerza una única web y esto mejora su posicionamiento, indicando a Google que dicho sitio es informativo y de importancia.

4. Baja tasa de rebote

Cuando tu sitio web no cuenta con funciones adecuadas de interacción con el cliente, los usuarios abandonan tu página después de unos pocos clics. Google, por consiguiente, reducirá tu ranking debido al aumento en la tasa de rebote. Cuando se reduzca tu calificación, tendrás menos posibilidades de que entren visitas y se reducirá el tráfico de posibles clientes a tu sitio.

Si deseas reducir la tasa de rebote, opta por maquetar una web responsive. La tasa de rebote aumenta cuando los visitantes abren páginas que no están adaptadas a su dispositivo y salen rápidamente de ellas. La tecnología responsive elimina esta posibilidad, ya que reorganizará el contenido según el medio, eliminando el desplazamiento horizontal.

5. Mejor experiencia usuario

El diseño responsive trata de asegurar una buena experiencia de usuario. Ajustar el contenido a una pantalla específica de una forma ordenada implica una experiencia satisfactoria para el usuario.

Según indican los datos, existe un 61% de posibilidades de que un usuario móvil abandone una web si no está optimizada para su dispositivo. Y además, en caso de que el usuario tenga una experiencia positiva en un sitio móvil optimizado, hay un 67% de posibilidades de que este comience a usar tus servicios.

Los usuarios tienden a intercambiar información en la web, y esto hay que tenerlo en cuenta, dado que se busca homogeneizar la experiencia de usuario en varios dispositivos. Hay mucha gente que comparte contenido entre diferentes dispositivos, y un sitio web debería permitir que un usuario tenga una experiencia similar con la misma web tanto en escritorio como en móvil.

Adaptar tu web para móviles es una muy buena forma de simplificar el mantenimiento web de tu sitio en WordPress, pero también de mejorar tu visibilidad y tu posicionamiento en los motores de búsqueda. Es importante mantenerse a la vanguardia en lo que respecta a las tendencias de diseño, porque siempre están orientadas a mejorar la experiencia del usuario, algo que Google valora mucho.

6. Menor tiempo de carga

¿Sabías que el tiempo que tarda tu web en mostrar los contenidos es importante? Si tarda entre 3 o 4 segundos, debes aumentar la velocidad de carga de tu sitio web, pues si los usuarios tienen que esperar ese tiempo para ver lo que quiere, abandonarán tu página web.

Una de las maneras de optimizar el tiempo de carga es con el diseño responsive, pues, como decíamos, este mejora la experiencia usuario y la gran mayoría de internautas consumen contenidos desde el móvil.

Esto, a su vez, es positivo para el posicionamiento SEO, porque no solo los usuarios penalizan las páginas lentas marchándose de ellas, sino que Google también lo hace. El motor de búsqueda afina cada vez más los requisitos para darle los primeros puestos a los negocios en la web. Así, si tu página web no utiliza diseño responsive y, por consecuencia, tarda en mucho en cargar, Google no le dará el lugar que esperas.

¿Cómo se hace una web con diseño responsive en WordPress?

Es hora de crear tu página web responsive WordPress. En este punto aprenderás cómo hacer que tu tema de WordPress sea responsive.

Si lo que buscas es adaptar una web WordPress ya creada, te mostraremos también algunos plugins que te ayudarán a convertir tu web a responsive.

Crear un tema de WordPress responsive

Para hacer responsive una web deberás editar principalmente el archivo style.css, que es el que contiene el estilo de tu web.

Para ello, haz uso de la función CSS3, llamada consulta de medios o media queries. Esta función lo que hace es definir la manera en la que un tipo de medio (impresión, pantalla, etc.) influye en al menos una característica de la web (por ejemplo, el ancho de una imagen). La forma adecuada de utilizar esta función es la siguiente:

Por ejemplo: tienes una imagen en la web que quieres que cambie de tamaño según el medio por el que el usuario accede a la web. Si el visitante entra desde un teléfono móvil, el tamaño de la imagen será 50px, y si entra desde un PC queremos que sea de 90px.

El tipo de medio es screen, ya que solo vamos a tener en cuenta la pantalla. La implementación sería la siguiente:

Para una pantalla de PC:

@media screen and (min-width: 1024px){
img{
       width: 90px ; }
}

Para un dispositivo móvil:

@media screen and (max-width: 767px) {
img{
       width:50; }
}

Plugins para convertir tu web en responsive

Si ya tienes una web creada en WordPress y quieres (y debes) convertirla en diseño responsive, existen estos plugins:

1. WP Touch

WPtouch es un plugin para WordPress que permite mostrar automáticamente una web con un tema mobile friendly, sencillo y elegante en smartphones. Este plugin posee una versión de pago y una gratuita con ciertas limitaciones.

2. WP Mobile Detector

Wp Mobile Detector detecta automáticamente el dispositivo con el que se ha accedido a tu sitio web y carga un tema específico según el tipo de Smartphone.

3. WordPress Mobile Pack

Este plugin adapta el formato de tu web para la red y el dispositivo. Permite elegir entre diferentes plantillas móviles y ofrece widgets extras. A parte de la adaptación a los diferentes dispositivos, este plugin ofrece un panel de administración móvil para que los usuarios puedan editar el sitio o escribir nuevos mensajes desde el Smartphone.