Responsive Design

Responsive Design

En el pasado nos acostumbramos a realizar dos páginas web si queríamos lanzar un proyecto web para todo el público, una para desktops y otra para móviles lo cual hacia que el contenido estuviera duplicado en la web y tener el subdominio m.tudominio.com por sí deseabas entrar desde un móvil.

Pero ese era el pasado, en donde el mundo era cruel e insensible con los desarrolladores y el diseño se pensaba pixel by pixel, es decir que lo que te mandaban en fireworks debía quedar totalmente igual en la web, ni un pixel más, ni un pixel menos.

Y es así como llega CSS3 junto a unos amigos llamados media querys y una filosofía de layouts fluidos al cual @leonidasesteban define responsivear.

Si deseas hacer responsive design primero debes conseguir un diseñador que te cree los diseños enfocados a ser fluidos y para todo público, luego debes olvidar que los pixeles deben ser exactos y pasar al concepto en donde el tamaño de cada cosa siempre va a varía según el espacio que dispongas de pantalla.

Definamos conceptos

Layouts fluidos o diseño fluido: los layouts fluidos es la forma en la que sin importar el tamaño de tu navegador todos sus bloques, divs, imágenes, sections, articles, nav, etc. Se acomodaran conforme al tamaño de navegador que manejemos y se deberá ver bien en todo momento.

Viewport: este lo utilizamos para que nuestra web tome como tamaño el tamaño del navegador, esto evitará que se pueda hacer zoom en navegadores y nos ayudara a que cuando entremos desde un móvil los layouts fluidos se acomoden según la pantalla.

Media query: es la forma de hacer consultas sobre la resolución de pantalla en donde se esta mostrando la pagina así podemos colocar propiedades especificas para cada pantalla y acomodar la experiencia de usuario a tal punto que sea lo mas agradable para este.

Responsive Design: Es como llamamos el unir las 3 herramientas anteriores para lograr una experiencia agradable en nuestra web sin importar el dispositivo en la que se mire.

Filosofía Responsive

Cuando tu entras en el mundo de diseños fluidos y dejas de hacer diseños pixel by pixel, es cuando debes cambiar tu forma de pensar y dejar de mirar el dispositivo sino el tamaño de donde se muestran todas las cosas, ahora debes empezar por lo móvil y llegar al desktop teniendo en cuenta que actualmente el mercado latino americano y España tienen un 25% de uso los móviles en la web en donde buscan resultados inmediatos y locales en cambio cuando navegas desde un laptop o un desktop tienes una navegación mucho mas casual y aleatorio.

Cuando entiendes esto y tu jefe deja de decir que es mentira, es cuando puedes hacer un bonito y bello responsive que iremos profundizando en la semana de clases, por ahora ten claro estos conceptos

...