Overview of responsive image styles, which allow you to provide different images for different screen sizes.
Responsive web design, originally defined by Ethan Marcotte in A List Apart, is a set of design approaches and development best practices that ensures that a web design accommodates, adapts, or responds to the many types and sizes of devices a person may use to view a web site. A responsive web design approach can apply to layouts, font sizes, and images.
Example tasks
- Provide different layouts for different device size ranges
- Ensure that your site's font size is readable across all devices
- Provide different image sizes or sources for different layouts or device attributes
Confidence
While the principles of responsive web design are fairly well-established, new approaches, tools, and Drupal modules and themes continue to emerge. The other consideration is browser compatibility. Some approaches or techniques may require a polyfill to ensure backward-compatibility. At this time, our Drupal responsive web design tutorials focus on responsive images. Resources labeled for Drupal 8 should also apply to Drupal 9.
Drupalize.Me resources
The primary skill you will learn going through the following tutorials is how to implement responsive image styles in a Drupal web site.
Drupal 7
External resources
- Responsive Web Design Basics (web.dev)
- Learn the fundamentals of responsive web design.
- W3C Media Query Specification (w3.org)
- This is the specification for media queries.
- Working with breakpoints in Drupal 8 (Drupal.org)
- Learn how to provide a breakpoints configuration file for use with Responsive Image module.
- Browser support for the
<picture>
element (caniuse.com)- A browser-compatibility chart showing which browsers support the use of the
<picture>
element.
- A browser-compatibility chart showing which browsers support the use of the
- Responsive Images 101 (cloudfour.com)
- A collection of articles about responsive images, introducing concepts, use cases, and approaches for providing responsive images.