responsive design
TRANSCRIPT
Responsive Design (HTML5)
Andrés Londoño@[email protected] Avanet
Agenda
CaracteriticasConcepto
Demo herramientas Preguntas
Un sitio web es sensible solo si es capaz de adaptarse a la pantalla del cliente y con la finalidad de alcanzar una correcta funcionalidad de las interfaces, buscando lograr uniformidad y estandarización al momento en que desplegamos nuestro contenido en distintos dispositivos y presentaciones.
Responsive Design HTML5
¿Porqué implementar Responsive Design?
Adapta el zoom de la pantalla automaticamente al ancho de la web para que entre por completo en la anchura de la pantalla del dispositivo.
1. Meta Tags
<meta name="viewport" content="width = device-width, initial-scale=1, maximum-scale=1" />
2. Diseño FluidoUtilizar porcentajes para definir los anchos de las columnas o contenedoresen lugar de píxeles.
img, video, object {max-width:100%;}
3. Media QueryPermiten consultas al CSS personalizado basandose 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) {}
Y lo mejor... Vámos al código :D
Herramientas y Conclusiones
http://responsivedesign.cloudapp.net/https://github.com/andreslon/ResponsiveDesignAvanet
Sitios de Intereshttp://mediaqueri.es/http://dfcb.github.com/Responsivator/http://www.w3.org/
FrameworksBootstrap,Kube...
Preguntas, Inquitudes o Recomendaciones.
El evento continúa...
Muchas Gracias ;)
Andrés Londoño@[email protected] Avanet