Digital

Cómo hacer un sitio web responsive con Drupal 7

3 Mins de lectura

 

Hoy en día la mayor parte del tráfico de internet ya no tiene lugar en un ordenador sino en los dispositivos móviles, es muy importante que nuestra web se adapte a estos, de manera que el usuario pueda navegar fácilmente y acceder a la información que desea. Por esta razón, aumenta la importancia de tener un site responsive ya que, ¿de qué sirve tener un site si el usuario no puede acceder a el y a su información?

Uno de los métodos utilizados en el equipo de Drupal de Hiberus para conseguir un site que se adapte a los distintos dispositivos se basa en Context Module.

Introducción a Context Module

Context Module permite controlar el site a partir de la gestión de unas condiciones combinadas con una serie de reacciones. Antes de continuar recalcar que las posibilidades de Context Module no se limitan a hacer un site responsive, sino que permite gestionar el site en función de muchas otras condiciones.

Algunas de las condiciones y reacciones que presenta el módulo son:

condiciones reacciones drupal

Destacadas en negrita las utilizadas para el responsive.

Cómo funciona Context Module

Lo primero que debemos hacer es definir un contexto. Cuando definimos un contexto estamos creando una o varias condiciones (breakpoints, lenguagues, roles…) que activarán unas reacciones (mostrar bloques en región, activar menú, título de la página, …). De esta manera podemos ir creando contextos no solo para diferentes secciones, sino también para situaciones variables: usuario anónimo o loggeado, idioma, término de taxonomía, etc.

Ampliando la funcionalidad de Context Module

Para conseguir nuestro objetivo ampliamos la funcionalidad del módulo a través de otros módulos:

  • Breakpoint. Permite definir breakpoints o puntos de ruptura personalizados usando media queries.
  • Context breakpoint. Proporciona un condición en el que tiene lugar el reacción.
  • Context view mode (módulo customizado). Define una reacción que te permite cambiar el view mode del tipo de contenido en base una condición.
  • Context breakpoint caché (modulo customizado). Te permite, para una misma url, cachear en base al view mode en el que se está pintando según el contexto definido, reduciendo la carga de php.

Ejemplo de desarrollo utilizando Context Module

Proyecto: SimplySano, un portal de Supermercados Simply en el que cada semana encontrarás un nuevo menú compuesto por recetas inspiradoras, sencillas, sanas, equilibradas y fáciles de preparar. Todas supervisadas por un experto nutricionista, Javier Tenas, y realizadas por Maria del Carmen Valerdi Quiroz, Profesora de ESAH de Cocina Profesional e Historia de la Gastronomía.

Estos serían los pasos a realizar para utilizar Context Module:

  • Definir BREAKPOINTS en el que queremos que ocurra una reacción.

breackpoints context module

  • Definir CONDICIONES. Seleccionamos el tipo de condición en la que queremos que tenga lugar la reacción. Puesto que estamos trabajando de cara a hacer nuestro site responsive la condición que nos interesa es BREAKPOINT o PUNTO DE INTERRUPCIÓN. Se puede seleccionar una o varias condiciones por contexto y definir si será suficiente que se cumpla una de ellas para que tenga lugar la reacción o si tienen que cumplirse todas para que ésta se ejecute.

condiciones context module

  • Definir REACCIONES. Para cada una de las condiciones debemos definir que reacción o reacciones queremos que tengan lugar. A continuación se presenta cómo trabajar para definir qué view modes se utilizan según el dispositivo en el que se trabaja.

Para trabajar con view modes seleccionamos la reacción SWITCH VIEW MODE:

Definimos que view mode queremos que se visualice al cumplirse la condición del contexto definido.

context module responsive d
Como hemos visto Context module te ayuda a hacer de tu desarrollo Drupal un site responsive de una forma fácil y cómoda. Trabajando con este módulo podemos:

  • Seleccionar qué contenidos mostrar dependiendo la resolución del dispositivo, evitando la carga de código que nos interese.
  • Cargar diferentes tamaños de imágenes según la resolución del dispositivo.
  • Organizar el contenido en función de la resolución del dispositivo.

Todo esto permite menos tiempos de carga y una mayor accesibilidad a tu web, lo que lleva a mejorar las conversiones y ventas.

 

Drupal constituye actualmente la mejor opción para desarrollar su portal en Internet con tecnología opensource. ¿Estás pensando en llevar a cabo un proyecto en Drupal? Contacta con nuestro equipo experto en Drupal. Te ayudaremos en todo lo que sea necesario para que tu proyecto sea un éxito.

4 posts

Sobre el autor
Frontend developer en el área de Drupal. Apasionada de la maquetación y todo lo relacionado con las artes gráficas.
Artículos

Expertos en Drupal, el CMS líder del mercado.

En Hiberus Digital trabajamos conjuntamente con nuestros clientes uniendo los servicios de agencia digital y consultora tecnológica, dos puntos de vista normalmente fragmentados para conseguir que toda la organización se centre en conseguir los objetivos. Ayudamos a las empresas a transformarse conectando la visión de negocio con la tecnología necesaria.

¿Te ayudamos?

Artículos relacionados
Digital

¿Qué es el lead scoring y cómo funciona?

4 Mins de lectura
Un error frecuente en los proyectos digitales es mantener una larga lista de contactos con el propósito de conseguir conversiones por igual….
DigitalNext Tech

Tipos de pruebas de software según la Pirámide de Cohn

4 Mins de lectura
Las pruebas son una parte integral del ciclo de vida del desarrollo de software (Software Development Lifecycle) y son la forma de…
Digital

Las 6 fases de un proyecto de CRO

5 Mins de lectura
En anteriores artículos abordamos el concepto de CRO, una estrategia clave para el marketing online que busca maximizar la conversión de usuarios…

5 Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada.