Macro and micro breakpoints

Breakpoints are literally where the layout or page elements break due to changes in screen size. We usually identify two types of breakpoint:

• Macro - Major layout shifts based on targeted screen sizes. Macro breakpoints are usually based on common screen resolutions.
• Micro - Minor adjustments at screen sizes where page elements (such as headlines or navigation links) break, but the overall layout stays sound.

We use Gridset to identify Macro breakpoints for the grid and layout, then prototype changes based on these sizes. Once the design and layout are close to being finalized, we comb through the pages to identify micro breakpoints and screen size optimizations.

At certain macro breakpoints, we also look for content that can be left out and added at other resolutions. For example: an image for every story is great on desktop, but perhaps only featured stories should have images that load at mobile sizes.