• ONE WEB
  → Misma información y servicios independientemente del dispositivo
• Mismo contenido
• 1 único sitio / template
• 1 URL
  • Contenido no duplicado
  • 1 estrategia SEO
• → RESS (REsponsive & Server Side)

1. Conversión de sitio web existente

2. Creación desde 0: Mobile first

• A. Diseño propio
  → posibilidad de adaptar soluciones ya existentes
• B. Diseño externo
  → movimiento limitado
  → mucha personalización

• Menús
• Imágenes responsive/flexibles
• Vídeos/iframes responsive/flexibles
• Tablas responsive
• Sistemas de Grids
• Themes Drupal existentes
• Components

function theme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>'
  . $output . $sub_menu . "</li>\n";
}
    

function theme_menu_tree($variables) {
  return '<ul class="menu">' . $variables['tree'] . '</ul>';
}
    

• Adaptative image (D7)
• Picture + Breakpoints (D7 & D8)

• Etiquetas SPAN que funcionan como <picture> HTML5
• http://www.w3.org/TR/html-picture-element/

<div class="field-item even" rel="og:image rdfs:seeAlso"
 resource="teaser_mb.png">
<span data-picture="">
  <span data-src="teaser_mb.png"  data-width="600" data-height="400"></span>
  <span data-media="(min-width: 0px) and (max-width: 49.99em)" data-src="teaser_mb.png"  data-width="600" data-height="400"></span>
  <span data-media="(min-width: 50em) and (max-width: 61.19em)" data-src="teaser_narrow.png"  data-width="1000" data-height="500"></span>
  <span data-media="(min-width: 61.2em)" data-src="teaser_desktop.png" data-width="1000" data-height="200"></span>
  <noscript>
    <img typeof="foaf:Image" src="teaser_mb.png" width="600" height="400" alt="" />
  </noscript>
</span>
</div>
    

• Importación / creación de mediaqueries
• Incluyendo multiplicadores (x1.5 ,x2)
• Agrupados
• Exportables (Archivos .yml)

1. Creación Breakpoints
2. Creación Grupos Breakpoints
3. Creación ImageStyles
4. Configuración de Picture con Grupos de Breakpoint
5. Aplicación Picture (display)

• HTML5 Ok
• iFrame (height...)
• ok! con módulo FitVids
• Usa Librería FitVids
• YouTube, Vimeo, Blip.tv, Viddler, Kickstarter ...

• FooTable
• Responsive Tables
  
  

  Opción compleja muy configurable, todavía en dev

• Fijación de cabecera
• Adaptación de la información...

Nos permiten definir y cambiar de layout «fácilmente»
(sin float, clear, overflow ...) en función de la mediquery (SASS&CSS)

• Con distintas versiones que pueden convivir juntas
• Gestionarlas con Ruby Version Manager
• Gestionarlas con Bundle
• Unos temas necesitan unas versiones concretas y otros otras...

Ejemplo gemfile

source "https://rubygems.org"
# Working stack for Zen, from https://drupal.org/node/2188263#comment-8567655
gem "sass", "3.2.14"
gem "compass", "0.12.3"
gem "zen-grids", "1.4"
gem "breakpoint", "2.0.7"
gem "susy", "2.0.0.alpha.4"
gem "sass-globbing"
gem "sassy-buttons"
    

$ gem install bundler
$ bundle install
    

  <div class="sidebar-first">
    <div id="content">
      Contenido
    </div>
    <div class="region-sidebar-first">
      Columna
    </div>
  </div>

  $zen-column-count: 3;
  $zen-gutter-width:  20px;
  .sidebar-first {
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }
    #content {
      @include zen-grid-item(2, 2);
    }
  }

  <div class="has-two-rightsidebars">
    <div class="l-content">
      Contenido
    </div>

    <div class="l-region--sidebar-first">
      Columna 1
    </div>

    <div class="l-region--sidebar-second">
      Columna 1
    </div>
  </div>

  

  .has-two-rightsidebars {
    .l-content {
      @include span-columns(8, 12);
    }
    .l-region--sidebar-first,
    .l-region--sidebar-second {
      @include span-columns(4 omega, 12);
    }
    .l-region--sidebar-second {
      clear: right;
    }
  }
  

• TPL's y regiones del tema principal
• Display Suite
• Omitir CSS propio y definirlo layout dentro del tema.
• No necesita visualización desde la administración.
• Panels
• Integrar definición básica (desktop) en CSS propio para la correcta visualización en la administración.
• Versiones de layout "no desktop" dentro de tema.

• Mobile Theme / Mobile Switch
  
  Problemas con la Caché al hacer un theme solo para MB...
  Problem with caching enabled (Active)
  
  
• Context Mobile detect / Context breakpoint
  
  Problemas con la caché al usar el contexto para dispositivos MB... Context Mobile Detect does not work with page cache enabled (Needs to work)
  
  
• Soluciones
  Usar Varnish para detectar el dispositivo (complejo)
  No cachear la versión MB (bajo rendimiento)

• Admin: Responsive theme: Seven
  
• Admin: Toolbar
• Breakpoints in core
• Picture element (Responsive images)
• Display modes (Form modes & View Modes)
• Mejora significativa Front-end performance
• Miniminiza y agrupa recursos (JS y CSS)
• Mejora uso caché

• Situación idónea Mobile First siempre
  
• Presupuesto reducido: sondear soluciones menos complejas
  • No personalizar demasiado
  • Crear diseño adaptado a la solución
• Tener en cuenta el nivel técnico del equipo según solución
• Estimar según esfuerzos requeridos (no es % ni un fijo)