Responsive Web Design en Drupal

2,354 views
2,183 views

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
2,354
On SlideShare
0
From Embeds
0
Number of Embeds
406
Actions
Shares
0
Downloads
48
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!

×