responsive en drupal

Responsive en Drupal

Drupaleada Origami Febrero 18

Alberto Rojas Co-fundador Manatí

@betovarg @estudiomanati beto@estudiomanati.com www.estudiomanati.com

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

No hagan Slideshows.

http://shouldiuseacarousel.com/

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

drupal.org/project/ds

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

http://www.mercadoilegal.com

• 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

¡Gracias!

@betovarg @estudiomanati beto@estudiomanati.com www.estudiomanati.com