Importancia de un sitio web responsive u optimizado para Smartphone

By Fernando Martinez Lira - enero 28, 2019

¡Apostemos!

Si estás leyendo este artículo desde tu teléfono celular yo habré ganado y tu compartirás este contenido en tus redes sociales.

Pero, si estás leyendo este artículo desde tu computadora, entonces tú habrás ganado por lo que podrás dejar una pregunta sobre tu negocio en los comentarios y yo te brindaré una respuesta en forma de asesoría gratuita.

¿Te parece? – (Sin trampas)

Si te he ganado la apuesta es porque (A parte de que estaba cruzando los dedos) el uso de teléfonos móviles para navegar en internet ha incrementado de manera significativa.

A partir del año 2017, la cantidad de usuarios de internet móvil ha sobrepasado los 3,500 millones.

De esta manera, mis posibilidades de ganar nuestra apuesta eran mayores.

Ahora,

El haberte mencionado la cantidad de usuarios de Smartphones hará que comience a tener sentido el por qué necesitas contar con un sitio web responsive.

¿Por qué las empresas necesitan contar con un sitio web responsive?

Hace muchos años, la pregunta correcta que todo empresario o emprendedor debió hacerse era ¿Por qué necesito tener presencia en línea?

Antes, muy antes, solamente bastaba con crear un perfil en redes sociales o diseñar un sitio web para hacer publicidad de tu negocio y los clientes llegaban por montones.

Esa era la fórmula mágica.

Sin embargo,

Ahora todo ha cambiado, y la pregunta correcta ya no es solo una pregunta sino varias.

Pero, antes de marearte con tanta información, si te estás haciendo esta pregunta: ¿Por qué necesito un sitio web que sea responsive?

Sin duda estás del lado ganador.

Y como estas del lado de los ganadores, es momento de introducirte al mundo de las páginas web amigables para Smartphones.

A su vez, si quieres mejorar tu presencia en línea, puedes echar un vistazo a nuestra lista de 20 herramientas de marketing digital.

¿Qué es un sitio web responsive?

que es un sitio web responsive o adaptativo Un sitio web responsive, adaptativo, responsivo o adaptable es una técnica de diseño web cuyo objetivo es lograr una correcta visualización de una página web en diferentes dispositivos como teléfonos celulares, tablets, laptops, computadoras de escritorios e incluso Smart TVs.

Imagina lo siguiente:

Vas a algún centro comercial y entras a una tienda de ropa. De repente, ves una camisa que te fascina, es la camisa más hermosa que hayas visto.

Te acercas, la tomas y te vas directo a probártela.

  • Primer intento - Seguramente me la estoy poniendo mal
  • Segundo intento, logras ponértela y te ves al espejo – No se ve tan mal, solo es un poco más pequeña de lo que pensaba.

Ahora solo tienes unas cuantas opciones:

  • Preguntar a los responsables de la tienda si tienen una talla mayor de la misma camisa (Y para tu mala suerte quizás no haya)
  • Comprar la camisa aunque te quede pequeña
  • O marcharte lamentando tu mala suerte.

Sería fabuloso que alguien pudiese crear ropa que se adapte automáticamente a la forma de tu cuerpo

¿No crees?

Bueno,

Un sitio web responsive o multi-dispositivo trabaja de la misma manera en que trabajaría la ropa ajustable.

Lo único que, en este caso, el sitio web se adaptará al tipo de pantalla que el usuario esté usando.

¿Por qué necesitas un sitio web responsive?

como crear un sitio web responsive o pagina responsivaLo fácil que sería responder a esta pregunta al solo decirte que tú debes contar con un sitio web responsive por el simple hecho de que se ve bien y da una imagen más profesional de tu empresa.

¡Claro! – No hay mentira en esa respuesta, pero para ser honesto es una respuesta incompleta.

Si te pones a pensar detenidamente, las personas nos hemos vuelto más complejas.

Podemos pensar en algún producto o servicio que deseamos adquirir e inmediatamente nos encontramos en Facebook o en Google buscando por tiendas o empresas que lo ofrezcan.

También se da el caso que entramos a alguna tienda, nos gusta un producto y luego nos vamos sin comprar porque queremos ver si podemos encontrar el mismo producto en internet a un mejor precio.

O puede ser que estamos con nuestros amigos y en la conversación tocamos algún tema en específico del cual queremos saber más, entonces solo tomamos nuestros Smartphones e iniciamos una búsqueda en internet.

Los ejemplos pueden seguir, pero todos ellos siempre probarán el mismo punto. Somos seres complejos.

Y por nuestra misma complejidad es que las empresas deben dar su mayor esfuerzo para estar presentes en todos los espacios posibles.

