Responsive web design

Last updated on
10 January 2024

Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites

This page lists resources for Responsive Web Design, a strategy for optimizing the display of a web site using CSS and JavaScript to respond to different device capabilities.

Background information

Terms

  • Browser detection: determining the identity of the user agent (web browser) being used to visit that page.
  • Device detection: determining the hardware that user agent is running on.
  • Feature detection: determining the capabilities of the user agent in question
  • Capability detection: combining aspects of feature, device and bandwidth detection, to test the overall capabilities of the viewport in question.

Current Preferred Approach

Feature detection is currently considered best practice and most Future Friendly

Browser detection is less used due to browsers being able to “pretend” to be another browser by editing their User Agent string.

Device detection becomes unmanageable as the number of devices grows.

The features of the viewports (what it can actually do) are more important for adjusting the display of information than the name of the viewport of the platform it runs on.

Solutions

Testing Tools for desktop, laptop & mobile

Responsive grid systems

Responsive themes

Drupal 6 & 7

Drupal 7

Responsive theme generators

Responsive tables

Responsive images

Jason Grisby has an excellent series of posts on the problems of responsive images: http://blog.cloudfour.com/responsive-imgs/

Jeremy Keith’s two golden rules for dealing with responsive images:

  1. The small image should be default.
  2. Don’t load multiple images.

Possible solutions

Drupal modules

Responsive thumbnail galleries

Responsive background images

Responsive slideshows

Responsive videos

Responsive text

Responsive navigation menus

Simple navigation menus lend themselves to larger display platforms (laptops) as well as smaller displays (smartphones). In general, drop down menus are not often used on smaller displays (smartphones) since visual space is limited.

Usually, you find drop down menus converted to stacked vertical lists when the display detected is a smartphone.

Excellent background info:

Possible Solutions

A common method to provide a more sophisticated menu system for both large and small displays is to use conditional menu blocks. Be aware that complex, lengthy menus do not lend themselves to small displays.

Drupal Modules

Help improve this page

Page status: No known problems

You can: