Post on 18-Dec-2014
description
RESPONSIVE WEB DESIGN en DrupalPRESENTE Y FUTURO
QUIENES SOMOS
Cristina Chumillas@chumillascristina.chumillas@ymbra.com
WE ARE DRUPAL DREAMERS!
Pako Garcia@pakmanlhpako.garcia@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
¿Tan importante es?
201450% tráfico(previsión 2012)
MOBILE FIRST
¿Tan importante es?
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 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();
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 (max-width: 959px) {
@include zen-grid-item(2, 2);
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;
}}
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
+ Funcionamiento sin JavaScript- Tenemos que adaptarlo al marcado de Drupal
Simple togglehttp://bit.ly/1c2FH9Q
CO
MP
LEJI
DA
D
Menus
Opciones 100% CSS
+ Funcionamiento sin JavaScript- Tenemos que adaptarlo al marcado de Drupal
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 Chumillas@chumillascristina.chumillas@ymbra.com
WE ARE DRUPAL DREAMERS!
Pako Garcia@pakmanlhpako.garcia@ymbra.com