#BarCampNea charla de Responsive Web Design

1. Responsive Web Design
Walter Gerez
@wgerez
http://opivalia.com.ar

2. Responsive Web Design??

3. Inspiration!! http://mediaqueri.es

4. Inspiration!! http://mediaqueri.es

5. Inspiration!! http://mediaqueri.es

6. Pero, necesito esto?¿
Argentina multiplicar por doce el consumo de internetá
m vil en cinco a osó ñ
El avance del acceso a Internet desde un dispositivo móvil no es una tendencia local, y la
Argentina se ubica detrás de mercados como Japón y por delante de Estados Unidos y el Reino
Unido en términos de ingresos, superando incluso las llamadas de voz.
Fuente: La Nacion
http://www.lanacion.com.ar/1558158-argentina-detras-de-japon-con-el-consumo-de-internet-movil
Año 2012 Año 2013 Año 2014 Año 2015
0.00%
20.00%
40.00%
60.00%
80.00%
100.00%
120.00%
140.00%
160.00%
180.00%
Porcentaje de Penetracion Internet Movil

7. Responsive Web Design
Cual es el truco?
HTML5 y CSS3 – Media Queries
Media Queries

8. Responsive Web Design
Ejemplos – CSS Media Queries
@media screen and (min-width:1200px){
img {
max-width:1000px;
}
#container{
width:1100px;
}
header h1 a{
width:1100px;
height:180px;
background:url(image.jpg) no-repeat 0 0;
}
}

9. Responsive Web Design
Ejemplos – CSS Media Queries
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

10. Herramientas Responsive
Less Framework

11. Herramientas Responsive
Skeleton

12. Herramientas Responsive
Golden Grid System

13. Herramientas Responsive
320 and up

14. Herramientas Responsive
Fluid 960 Grid system

15. Herramientas Responsive
Boilerplate

16. Herramientas Responsive
Bootstrap - Twitter

17. Bootstrap - Ejemplos
http://www.angelomazzilli.com/Preciso/preciso.html

18. Bootstrap - Ejemplos
http://themes.suggeelson.com/supr/

19. Bootstrap - Ejemplos
http://www.youxithemes.com/live_previews/dandelion/

20. Bootstrap - Ejemplos
http://www.youxithemes.com/live_previews/mws-admin/

21. Bootstrap - Ventajas
Utiliza componentes y servicios creados por la comunidad:
HTML5 shim
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
Normalize.css
(en navegadores viejos – section, article, aside)
OOCSS
jQuery UI (implementa 12 plugins)
GitHub

22. Bootstrap - Ventajas
Es un conjunto de buenas prácticas
* Implementa los nuevos stándares: HTML5 + CSS3
* Uso intensivo de:
- Vendor prefixes: -moz, -webkit, -o, -ms
- Polyfills: vía HTML5 Shim
- Prefixed classes: btn, alert, navbar, thumbnails, etc..
* CSS Sprites para la iconografía.
* Cross-browser
- IE 7/8/9, Firefox, Chrome, Safari
- Mac y Windows

23. Bootstrap
Basta de bla bla bla bla y a Codear un rato!!.
< “-_-” >