Responsive Web Design: A look at modern tools, techniques, and best practices

November - 2014
Drupal Camp Berlin 2014

Our talk described the challenges of creating Mobile-First Responsive Web Designs for large websites with Drupal. We explained the concepts behind the technique and illustrate our solutions with examples from a case study (University of Applied Sciences Bonn-Rhein-Sieg).
This session was for intermediate front-end developers and site-builders.

We demonstrated how we implemented responsive design applying SMACSS to various Site-building Modules like Panels, Display Suite and Paragraphs.
Topics covered:


  • Supporting mobile first strategies with a component based design workflow.
  • How to apply SMACSS as architecture to Drupal in site building and theming.
  • Fluid grid-based designs: Using flexible and fluid layouts with relative sizing.
  • Extending Responsive functionality with JavaScript and media query listeners like Enquire.js.
  • Element queries (JavaScript), to create components that respond to the width of their container – and not to the width of the viewport.
  • Improving front-end performance by configuring lean, semantic markup.


Thorsten Krug und Antje Gellweiler sind Frontend-Entwickler/innen der Data in Transit GmbH, Bonn.


On the move to #DrupalCon #Vienna! Tweets: @smphr.

Unterwegs zur @meconvention. Getwittert wird bei @smphr.

In #Berlin auf der @mobxcon - Tweets bei @smphr.

@dataintransit folgen

Data in Transit
Belderberg 24
53113 Bonn
Tel. +49 228 96397489