Cómo crear una página web responsive o adaptativa. El Magacín.
Cómo crear una página web responsive o adaptativa. El Magacín.

Antes de empezar pregúntate: ¿cuánto tiempo dedicas en consultas con el móvil?, ¿qué tipo de consultas realizas en él?

El uso de smartphones ha crecido exponencialmente en los últimos años. Echa un vistazo a tu alrededor, cuantas veces habrás cogido el transporte público y 8 de cada 10 personas estaban absortas en su móvil, (las otras 2 se les había agotado la batería).

Sí, es una realidad, «yaaaaa estoy aquíiiii Caaaroline, ve hacia la luz»  Tanto es así que ya existen casos de nomofobia o miedo a salir de casa sin el móvil y no, no solo ocurre en adolescente.


Las consultas en buscadores a través de móviles se han disparado así que ¿te imaginas que tu web que no respondiera a las necesidades que demanda el usuario actualmente? la tasa de fuga sería terrible.

Es por ello que tu web o blog debe ser responsive o adaptativa, ¿esto qué significa?

Flecha hacia abajo. El Magacín.

El número de personas que usan sus dispositivos smartphone para realizar consultas en Google es una tendencia en auge, debes tenerlo muy presente. Optimizar nuestras website para un SEO correcto lleva consigo la mejora de la experiencia del usuario y esto debe estar entre los puntos clave de tu estrategia si quieres mantenerte por delante de tu competencia, parece raro pero a día de hoy todavía existen webs que no están preparadas.

 

¿QUÉ ES EL DISEÑO RESPONSIVE O ADAPTATIVO?

El diseño responsive o adaptativo es una filosofía de diseño, y lo que se pretende con este cambio o desarrollo es ajustar la website a dispositivos que tengan distintas dimensiones sin que la experiencia del usuario sea negativa.

Urge una respuesta inmediata a dudas, lugares, citas, etc. Lo queremos todo ya, fácil y sin demasiadas transacciones. De ahí que tu web deba tener estas características.

Diseño responsive sobremesa. El Magacín.Diseño responsive. El Magacín.

Antes de lanzarte, analiza cuál es tu target y de dónde procede; según tu nicho de mercado vendrán más por ordenador de mesa o por móvil. Así que antes de nada, evalúa tu tráfico y sopesa la premura de esta decisión.

Es muy importante tener en cuenta esta variable ya que hay puntos que te van a favorecer enormemente; adaptando tu web a los diferentes dispositivo móviles darás un paso enorme y sobretodo mejorarás la experiencia de tus usuarios y mejorarás el SEO, es decir, tu posicionamiento orgánico en los buscadores como Google.

 YEAH!

Ventajas de una web responsive. El Magacín.

 

Esta es una de las mejores prácticas que puedes implementar en tu estrategia, pero esto no lo es todo, otro de los factores importantes para tomar esta decisión es que nuestro amigo Google favorece aquellas webs que sean adaptables ya que a sus bots les cuesta menos trabajo rastear la web y esto hace que agilice el análisis de la misma y lo posicione en mejor lugar.

 

CÓMO CONVERTIR UNA PAGINA WEB EN RESPONSIVE

 

Antes de empezar comentarte que si has maquetado tu página web con WordPress lo tienes casi todo hecho puesto que este CMS ya se adapta a los distintos dispositivos. Las plantillas de Themeforest son una opción fantástica para asegurarte, pero puede ocurrir que no te guste la versión móvil que tiene tu plantilla.

“No problemo my firend”, te cuento cómo puedes adaptar tu web:

  1. UTILIZA PLUGINS:

Hay varios plugins para facilitarte el trabajo y consigas que tu web se adapte a los diferentes dispositivos, (todos ellos los puedes encontrar fácilmente en la página oficial de WordPress.org):

  • WP Touch
  • WP Mobile Detector
  • WordPress Mobile Pack
  • WordPress Mobile Edition




  1. REDISEÑA SOLO AQUELLO QUE QUIERAS MOSTRAR:

