Entradas

¿Qué es el diseño responsive?

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.

Según un informe realizado por Ditrendia, el móvil es el dispositivo más utilizado en España para acceder a internet, usado ya por el 97% de los españoles y el 53% de la población mundial. 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, gracias a la mejora tecnológica.

Debido a esto, 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.

En este post te explicaremos: cómo crear una web responsive paso a paso, las ventajas de tener una página con diseño responsivo y que es un diseño web responsive.

¿Qué es una web responsive?

Primero de todo, antes de descubrir cómo hacer un diseño web responsive, es importante saber qué es el diseño web responsive 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: ordenadores, tablets, smartphones…
  • 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.

diseño web responsive

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 responsive design.

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. Google dice claramente que la configuración recomendada es full responsive design.  Google favorece el diseño web responsive porque facilita el proceso de mostrar la web en diversos dispositivos. Por lo tanto, no dejes pasar más tiempo y haz tu sitio web responsive.

mobile first

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 y mejor experiencia de usuario

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.

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.

full responsive design

Adaptar tu web para móviles es una muy buena forma de simplificar el mantenimiento web de tu 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.

 

¿Cómo se hace una web responsive en WordPress?

Es hora de crear tu página web responsive paso a paso en WordPress desde cero. 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

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 por el cual 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.

 

Ejemplos web responsive

¡Visita nuestro portfolio y echa un vistazo a todos nuestros ejemplos de diseño web responsive!

Si tienes alguna duda al elaborar una web responsive contáctanos sin compromiso y te ayudaremos a mejorar el diseño de tu web WordPress.

3 votos, promedio: 5,00 de 53 votos, promedio: 5,00 de 53 votos, promedio: 5,00 de 53 votos, promedio: 5,00 de 53 votos, promedio: 5,00 de 5 (3 votos, promedio: 5,00 sobre 5)
Necesitas estar registrado para valorar este post
Cargando…