responsive web design & mobile first -...
TRANSCRIPT
![Page 1: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/1.jpg)
CURSO .CSSResponsive Web Design & Mobile First
Autor: Jon Vadillo
www.jonvadillo.com
![Page 2: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/2.jpg)
Contenidos
■ Responsive Web Design (diseño web adaptable)
■ Mobile First
■ Técnicas
■ Media Queries
■ Patrones
■ Testing
![Page 3: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/3.jpg)
Método de diseño utilizado en el que las páginas se
adaptan automáticamente a distintos dispositivos o tamaños de pantalla.
Responsive Web Design
![Page 4: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/4.jpg)
Los componentes que forman la web se adaptan al dispositivo y su pantalla para
que el usuario pueda navegar e interactuar
cómodamente, sin tener que hacer zoom, scroll
infinito, etc.
Responsive Web Design
![Page 5: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/5.jpg)
Image source: https://developers.google.com/
![Page 6: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/6.jpg)
![Page 7: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/7.jpg)
Busca 3 páginas web que se adapten perfectamente a distintos tamaños de pantalla.
Ejercicio
![Page 8: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/8.jpg)
¿Por qué es necesario?
![Page 9: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/9.jpg)
¿Por qué es necesario?
![Page 10: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/10.jpg)
Mobile First
■ Prioriza el entorno móvil.
○ Prioriza lo esencial: las acciones y el contenido de mayor importancia. ¿Qué es lo que mis usuarios quieren ver?¿Qué es lo que quieren hacer?
■ Objetivo: conseguir el mayor rendimiento en la navegación móvil.
■ La información principal tiene un acceso rápido y sencillo.
■ Este enfoque permite reutilizar más CSS.
![Page 11: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/11.jpg)
Mobile First
Image source: http://www.torresburriel.com
![Page 12: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/12.jpg)
Ejemplos
Source: https://justuxdesign.com
![Page 13: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/13.jpg)
Ejemplos
Source: https://justuxdesign.com
![Page 14: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/14.jpg)
Ejemplos
Source: https://justuxdesign.com
![Page 15: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/15.jpg)
Ejemplos
Source: https://justuxdesign.com
![Page 16: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/16.jpg)
Técnicas
■ Imágenes adaptables
■ Configurar el viewport (ventana de visualización)
■ Media Queries
■ Flex Box & CSS Grid
![Page 17: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/17.jpg)
Imágenes adaptables
https://codepen.io/jonvadillo/pen/maXPeP
![Page 18: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/18.jpg)
Imágenes adaptables■ Es importante evitar la
aparición del scroll horizontal.
■ Hay que indicar el ancho, si no las imágenes tendrán su tamaño original.
■ Es recomendable utilizar unidades relativas ya que No conocemos el tamaño del viewport.
![Page 19: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/19.jpg)
Imágenes adaptables
https://codepen.io/jonvadillo/pen/maXPeP
img,object,embed,video {
max-width: 100%;
}
![Page 20: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/20.jpg)
Píxel físico vs CSS Píxel■ La aparición de pantallas de alta resolución con píxeles muy
pequeños hace que una pantalla de móvil pueda tener la misma resolución (número de píxels físicos) que una pantalla de escritorio.
Image source: https://imasdeweb.com/
![Page 21: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/21.jpg)
Píxel físico vs CSS Píxel■ Como los píxels físicos son de distinto tamaño, los navegadores
necesitan otra unidad abstracta e independiente.
■ CSS Píxel: su tamaño nunca varía independientemente de la densidad de pixeles físico de un dispositivo.
○ Es la unidad que utilizamos en nuestras hojas estilo CSS.
![Page 22: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/22.jpg)
Configurar el viewport
■ El viewport es el área donde el navegador puede renderizar contenido de la página web.
■ Los navegadores en dispositivos móviles tienden a escalar el contenido para que así entre en la pantalla del dispositivo.
■ Hay que evitar este comportamiento
Image source: https://internetingishard.com/
![Page 23: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/23.jpg)
Solución
<meta name="viewport" content="width=device-width, initial-scale=1">
● width=device-width indica a la página que debe hacer coincidir el ancho de la pantalla en píxeles independientes del dispositivo.
![Page 24: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/24.jpg)
Media Queries
■ Si una web adaptable cambia en función del dispositivo, eso quiere decir que tendrá que aplicar distintos estilos en función del dispositivo.
■ Las media queries permiten aplicar reglas CSS en función al tamaño del viewport.
Image source: https://internetingishard.com/
![Page 25: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/25.jpg)
Media Queries
Image source: https://internetingishard.com/
![Page 26: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/26.jpg)
Media Queries
![Page 27: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/27.jpg)
Media Queries: sintaxis
Image source: https://internetingishard.com/
![Page 28: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/28.jpg)
Image source: https://dhali.com/design/css-media-queries-min-vs-max/
![Page 29: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/29.jpg)
Media Queries: sintaxis
/* Estilos para móviles */@media only screen and (max-width: 400px) { body { background-color: #F09A9D; }}
/* Estilos para tablet */@media only screen and (min-width: 401px) and (max-width: 960px) { body { background-color: #F5CF8E; }}
/* Estilos para desktop */@media only screen and (min-width: 961px) { body { background-color: #B2D6FF; /* Blue */ }}
![Page 30: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/30.jpg)
min-device-widthmax-device-width
min-widthmax-width≠
![Page 31: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/31.jpg)
![Page 32: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/32.jpg)
Hands on!
■ Crea una página simple que contenga únicamente como
contenido un elemento <h1> de color negro y haz que su
color cambie a azul cuando el viewport sea mayor a 500px
y a rojo cuando sea mayor que 800px.
![Page 33: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/33.jpg)
Ejercicio
■ Escribe las media queries necesarias para aplicar cada uno
de los 4 estilos indicados en la gráfica.
![Page 34: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/34.jpg)
¿Dónde añadir un break point?
![Page 35: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/35.jpg)
Break Points
■ http://udacity.github.io/RWDF-samples/Lesson3/media-q
ueries/min-max-width.html
■ https://skinnyties.com/
■ https://us.cnn.com/?hpt=header_edition-picker
![Page 36: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/36.jpg)
Hands on!
■ Modifica el menú del ejercicio de Flexbox para que solo
muestre las 2 opciones del menú en móviles.
■ Modifica el layout de 3 columnas para que se adapte a los
teléfonos móviles.
![Page 37: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/37.jpg)
Adaptar el layout con media queries
Image source: https://internetingishard.com/
![Page 38: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/38.jpg)
Image source: https://internetingishard.com/
![Page 39: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/39.jpg)
Image source: https://internetingishard.com/
![Page 40: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/40.jpg)
Image source: https://internetingishard.com/
![Page 41: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/41.jpg)
Reordenar
Image source: https://internetingishard.com/
![Page 42: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/42.jpg)
Hands on!
![Page 43: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/43.jpg)
Alternativa
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />
![Page 44: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/44.jpg)
Patrones
![Page 45: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/45.jpg)
Testing
■ BrowserStack
■ Quirck Tools: http://quirktools.com/screenfly/
■ Firefox/Chrome Developer Tools
■ Remote debugging
![Page 46: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/46.jpg)
Remote debugging
1. Descargar Chrome Canary en nuestro PC.
2. Activar el modo desarrollador
a. Pulsar 7 veces la versión de compilación
3. Activar la opción de Depuración por USB.
4. Conectar el teléfono por USB y entrar en chrome://inspect
Más info en: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=es
![Page 47: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/47.jpg)
Sources
■ Google Developers: https://developers.google.com/
■ Mozilla MDN Web Docs: https://developer.mozilla.org/
■ Interneting is Hard: https://internetingishard.com/
■ Udacity: Responsive Web Design course
![Page 48: Responsive Web Design & Mobile First - jonvadillo.comjonvadillo.com/.../Curso-CSS_-Responsive-Web-Design... · Responsive Web Design (diseño web adaptable) Mobile First Técnicas](https://reader036.vdocuments.net/reader036/viewer/2022071012/5fcae8b3f0ba0c77cc272678/html5/thumbnails/48.jpg)
Hands on!
A partir del código HTML y CSS disponible, realiza los cambios necesarios para conseguir que la página se va correctamente en los teléfonos móviles.
Consejos:
● Añade la etiqueta viewport.● Asegurate de que todo el contenido se muestra en una única
columna.● Utiliza tamaños relativos.