Slides de la drupaleada de febrero en Origami, sobre responsive web design en Drupal. Por Alberto Rojas de Manatí Twitter: @estudiomanati @betovarg www.estudiomanati.com San José, Costa Rica.

1. Responsive en
Drupal
Drupaleada Origami
Febrero 18

2. Alberto Rojas
Co-fundador
Manatí
@betovarg
@estudiomanati
beto@estudiomanati.com
www.estudiomanati.com

3. 15
D
R
U
P A L C A M
P
C
R
29 al 31 de julio
Universidad de Costa Rica

4. Web Agency

5. Somos un montón de
drupal nerds
San José, Costa Rica

6. #manateam

7. Primero las máximas

8. • Menos es más.
• Móvil primero.
• Usuarios primero.
• Contenido primero.
• Piensen en rendimiento
(interpretación + peso).

11. Stack de temas

12. Core
Theme
Subtheme

14. Discusión eterna:
¿cuál es el mejor tema base?

16. • ¿Me sirve un tema base?
• ¿Comprendo el stack?
• ¿Voy a utilizar las
características del tema base?

17. Componentes
responsive en Drupal

18. Slideshows

19. No hagan Slideshows.
http://shouldiuseacarousel.com/

20. Si no tienen otra opción… Flexslider

22. Layouts sin código:
Display Suite

23. DS no es solo layouts:
• Elimina divitis
• Permite agregar elementos de html5 a
fields
• Permite agregar classes a fields
• Diversos view modes por contenido

24. drupal.org/project/ds

25. Configuración de campos

26. Selección de layouts

27. Si no se quiere un módulo:
• Cada field tiene un template:
field-name-[field_name].tpl
Por ejemplo:
• Nombre del field: field_description
• Template: field-name-field-description.tpl
Documentación:
• https://api.drupal.org/api/drupal/modules!field!
theme!field.tpl.php/7

28. Views

29. Views permite modificar la salida del markup:
• Views permite limpiar el markup de salida de
campos.
• Permite agregar clases personalizadas a
envoltorios.
• Facilita el uso con live preview en edición.

30. drupal.org/project/views

31. Selección de elemento de html

32. Class personalizados

33. Class para envoltorios y estilos

34. Responsive Images

35. Existen una gran cantidad de
soluciones:
• Picture
• Client Side Adaptive Images
• Borealis

36. Nuestro combo:
• Client Side Adaptive Images
• Retina Images
• Image style quality
• Imagefield focus

37. http://www.incae.edu/es/programas-maestria/mba.html

38. Retinafy:
• Imágenes a 2X de lo requerido.
• Compresión al 85%.

39. Normal
20 kb
Retinafied
14 kb
Retinafy first!

41. Otros módulos recomendados:
• Fitvids, responsive video embed
• Block class, class personalizado para
bloques
• Context, robusto sistema de
posicionamiento de bloques

42. CSS

43. Recomendación
Arquitectura de CSS:
https://latinamerica2015.drupal.org/session/un-mejor-css-
planeando-hoy-para-no-sufrir-en-el-futuro

44. • Todo nuestro CSS debe estar en un solo
lugar: nuestro tema.
• SASS! Si no sabés sass, no estás en nada:
• compass
• breakpoint
• singularity
• SMACSS
Managing Complex Projects with Design Components -
Drupalcon Austin 2014
http://es.slideshare.net/JohnAlbin/managing-design

45. H4ck Tiem
FOAD

47. El modo elegante

48. Hasta la vista baby!

49. Javascript: organized.

50. Javascript

51. Enquire

52. Modernizr, yepnope

53. INTERNET EXPLORER

54. • Conditional Stylesheets
https://www.drupal.org/project/
conditional_styles
• Feature detection,Yepnope.js
• PIECSS
:S

55. Desacoplado
drupal + angular

56. http://www.mercadoilegal.com

57. • Lectura recomendada
DrupalCon Amsterdam: Headless roundup
http://fourword.fourkitchens.com/article/drupalcon-
amsterdam-headless-roundup

58. Consejos

59. • Usar SVGs.
Fallbacks CSS multiple backgrounds: http://callmenick.com/
2014/04/02/svg-fallback-with-png/
• Comprimir CSS y JS.
Advanced CSS/JS Aggregation https://www.drupal.org/project/
advagg
• No todo tiene que ser un módulo.
• Performance first!
• KISS

60. KISS

61. ¡Gracias!
@betovarg
@estudiomanati
beto@estudiomanati.com
www.estudiomanati.com