Presentación hecha en el marco de la #COPO5 en la tarima de innovación.

1. “RESPONSIVE WEB DESIGN -
DESARROLLANDO PARA TODOS LADOS”
Por: @dgfrancisco
Imagen por: - http://thenounproject.com/
martes 26 de junio de 12

2. @dgfrancisco
www.dgfrancisco.com
martes 26 de junio de 12

3. @enterco
www.enter.co
martes 26 de junio de 12

4. ¿Y qué con eso de RD?
Imagen por: Lukew - http://www.flickr.com/photos/lukew/7382743430/in/photostream
martes 26 de junio de 12

5. Estadísticas
Crecimiento de las ventas y actualización de
teléfonos inteligentes para los próximos años.
982 millones
2015
25%
630 millones
2012
472 millones
2011 Sources: IDC.com - flurry.com - NPD.com - onlinemarketingtrends.com - abiresearch.com - gartner.com
martes 26 de junio de 12

6. Estadísticas
Los usuarios en que momento están usando sus dispositivos
para usar apps o web y que es lo q hacen en esos momentos.
Hogar En la calle Mientras compran En el trabajo En el transporte
98% 89% 79% 74% 64%
Navegando, buscando, Fotos, Música, Ubicación, Cupones, descuentos, Navegando, buscando, Fotos, Música, Ubicación,
amigos, chat, redes, Redes sociales, chat. ofertas, comparando. amigos, chat, redes, Redes sociales, chat.
remplazando computadores remplazando computadores
martes 26 de junio de 12

7. TODO
martes 26 de junio de 12

8. Conceptos
Adaptive web design
Mobile first
Responsive design
martes 26 de junio de 12

9. ¿Qué es responsive design?
“... una técnica de diseño y desarrollo web
que mediante el uso de estructuras e
imágenes fluidas, así como de media-
queries en la hoja de estilo CSS, consigue
adaptar el sitio web al entorno del usuario ...”
Enlace: http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptativo
martes 26 de junio de 12

10. ¿Qué es responsive design?
Un solo código fuente,
adaptado por su capa
gráfica por medio de
media-queries y
layouts fluidos
martes 26 de junio de 12

11. ¿Cómo?
Imagen: HikingArtist - www.flickr.com/photos/hikingartist/5726773583/in/photostream
martes 26 de junio de 12

12. 1. Layout Fluido
2. Media-queries
3. RESS
martes 26 de junio de 12

13. 1. Layout Fluido
2. Media-queries
3. RESS
martes 26 de junio de 12

14. Layouts fluidos
% 1. Retículas flexibles
2. Elementos contenedores flexibles
100%
width: 60% 40%
martes 26 de junio de 12

15. Layouts fluidos
Target ÷ Contexto = Resultado%
Contexto 1000px
Target 600px
%
martes 26 de junio de 12
600px ÷ 1000px = 0.6%

16. 1. Layout Fluido
2. Media-queries
3. RESS
martes 26 de junio de 12

17. Media-queries
<link rel="stylesheet" media="print" type="text/css" href="print.css" />
http://www.w3.org/TR/css3-mediaqueries
martes 26 de junio de 12

18. Media-queries
Tipos
print Impresos.
braille Dispositivos de lectura braille.
embossed Dispositivos de impresión braille.
handheld Dispositivos de mano.
projection Dispositivos para proyección como el videobin.
screen Pantallas de computadores.
speech Sintetizadores de Voz (Sordos).
tty Dispositivos mecánicos, como los teletipos.
tv Televisores de gran, medio o pequeño formato.
martes 26 de junio de 12

19. Media-queries
Propiedades
width Filtro por ancho.
height Filtro por alto.
device-width Filtro por el ancho del dispositivo.
device-height Filtro por el alto del dispositivo.
orientation Landscape o Portrait.
aspect-ratio X:Y (ancho/altura, 16:9 TV).
device-aspect-ratio X:Y (ancho/altura) de los dispositivos.
color Cantidad de color por bit, sin color = 0
color-index Capacidad de color del dispositivo.
monochrome monocromático.
resolution densidad de pixeles.
martes 26 de junio de 12

20. Media-queries
Syntaxis
@media all and (max-width: 1000px) and (min-width: 700px) {}
@media screen and (orientation:portrait) and (min-width: 400px) {}
@media (tipo) and (filtro por: ...) and (filtro por: ...) {
body{background-color: #c00;}
}
martes 26 de junio de 12

21. Media-queries
max-width
:/ min-height
min-color-index
max-device-width
max-color
min-resolution
min-monocrohme
martes 26 de junio de 12

22. 1. Layout Fluido
2. Media-queries
3. RESS
martes 26 de junio de 12

23. RESS
Responsive design + Server side components
1. Detección de dispositivos
2. Detección de características
3. Contenido condicional
martes 26 de junio de 12

24. RESS
Detección de dispositivos
Request BD con info detallada
¿Qué tipo de dispositivo, móvil, TV, tablet?
martes 26 de junio de 12

25. RESS
Detección de dispositivos / BD
• WURFL (PHP, Java, .Net)
• 51Degrees.mobi (.Net)
martes 26 de junio de 12

26. RESS
Detección de características
<html class="js canvas canvastext geo
cssanimations csscolumns no-cssgradi
cufon-active fontface cufon-ready">
CSS3 - HTML5
¿Qué soporta? ¿Qué puedo usar?
martes 26 de junio de 12

27. RESS
js
geolocation
Detección de características rgba hsla
no-multiplebgs
borderimage
borderradius
boxshadow
opacity
no-cssanimations
csscolumns
no-cssgradients
no-cssreflections
csstransforms
no-csstransforms3d
no-csstransitions
video audio
fontface
martes 26 de junio de 12

28. RESS
Contenido Condicional
1. Cambiar pauta
2. img de tamaño XXX
3. Secciones registros/login
1. Quitar XXX poner XXX
Js 2. Forzar propiedades
3. Validaciones
martes 26 de junio de 12

29. Entonces
1. Layout Fluido
2. Media-queries
3. RESS
martes 26 de junio de 12

30. Siguiente paso
1. Progressive enhancement
2. Off Canvas layouts
3. Pre-procesadores
martes 26 de junio de 12

31. Gracias
Francisco Rodríguez
@dgfrancisco
yo@dgfrancisco.com
@nounproject
martes 26 de junio de 12