CSS Breakpoints for Ecommerce Website Design

Many of our customers are familiar with CSS, HTML and JavaScript - the "big three" of front-end website development. When responsive website design became an exciting new direction for ecommerce, and every other branch of website design and development, the introduction of breakpoints allowed us to re-style and re-format our online shops, ecommerce websites, brochure websites, portals etc... Today, with responsive website design as the de-facto approach to front-end web development, our customers now ask us how we approach the use of CSS breakpoints in their ecommerce websites.

How Others Approach CSS Breakpoints for Online Shops

We see many of our competitors use third party systems, like Wordpress. With systems like those, developers do not have full control over the way that breakpoints are used. Even with custom Wordpress plug-ins, developed for bespoke websites, control is limited. Guttenberg is one of the most popular Wordpress interfaces, and yet it still uses out-of-date screen widths for breakpoints. Those who remember responsive development in it's infancy will remember using breakpoints of 767 pixels, and 1024 pixels. Such an approach today is not sufficient when you consider the vast range of screen types, sizes and orientations that your customers could be using. Guttenberg still uses those screen widths for applying responsive styling.

Pocket Book do not use Wordpress, or any other third party software. We code everything in-house from scratch.

A Better Approach to CSS Breakpoints for Your Ecommerce Website

At Pocket Book, we have developed a time-tested, reliable, adaptive and modern approach to using CSS breakpoints to make sure that your ecommerce website wows your customers, looks amazing on every device and, critically, works efficiently and correctly on every screen.

We start with the orientation breakpoint. It is a breakpoint that detects whether a website is being viewed in landscape or portrait. This usually separates a desktop from mobile or tablet device, but we don't stop there. We also check the cursor type as well. A "course" cursor type represents a finger, and a "fine" cursor type represents a mouse. Between these two factors, we know the correct version of the website to show to the customer. We also add in a maximum width of 1200 pixels as a back-up, adding a third layer of precision.

Further breakpoints are added where necessary. We typically like to keystone correct the styling at above 1500 pixels and below 600 pixels. These tweaks ensure optimal performance on all devices, and ensure that your ecommerce website performs as required for every customer who visits it.

Home