Fundamentos de responsive web design - Serie RWD #1

Si bien el concepto de Responsive Web Design fué planteado en 2010 por Ethan Marcote muchos de los que trabajamos en la web no lo conocemos tan a profundidad, pero para refrescar un poco esos conceptos he creado esté post que espero sea de utilidad.

El concepto

Responsive web design nos ayuda a posicionar los elementos en la pantalla haciendo uso de metodologías mobile fisrt, además de que es un estándar soportado por todos los navegadores.

Datos a tener en cuenta

• No lo traduzcas solo di Responsive Web Design (RWD)
• RWD busca que en cualquier dispositivo se muestre correctamente, no trata de la estética y se centra en que se pueda navegar
• Existen frameworks como Foundation y Bootstrap que resuelven esto, pero es absolutamente iresponsable no conocer la teoría detras
• Ethan Marcote lo planteo en 2010
• Se basa en 3 principios
  • Fluid grid
  • Flexible images
  • Media queries
• 960 Grid fué la librería más popular pre responsive
• Todo este concepto gira en torno a una web para todos
• Safari el navegador de Apple implementó la etiqueta <meta name="viewport">

El viewport

El viewport es la parte visible del navegador

• La barra de scroll no es parte del viewport
• Cosas como innerWidth de javascript incluyen el viewport y es una mala práctica usarlo
• La etiqueta meta tiene la siguiente estructura:

  <meta name="viewport" 
    content=""
    width=device-width
    user-scalable=no|yes
    initial-scale=1
    maximun-scale=2
  >

• se recomienda no bloquear el escalado en móviles
• Viewport es ≠ a la resolución de pantalla
• 1px del viewport es ≠ de un pixel real
• No confundas la resolución de tu pantalla (hardware) con el viewport
• Para comprobar cuánto vale un pixel del viewport de tu pantalla, puedes escribir dentro de las devTool → en la consola la palabra devicelPixelRatio y verás cuánto vale un pixel del viewport de tu pantalla

Los media queries

Son consultas de medios donde se visualiza la web, min-width, max-width son propiedades que nos indican en que minimo de ancho o máximo se van aplicar los estilos.

body {
    background-color: red;
}

@media screen and (min-width=600px) {
    body {
        background: yellow;
    }
}

La propiedad orientation: lanscape | portrait aplica el media querie al detectar la orientación del dispositivo.

body {
    background-color: red;
}

@media screen and (orientation: landscape) {
    body {
        background: yellow;
    }
}

@media screen and (max-width: 1024px) and 
    (orientation: landscape) {
    body {
        background: yellow;
    }
}

Para la proporción del archo y alto están las propiedades → min-aspect-ratio, max-aspect-ratio, device-aspect-ratio.

body {
    background-color: red;
}

@media screen and (min-aspect-ratio: 4/3) {
    body {
        background: yellow;
    }
}

Para mejorar la creación de diferentes media queries podemos crear un mixin con SASS.

Sin mixi:

$small: 320px;
$medium: 640px;

body {
  background: red;

  @media screen and (min-width: $small) {
    background: yellow;
  }
}

Con mixi:

$small: 320px;
$medium: 640px;

@mixin rwd($breakpoint) {
  @media screen and (min-width: $breakpoint) {
    @content;
  }    
}

body {
  background: red;

  @include rwd($small) {
    background: yellow;
  }

  @include rwd($medium) {
    background-color: green;
  }
}

Si desear compilar el código SASS puedes instalar el modulo node-sass y después indicarle el fichero a compilar node-sass styles.scss styles.css.

Metodologías

Existen diferentes metodologías a seguir a la hora de comenzar a diseñar nuestras aplicaciones web, entre ellas existen:

• Mobile first → empezar con el tamaño mobile e ir añadiendo cosas
• Desktop first → es lo contrario comienzas con todio y vas quitando cosas no es recomendado
• Content first → trata de usar el contenido real y hacer las pruebas

Finalizamos

Hasta aquí hemos llegado al final de esté primer post de la serie Responsive Web Design , en la siguiente entrada veremos Unidades de medida relativas , te invito a seguirme en mis redes sociales para que estés enterado de las próximas publicaciones. Sin más que decir nos leemos en la próxima, ¡Hasta la próxima hacker!