responsive design html day
DESCRIPTION
El trafico web se ha duplicado anualmente en los ultimos años, y la masificación de los moviles han convertido en obsoletos nuestros sitios web debido a que no ofrecen muy buena experiencia , causando perdida de usuarios y/o clientes, se parte de la necesidad de transformación de la web aprendiendo "Responsive DesignTRANSCRIPT
HTML DAY31 de Mayo de 2014
Diseño responsivo para aplicaciones web modernasResponsive Design
Andrés LondoñoAnalista de SoftwareMiembro / Líder de [email protected] @andreslon http://andreslon.com
Uso Móvil
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.
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.
Más Problemas
La solución, Responsive Design
Si no puedes con el enemigo… Únete…
Sitios Web Adaptables
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" />
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%;}
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) {}
¿Preguntas?Andrés LondoñoAnalista de SoftwareMiembro / Líder de [email protected] @andreslon http://andreslon.com