The Perfect Responsive Breakpoint Strategy

Mira Commerce recently asked its Front End Development team* for our recommendations for breakpoints in responsive website design. While the answers varied based on your business needs and your audience, a few guidelines stand out that we’d like to share with you:

1. The viewing experience should be seamless on all devices and screen sizes, and the number of breakpoints should be invisible to the end user.
2. The fewer breakpoints, the better. Two (768px and 1024px widths) or three (768px, 1024px, and 1200px widths) breakpoints is best. (Two breakpoints actually render three scenarios: 320px-768px, 768px-992px, and 1024px and above. Likewise three breakpoints render four scenarios.)
3. In general we prefer fully responsive sites (sites that stretch to fit whatever screen you’re on, with a maximum width of 1450px to 1600px) over sites with a few fixed widths depending which screen you’re on. Fully responsive sites work best with simple layouts, well-curated labels and links, and lots of white space. There are some exceptions, however (see different scenarios below).
4. Designers and developers should discuss designs with you together, early in the design process.
5. Different elements should be adapted for breakpoints individually, not as a whole page. For example, filters on the product listing page might fall in the left navigation for desktop and move to the top navigation for tablet, while the product grid remains a three column layout on both desktop and tablet.
6. Along with a business analyst, dig into the analytics of your current website to validate what devices your shoppers are using relative to the national average. Also gauge whether your current audience represents the audience you aspire to attract, and adjust your breakpoint strategy accordingly. For example, if your business aspires to attract a younger audience, spend plenty of time on your mobile designs.
7. We recommend creating comprehensive designs for all breakpoint scenarios. Provide each design with a device frame as well as without one so that you know where the “fold” will fall (for more details, see #8 below.) This will solve design problems and help you visualize your website across all devices. In a pinch you can get away with doing two breakpoint scenarios (desktop and mobile) but this requires a great deal of imagination to visualize smaller desktops and tablets. And even if you forego tablet designs for homepage, PDP, etc., we still highly recommend creating tablet designs for your header and footer. 
8. To get a truly accurate experience of your breakpoint scenarios, view your designs at actual size on your own monitor. Participating in screen-sharing calls facilitates great discussion but is not sufficient for a true understanding of how your site will look in real life. We recommend that the designer share links to view designs online (using Figma, Zeplin, XD, or other similar tools). These tools will automatically present your designs in a device frame so you can see where the “fold” falls. Also, always view these online presentations at 100%. Because the largest recommended breakpoint scenario is usually 1450px wide or larger, this generally necessitates viewing on a 27” monitor at minimum. We do NOT recommend sharing designs in PDF format. However, if you opt to share designs as PDFs, always view them at 72% (screen resolution is 72dpi so viewing at 72% will show them accurately) and request that your designer provide your design in a device frame as well as without one. 

Breakpoint recommendations can vary based on your business needs and your audience. Here are a few scenarios that merit different approaches.

Scenario #1

Your business has a lot of value-added functionality (examples: options on the PDP to pick up your items in a local store vs. shipping to your home, loyalty programs with weekly offers in the site header). In this scenario, the designer might need to fit as many elements as possible into the layout, requiring tightly and perfectly spaced elements. For your business, we actually recommend a few fixed widths that change according to your screen size (as opposed to a fully responsive site) and a maximum width of 1450px. Having fixed widths will allow the designer to space complex combinations of elements as perfectly as possible without creating awkward line breaks and unused space when the screen size changes. For your business we recommend investing in creating designs for Desktop, Tablet, and Mobile to avoid squished or overlapping elements.

Scenario #2

Your business prefers a very simple path to purchase with as few drill down options as possible. In this scenario, we recommend using as few elements as possible in the header and footer, with simplified language for labels and links. This scenario merits a fully responsive design with lots of “white space”, and your designer should avoid tightly spaced elements entirely so that items can wrap and flow without requiring perfection.

Scenario #3

Your business has a lot of categories (over 8) that it wants to expose in the top navigation bar on desktop devices. For this scenario, we recommend that you consider very carefully whether you can combine categories, or move them into the dropdown menu of other categories. However, if your business absolutely requires exposing over 8 categories, your designer will likely recommend that you switch to “hamburger” navigation on smaller desktop monitors.

Scenario #4

Your business wants to show as many products as possible “above the fold” on the product listing page. In this scenario, we recommend fully responsive designs with a maximum width of 1920px, for your product listing page only (PDP and other pages will have a smaller max-width). You can have up to six columns of products at the largest breakpoints, and reduce the number of columns in your product grid at smaller breakpoints. You will need to make sure the number of items showing per page is divisible by all the different numbers of columns that are being displayed at different breakpoints. For example, if you have 6 columns of products at the largest breakpoint, 4 at smaller desktops, 3 on tablet, and 2 on mobile, you will need a minimum of 60 items per page. This avoids partial rows at the end of your page, which can look like a mistake and make your user think there is not a second page of products. The pitfall of this approach is that your page load time will be longer than average, which can affect your shopper’s experience negatively.

Scenario #5

Your business serves a B2B audience. B2B Reps frequently use tablets to conduct business on the road. Your navigation and layout should be optimized for touch screens (large buttons, plenty of padding around links). Spend time on designs for the tablet, especially navigation. Forego crowded dropdown menus in the top navigation in favor of intuitive “hamburger” navigation that expands as your customers drill down into the category they want to view.

In closing:

• Consider the business factors when developing your responsive design strategy. 
• Imagination is great, but don’t rely on it too heavily when creating your responsive designs. Seeing your site mocked up for tablets may reveal solutions for desktop components that you hadn’t considered before. 
• If you’re on a tight budget, use audience analytics to prioritize which devices receive priority. 
• When in doubt, simplified content with lots of white space will look good on any device.

*Thanks to the following contributors: Marianela Gerard, Artem Vorobiov, Dmitry Valiukh, Vyacheslav Goncharuk, and Gerardo Gaggero.