Responsive Design (HTML5)

Andrés Londoño@andreslonandreslon-22@hotmail.comMiembro 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@andreslonandreslon-22@hotmail.comMiembro Avanet