When designing a web page, you want it to function properly no matter which device your audience uses. Screens use different proportions of height to width, so your design needs to “respond” flexibly to those constraints.
Sometimes you pull up a site on your phone but it feels cramped, so you turn the phone sideways, right? You’re changing your screen proportions, and the site responds by adjusting the way its elements conform to your screen. This is website responsiveness, and a good website is, well, responsive.
A break point is a screen width at which the page changes the way it handles content.
Elementor, the page builder I use, automatically gives me two break points. These break points build three versions of my sites: desktop, tablet, and mobile. This tool allows me to optimize responsiveness for most devices. My normal break points are 1225px and 769px. That is, any screen over 1225px behaves like a desktop. Between 1225px and 769px, it behaves like a tablet. Under 769px it behaves like a mobile device.
While I’m building sites I can see how pages look at different widths within their ranges. In the video below I’m in tablet mode, and you can see how the page changes as I increase and decrease the screen width.
Using my home page as an example…
Here’s my home page on desktop and mobile views. The same information is presented on both, but they’re laid out differently. This is something Elementor helps me do, but sometimes I need to make adjustments to get the look I want.
Aside from layout I can customize font size, spacing, and other elements for website responsiveness. Notice that the menu on desktop mode has words while the mobile layout has a hamburger menu. Hamburger menus take up less space, making them better for smaller screens. With attention to details like this, sites look and work better across platforms.
