Responsive Design
Responsive Design
Fabián Ferney Roa Prada.
Ingeniero de sistemas
Especialista en TADS
Agenda.
• Responsive design.
• Por qué es necesario.
• Contenido responsive.
• Imágenes responsive.
• Texto responsive.
• Media query.
Responsive Design CSS.
En la actualidad existe gran variedad de dispositivos con acceso a
internet, las páginas web se pueden visitar a través de
computadoras de escritorio, tabletas, teléfonos. Cada página web
debe verse bien y ser fácil de usar, independientemente del
dispositivo.
Las páginas web no deben omitir información para adaptarse a
dispositivos más pequeños, sino adaptar su contenido para que
pueda ser visualizado desde cualquier dispositivo:
Responsive Design CSS.
Se denomina diseño web adaptativo cuando usa CSS y HTML
para cambiar el tamaño, ocultar, reducir, ampliar o mover el
contenido para que se vea bien en cualquier pantalla.
Responsive Design CSS.
View port:
Es el área visible del usuario de una página web, varía según el dispositivo y
será más pequeña en un teléfono móvil que en una pantalla de computadora.
Antes de las tabletas y los teléfonos móviles, las páginas web se diseñaron solo
para pantallas de computadora, y era común que las páginas web tuvieran un
diseño estático y un tamaño fijo.
Luego, cuando comenzamos a navegar por Internet usando tabletas y teléfonos
móviles, las páginas web de tamaño fijo eran demasiado grandes para caber en
la ventana gráfica. Para solucionar esto, los navegadores en esos dispositivos
redujeron la página web completa para adaptarse a la pantalla.
Responsive Design CSS.
View Port:
Cuando el navegador renderiza un documento web, hace un escalado de los
contenidos para que las páginas que están diseñadas para escritorio se vean de
forma aceptable en un dispositivo móvil. En la mayoría de los casos, tendremos
que hacer zoom para poder leerlos. Sin embargo, podemos configurar
el viewport para indicar qué debe hacer.
HTML5 introdujo un método para permitir que los diseñadores web tomen el
control del viewport, a través de la etiqueta.
Responsive Design CSS.
La etiqueta <meta>
La etiqueta <meta> cuenta con los siguientes parámetros:
Width: anchura virtual (emulada) de la pantalla o anchura del
viewport.
Height: altura virtual de la pantalla o anchura del viewport.
Initial-scale: la escala inicial del documento.
Minimum-scale: la escala mínima que se puede poner en el
documento.
Maximum-scale: la escala máxima configurable en el
documento.
User-scalable: si se permite o no al usuario hacer zoom.
Responsive Design CSS.
La etiqueta <meta>
La anchura y la altura de viewport se refieren a las dimensiones fijas del viewport inicial. Lo
habitual es definir únicamente la anchura con el valor device-width, medida que hace
referencia a la anchura de la pantalla del dispositivo.
Con initial-scale=1 le indicamos que no se haga zoom sobre el documento cuando entremos en
él.
Responsive Design CSS.
Recomendaciones para diseñar responsive.
• Crear un contenedor general que contenga todos los
demás contenedores
Responsive Design CSS.
Recomendaciones para diseñar responsive.
• Declarar la etiqueta <meta> en el encabezado de la
página
Responsive Design CSS.
Recomendaciones para diseñar responsive.
• Definir en porcentajes el ancho de los contenedores,
en este caso el contenedor principal es declarado
con un ancho del 80% de la ventana.
Responsive Design CSS.
Recomendaciones para diseñar responsive.
• Definir un ancho máximo del contenedor principal
Responsive Design CSS.
Recomendaciones para diseñar responsive.
• Definir porcentajes para el ancho de los
contenedores (si esta definido con cajas flotantes).
• Definir las medidas relativas de las columnas si esta
definido con display grid.
Responsive Design CSS.
Recomendaciones para diseñar responsive.
• Definir la propiedad box-sizing:border-box;
Esta propiedad permite que el espacio de padding o
margen no haga que se aumente el ancho de la caja
contenedora, sino que se reduzca hacia adentro
disminuyendo el ancho del contenido.
Responsive Design CSS.
Imágenes responsive:
Para lograr que las imágenes se adapten se
deben colocar dentro de un contenedor para
luego desde css configurar el tamaño del
contenedor y que la imagen tenga un ancho del
100% del contenedor:
Responsive Design CSS.
Textos responsive:
Para lograr que los textos se adapten es
necesario declarar el tamaño de la letra en una
medida relativa al tamaño de la pantalla.
Responsive Design CSS.
Media Query.
Llega un momento en que a pesar de las configuraciones
anteriormente relacionadas se sigue dificultando la
visualización del contenido, por tanto es necesario buscar
que los elementos de la pagina se re-distribuyan para una
mejor visualización.
Para este fin existen las media Query.
Responsive Design CSS.
Media Query.
Para utilizar media quería en CSS es necesario declarar la
etiqueta con una condición y de acuerdo con dicha
condición se aplica un nuevo conjunto de estilos.
Responsive Design CSS.
Mobile First:
Mobile first tiene como finalidad declarar como estilo
principal un estilo enfocado a la visualización en dispositivos
móviles, luego a través de media Query establecer los
cambios en la visualización para dispositivos con pantallas
más grandes.
Gracias.