Responsive Web Design en Drupal
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design en Drupal

on

  • 1,256 views

A día de hoy el Responsive Web Design ya ha dejado claro que no es una moda o una opción, sino una necesidad. De hecho, se prevé que en 2014 el tráfico de Internet móvil ya suponga al 50% del ...

A día de hoy el Responsive Web Design ya ha dejado claro que no es una moda o una opción, sino una necesidad. De hecho, se prevé que en 2014 el tráfico de Internet móvil ya suponga al 50% del total.

Esta es la presentación que hicimos junto a Pako García para la DrupalCampSpain 2013. Entramos en los conceptos básicos del Responsive para contextualizar, pero sesión estuvo enfocada a mostrar qué procesos, «themes» y módulos usamos actualmente en nuestro día a día.

Los temas principales fueron:

Mobile first
Breakpoints
Responsive Images/Picture
«Themes» responsive
Menús

Y todo ello con un ojo puesto en D8 para saber qué va a tener continuidad y ver qué vamos a encontrarnos.

Statistics

Views

Total Views
1,256
Views on SlideShare
928
Embed Views
328

Actions

Likes
3
Downloads
22
Comments
2

3 Embeds 328

http://2013.drupalcamp.es 313
https://twitter.com 13
https://www.rebelmouse.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hola @AdagioParaCuerdas , Breakpoints y Picture o Responsive Images sirven cuando tienes necesidad de no cargar imágenes grandes destinadas a escritorio en dispositivos más pequeños y menor velocidad de conexión. Aunque como muy bien comentas, Bootstrap 3 tiene soluciones geniales para RWD. Saludos!
    Are you sure you want to
    Your message goes here
    Processing…
  • Picture y Breakpoints en Drupal 8 :)
    Otra opción es Bootstrap 3 .img-responsive, siempre 100% del contenedor
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Web Design en Drupal Responsive Web Design en Drupal Presentation Transcript

  • RESPONSIVE WEB DESIGN en Drupal PRESENTE Y FUTURO
  • QUIENES SOMOS Cristina Chumillas @chumillas Pako Garcia @pakmanlh cristina.chumillas@ymbra.com pako.garcia@ymbra.com WE ARE DRUPAL DREAMERS!
  • ¿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? APP MÓBIL RWD vs WEB m.foo.com vs
  • QUÉ ES RWD? RWD APP MÓBIL Si tienes APP, WEB m.foo.com
  • QUÉ ES RWD? RWD APP MÓBIL necesitas web. WEB m.foo.com
  • QUÉ ES RWD? RWD APP MÓBIL Si tienes versión móvil, WEB m.foo.com
  • QUÉ ES RWD? RWD APP MÓBIL WEB m.foo.com mismos problemas que RWD.
  • MOBILE FIRST ¿Qué es? Diseñar y construir primero pensando en móviles.
  • MOBILE FIRST ¿Por qué? ● Priorizamos contenido y funcionalidad
  • MOBILE FIRST ¿Por qué? ● Priorizamos contenido y funcionalidad ● Más fácil reorganizar 1 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? 2014 50% tráfico (previsión 2012)
  • MOBILE FIRST ¿Tan importante es? 67% usuarios que 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 (maxwidth: 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 Soluciones responsive más usadas: 1 • Picture • Breackpoints dgo.to/picture dgo.to/breakpoints 2297/7343 instalaciones 2 3 Responsive Images Adaptive Images dgo.to/resp_img dgo.to/adaptive_image 2025 instalaciones 5272 instalaciones
  • Responsive images 2 Responsive Images 1 Crear sufijos. 2 Definir sufijo por defecto.
  • Responsive images 2 Responsive Images 3 Crear estilos responsive.
  • Responsive images 2 Responsive Images 4 Seleccionar estilo responsive base.
  • Responsive images 3 Picture + Breackpoints 2 1 3
  • Responsive images 3 Picture + Breackpoints 5 Configuration » Media » Picture 6 Structure » Content types » Article » Manage display
  • COMPLEJIDAD 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!
  • Menus COMPLEJIDAD Usando un módulo + Muchas opciones configurables. - Poca autonomía, mucho ruido. Responsive menus http://dgo.to/responsive_menus Responsive navigation http://dgo.to/responsive_navigation Superfish http://dgo.to/superfish
  • Menus COMPLEJIDAD Opciones 100% CSS + Funcionamiento sin JavaScript - Tenemos que adaptarlo al marcado de Drupal. Menú Side http://bit.ly/17QeEuG
  • Menus COMPLEJIDAD Opciones 100% CSS + Funcionamiento sin JavaScript - Tenemos que adaptarlo al marcado de Drupal Simple con Submenú http://bit.ly/Qqiw02
  • Menus COMPLEJIDAD Opciones 100% CSS + Funcionamiento sin JavaScript - Tenemos que adaptarlo al marcado de Drupal Simple toggle http://bit.ly/1c2FH9Q
  • Menus COMPLEJIDAD Opciones 100% CSS + Funcionamiento sin JavaScript - Tenemos que adaptarlo al marcado de Drupal Simple navigation menu http://bit.ly/VZyAIV
  • Otros temas: Tablas RWD Fijación de cabecera http://bit.ly/LPHp5n Adaptación de la información http://bit.ly/dHpDua F ooTable http://dgo.to/footable
  • Otros temas: Problemas conocidos Mobile Theme Problemas con la Caché al hacer un theme solamente para móvil http://dgo.to/1591208 Context Mobile detect Problemas con la caché al usar el contexto para los dispositivos móviles: http://dgo.to/1768556 Soluciones (malas): 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 DESKTOP TABLET MOBILE
  • RWD en Drupal 8 Responsive images: Breakpoints+Picture
  • ¿¿PREGUNTAS?? ¡¡GRACIAS!! Cristina Chumillas @chumillas Pako Garcia @pakmanlh cristina.chumillas@ymbra.com pako.garcia@ymbra.com WE ARE DRUPAL DREAMERS!