Responsive image
Modern web designs need to take into account the device that is being used to view the content that Drupal is presenting. Different devices have different form factors from mobile phones, to tables, to traditional desktop computers. You may have heard of the terms 'Responsive design' or 'Adaptive design', and basically these mean that rather than having a different mobile version of your site for a mobile device, the content display is modified automatically depending on the device being used.
The following are examples of how content may be presented differently:
Show smaller images on a mobile device to conserve mobile data bandwidth.
Rearrange template regions to best present the most important information on a small screen size.
Responsive design relies on a concept known as a breakpoint. This can be thought of as the width of the screen in pixels where the design changes to a layout more appropriate for that device.
In the default theme Bartik, there are three breakpoints...
