Web Design Sizes?

Question

This is one of my major issues these days. I'm using 15" Retina Macbook Pro. When I'm designing websites in Photoshop I normally use following settings,* __width__ = 2560, to make it easy to view on large screens; however I keep all text within the 12 column content grid (2000px)* __res__ > 300. The problem is when I view the site in my web browser on a 1080p screen it looks huge. In Photoshop on my Macbook Pro however it looks normal. I don't understand the theory behind this. What are the best practices for getting your site to scale to different resolutions? What's really happening to the site when you do responsive web design? What font size(s) should I use in Photoshop so they scale properly?

Answer 1

Hello there!

Making a site responsive is an ever-changing process. There are so many different devices and screen sizes.

I assume you are writing custom media queries with the 2000px reference. A good starting point is to review the most popular CSS frameworks and see what they are doing. I'll use Bootstrap as an example since I am familiar with that framework.

Here is a link to the most current (version 5) bootstrap Grid documentation: https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints.

BreakpointClass infixDimensions
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

I'll be using breakpoint and media query as synonyms.

The table above shows all the different media queries (aka breakpoints) that bootstrap uses. The general reason to add a breakpoint is that there are enough devices in the world using that size. For example, the XXL (>= 1400px) was added from the version 4 => 5. There is a very good chance that the number of large screen sizes (desktop) has increased to the point that it made sense to add another breakpoint.

In general, writing media queries for mobile ( <576px ), tablet ( >= 768px ), smaller laptops ( >= 992px ) and larger laptops /desktop monitors ( >=1200px ) have become standard and should be considered.

Here is another link that gets into the weeds of all device screen sizes around the world: https://gs.statcounter.com/screen-resolution-stats. The data from this site influences when to implement new media queries.

Now that we have the details out of the way. The last piece to really fine-tune your media queries is your audience. Google Analytics is a great free tool to add to your site that will provide the user devices that visit your site and so, so, so much more. If you find out that your customers/viewers mostly have very large screen sizes, then you should make a media query similar to the bootstrap 5 XXL (>= 1400px).

Hope that helps.

Please let me know if I can provide any additional information,

Robert