github twitter codepen youtube
 

Fundamentos de responsive web design - Serie RWD #1

| 📖 5 Min. | css, responsive web design

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!