Clase 10 | MOBILE FIRST | RESPONSIVE WEB

En la Teórica vimos:

 

  • etiqueta meta viewport para controlar la composición en los navegadores móviles:
<meta name="viewport" content="width=device-width, user-scalable=no">

  • diseño adaptable:  media query en CSS3.

 

EJEMPLO TEÓRICA  RESPONSIVE WEB :

 

MOBILE FIRST


“Mobile First” es un concepto simple: diseñar pensando en los móviles primero. En el cual debemos comenzar siempre centrándonos en los dispositivos con pantallas más pequeñas y generalmente con menor ancho de banda disponible para la navegación.

En un móvil no cabe toda la información y no tiene sentido que un usuario deba hacer un scroll casi infinito hasta encontrar aquello que resulta de importancia.

En Mobile First  el diseño irá de menos a más; acomodando los elementos de diseño e información de tal manera que el layout (esquema de distribución)  se adapte a las necesidades de cada anchura de pantalla.

 

RESPONSIVE WEB – DISEÑO ADAPTABLE


El uso de dispositivos móviles para navegar en la web está creciendo constantemente, y estos deben estar optimizados para se visualizados en sus diferentes resoluciones de pantalla. A menudo, la mayoría de los dispositivos están restringidos por el tamaño de visualización y requieren de un enfoque diferente del modo en que se muestra la disposición del contenido en la pantalla.

Existe una cantidad de diferentes tamaños de pantallas en los teléfonos, tablets, escritorios, consolas de juegos, TV , etc. Estas están siempre cambiando, de modo que es importante que el sitio web  se pueda adaptar a cualquiera de sus tamaños , hoy o en el futuro.

 

Diseño web adaptable, originalmente definido por Ethan Marcotte en A List Apart, responde a las necesidades de los usuarios y los dispositivos que estén usando. Los cambios de diseño según el tamaño y las capacidades del dispositivo. Por ejemplo, en un teléfono los usuarios deberían ver el contenido que se muestra en una única columna; una tablet puede mostrar el mismo contenido en dos columnas.

Toda web tiene que estar maquetada siguiendo los principios del responsive design.

Un diseño adaptable se basa en cambiar la apariencia de la web (tanto el contenido como su distribución) en función del dispositivo desde el cual se accede.
No se debe confundir con tener una versión de la página para cada dispositivo, sino que con la misma maquetación HTML y con el mismo código CSS asociado, el diseño varía en función del dispositivo. Y es aquí donde entran las media queries. El concepto no es 100% nuevo de CSS3, sino que tiene su punto de partida en los Media Types.

 

¿Qué es un media type?

Los media types permiten indicar una serie de estilos que se aplicarán según el tipo de medio.

 

Los media types más típicos son:

  • all: para todo (valor por defecto).
  • print: en la vista previa de impresión y a la hora de imprimir.
  • screen: para las pantallas de ordenador.
  • tv: para televisores.

 

¿Qué es un media Query?

Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un media type con una serie de expresiones relacionadas con las características del dispositivo desde el cual se accede a la web. Las media queries dan como resultado verdadero o falso. Si el resultado es verdadero, se leen las reglas CSS de su interior, si es falso no. Las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.

 

Ejemplo :

body{ background: #fff;}

@media(min-width:60rem){

section{flex-direction: row;}
 article{ width: 33%;}
 body{ background: yellow;}

}

 

Esta media query significa:
Cuando el ancho de pantalla tenga un ancho a partir de 60rem (960px) se lee el código encerrado dentro de las llaves que abren y cierran la media query. Hará que si  el fondo es blanco,  a partir del tamaño de pantalla de 60rem, se modifica su fondo en amarillo, la sección hará que sus elementos flexibles se muestren uno a continuación del otro, horizontalmente, a lo largo posicionándose en fila y que los artículos tengan un ancho del 33%.

 

| Links útiles |