Diseño Responsivo y optimización web

Vivimos probablemente en la ante sala de lo que será la época dorada del internet de nuestros tiempos. Actualmente no podemos imaginar nuestra vida sin el acceso a internet, a pesar de no tener ni 20 años de comenzar a usarlo (al menos en México).

Como estrategas digitales no podemos concebir una estrategia que no involucre el internet y sus diferentes herramientas. Básicamente sin internet no existirían nuestros puestos de trabajo.

Según la AMIPCI, entre 2006 y 2018, el acceso a internet en México vio un incrementó de 20.2 millones a 82.7 millones de usuarios activos. De los datos del último año podemos extraer que los internautas navegan en conexiones propias, desde casa y en un 71% desde un móvil.

A partir del año 2018 para Google es requisito indispensable que cualquier empresa o marca que pretenda indexar su contenido de manera orgánica tenga una versión para smartphones de su sitio web.

Siendo la navegación móvil la tendencia entre los usuarios, debemos considerar el correcto desempeño de nuestros sitios y landing pages en las diferentes pantallas de smartphones y en los múltiples navegadores web mediante el diseño responsivo.

¿Qué es el diseño responsivo?

¿Qué es el diseño responsivo?
El diseño responsivo comienza desde un boceto o maqueta

El diseño responsivo es una tendencia a la adaptación de una maqueta web para visualizarse correctamente entre los diferentes dispositivos y pantallas.

¿Cómo se hace?

Existen diferentes maneras de elaborar el diseño responsivo, sin embargo, todas ellas comienzan desde el diseño de una maqueta o boceto.

  • Se debe diseñar un boceto que contenga el layout o acomodo tanto para la versión de escritorio como la versión móvil. La maqueta es crucial para la planeación y estructuración del sitio o landing.
  • Una vez aprobada la maqueta, se codifica desde cero o mediante un framework o algún CMS.
    • Frameworks como Bootstrap son bastante útiles.
    • CMS como WordPress o Joomla también son utilizados
  • Dependiendo la herramienta que se elija para el desarrollo del sitio o landing serán los pasos a seguir:

Si elegiste codificar desde cero.

  • Comenzarás elaborando la versión de escritorio de tu sitio o landing
  • Una vez realizados todos los pasos del HTML y CSS principal, deberás realizar las adecuaciones móviles mediante «Flexbox» y/o «Media Queries»

Información de Media Queries

Información de Flexbox

Si elegiste usar un Framework

Prácticamente has resuelto el dilema, ya que todos los frameworks son elaborados bajo una filosofía «Mobile-First». Es decir, que entre las hojas de estilo que tienen se le dará prioridad al desempeño móvil y te invitan a elaborar primero el layout para smartphones.

Utilizar un framework es, sin duda alguna, una de las mejores opciones cuando de diseño responsivo se trata. Una vez leída y comprendida toda la documentación se estará como pez en el agua.

Si elegiste usar un CMS

Al igual que el ejemplo anterior, optar por un gestor de contenidos (CMS), es una excelente idea ya que resuelve casi en su totalidad el reto del diseño responsivo. Veamos más detalles.

Los CMS más populares están apoyados de enormes librerías de contenidos y recursos para resolver casi cualquier problema de desempeño móvil que pudiera existir.

Los CMS en su mayoría requieren o recomiendan el uso de plantillas que, en buena medida, resuelven la necesidad de escribir cientos de lineas de código. Existen plantillas que se pueden comprar aunque también hay algunas opciones gratuitas.

Nuestra mejor recomendación es que acudas a un experto para que te asesore en qué opción es mejor en tiempos, costos y desempeño.

La velocidad de carga también importa

Ya comprendemos de mejor forma el diseño responsivo y sus procesos, sin embargo aún hay más. Hablemos de velocidad.

Cuando mencionamos velocidad generalmente pensamos en el paquete de datos que tenemos contratado con nuestro ISP (Internet Service Provider) para nuestra casa o móvil. Y si bien tiene buena parte de la responsabilidad de la correcta carga de los sitios que visitamos, no es totalmente su culpa cuando nos encontramos con un sitio web o landing lento.

Digamos que se trata de un trabajo 50% y 50%, por un lado tu ISP y por el otro tu sitio web y el servidor donde lo tengas alojado. Si al momento de elaborar el sitio no cuidamos detalles como la optimización de las imágenes o videos que el sitio requiere o no contratamos un host lo suficientemente rápido o a nivel código no fuimos cuidadosos y tenemos «basura», nuestro sitio tardará en cargar sin importar la velocidad de tu internet en casa o en los móviles de tus posibles clientes.

La velocidad es crucial cuando se trata de captar la atención de un cliente.

Si tu sitio o landing tarda más de 3 segundos en cargar, será razón suficiente para tener una tasa de rebote alta, lo que repercutirá en tus objetivos de marketing.