Carro de compras ×

No hay productos en el carrito.

Mobile First, el diseño responsivo como cualidad de primera necesidad

Este artículo no contiene códigos ni ejemplos técnicos. Buscamos explicar los fundamentos del diseño responsivo y porque es una característica de primera necesidad.

El inicio del diseño responsivo (1989)

Todo comenzó cuando los teléfonos alcanzaron la gloria al conectarse a internet (GSM o 2G). Naturalmente, en aquella época las pantallas eran mucho más pequeñas y las conexiones muchísimo más lentas.

Entre las principales conexiones, WAP ( Wireless Application Protocol) fue un conjunto de protocolos que permitían ver en la pantalla del móvil el contenido de páginas web especialmente adaptadas. Un pionero en aquel tiempo.

El WAP simplificaba las webs, su contenido y reorganizaba las secciones para hacer más fácil verlas en los móviles de es tiempo. Por entonces, los sitios web eran construidos con ficheros de texto WML (Wireless Markup Language) y un portal específico era el encargo de servirlas para poder verlas en nuestro teléfono.

El aumento en la velocidad de Internet

La propia evolución de las redes de datos con la llegada del GPRS convirtió el WAP en algo obsoleto. Los navegadores móviles comenzaron a soportar lenguajes más avanzados, y el WML dejó paso al HTML, al CSS y al Javascript que conocemos hoy en día.

Es en este momento, en el que comenzamos a observar sitios web diseñados y creados especialmente para dispositivos móviles, preocupándonos de que la experiencia sea justa con la capacidad de consumo de datos.


Implementación del 3G y la aparición de tecnología Medias Queries

3G vio la luz por primera vez en el mundo el año 2001. Seis años después, llegó a Chile. Fue en ese momento en nuestra historia, en que comenzó el verdadero uso del Internet móvil que conocemos hoy, permitiendo transferir imágenes, audio y vídeo. Ya no necesitábamos sitios especiales para nuestros teléfonos, ahora podíamos cargar grandes cantidades de datos, de manera rápida y económica.


Aquí la experiencia de usuario comenzó a ser cada vez más relevante, junto a otros factores como la correcta navegación, la velocidad del sitio, la optimización del contenido, etc.

Increíblemente en otro lugar, en el mismo año (2001) se publicó el primer borrador para Medias Queries, una especificación que se convirtió en una recomendación de la W3C (World Wide Web Consortium) en 2012, después que los navegadores le dieran soporte.


¿Qué son los Media Queries?

Son un módulo CSS3 que permite adaptar la presentación del contenido de un sitio web, según las características del dispositivo que la observa, como la resolución de pantalla (diferenciando por ejemplo, la pantalla de un smartphone frente a pantallas de alta definición) o la presencia de características de accesibilidad como el braille. 

En palabras simples, permite a los desarrolladores web adaptar el diseño del sitio web según tipo de dispositivo, lo que a grandes rasgos permite entregar experiencias totalmente distintas para cada plataforma.


Cuando el teléfono móvil superó a la computadora

Después de que las conexiones de datos móviles se hicieron sucesivamente más rápidas y hoy se encuentran en su cúspide, el Internet móvil se ha vuelto cada vez más popular. 

De hecho, en el año 2015, Google anunció que por primera vez, habían recibido más búsquedas realizadas desde dispositivos móviles que de escritorio.

Hoy en día, por ejemplo, en España más del 92% de los usuarios navegan por Internet en sus smartphones.

Mientras que en Chile la cifra llega a 85% de conexiones a internet vía móviles.


Tendencia “Mobile First”

Este nuevo concepto utilizado en el diseño web, plantea que al momento de diseñar y desarrollar un sitio web, debemos primero crear una versión optimizada para dispositivos móviles y luego se amplía para escritorio u otras plataformas. Así, la estrategia «mobile first» sigue la tendencia de que cada vez más usuarios navegan por Internet con su smartphone o tablet, y no con sus PC.

No es solo moda, también te sumaría puntos de posicionamiento

Google a través de su herramienta Google Webmaster Tools (herramienta gratuita que nos ayuda posicionar nuestro sitio web) te entrega una evaluación de aquellos factores que definen un diseño amigable para móviles.  

Factores amigables:

  • Se puede acceder a su contenido fácilmente
  • El contenido es responsivo y fácil de leer
  • Cuenta con tiempos cortos de carga
  • Los enlaces son visibles y se puede hacer clic en ellos  

Factores no amigables:

  • Se utiliza un software poco común para dispositivos móviles (por ejemplo Flash)
  • El tipo de letra es pequeño e ilegible
  • Los enlaces están demasiado cerca, o se ven uno encima del otro
  • El contenido es muy grande para la pantalla


Si llegaste hasta aquí, ya entiendes la importancia del diseño responsivo y si quieres comenzar un sitio web para tu negocio es mejor que te sumes al mobile first.


¿Buscas un sitio web con diseño responsivo para tu negocio?

Recuerda que nuestro equipo de diseño está disponible para recibir llamadas y aclarar dudas.

Nosotros en Saira, nos subimos a la tendencia mobile first, y nos ha entregado resultados muy positivos en cada proyecto, sobre todo en nuestros resultados de optimización del contenido y posicionamiento en buscadores.

¿Y tu sitio web está pensado y diseñado correctamente para móviles?

Compartir