On this page
- Background information
- Introduction to responsive web design
- Mobile first approach
- Detection
- Terms
- Current Preferred Approach
- Solutions
- Testing Tools for desktop, laptop & mobile
- Responsive grid systems
- Responsive tables
- Responsive images
- Possible solutions
- Drupal modules
- Responsive thumbnail galleries
- Responsive background images
- Responsive slideshows
- Responsive videos
- Responsive text
- Responsive navigation menus
- Possible Solutions
- Drupal Modules
Responsive web design
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
Introduction to responsive web design
Mobile first approach
- Mobile First Design Strategy with Responsive Drupal Themes by Christopher R. Cooper
- Mobile First by Luke Wroblewski
- Why Design Mobile First? by Needmore Designs
- The many faces of 'mobile first' by Brad Frost
- Head First Mobile Web book by By Jason Grigsby and Lyza Gardner
Detection
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
- Modernizr combines feature detection with conditional resource loading.
- Categorizr – A server-side device detection script
- Agent IQ - A server-side device detection script
- Detector - A server-side device detection script
- Mobile Tools, to assist in making adjustments to your site based on the visitor's device
- Mobile Switch
- Mobile Theme
Testing Tools for desktop, laptop & mobile
- http://quirktools.com/screenfly
- Chrome addon - https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhpha...
- Responsive Design Testing Tool - http://mattkersley.com/responsive/
- Opera Mobile Emulator - http://www.opera.com/developer/tools/mobile/
- Responsinator - http://www.responsinator.com
Responsive grid systems
- 1140 CSS Grid - http://cssgrid.net
- Bootstrap - http://getbootstrap.com
- Columnal - http://www.columnal.com
- Fluid Baseline Grid - http://fluidbaselinegrid.com
- Foundation - http://foundation.zurb.com
- Golden Grid System - http://goldengridsystem.com
- Gridset - http://www.gridsetapp.com/
- Skeleton - http://www.getskeleton.com
- Susy - http://susy.oddbird.net
- Singularity - http://singularity.gs
- Zen Grids - http://zengrids.com
- Yahoo Pure.CSS - http://purecss.io/
Responsive tables
- Responsive tables - ZURB
- Responsive Data Tables - Chris Coyier
- A Responsive Design Approach for Complex, Multicolumn Data 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:
- The small image should be the default.
- Don’t load multiple images.
Possible solutions
- Responsive Images: Experimenting with Context-Aware Image Sizing
- Adaptive Images
- Responsive Images: How they Almost Worked and What We Need
- Proposed
<picture>
element and polyfill - Foresite.js
- Responsive images - a Drupal implementation
Drupal modules
- The Picture is part of Drupal 8 core. It follows responsive design principles. In order to use it, select the 'Picture' instead of 'Image' formatter when managing the display of a content-type.
- Adaptive Image http://drupal.org/project/adaptive_image
- Adaptive Image Styles http://drupal.org/project/ais
- Client-side adaptive imagehttp://drupal.org/project/cs_adaptive_image
- Responsive Imageshttp://drupal.org/project/responsive_images (not maintained anymore)
- Responsive images and styleshttp://drupal.org/project/resp_img (replaced by “Picture”)
- Fluid HTML grid that can be used with responsive design techniques http://drupal.org/project/views_fluid_grid
Responsive thumbnail galleries
Responsive background images
Responsive slideshows
- Example of a "lightweight" slideshow - http://yiibu.com/articles/rethinking-the-mobile-web/page-3.html#slideshow
- Flexslider module - http://drupal.org/project/flexslider (based on http://flex.madebymufffin.com)
- Full-screen image slideshow - http://buildinternet.com/project/supersized
Responsive videos
- CSS only http://amobil.se/2011/11/responsive-embeds/
- FitVids module http://drupal.org/project/fitvids (based on http://fitvidsjs.com)
Responsive text
- FitText module http://drupal.org/project/fit_text (based on http://fittextjs.com)
- Responsive Typography, reference of core concepts by Tim Brown - http://nicewebtype.com/notes/responsive-typography/
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
- Menu Block Module
- Better Jump Menus to easily create hierarchical select jump menus
- Superfish
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion