How To Determine Breakpoint Widths For Responsive Web Designs

When creating responsive web site designs, you need to consider the devices on which the user will be viewing the design. Each device has it’s own optimal screen width, for example iPads, iPhone and web browsers all have their own widths.

The way most web designers determine the breakpoints is to use certain defaults. Examples of the current default breakpoints for Responsive Web Design are 320pm for the iPhone and several other mobile devices, 768px for the iPad and 1024px. It is tempting to use only these default breakpoints but by doing so you cut reduce your audience by not designing for the devices and resolutions in between. It is important to remember that what is popular in devices today may not be tomorrow. As a web designer you should determine breakpoints according to content, not device.

Some responsive devices are hot at the moment but their popularity could fade if a better device is released. When you design specifically for one type of device you are limiting your audience as well as possibly setting yourself up to have to reconfigure your site later. It is in your best interest as a web designer to determine your breakpoints according to the content of your site. When you let the page flow determine when the layout needs a breakpoint then you are making a future-friendly move.

Responsive web design is paramount for responsive design is not just for mobile devices, larger screens, such as desktop screens, will also likely be visiting your site. You can enhance for large screens using responsive web design as well.

Determining breakpoints for all sizes and resolutions of screens is important. You can make the browser window wider to show that it does not take long until the line length for content on your site becomes hard to read. For this reason most sites will implement a maximum width so that although the browser can be resized, the line length will not be difficult to read. However, web designers do not “have” to cap the width of their page because they can use CSS3 multi-column lay outs instead. The modules for multi-column layout allow most all browsers to display the content in several different columns if necessary. The content will be fluid regardless of what resolution is being used.

Regardless of the browser or device used, some users will have different set zoom factors. When determining the breakpoint in your Responsive Web Design you have to take this into account. When a user has vision difficulties they will set their zoom factor accordingly. The font size will increase or decrease depending on the zoom factor. Media queries are recalculated automatically for Firefox and Opera when a different zoom factor is applied. Pixel breakpoints on other browsers will fail when using default breakpoints. Images and fonts will float awkwardly and the ideal line-length is placed outside of the window. The same happens for fluid layouts on a device that uses alternative default sizes. By converting the breakpoints to ems you can avoid these issues.

It is fairly simple to convert pixel based measurements to ems. Simply divide the target or breakpoint by the context. The context is the body font size. Setting the media queries using ems allows the site to be zoomed in various levels while the layout remains the same. Media queries that are based on em units is a way that designers can design future friendly sites since using them embraces the flexibility and unpredictability of the web.

The breakpoints in your site should be designed so that they are rendered correctly on as many devices and browsers possible. It is also important to take into consideration that the user should be able to view the content as they wish. This means that if the user wants to zoom in or out of the site, use their device in landscape mode, or view the site on a large screen desktop. It is strongly suggested that web designers do not rely totally on default breakpoints and instead let the content dictate where the breakpoints should occur.

This post is written by John Lewis and he works at PriceCollate as a writer.