This document should serve as a current guideline for how we approach design and layout.
Generally we consider the following breakpoints:
- Mobile: 420px and under
- Tablet: 421px - 1199px
- Desktop: 1200px +
We operate with two primary content widths:
- Mobile: 360px
- Tablet + Desktop: 720px
- Note: The Feast Plugin has an option to modify the desktop width to 728px to accommodate additional ads, which can result in 1-3% additional revenue
Because mobile makes up approximately 80% of pageviews on food blogs (on average), we always recommend designing primarily for mobile and optimizing your content for 360px width.
This means that the FSRI block should be used in 4-wide format on desktop and 2-wide format on mobile (making each thumbnail consistently 180px).
It also means that "as seen in" images and other banners should be optimized for 360px width, not 720px or higher. Displaying 2x 360px images side-by-side will accomplish the same result as a 720px image while respecting mobile formatting.
Images
See the image optimization guide for recommended sizes and formats for featured images, and in-content images.
Resources
- https://www.browserstack.com/guide/responsive-design-breakpoints
- https://material.io/design/layout/responsive-layout-grid.html