Es decir, si tomas el ejemplo en que necesitas utilizar tu teléfono para realizar una búsqueda mientras hablas con tus amigos, tu empresa debería ser capaz de tener contenido optimizado para que aparezca en los resultados de búsqueda ya sea que hayas elegido hacer la búsqueda en Google, Facebook, Twitter u alguna otra aplicación.

Pero, sobre todo esto, tu empresa también debería ser capaz de contar con un sitio web diseñado para brindar respuestas, soluciones y la mejor experiencia a cada usuario independientemente del dispositivo del que se conecten.

7 Beneficios de contar con un sitio web responsive

diseño de página web responsivaMás allá de contar con un diseño adaptable y profesional para tu empresa, una página web responsive te brindará los siguientes beneficios:

  1. Un sitio web adaptable puede aumentar la viralidad de tus contenidos porque es más fácil que las personas los compartan de forma rápida. Así un mayor número de personas será capaz de ver tus ofertas, servicios y/o productos.
  2. Actualmente, los dispositivos móviles generan alrededor del 80% del uso de internet, por lo que si deseas tener éxito en el mundo online, debes considerar crear la mejor experiencia para todas esas personas. Con un sitio web responsive estarás brindando una gran experiencia de usuario.
  3. Alrededor del 69% de las personas utilizan su teléfono móvil para realizar búsquedas de productos antes de realizar una compra. Si tu sitio web esta optimizado para Smartphones, tus probabilidades de vender es mucho más alta.
  4. El 40% de los usuarios espera solamente 3 segundos antes de decidir abandonar un sitio web porque no se puede leer bien desde el dispositivo que utiliza. Con una página web adaptativa evitarás que estos usuarios se vayan de tu sitio y así puedan leer tu contenido.
  5. Un sitio responsivo ayuda a posicionar el contenido en las páginas de resultados en los motores de búsqueda. [Aquí puedes aprender más sobre el SEO para posicionar tu contenido en Internet)
  6. El 52% de los usuarios se ve desmotivado a no contactar una empresa cuando su sitio web no se ve bien desde su teléfono. Tomarás ventaja al proveer una mejor experiencia a tus usuarios y así motivarlos a que te contacten.
  7. Probablemente tu competencia también este buscando la manera de crear un sitio web que sea responsivo. Por ello, si tu empresa obtiene un sitio web de alta calidad primero, te verás mejor posicionado que muchos otros.

¿Cómo crear un sitio web responsive o adaptable a Smartphones?

sitio o pagina en internet responsivas

Ahora que ya conoces qué es un sitio web responsive y los beneficios de contar con uno para tu empresa, es momento de descubrir lo que necesitas para poder diseñar tu sitio web responsive.

Primero, debes saber que los diseños adaptables todavía están en desarrollo por lo que puede que si no tienes experiencia en diseño web tengas algunos contratiempos.

Pero una vez que logras adecuarte a esta filosofía y a sus mejores prácticas, todo será mucho más fácil.

Google nos da muchas pistas sobre esto, por eso no hace falta que te estreses buscando información para la creación de tu diseño web responsive.

Veamos:

Mobile-First

sitio web responsive o adaptativa¿Sabes qué es lo que piensa Google sobre los sitios web adaptables? ¿Alguna pista?

Bueno, Google nos dice que el diseño responsive debe ser tu prioridad y es por eso que introduce el concepto de Mobile-First.

Con esto, los especialistas de Google nos indican que debemos tener en mente cómo se verá nuestro sitio web desde un teléfono y hasta después pensar en su visualización en una computadora.

Si estas apunto de diseñar tu sitio web ya sea mediante plantillas o desde cero, considera hacer pequeños test para visualizar tu futura web desde pantallas en teléfonos móviles y tablets.

Imágenes responsive

adaptar un sitio web para que se vea bien en telefonosDe los elementos que generan un mayor dolor de cabeza al momento de crear un sitio web responsive, las imágenes son de los peores.

Quizás ya te ha pasado qué entras a un sitio desde tu Smartphone y todas las imágenes que se encuentran en él se ven cortadas o mal alineadas.

Esto es algo que se nota inmediatamente y es por eso que es de los elementos que debes cuidar siempre.

Si utilizas WordPress para crear tu sitio web encontrarás diversos plugins gratuitos que te facilitarán este trabajo.

Facilita el acceso a la información

paginas web responsive y adaptativas

El motivo principal por lo que los usuarios visitan tu sitio web es por la información que estas brindando.

Por ello, aunque el diseño responsive es clave, también debes pensar en la forma de facilitar a los usuarios el acceso a esta información.

También debes tener cuidado en cómo organizarás el texto.

Imagina que entras a un sitio web desde tu teléfono móvil y quieres leer un artículo del blog.

