RESPONSIVE WEB DESIGN en
Drupal
PRESENTE Y FUTURO
QUIENES SOMOS

Cristina Chumillas
@chumillas

Pako Garcia
@pakmanlh

cristina.chumillas@ymbra.com

pako.garcia@ymbra.com

...
¿QUÉ TRATAREMOS?
●

●

●

●

●

●

RWD
Mobile first
Temas responsive
Responsive Images/Picture
Menús
Breakpoints i D8
¿QUÉ ES RESPONSIVE WEB DESIGN
(RWD)?
Ethan Marcotte
(A List Apart, 2010)

1. REJILLAS (GRID) FLUIDOS O LÍQUIDOS
2. IMÁGENE...
¿QUÉ ES RWD?
1. REJILLAS (GRID) FLUIDOS O LÍQUIDOS
QUÉ ES RWD?
2. IMÁGENES FLEXIBLES
QUÉ ES RWD?
2. MEDIA QUERIES

@media all and (min-width: 320px)
.col { background-color: red }
.co2 { background-color: bl...
QUÉ ES RWD?

APP
MÓBIL

RWD

vs

WEB
m.foo.com

vs
QUÉ ES RWD?

RWD

APP
MÓBIL

Si tienes APP,

WEB
m.foo.com
QUÉ ES RWD?

RWD

APP
MÓBIL

necesitas web.

WEB
m.foo.com
QUÉ ES RWD?

RWD

APP
MÓBIL

Si tienes versión móvil,

WEB
m.foo.com
QUÉ ES RWD?

RWD

APP
MÓBIL

WEB
m.foo.com

mismos problemas que RWD.
MOBILE FIRST

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

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

¿Por qué?
● Priorizamos contenido y funcionalidad

● Más fácil reorganizar
1 columna a varias,
que al revés
MOBILE FIRST

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

...
MOBILE FIRST

¿Tan importante es?
MOBILE FIRST

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

¿Tan importante es?
67% usuarios
que entra en
web no
optimitzada la
abandona al
momento
RWD EN DRUPAL
RWD EN DRUPAL

●

RESPONSIVE THEMES

●

RESPONSIVE IMAGES

●

MENUS
Responsive themes
111.367 sitios actuales
(1,093,968 descargas)

67.136

48.417

27.576

11.190
Responsive themes: ZEN

●

●
●
●

Usa Zen GRIDS http://zengrids.
com/
Media queries == mobile first
respond.js per >IE8
La...
Responsive themes: ZEN
_responsive.scss:
Valores comunes:
Ancho del separador
$zen-gutter-width:

20px;

Definición de ele...
Responsive themes: ZEN
_responsive.scss:
Valor de las columnas x cada mediaquery
@media all and (min-width: 480px) {
$zen-...
Responsive themes: ZEN
_responsive.scss:
Solución menú RWD
@media all and (min-width: 480px) {
#main {
padding-top: $nav-h...
Responsive themes

●
●

●

●
●

960 grid
Concepto Delta como creador de
diseños reaprovechables.
Posibilita mucha configur...
Responsive images
<picture width="500" height="500">
<source media="(min-width: 45em)" src="/large.jpg">
<source media="(m...
Responsive images

Cambio mediante CSS.
No hay diferencia entre
proporciones.

Cambio tamaño en servidor.
Devuelve imagen ...
Responsive images
Soluciones responsive más usadas:

1
• Picture
• Breackpoints
dgo.to/picture
dgo.to/breakpoints

2297/73...
Responsive images

2 Responsive Images
1
Crear sufijos.

2
Definir sufijo
por defecto.
Responsive images

2 Responsive Images

3
Crear estilos
responsive.
Responsive images

2 Responsive Images
4
Seleccionar estilo
responsive base.
Responsive images

3 Picture + Breackpoints
2

1

3
Responsive images

3 Picture + Breackpoints
5 Configuration » Media » Picture

6 Structure » Content types » Article »
Man...
COMPLEJIDAD

Menus
Solución ZEN (o similar)
Posicionar el menú (items) después del contenido y
recolocarlo con posición ab...
Menus

COMPLEJIDAD

Usando un módulo
+ Muchas opciones configurables.
- Poca autonomía, mucho ruido.
Responsive menus
http...
Menus

COMPLEJIDAD

Opciones 100% CSS
+ Funcionamiento sin JavaScript
- Tenemos que adaptarlo
al marcado de Drupal.
Menú S...
Menus

COMPLEJIDAD

Opciones 100% CSS
+ Funcionamiento sin JavaScript
- Tenemos que adaptarlo al marcado
de Drupal

Simple...
Menus

COMPLEJIDAD

Opciones 100% CSS
+ Funcionamiento sin JavaScript
- Tenemos que adaptarlo al marcado
de Drupal

Simple...
Menus

COMPLEJIDAD

Opciones 100% CSS
+ Funcionamiento sin JavaScript
- Tenemos que adaptarlo al marcado de Drupal

Simple...
Otros temas: Tablas RWD

Fijación de cabecera
http://bit.ly/LPHp5n
Adaptación de la información
http://bit.ly/dHpDua
F
ooT...
Otros temas: Problemas conocidos
Mobile Theme
Problemas con la Caché al hacer un theme solamente para móvil
http://dgo.to/...
RWD en Drupal 8
Responsive Admin theme: Toolbar
RWD en Drupal 8
Responsive Admin theme: Theme

* Overlay
RWD en Drupal 8
Responsive core themes

DESKTOP

TABLET

MOBILE
RWD en Drupal 8
Responsive images: Breakpoints+Picture
¿¿PREGUNTAS?? ¡¡GRACIAS!!

Cristina Chumillas
@chumillas

Pako Garcia
@pakmanlh

cristina.chumillas@ymbra.com

pako.garcia...
Upcoming SlideShare
Loading in...5
×

Responsive Web Design en Drupal

1,739

Published on

A día de hoy el Responsive Web Design ya ha dejado claro que no es una moda o una opción, sino una necesidad. De hecho, se prevé que en 2014 el tráfico de Internet móvil ya suponga al 50% del total.

Esta es la presentación que hicimos junto a Pako García para la DrupalCampSpain 2013. Entramos en los conceptos básicos del Responsive para contextualizar, pero sesión estuvo enfocada a mostrar qué procesos, «themes» y módulos usamos actualmente en nuestro día a día.

Los temas principales fueron:

Mobile first
Breakpoints
Responsive Images/Picture
«Themes» responsive
Menús

Y todo ello con un ojo puesto en D8 para saber qué va a tener continuidad y ver qué vamos a encontrarnos.

Published in: Technology
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,739
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
42
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Responsive Web Design en Drupal

  1. 1. RESPONSIVE WEB DESIGN en Drupal PRESENTE Y FUTURO
  2. 2. QUIENES SOMOS Cristina Chumillas @chumillas Pako Garcia @pakmanlh cristina.chumillas@ymbra.com pako.garcia@ymbra.com WE ARE DRUPAL DREAMERS!
  3. 3. ¿QUÉ TRATAREMOS? ● ● ● ● ● ● RWD Mobile first Temas responsive Responsive Images/Picture Menús Breakpoints i D8
  4. 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. 5. ¿QUÉ ES RWD? 1. REJILLAS (GRID) FLUIDOS O LÍQUIDOS
  6. 6. QUÉ ES RWD? 2. IMÁGENES FLEXIBLES
  7. 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. 8. QUÉ ES RWD? APP MÓBIL RWD vs WEB m.foo.com vs
  9. 9. QUÉ ES RWD? RWD APP MÓBIL Si tienes APP, WEB m.foo.com
  10. 10. QUÉ ES RWD? RWD APP MÓBIL necesitas web. WEB m.foo.com
  11. 11. QUÉ ES RWD? RWD APP MÓBIL Si tienes versión móvil, WEB m.foo.com
  12. 12. QUÉ ES RWD? RWD APP MÓBIL WEB m.foo.com mismos problemas que RWD.
  13. 13. MOBILE FIRST ¿Qué es? Diseñar y construir primero pensando en móviles.
  14. 14. MOBILE FIRST ¿Por qué? ● Priorizamos contenido y funcionalidad
  15. 15. MOBILE FIRST ¿Por qué? ● Priorizamos contenido y funcionalidad ● Más fácil reorganizar 1 columna a varias, que al revés
  16. 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. 17. MOBILE FIRST ¿Tan importante es?
  18. 18. MOBILE FIRST ¿Tan importante es? 2014 50% tráfico (previsión 2012)
  19. 19. MOBILE FIRST ¿Tan importante es? 67% usuarios que entra en web no optimitzada la abandona al momento
  20. 20. RWD EN DRUPAL
  21. 21. RWD EN DRUPAL ● RESPONSIVE THEMES ● RESPONSIVE IMAGES ● MENUS
  22. 22. Responsive themes 111.367 sitios actuales (1,093,968 descargas) 67.136 48.417 27.576 11.190
  23. 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. 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. 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. 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. 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. 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. 29. Responsive images Cambio mediante CSS. No hay diferencia entre proporciones. Cambio tamaño en servidor. Devuelve imagen recortada y escalada.
  30. 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. 31. Responsive images 2 Responsive Images 1 Crear sufijos. 2 Definir sufijo por defecto.
  32. 32. Responsive images 2 Responsive Images 3 Crear estilos responsive.
  33. 33. Responsive images 2 Responsive Images 4 Seleccionar estilo responsive base.
  34. 34. Responsive images 3 Picture + Breackpoints 2 1 3
  35. 35. Responsive images 3 Picture + Breackpoints 5 Configuration » Media » Picture 6 Structure » Content types » Article » Manage display
  36. 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. 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. 38. Menus COMPLEJIDAD Opciones 100% CSS + Funcionamiento sin JavaScript - Tenemos que adaptarlo al marcado de Drupal. Menú Side http://bit.ly/17QeEuG
  39. 39. Menus COMPLEJIDAD Opciones 100% CSS + Funcionamiento sin JavaScript - Tenemos que adaptarlo al marcado de Drupal Simple con Submenú http://bit.ly/Qqiw02
  40. 40. Menus COMPLEJIDAD Opciones 100% CSS + Funcionamiento sin JavaScript - Tenemos que adaptarlo al marcado de Drupal Simple toggle http://bit.ly/1c2FH9Q
  41. 41. Menus COMPLEJIDAD Opciones 100% CSS + Funcionamiento sin JavaScript - Tenemos que adaptarlo al marcado de Drupal Simple navigation menu http://bit.ly/VZyAIV
  42. 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. 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. 44. RWD en Drupal 8 Responsive Admin theme: Toolbar
  45. 45. RWD en Drupal 8 Responsive Admin theme: Theme * Overlay
  46. 46. RWD en Drupal 8 Responsive core themes DESKTOP TABLET MOBILE
  47. 47. RWD en Drupal 8 Responsive images: Breakpoints+Picture
  48. 48. ¿¿PREGUNTAS?? ¡¡GRACIAS!! Cristina Chumillas @chumillas Pako Garcia @pakmanlh cristina.chumillas@ymbra.com pako.garcia@ymbra.com WE ARE DRUPAL DREAMERS!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×