responsive en drupal
TRANSCRIPT
Responsive en Drupal
Drupaleada Origami Febrero 18
15
DR
U P A L C A M P CR
29 al 31 de julioUniversidad de Costa Rica
Web Agency
Somos un montón de drupal nerdsSan José, Costa Rica
#manateam
Primero las máximas
• Menos es más. • Móvil primero. • Usuarios primero. • Contenido primero. • Piensen en rendimiento
(interpretación + peso).
Stack de temas
Core
Theme
Subtheme
Discusión eterna: ¿cuál es el mejor tema base?
• ¿Me sirve un tema base?
• ¿Comprendo el stack?
• ¿Voy a utilizar las características del tema base?
Componentes responsive en Drupal
Slideshows
Si no tienen otra opción… Flexslider
Layouts sin código: Display Suite
DS no es solo layouts:
• Elimina divitis • Permite agregar elementos de html5 a
fields • Permite agregar classes a fields • Diversos view modes por contenido
Configuración de campos
Selección de layouts
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
Views
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.
drupal.org/project/views
Selección de elemento de html
Class personalizados
Class para envoltorios y estilos
Responsive Images
Existen una gran cantidad de soluciones:
• Picture • Client Side Adaptive Images • Borealis
Nuestro combo:
• Client Side Adaptive Images • Retina Images • Image style quality • Imagefield focus
http://www.incae.edu/es/programas-maestria/mba.html
Retinafy:
• Imágenes a 2X de lo requerido. • Compresión al 85%.
Normal
20 kb
Retinafied
14 kb
Retinafy first!
Otros módulos recomendados:
• Fitvids, responsive video embed • Block class, class personalizado para
bloques • Context, robusto sistema de
posicionamiento de bloques
CSS
Recomendación
Arquitectura de CSS: https://latinamerica2015.drupal.org/session/un-mejor-css-planeando-hoy-para-no-sufrir-en-el-futuro
• 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
• SMACSSManaging Complex Projects with Design Components - Drupalcon Austin 2014http://es.slideshare.net/JohnAlbin/managing-design
H4ck Tiem
FOAD
El modo elegante
Hasta la vista baby!
Javascript: organized.
Javascript
Enquire
Modernizr, yepnope
INTERNET EXPLORER
• Conditional Stylesheetshttps://www.drupal.org/project/conditional_styles
• Feature detection, Yepnope.js
• PIECSS :S
Desacopladodrupal + angular
• Lectura recomendadaDrupalCon Amsterdam: Headless rounduphttp://fourword.fourkitchens.com/article/drupalcon-amsterdam-headless-roundup
Consejos
• 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
KISS
