Today we look over Responsive design, specifically media breakpoints and how developers can choose the right ones for their site.
A media breakpoint is a pixel value in the code that allows for users of the site to view the site at different resolutions without encountering any visual bugs. The most common use for breakpoints would be to make a site that is viewable on both mobile phones and desktops.
Developers can determine which breakpoints to use by answering two questions. Do I want my site veiwable on other platforms? At which point of screen shrinkage does my site become distorted?
For the first question there is little explanation needed. Sites viewable on mobile devices are becoming more and more standard as household start to have on average more smartphones than computers. This means that many older sites that did not implement media breakpoints for mobile devices have seen less traffic than if they had implemented mobile device breakpoints.
For the second question there is a little more thought that goes into it. When creating a site you want to ensure that as the site is minimized and made smaller we want the text on the site to still be legible. The jello method works great for this but still has its limits. With breakpoints, we are able to completely lower the resolution (pixel width x pixel hieght) allowing for the site to keep its form as it is made smaller.
To learn more about breakpoints and why we should use them check out the two links below!
https://www.lambdatest.com/blog/how-to-use-css-breakpoints-for-responsive-design/
https://www.browserstack.com/guide/responsive-design-breakpoints