Al entrar observas que el artículo está dividido en enormes bloques de texto, con letra pequeña y sin tanto espacio entre las líneas, por lo que es difícil leerlo.

A nadie le gustará. Inmediatamente un usuario se irá de tu sitio si pasa esa situación.

Tamaño del sitio

paginas web que se adaptan a dispositivos movilesImagina que un sitio web tarda muchísimo tiempo en cargar desde tu computadora. Puede ser frustrante ¿Verdad?

Ahora imagínate que pasa lo mismo desde tu teléfono móvil, siglo y medio después y el sitio web aun no carga ¿Cómo te sentirías?

Ahora imagina que tu teléfono se está descargando, solo tienes un 1% de batería y necesitas encontrar cierta información y el sitio web no carga.

O que tu plan de datos está a punto de expirar y necesitas encontrar información urgentemente y el sitio donde podría estar no carga.

Puede ser un poco estresante. Tampoco es que siempre habrá un final apocalíptico al momento en que un usuario haga una búsqueda desde su teléfono móvil, pero sin duda influye mucho el tamaño del sitio al momento de crear una página que cargue rápido, facilite la información y sea una web responsive.

Uso de Iconos

website design responsive, diseño responsivoLos iconos juegan uno de los roles más importantes dentro del diseño de un sitio web responsive.

Son estas representaciones las que guían a los usuarios, ahorran espacio y te permiten tener un diseño más limpio.

Los iconos son todas esas imágenes que representan una acción específica. Si piensas en las redes sociales podrás ver los iconos de compartir, enviar, el lápiz para editar, entre otros.

Botones de mayor tamaño

agregar call to action o llamado a la accion en diseño responsive

Me ha pasado en muchas ocasiones que intento registrarme o suscribirme a un blog, pero cuando doy clic en los botones termino presionando otro lugar que me re-direcciona a otra página.

Puede que mis dedos sean el problema, pero sin duda incluir botones de mayor tamaño puede ayudarte a generar mejores resultados.

Si piensas que tu diseño se verá bien desde un teléfono móvil, intenta probar si funcionará adecuadamente, ahora, teniendo en cuenta que los usuarios utilizarán una pantalla touch.

Técnicas RESS

diseño web responsive y adaptativoAl diseñar un sitio web responsive, toda la ayuda es bienvenida.

Si tu servidor es capaz de ayudarte a adaptar tu contenido para los diferentes dispositivos que utilicen los usuarios, habrás ganado muchos puntos para tu empresa.

Puedes leer un poco más sobre las Técnicas RESS en el siguiente artículo (Inglés) Clic aquí

3 Herramientas para probar si un sitio web es responsive

Si recién creaste tu sitio web o ya contábas con uno, las siguientes herramientas te ayudarán a descubrir si tu sitio es realmente responsive o no. Luego podrás tomar las medidas que veas pertinentes.

#1. Mozilla Firefox

herramientas para ver pagina web responsiva

Si tu navegador favorito es Mozilla Firefox, puedes utilizar la funcionalidad del navegador para evaluar diseños responsive.

Solamente debes presionar las teclas:

[Ctrl] + [Shift] + [M]

Mozilla ctrl shift M sitio web responsivo

El siguiente paso es escoger el tipo de dispositivo en el que quieres probar tu sitio web.

Mozilla sitio web responsivo herramienta escoger dispositivo

Ingresa y visualiza tu sitio web

sitio web responsivo adaptativo en mozila test

#2. Screenfly

screenfly como herramienta para evaluar sitios web responsivos

Esta es otra herramienta bastante sencilla de usar en la que solamente debes ingresar la URL de tu web.

Luego tendrás una lista de todos los dispositivos en lo que podrías probar su visualización.

Haz clic aquí para ver la app.

#3. Am I Responsive?

am i responsive test para sitios responsivos

Al igual que en la herramienta anterior, solamente debes utilizar la URL de tu sitio e inmediatamente podrás comparar la vista de tu sitio web en 4 diferentes pantallas.

Ejemplo:

am i responsive test elite online media

Accede a la herramienta aquí

¿Cuentas con un diseño web responsive?

responsive website design, crea sitios web responsivos

Los sitios web responsive son ese tipo de modas dentro del marketing digital que llegan para quedarse.

Las personas continuarán utilizando más y más sus teléfonos móviles para hacer búsquedas en internet.

Si deseas que tu empresa cuente con un sitio web de alta calidad y que funcione en esta era digital, contar  el primer paso será contar con un sitio web responsive para que luego puedas construir tu presencia en línea.

Puedes contar con Elite Online Media para asesorarte y guiarte en la creación de tu sitio web. Déjanos tu comentario y con gusto te asesoraremos.

 

Comentarios

Reciba consejos mensuales gratuitos para mejorar su negocio