Responsive design
-
Upload
andres-londono -
Category
Technology
-
view
221 -
download
3
Transcript of Responsive design
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