Este documento trata sobre el diseño web responsivo (RWD) en Drupal. Explica los conceptos clave de RWD como rejillas fluidas, imágenes flexibles y media queries. También discute el enfoque de "mobile first" y la importancia de diseñar primero para dispositivos móviles. Finalmente, cubre temas como temas responsivos, imágenes responsivas y menús en Drupal, así como desafíos como la caché en versiones móviles.

1. RESPONSIVE WEB DESIGN en
Drupal
PRESENTE Y FUTURO

2. QUIENES SOMOS
Cristina Chumillas
@chumillas
Pako Garcia
@pakmanlh
cristina.chumillas@ymbra.com
pako.garcia@ymbra.com
WE ARE DRUPAL DREAMERS!

3. ¿QUÉ TRATAREMOS?
●
●
●
●
●
●
RWD
Mobile first
Temas responsive
Responsive Images/Picture
Menús
Breakpoints i D8

4. ¿QUÉ ES RESPONSIVE WEB DESIGN
(RWD)?
Ethan Marcotte
(A List Apart, 2010)
1. REJILLAS (GRID) FLUIDOS O LÍQUIDOS
2. IMÁGENES FLEXIBLES
3. MEDIA QUERIES

5. ¿QUÉ ES RWD?
1. REJILLAS (GRID) FLUIDOS O LÍQUIDOS

6. QUÉ ES RWD?
2. IMÁGENES FLEXIBLES

