Responsive design screen breakpoints
The responsive design implementation caters to four different screen widths, and also uses a set of fixed image widths to provide an optimized responsive experience for a variety of device types.
Browser screen widths
| Size | Width (in pixels) | Device type | Viewport (in pixels) | Max no. of columns |
|---|---|---|---|---|
| Large | 1140 or more | Large tablet, laptop, monitor or TV | 1024 (centered) | none |
| Medium | 940-1139 | Tablet in landscape orientation | maximum browser width, up to 1024 (centered) | none |
| Small* | 480-939 | Tablet in portrait orientation or smartphone in landscape orientation | maximum browser width | 2 |
| Extra small* | less than 480 | Smartphone in portrait orientation | maximum browser width | 1 |
Image widths
Images are dynamically resized to fit the layout where they are rendered and device/browser capabilities of the requesting client. As there is a large variety of device display widths, we limit image resizing to a fixed set of image widths, to optimize caching of resized images.
SDL Digital Experience Accelerator selects one of these following image widths based on the following factors:
- Browser display width
- Browser pixel ratio
- Column and content layout
| Width (in pixels) | Example of use |
|---|---|
| 2048 | Full viewport width image on a large, x2 pixel ratio ("retina") display |
| 1024 | Full viewport width image on a large non-retina display |
| 640 | Full width image on a typical small (smartphone) retina display, portrait orientation |
| 320 | Full width image on a typical small (smartphone) non-retina display, portrait orientation |
| 160 | Thumbnail |