How to Determine The Screen Size For Responsive Web Design
A web designer posed a question to a large online community of other web designers. They stated that they understand the concept of mobile first and responsive development. They see a lot of sites that get to a maximal state, then the site centers the content at a fixed size as the window expands. This website designer wanted to know how to determine that maximum width.
One person wrote back to say that they start with mobile first then make sure that the design looks good until it reaches 1,024. Anything larger than that usually means that the user is on a laptop. That is where they get rid of the hamburger menu and shift the navigational links onto the main layout. Because laptop and desktop screens are more standardized than mobile screens, almost all of them have a setting of 1,366 by 768 or 1,920 by 1,080. That makes the designers life easier. They cap the width at 1,092 and 1,536, which is 90 percent of the maximum. For their friends on 4K, they scale everything by 2.2x, which works well.
Another designer said that a lot of their websites are used by people with desktop computers and a huge monitor or a huge laptop. As a result, they get complaints about too much blank or negative space. One person wondered if the breaking points in CSS layout necessitate putting in any numbers at all for screen layouts. It is important to keep in mind that not everybody does their CSS layout the same way or even uses much CSS in their web design.
A few others had comments for the original poster. One person said that the original poster should look at the analytics for their site. The information should show the screen size of all the devices that accessed the site. With this information, the original poster could make plans to serve the majority of the visitors instead of catering to the small percentage of them who have a huge desktop monitor. Another person seconded this, stating that it is always important to know one's online audience. For more information click here https://www.reddit.com/r/web_design/comments/g2evx0/maximum_web_page_width_you_design_for/.