Responsive Design html day
-
Upload
andres-londono -
Category
Software
-
view
143 -
download
3
description
Transcript of Responsive Design html day
![Page 1: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/1.jpg)
HTML DAY31 de Mayo de 2014
![Page 2: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/2.jpg)
Diseño responsivo para aplicaciones web modernasResponsive Design
Andrés LondoñoAnalista de SoftwareMiembro / Líder de [email protected] @andreslon http://andreslon.com
![Page 3: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/3.jpg)
Uso Móvil
![Page 4: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/4.jpg)
TráficoEl tráfico web móvil se ha duplicado
anualmente en los últimos 4 años
EmpresasEl 88% de los
usuarios busca empresas locales con su móvil, y un
57% termina visitando su sitio
web…. Obviamente desde
el Móvil.
![Page 5: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/5.jpg)
El Problema*La masificación de
los Móviles convirtió en obsoletos a
nuestros sitios Webs.*Una mala
experiencia móvil puede hacerte perder clientes.
![Page 6: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/6.jpg)
Más Problemas
![Page 7: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/7.jpg)
La solución, Responsive Design
Si no puedes con el enemigo… Únete…
![Page 8: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/8.jpg)
Sitios Web Adaptables
![Page 9: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/9.jpg)
1. Meta Tags
Adapta el zoom de la pantalla automáticamente al ancho de la web para que entre por completo en la anchura de la pantalla del dispositivo.
<meta name="viewport" content="width = device-width, initial-scale=1, maximum-scale=1" />
![Page 10: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/10.jpg)
2. Diseño Fluido
Utilizar porcentajes para definir los anchos de las columnas o contenedoresen lugar de píxeles.
img, video, object {max-width:100%;}
![Page 11: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/11.jpg)
3. Media Query
Permiten consultas al CSS personalizado basándose en el ancho mínimo y máximo de un navegador (min-max width).
/*Para ventanas inferiores a los 480px*/@media screen and (max-width: 480px) {}/*Para dispositivos con orientacion Vertical */@media screen and (orientation:portrait) {}
![Page 12: Responsive Design html day](https://reader033.fdocuments.in/reader033/viewer/2022060115/557ae7b0d8b42a590b8b5512/html5/thumbnails/12.jpg)
¿Preguntas?Andrés LondoñoAnalista de SoftwareMiembro / Líder de [email protected] @andreslon http://andreslon.com