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 y estudia para nuestras semanas de clases :D.

Empecemos

Para empezar a Responsivear como diría @LeonidasEsteban.

Primero debemos colocar la siguiente linea en el html de la pagina que debemos responsivear.

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

La cual desactivara el pinch to zoom en moviles y el navegador tomara el tamaño del navegador.

Luego de esto podemos crear nuestro archivo stylus en donde tendremos el siguiente código:

@media screen and (min-width:768px)
    #contenido
        #nota
            float right
            font-size 1em
            height auto
            width 20%
        #nota:hover
            height auto
        .item
            display inline-block
            vertical-align top
            width 30%
            .titulo_item a
                font-size 0.9em
                font-weight normal
@media screen and (min-width:1280px)
    #contenido
        .item
            width 20%

Para colocar propiedades a la pagina cuando este en tamaño de 768px colocamos el @media screen and (min-weight:768px) (Este es el media query del cual hablábamos  y todo lo que este acá adentro se aplicara cuando la pagina adopte los 768px o mayor a este.

Ahora vemos que hay un @meida screen and (min-weight:1280px) y cuando el navegador tenga tamaño de 1280px se cumplirá el contenido del anterior media query ya que cumple la condición de la medida y también se cumplirá lo que tenga esta query.

Ahora puedes jugar con tamaños mínimos o máximos de pantalla y darles propiedades especiales y empezar a responsivear!, espero te inspires :)