Otra de las opciones es rediseñar las Landipage con las que vayas a convertir o aquellas secciones de tu web que te interese que se visualicen en el móvil.

Aunque si me permites un consejo, no destripes tu website de esta forma. Tu web se visualizará bien y mal al mismo tiempo en el móvil del potencial cliente y esto puede dar una visión poco favorecedora de tu marca.

Pero que sepas que esta puede ser otra opción, ☺

 

  1. DISEÑO EXCLUSIVO PARA MÓVILES

La tercera opción que te dejo es crear contenido exclusivo para visualizar en móviles, esto significa crear contenido exclusivo para los smartphones a modo seguro.

Crea templates exclusivas para móviles, de esta forma tendrás cajas que sólo se verán en desktop y otros en móvil o Tablet, según se acote el tamaño de dicha vista.

 

CONSEJOS PARA ADAPTAR TU WEB A MÓVILES

Te dejo los principales puntos que debes seguir para que consigas lo que te propones: Una Web perfecta para todos los dispositivos que a día de hoy utilizamos casi a diario, ¡allá vamos!

1.     EVITA LOS EFECTOS INNECESARIOS

Hay efectos que quedan muy visuales en el ordenador de mesa pero no tienen el mismo impacto al visualizarlos en el móvil, estos pueden ser sliders, carruseles, testimonios o imágenes con efectos hover.

Antes de meter un efecto evalúa y comprueba el efecto en una plataforma multidispositivo puesto que dichos efectos pueden ralentizar considerablemente la carga de tu página en un Smartphone.

No olvidemos que lo que pretendemos es mejorar la experiencia de usuario, no queremos que el tiempo juegue en nuestra contra, y nunca mejor dicho. Recuerda medir dichos datos y ver tu evolución.

2.     USO DE BOTONES LEGIBLES

Evita links demasiado largos y cámbialos por botones. Lo que conseguirás con esto es mejorar la experiencia de tu potencial cliente o lector haciendo más fácil su navegación por tu web.

Utiliza los shortcode de tu CMS para crear estos botones en los tamaños adecuados.

3.     MENÚ EN HAMBURGUESA

En la pantalla móvil todo se reduce y no sirve de nada crear una web responsive y dejar el menú totalmente visible, es decir, para estas versiones necesitas un menú hamburguesa que recoja todas tus páginas y categorías, además dejarás más espacio a tu contenido.

Plugins que puedes utilizar para crear tu menú desplegable o hamburguesa, todos 100% responsive:

  •      Max Mega Menú (gratuito)
  •      QuadMenu (freemuim, es decir, con versión gratuita)
  •      Ubermenu
  •      Megamain Menu




4.     CONTENIDO ESCANEABLE Y ATRACTIVO

Este punto es de vital importancia, no solo en dispositivos móviles sino en tu web para desktop. Pero en móvil tiene un mayor peso puesto que es una pantalla más pequeña y debemos hacer fácil la lectura.

  •      Los títulos se tiene que diferenciar sin problema del cuerpo (titulares atractivos para llamar la atención).
  •      Ordena tu contenido con subtítulos y haz que sean fresco y amenos
  •      Inserta imágenes y contenido multimedia (siempre teniendo en cuenta sus dimensiones).

Si bien es cierto que hay detractores con respecto al tema Responsive sí o no, pero como he comentado al principio, lo primero que tendrías que hacer es evaluar el tráfico que te llega a través de dispositivos móviles y tomar la decisión de si prima convertirla o no. Y por supuesto valorar si tu nicho de mercado predispone al cambio ya que webs de compra o gestiones burocráticas no se suelen hacer en smartphones.

Espero que este artículo te haya sido de utilidad, así que lo único que te pido es que nos dejes un comentario más abajo y nos comentes tu opinión al respecto,

¿ Consideras importante convertir tu web en responsive? ¿Ya lo has hecho pero tienes problemas? ¡¡Cuéntanos!!

 

DEJA UNA RESPUESTA

Por favor ingrese su comentario!
Por favor ingrese su nombre aquí