7. QUÉ ES RWD?
2. MEDIA QUERIES
@media all and (min-width: 320px)
.col { background-color: red }
.co2 { background-color: blue1}
.co3 { background-color: blue2}
}
@media all and (min-width: 768px)
.col1 { float: left; width: 50%
.col2 { float: left; width: 50%
.col3 { clear:both
}
{
{
}
}
}

8. QUÉ ES RWD?
APP
MÓBIL
RWD
vs
WEB
m.foo.com
vs

9. QUÉ ES RWD?
RWD
APP
MÓBIL
Si tienes APP,
WEB
m.foo.com

10. QUÉ ES RWD?
RWD
APP
MÓBIL
necesitas web.
WEB
m.foo.com

11. QUÉ ES RWD?
RWD
APP
MÓBIL
Si tienes versión móvil,
WEB
m.foo.com

12. QUÉ ES RWD?
RWD
APP
MÓBIL
WEB
m.foo.com
mismos problemas que RWD.

13. MOBILE FIRST
¿Qué es?
Diseñar y construir primero
pensando en móviles.

14. MOBILE FIRST
¿Por qué?
● Priorizamos
contenido
y funcionalidad

15. MOBILE FIRST
¿Por qué?
● Priorizamos contenido y funcionalidad
● Más fácil reorganizar
1 columna a varias,
que al revés

16. MOBILE FIRST
¿Por qué?
● Priorizamos contenido y funcionalidad
● Más fácil reorganizar 1 columna a varias, que al revés
● Foco en peformance desde el inicio

17. MOBILE FIRST
¿Tan importante es?

18. MOBILE FIRST
¿Tan importante es?
2014
50% tráfico
(previsión 2012)

19. MOBILE FIRST
¿Tan importante es?
67% usuarios
que entra en
web no
optimitzada la
abandona al
momento

20. RWD EN DRUPAL

21. RWD EN DRUPAL
●
RESPONSIVE THEMES
●
RESPONSIVE IMAGES
●
MENUS

22. Responsive themes
111.367 sitios actuales
(1,093,968 descargas)
67.136
48.417
27.576
11.190

23. Responsive themes: ZEN
●
●
●
●
Usa Zen GRIDS http://zengrids.
com/
Media queries == mobile first
respond.js per >IE8
Layout con solución de menú RWD

24. Responsive themes: ZEN
_responsive.scss:
Valores comunes:
Ancho del separador
$zen-gutter-width:
20px;
Definición de elemento contenedor de la GRID
@include zen-grid-container();
@include zen-grid-item-base();
Reset de GRID
@include zen-clear();

25. Responsive themes: ZEN
_responsive.scss:
Valor de las columnas x cada mediaquery
@media all and (min-width: 480px) {
$zen-column-count: 1;
Definición de GRIDs x cada mediaquery
@media all and (min-width: 480px) and (maxwidth: 959px) {
@include zen-grid-item(2, 2);

26. Responsive themes: ZEN
_responsive.scss:
Solución menú RWD
@media all and (min-width: 480px) {
#main {
padding-top: $nav-height;
position: relative;
}
#navigation {
position: absolute;
top: 0;
height: $nav-height;
width: $zen-grid-width;
}
}

27. Responsive themes
●
●
●
●
●
960 grid
Concepto Delta como creador de
diseños reaprovechables.
Posibilita mucha configuración
desde interfaz de usuario.
Muchas posibilidades.
No incluye soporte base Sass
●
●
●
●
●
●
●
Fluid Layout
Breakpoint
Susy GRIDS
Selectivizr.js
SMACSS
CSS3 Media Queries JS, Respond.js
CSS3 PIE, HTML5 shiv
LiveReload built-in support

28. Responsive images
<picture width="500" height="500">
<source media="(min-width: 45em)" src="/large.jpg">
<source media="(min-width: 18em)" src="/med.jpg">
<source src="/small.jpg">
<img src="/small.jpg" alt="">
<p>Accessible text</p>
</picture>
Responsive Images Community Group ha propuesto este nuevo elemento como
solución.
Elemento nuevo con un comportamiento que es, por ahora, controlado por
JavaScript.

29. Responsive images
Cambio mediante CSS.
No hay diferencia entre
proporciones.
Cambio tamaño en servidor.
Devuelve imagen recortada y
escalada.

30. Responsive images
Soluciones responsive más usadas:
1
• Picture
• Breackpoints
dgo.to/picture
dgo.to/breakpoints
2297/7343
instalaciones
2
3
Responsive
Images
Adaptive
Images
dgo.to/resp_img
dgo.to/adaptive_image
2025 instalaciones
5272 instalaciones

31. Responsive images
2 Responsive Images
1
Crear sufijos.
2
Definir sufijo
por defecto.

32. Responsive images
2 Responsive Images
3
Crear estilos
responsive.

33. Responsive images
2 Responsive Images
4
Seleccionar estilo
responsive base.

34. Responsive images
3 Picture + Breackpoints
2
1
3

35. Responsive images
3 Picture + Breackpoints
5 Configuration » Media » Picture
6 Structure » Content types » Article »
Manage display

36. COMPLEJIDAD
Menus
Solución ZEN (o similar)
Posicionar el menú (items) después del contenido y
recolocarlo con posición absoluta según la media-query.
En versión móvil un enlace simple al anchor «menu»
llevará a los enlaces.
Para ocultar/mostrar contenido mejor CSS que
Javascript.
Las conexiones lentas nos delatan!

37. Menus
COMPLEJIDAD
Usando un módulo
+ Muchas opciones configurables.
- Poca autonomía, mucho ruido.
Responsive menus
http://dgo.to/responsive_menus
Responsive navigation
http://dgo.to/responsive_navigation
Superfish
http://dgo.to/superfish

38. Menus
COMPLEJIDAD
Opciones 100% CSS
+ Funcionamiento sin JavaScript
- Tenemos que adaptarlo
al marcado de Drupal.
Menú Side
http://bit.ly/17QeEuG

39. Menus
COMPLEJIDAD
Opciones 100% CSS
+ Funcionamiento sin JavaScript
- Tenemos que adaptarlo al marcado
de Drupal
Simple con Submenú
http://bit.ly/Qqiw02

40. Menus
COMPLEJIDAD
Opciones 100% CSS
+ Funcionamiento sin JavaScript
- Tenemos que adaptarlo al marcado
de Drupal
Simple toggle
http://bit.ly/1c2FH9Q

41. Menus
COMPLEJIDAD
Opciones 100% CSS
+ Funcionamiento sin JavaScript
- Tenemos que adaptarlo al marcado de Drupal
Simple navigation menu
http://bit.ly/VZyAIV

42. Otros temas: Tablas RWD
Fijación de cabecera
http://bit.ly/LPHp5n
Adaptación de la información
http://bit.ly/dHpDua
F
ooTable
http://dgo.to/footable

43. Otros temas: Problemas conocidos
Mobile Theme
Problemas con la Caché al hacer un theme solamente para móvil
http://dgo.to/1591208
Context Mobile detect
Problemas con la caché al usar el contexto para los dispositivos
móviles:
http://dgo.to/1768556
Soluciones (malas):
Usar Varnish para detectar el dispositivo (complejo)
No cachear la versión móvil (bajo rendimiento)

44. RWD en Drupal 8
Responsive Admin theme: Toolbar

45. RWD en Drupal 8
Responsive Admin theme: Theme
* Overlay

46. RWD en Drupal 8
Responsive core themes
DESKTOP
TABLET
MOBILE

47. RWD en Drupal 8
Responsive images: Breakpoints+Picture

48. ¿¿PREGUNTAS?? ¡¡GRACIAS!!
Cristina Chumillas
@chumillas
Pako Garcia
@pakmanlh
cristina.chumillas@ymbra.com
pako.garcia@ymbra.com
WE ARE DRUPAL DREAMERS!