Curso impartido por Alvaro Felipe CEO de EDteam
Es una filosofía o forma de ver el diseño web, que responde a las dificultades técnicas de adaptarse siempre a los hábitos cambiantes de los usuarios y la tecnología. El **RWD** es por tanto una metodología que juntos a buenas prácticas de diseño permite patrones para la interfaz de usuario útiles, reutilizables y adaptables; que permite que la experiencia de usuario se la ideal en cualquier tamaño de pantana según el dispositivo, sin perder la estética y la funcionalidad.
Las grillas fluidas (cuadrículas fluidas)
Se basa en el diseño de un layaut con medidas relativas (porcentajes, em, rem) ya sea en su totalidad o gran parte de este y que se adapta al tamaño de pantalla según el dispositivo del usuario. Las palabras claves son: proporcionalidad y experiencia de usuario. Así los contenedores que hacen parte de nuestro layout pueden expandirse y contraerse (y re-organizarse) cuando la ventana del navegador cambie de tamaño.
Imágenes flexibles
Si bien la estructura puede ser flexible, su contenido no. Por ello el uso de código que evita que los archivos multimedia enriquecidos excedan las dimensiones de sus contenedores (en otras palabras, que las imágenes se adapten a su contenedor). A medida que el «contenedor flexible se redimensiona a sí mismo», también lo hace la pieza visual dentro de él.
Medias queries (consultas de medios)
Que nos permite enfocar el diseño y la funcionalidad a los diferentes tipos de dispositivos, mediante comprobación de condiciones. Adaptando el diseño y la funcionalidad web a los diferentes tamaños y funciones de los dispositivos usados por el usuario para consumir nuestra sitio o aplicación web. De esta forma se detectaría una resolución determinada que haría que los contenidos se distribuyesen correctamente en el espacio, y que se viesen a un tamaño apropiado sin necesidad de hacer zoom
Viewport es el area de ventana visible del navegador en donde el contenido web es mostrado (ventana de visualización limitada por el ancho del navegador), pero que no es necesariamente del mismo tamaño que la página renderizada, para ello debemos hacer uso del RWD.
En dispositivos moviles como los smartphone el ancho del viewport del navegador movil es igual al ancho de pantalla teorico del dispostivo movil; el cual no tiene por qué coincidir con la resolución real de la pantalla. La resolución se refiere al número de píxeles que puede contener dicha pantalla (densidad de pixeles).
«Por ejemplo, existen dispositivos cuya resolución es 2048x1536, mientras que el tamaño físico del viewport es de 1024x768 (es decir, la mitad, y por tanto una ratio de píxeles de 2x); así, el concepto de viewport y de resolución de pantalla son independientes, uno puede ser mayor que el otro y viceversa. Pero esto puede generar conflictos en la forma como se visualizara el contenido web en diferentes dispositivos, dado que nos mostrará una versión encogida ó comprimida del sitio web, reduciendo el zoom con la finalidad de encajar la totalidad de la página en el tamaño de pantalla disponible, lo que genera una mala experiencia de usuario, con letras pequeñas, layaut no ajustado, contenido menos legible a menos que aumentes el zoom. Para evitar esto hacemos uso de la etiqueta meta html llamada viewport.»
La etiqueta meta Viewport creada en principio por Apple, aunque no es parte de ningún standard es ampliamente implementada por diferentes navegadores móviles. Esta etiqueta permite indicar otro ancho diferente para el Viewport al que tienen por defecto los dispositivos; debe emplearse en las cabeceras HTML, dentro de la etiqueta <head> y su atributo 'content' puede recibir uno o varios parámetros separados por coma.
Algunos parámetros del atributo 'content':
La Declaración de la metaetiqueta Viewport básica para un sitio optimizado para móvil:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width Este parámetro permite indicar al navegador que emplee el ancho del dispositivo como ancho de viewport, y no trate de emular un viewport de escritorio.
initial-scale=1.0 La propiedad initial-scale es el valor del atributo content mas utilizado, controla el zoom cuando la página se carga por primera vez. fijando el factor de escala en 1.0 se evita el redimensionamiento del contenido para que quepa en la pantalla.
NOTA: El scroll aunque visible en el viewport, no es parte de él porque no participa en los cálculos de las dimensiones. Si a un elemento (hijo de body) le damos 100% de ancho se extenderá hasta tocar la barra de scroll. Mientras que un elemento con 100vw (100% del ancho del viewport) se extenderá incluyendo el área ocupada por la barra de scroll (generando un scroll horizontal, no pasando por debajo o por encima ella, lo que demuestra que la barra de scroll no es parte del viewport). Esto suele generar muchos dolores de cabeza a los diseñadores web.
Nota: Propiedades similares a Viewport son definidas dentro de CSS usando la regla @viewport, en lugar de dentro del HTML.
Las 'Media query' (en español 'consultas de medios') son un módulo CSS3 que permite adaptar la representación del contenido a características de un dispositivo (como una impresora, una pantalla de smarfone ó de Tv); y consiste en definir al menos una consulta (@media), donde se define un tipo de medio (media type) y una o mas características o parámetros específicos (media features) como la resolución de la pantalla o el ancho del viewport del navegador. Varios parametros se pueden combinar utilizando los operadores AND y OR.
Estas consultas funcionan a manera de condicionales, cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas" se aplicaran los estilos CSS que se re-definan para esa condición siguiendo las reglas usuales de cascada; por tanto se recomienda un enfoque 'mobile first', generar los 'Media queries' apropiados y en el orden apropiado
'media type' mas comúnmente utilizado:
'media features' mas comúnmente utilizados:
min-width | max-width
orientation: landscape | portrait
landscape: cuando el ancho de la pantalla es mayor al alto de la misma. (ancho>alto) portrait: cuando el ancho de la pantalla es menor al alto de la misma. (ancho<alto)
aspect-ratio Según la proporción ó razón del ancho y alto de la pantalla (ancho:alto)
@media screen and (min-width:600px){}
/*
Aplica estilos CSS en pantalla desde los 600px |->
*/
@media screen and (max-width:600px){}
/*
Aplica estilos CSS en pantalla hasta los 600 <-|
*/
@media screen and (min-width:600px) and (orientation:landscape){}
/*
Uso del operador 'and'
Ambas condiciones deben cumplirse
*/
@media screen and (min-aspect-ratio: 4/3){
body {
background: yellow;
}
}
/*
Aplica estilos CSS en pantalla desde la razon 4/3 |->
razon 4:3 = 1.3333
En resolucion 800x600 se cumple. (1.333)
En resolucion 800x500 se cumple (1.6)
En resolucion 800x700 no se cumple (1.142)
*/
$small: 320px;
$medium: 640px;
@mixin rwd($breakpoint){
@media screen and (min width: $breakpoint){
@content
}
}
body{
@include rwd($small){
background: yellow;
}
@include rwd($medium){
background: green;
}
}
/*
Codigo visto en clase en Sass
Recomendado para interpretar a CSS: <https://www.sassmeister.com/>
*/
El mobile first (o versión móvil primero) es el enfoque en el diseño y desarrollo de sitios web orientado a comenzar con la información y características más importantes para las versiones móviles, para luego añadir más a medida que el la pantalla se hace más grande en tablets, laptops y escritorio.
El desktop first (escritorio primero), es como se realizaban los primeros sitios web responsive, en donde primero se desarrolla la versión de escritorio, y luego, ésta se adapta para mostrar el sitio web correctamente en pantallas más pequeñas.
Consiste en considerar desde el principio el proceso de creación de contenido del proyecto; para organizar y diseñar mejor los componentes dentro de un layout, así como los elementos del diseño grafico propiamente; para cuando se entrega al cliente y se implementa en producción no se rompa o existan comportamientos inesperados.
Adoptando el enfoque Content-First ponemos el contenido en el centro del proceso de diseño web y la experiencia de usuario. No es una metodología excluyente de las otras dos metodologías; se trata de que el contenido y diseño trabajando juntos.