responsive web design en drupal

RESPONSIVE WEB DESIGN en DrupalPRESENTE Y FUTURO

QUIENES SOMOS

Cristina [email protected]@ymbra.com

WE ARE DRUPAL DREAMERS!

Pako [email protected]@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ÁGENES FLEXIBLES

3. MEDIA QUERIES

¿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: blue1} .co3 { background-color: blue2}}@media all and (min-width: 768px) { .col1 { float: left; width: 50% } .col2 { float: left; width: 50% } .col3 { clear:both }}

QUÉ ES RWD?

vs

RWD APP MÓBIL

WEBm.foo.com

vs

QUÉ ES RWD?

RWD APP MÓBIL

WEBm.foo.com

Si tienes APP,

QUÉ ES RWD?

RWD APP MÓBIL

WEBm.foo.com

necesitas web.

QUÉ ES RWD?

RWD APP MÓBIL

WEBm.foo.com

Si tienes versión móvil,

QUÉ ES RWD?

RWD APP MÓBIL

WEBm.foo.com

mismos problemas que RWD.

MOBILE FIRST

¿Qué es?

Diseñar y construir primeropensando en móviles.

MOBILE FIRST

¿Por qué?

● Priorizamoscontenidoy funcionalidad

MOBILE FIRST

¿Por qué?

● Priorizamos contenido y funcionalidad

● Más fácil reorganizar1 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

● Foco en peformance desde el inicio

MOBILE FIRST

¿Tan importante es?

MOBILE FIRST


201450% tráfico(previsión 2012)

MOBILE FIRST


67% usuariosque 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● Layout con solución de menú RWD


_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();


_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 (max-width: 959px) {

@include zen-grid-item(2, 2);


_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;

}}

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

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.

Responsive images

Cambio mediante CSS.No hay diferencia entre proporciones.

Cambio tamaño en servidor.Devuelve imagen recortada y escalada.

Responsive images

• BreackpointsResponsiveImages

• Picture

dgo.to/picturedgo.to/breakpoints

AdaptiveImages

dgo.to/resp_img dgo.to/adaptive_image

5272 instalaciones2025 instalaciones2297/7343instalaciones

1 2 3Soluciones responsive más usadas:

Responsive images

Responsive Images21Crear sufijos.

2Definir sufijo por defecto.

Responsive images

Responsive Images2 3Crear estilos responsive.

Responsive images

Responsive Images24Seleccionar estilo responsive base.

Responsive images

Picture + Breackpoints3

1

23

Responsive images

Picture + Breackpoints35 Configuration » Media » Picture

6 Structure » Content types » Article » Manage display

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!

CO

MP

LEJI

DA

D

Menus

Usando un módulo

+ Muchas opciones configurables.- Poca autonomía, mucho ruido.

Responsive menushttp://dgo.to/responsive_menus

Responsive navigationhttp://dgo.to/responsive_navigation

Superfishhttp://dgo.to/superfishC

OM

PLE

JID

AD

Opciones 100% CSS

+ Funcionamiento sin JavaScript- Tenemos que adaptarlo al marcado de Drupal.

Menú Sidehttp://bit.ly/17QeEuG

MenusC

OM

PLE

JID

AD

Menus

Opciones 100% CSS

+ Funcionamiento sin JavaScript- Tenemos que adaptarlo al marcado de Drupal

Simple con Submenúhttp://bit.ly/Qqiw02

CO

MP

LEJI

DA

D

Menus

Opciones 100% CSS


Simple togglehttp://bit.ly/1c2FH9Q

CO

MP

LEJI

DA

D

Menus

Opciones 100% CSS


Simple navigation menuhttp://bit.ly/VZyAIV

CO

MP

LEJI

DA

D

Otros temas: Tablas RWD

Fijación de cabecerahttp://bit.ly/LPHp5n

Adaptación de la informaciónhttp://bit.ly/dHpDua

FooTablehttp://dgo.to/footable

Otros temas: Problemas conocidos

Mobile Theme

Context Mobile detect

Soluciones (malas):

Problemas con la Caché al hacer un theme solamente para móvilhttp://dgo.to/1591208

Problemas con la caché al usar el contexto para los dispositivos móviles:http://dgo.to/1768556

Usar Varnish para detectar el dispositivo (complejo)No cachear la versión móvil (bajo rendimiento)

RWD en Drupal 8

Responsive Admin theme: Toolbar

RWD en Drupal 8

Responsive Admin theme: Theme

* Overlay

RWD en Drupal 8

Responsive core themes

MOBILETABLETDESKTOP

RWD en Drupal 8

Responsive images: Breakpoints+Picture

¿¿PREGUNTAS?? ¡¡GRACIAS!!

Cristina [email protected]@ymbra.com

WE ARE DRUPAL DREAMERS!

Pako [email protected]@ymbra.com

responsive web design en drupal

Technology