Desde la concepción del “Responsive Web Design” se ha buscado que independientemente del formato desde el cual los usuarios están accediendo y conectándose con nuestros sitios web puedan visualizar sin ningún problema la apariencia de éste. Hoy no sólo hablamos de que el diseño gráfico debe adaptarse a las pantallas de los dispositivos sino que estamos yendo más allá. 

¿A qué contenidos busca acceder mi público desde el escritorio? ¿Qué información les entrego estratégicamente en los dispositivos móviles? Hoy no es una cuestión de adaptación del contenido únicamente, ya empezamos a ocuparnos por definir una cuidadosa estrategia basada en la información que entregamos a nuestro público de acuerdo a la plataforma desde la cual está accediendo. 

Estos cambios de paradigma corresponden al enfoque y relevancia absoluta que ha alcanzado el usuario final y por supuesto el objetivo principal de quienes estamos detrás de la construcción de estas plataformas es facilitarle por completo la vida a la hora de navegar en un sitio web, entregarle lo que necesita sin rodeos. 

Esta tendencia debe ser considerada desde el mismo levantamiento de requisitos para la creación de cualquier sitio web y hoy contamos con herramientas muy prácticas que facilitan y aportan sustancialmente en llevar a cabo este proceso.

El desarrollo del responsive se genera mediante la utilización de media queries que son códigos que se le aplican a las hojas de estilo (css) a éstas se le aplican las resoluciones a las que vamos a afectar, por ejemplo:

Móviles en horizontal o tablets en vertical

@media (min-width: 768px) { } 

 Tablets en horizonal y escritorios normales

@media (min-width: 1024px) { }

Escritorios muy anchos

@media (min-width: 1200px) { }

En los códigos anteriores es donde vamos a afectar cada una de las vistas y adaptarla como mejor consideremos para darle un estilo único y propio a nuestro sitio.

El código siguiente por ejemplo es aplicado en móvil para correr el logo 100 pixeles a la derecha.

Como mencionaba anteriormente hay herramientas que permiten por ejemplo ver cómo está quedando nuestro sitio web en los dispositivos móviles, personalmente recomiendo este sitio web:

Incluso hay extensiones que se instalan directamente en los navegadores para realizar pruebas. Para Chrome recomiendo Window Resizer y en Mozilla User Agent Switcher, el cual permite no sólo adaptar el contenido a la medida de los dispositivos sino realizar la navegación como si estuviéramos accediendo directamente desde ellos. 

Finalmente de acuerdo a mi experiencia creo que es importante probar no solo en este tipo de simuladores sino en los dispositivos reales para acceder por completo a todos los detalles que debemos controlar. 

Espero haberte aportado un poco de conocimiento y te invito a que conozcas los sitios responsive premiados por la awwwards en el siguiente enlace: