Conceptos Claves en el Responsive Design

Saludos, compañeros de Platzi. Esta vez les quiero dejar un resumen de conceptos que me parecieron clave tener siempre en la memoria como la teoría del curso.

¿Que es el Responsive Design?
“Son todas esas técnicas que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de pantallas”.

Densidad de Pixel:
Es un dato que nos permite conocer el numero de pixeles que es capaz de mostrar un teléfono inteligente en una pulgada (utilizando una superficie cuadrada). Este dato se calcula en función de la resolución y el tamaño de la pantalla.

Patrones en Responsive Design

• Mostly Fluid: Las columnas se reubican según el espacio.

• Colocación de Columnas (Column Drop): Similar al anterior, el tamaño del sitio es porcentual. El sitio web es completamente flexible. El elemento principal de la pagina aunque no este inicialmente arriba puede quedar en esa posición al redimesionar.

• Layout Shifter: Es el patron mas complejo ya que debes hacer breakpoints por cada viewport que tengas que acceder.

-Tiny Tweaks: Se basa en una sola columna que van adaptándose a diferentes viewport. Por lo que es importante destacar que no se trabaja en el Layout si no en el contenido. Se realizan cambios pequeños como cambiar de tamaño la fuente, entre otros. tiny tweaks es muy usado en sitios con mucho contenido escrito para mejorar la experiencia de lectura.

-OFF CANVAS: Incorpora elementos bajo ciertas condiciones como una vista invocada desde un menu de hamburguesa.

META VIEWPORT

• Podemos decir que es una etiqueta para obligar a escalar a un website en el navegador.

• Se coloca en el head del html.

• Se declara con una etiqueta meta y con los atributos name y content

• La etiqueta quedaría así: <meta name=“viewport” content=“device-width initial-scale=1”/>
  Te explico lo anterior** name** es donde le dices al navegador que estas trabajando sobre el viewport.
  content contiene el** device-width** que ajustara el website a las dimensiones del dispositivo ya sea este un pc desktop, laptop, tablet o un smartphone
  y finalmente** initial-scale** es el zoom que tendrá nuestro website cuando se abra en el browser. En este caso 1 = a 100%

Por otro lado quiero que repasemos las medidas relativas en el Responsive Design.

Porcentaje: Longitud referente al tamaño de los elementos padre. p.e un body (elemento padre) y colocamos un div con width= 50%
este div sera la mitad del body.

em: Unidad relativa al tamaño de fuente más cercano (Incluye al propio elemento); Es decir al tamaño de la letra. No del width, ni del viewport ni nada. Siempre con respecto a la fuente (Letra). Para que aclares más este detalle ve al video 2 del curso.

rem: Unidad relativa al tamaño de fuente especificada en el ancestro más lejano. Siempre sera body que tiene por defecto en la hoja de estilos del browser o navegador un tamaño de fuente o también puede ser sobre el tag html si le especificamos un tamaño de fuente. Entonces recuerda que los ancestros más lejanos siempre van hacer html (Si especificamos un tamaño de fuente) y body (tiene por defecto asignado un tamaño de fuente).

vw / vh: view width y el view heigth respectivamente. Son una unidad porcentual que funciona del mismo modo que los porcentajes pero con respecto al viewport. Por ejemplo si tu navedor tiene de ancho 728 px tu vw sera de 728 px.

MEDIA QUERIES

Gracias a las medidas queries tenemos responsive design.
La sintaxis de un media query es la siguiente:

@media type and (condición) {

}

type puede tener el valor screen o print según este curso.
la condición puede ser a partir de que ancho se va a aplicar lo que coloquemos dentro de las llaves. Puede ser max-width: 768px o max-height: 768px una condición para el ancho y otra condición para el alto respectivamente.

@media screen and (max-width: 768px) {

}

Ahora debemos aclarar el enfoque que le vamos a dar que puede ser MOBILE FIRST o DESKTOP FIRST
para mobile first usamos el siguiente media query:

@media screen and (min-width: 320px) { }
@media screen and (min-width: 480px) { }
@media screen and (min-width: 768px) { }
@media screen and (min-width: 1024px) { }

Para mobile first usamos min-width y las medidas expresadas son medidas promedio para los breakpoints. Ojo se recomienda usar el orden de medidas de menor a mayor.

DESKTOP FIRST

@media screen and (max-width: 1024px) { }
@media screen and (max-width: 768px) { }
@media screen and (max-width: 480px) { }
@media screen and (max-width: 320px) { }

Para Desktop First se recomienda usar las medidas desde el más grande a la pantalla más pequeña y la condición es max-width