En esta charla veremos cómo conseguir que nuestra página web se vea correctamente tanto en nuestros móviles, como en nuestra pantalla de pc, sin tener que crear una versión diferente para cada uno de los dispositivos. Veremos además, las diferentes técnicas que podemos aplicar para conseguir el resultado deseado, centrándonos sobre todo en Progressive Enhacement.

1. Responsive Web Design

2. ¿Quién soy?
Jesús David García Gómez
UX Developer at Plain Concepts
dgarcia@plainconcepts.com
#htmltour
Proyectos destacados:
www.plainconcepts.com

3. Preguntas/dudas/sugerencias
#htmltour

4. Dispositivos

5. Índice
• Grid Flexible
• Imágenes flexibles
• Media queries
• Progressive Enhacement vs Graceful degradation
• Progressive Enhacement

6. Grid Flexible
• Web fluida.
• Cuando la web se redimensione, toda la web se irá amoldando al
ancho disponible.
• Utilizar porcentajes y em’s.
• No utilizar medidas fijas.

7. ¿Cómo se hace?
• Fijamos unas medidas base (fijas)
• Aplicamos la siguiente función:
• Objetivo / contenedor = resultado.

8. Consideraciones
• Si es para un margen, el contenedor es el que contiene al elemento al
que le queremos aplicar el margen.
• Si es para un padding, el contenedor es el propio elemento al que le
queremos aplicar el padding.

9. Imágenes Flexibles
• Imágenes fluidas.
• Utilizamos max-width al 100%.
img {
max-width: 100%
}
• Envolveremos la imagen con una capa para dar el tamaño deseado.

10. Imágenes Flexibles
• Y si max-width no se soporta?
width: 100%.
• Problema: la imagen puede pixelarse.
• Si la imagen es grande, no da problemas.

11. Background
• Imagen de x pixeles, replicada en x/y
• Background-size
background-size: auto; /*se verá en tamaño original*/
background-size: 180px 90px; /*se verá al tamñao especificado*/
background-size: contain; /*se ajusta al tamaño de la ventana manteniendo el aspect
ratio*/
background-size: cover; /*cubre todo el background*/

12. Media Queries
• Adaptar nuestra web según el entorno.
• Se utiliza la propiedad media si estamos en el elemento link.
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="paper.css" media="print" />

13. @media
• Nos permite definir el media type y características físicas del
dispositivo
@media screen and (min-width: 1024px)
{
body { font-size: 100%; }
}

14. Media types
• Screen: Monitor a color.
• Projection: proyectores.
• Braille: dispositivos táctiles braille.
• Tv: televisores.
• Etc.
http://www.w3.org/TR/CSS21/media.html#media-types

15. Queries

16. Progressive Enhacemen vs Graceful
degradation

17. Graceful degradation
• Mejor experiencia de usuario posible.
• Orientado al navegador.
• Énfasis en la tolerancia a fallos.

18. Progressive Enhancement
• Orientado al contenido.
• Hacer versión con funcionalidad básica.
• Mejorar a partir de dicha funcionalidad.

19. Separación en capas

20. ¿Cómo se hace?
• Markup: HTML bien formado, para la interoperabilidad.
• Styling: Mejora progresiva del look-and-feel del diseño, para
navegadores con mejores características (ej. Navegadores webkit,
IE9/10, etc.)
• Behaviors: Mejoramos el sitio añadiendo características interactivas
usando javascript.

21. Beneficios
• Accesibilidad: Contenido alcanzable para todos los usuarios.
• Portabilidad: Soporte cross-browser y cross-device.
• Modularidad: Componentes desacoplados.
• Rendimiento: Mejoras en términos de tiempo de carga.

22. Guidelines
• Separar HTML, CSS y Javascript en ficheros diferentes.
• Evitar código específico de un navegador y usar detección de
características, no detección de navegador.
• Hacer pruebas con javascript desactivado, para comprobar que no
podemos hacer y presentar una alternativa.

23. No todo es de color de rosa
• Utilizar progressive enhancement requiere más trabajo.
• Requiere revisar la semántica y la flexibilidad del markup.
• Escribir css extra para aprovechar las características de CSS3 y html5,
cuando es soportado.

24. Progressive Enhacement 2.0
OMG CSS OMG JS
Nice CSS Nice JS
Base CSS Base JS
HTML

25. En Resumen
• Filosofía de desarrollo web.
• Nos permite crear webs con accesibilidad universal.
• Requiere aprendizaje, disciplina y experiencia.
• Recompensa de la inversión es alta.

26. Preguntas/dudas/sugerencias
#htmltour