Learn to Design Page Sizes Based on Monitor Resolutions

Decide how big to build your pages by the resolution of your customers’ monitors

Before you spend too long considering exact monitor resolutions for your design, you should remember that all modern web design is responsive, meaning it's engineered to adapt across various screen resolutions. With a single design, you need to support everything from the smallest mobile screens up to ultra HD desktop monitors.

With responsive web design, you establish more general mobile, tablet, and desktop layouts. When and how each page element shifts into place for these layouts is determined by special breakpoints written into your CSS. These breakpoints are determined by certain common screen resolutions.

Bootstrap media queries

While you won't target specific resolutions or set up a fixed size for your designs, you will consider screen resolutions in establishing breakpoints and creating smooth transitions so your site looks good across every device and screen size.

Common Desktop Resolutions

Dual desktop monitors
Pixabay
  • 1280x720 Standard HD - You may know this one better as 720p. It was the standard HD resolution when HD was first becoming commonplace. You probably won't find many new monitors using this resolution, but there are plenty of them still in the wild from when they were more popular.
  • 1366x768 - It's something of an unusual resolution, but it's very popular in smaller laptops and some tablets. If you're dealing with lower-end Chromebooks, there's a good chance this is the resolution that you're targeting.
  • 1920x1080 The most common - When you're thinking of desktops, you're probably dealing with 1920x1080, better known as 1080p. This resolution is absolutely everywhere. Most desktop monitors are still 1080p, and plenty of full-size laptops are too. You'll also find a decent share of tablets in 1080p in the landscape as well.
  • 2560x1440 - 1440p is another strange middle ground in the monitor resolution picture. It's higher than what you'd consider 2k, but it isn't quite 4k. That said, it's a common resolution in the gaming monitor market, and it's an affordable alternative to going full 4k. Depending on your site, it may or may not be worth supporting 1440p.
  • 3840x2160 The near future - This is full 4k or Ultra HD. While 4k usually reserved for higher-end PCs now, prices are falling, graphics technology is improving, and demand for 4k is being driven by the TV market, where it's much more common. It's safe to assume that over the next few years, 4k will easily overtake 1080p as the de-facto standard, so it's definitely worth accounting for 4k now.

Common Tablet/Landscape Resolutions

Tablets may not be as popular as they once were, and increasing phone sizes paired with convertible laptops seem to have cut significantly into their market share. Even still, accounting for tablet resolutions overlaps significantly with desktops and laptops. You may be able to use tablet breakpoints to create breakpoints for certain troublesome elements that don't fit right at certain resolutions.

Tablet on Twitter
Pixabay
  • You also absolutely should take tablet resolutions into account for devices held in portrait mode. Not everyone will browse on their tablet held in landscape, so you should add at least one breakpoint for a common tablet held in portrait.
  • 1280x800 A resolution that used to be common - Older tablets, lower-end tablets, and smaller tablets all commonly have some of Amazon's Fire tablets also still use 1280x800. This is one of the last truly mobile resolutions on tablets.
  • 1920x1200 Common on 7" and 8" tablets - In landscape, you can rely on the same breakpoints as 1080p, most of the time. However, when you see one of these in the landscape, the situation is much different. This resolution is common among plenty of 7 and 8-inch tablets, including Amazon Fire.
  • 2048x1536 Apple Tablets -This is Apple's most common tablet resolution. It's similar enough to 1440p to make very little difference, but again, the portrait is unusual. In any case, it's a good idea to test your site at this resolution to ensure that nothing strange happens on iPads.

Higher-resolution tablets start to get into desktop territory. Most of the time, you don't even need to account for them because the resolution falls into a range you've already accounted for. It's always a good idea to test, though, to be absolutely sure.

Common Mobile Resolutions

Mobiles devices are easily the most complicated to handle. There is such a diverse range of devices, including older ones still in use, It's not easy to cover them all. That's why mobile-first design is so popular. The philosophy is simple. Start with the simplest mobile design first, and build on it for larger and larger screens. This way, even the oldest and smallest devices work, but with less content and fewer features. The site isn't hamstrung, it simply displays only the most important and commonly accessed information first.

iPhone
Pixabay 

Here's an interesting trick for dealing with phones; turn the desktop resolutions on their side. Sure, there are unusual outliers, but most current phones follow this pattern.

  • 720x1280 common on older devices - for a number of years, 720p turned on its side was the most common standard for a mobile device. In that case, you don't need to worry about landscape mode, since it's the same as the desktop 720p. Just cover the portrait resolution with a width of 720 pixels.
  • 1080x1920 the middle ground - 1080p has been the standard for a very long time. It's still very common on mid-range devices. If you're going to support only one mobile resolution, this is it.
  • 1440x2560 current top-end - Mobile devices keep getting larger, and screens keep getting higher and higher resolutions. 1440p is an interesting standard because there are a variety of screen widths -- lengths in this case -- that fall into that range. On both desktops and mobile, the most common one is 1440x2560. That gives the screen the common 16:9 aspect ratio. On mobile, it matters a little less than desktops because the length of the device doesn't impact your designs much.

Before you happily only support three mobile resolutions, you should also realize that some people are using ridiculously old phones with tiny screens. You should always build in a rock bottom minimal resolution to ensure that your site looks good even to someone using a phone from several years back.

Simple Tips to Keep in Mind

It's easy to take a bunch of facts about screen resolutions, runoff, and start mocking up designs, and that's exactly when you get into trouble. There are a few key ideas to keep in mind whenever you're designing a website, and they hold true in most, if not all, situations.

  • Responsive Design is Fluid - You may feel the inclination to build a massive array of breakpoints into your CSS to account for every possible screen size and situation. That's a great way to drive yourself crazy. Responsive web design is meant to be flexible enough to fill in gaps and irregularities. If you find yourself defining too many static numbers, whether they're in media queries or for the elements themselves, you're probably headed down the wrong path.
  • People Don't Always Maximize Their Browser - This sort of goes hand-in-hand with the previous point. You can design for screen sizes, but when someone doesn't maximize their browser window, all that goes up in smoke. By keeping things in your design fluid, you can avoid problems with varying browser window sizes.
  • Test Everything - Try to break your site. That's the only way you're going to find all the bugs and inconsistencies that will ruin a visitor's experience. Chrome has built-in tools to test device resolutions with a full list of popular devices to work with. You always have the option of dragging your browser window into different sizes yourself to see both how the site looks at various sizes and how it adapts and breaks.
  • Don't Expect Your Users to Have The Latest and Greatest - This goes back to the previous point about older phones and small resolutions. You can't expect people to have new devices. That applies to both screen resolution and processing power. Loading a site with too many graphics and too much JavaScript is a good way to get people with a slow device to leave and never come back.
Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Learn to Design Page Sizes Based on Monitor Resolutions." ThoughtCo, Sep. 1, 2021, thoughtco.com/page-sizes-based-on-monitor-resolutions-3469969. Kyrnin, Jennifer. (2021, September 1). Learn to Design Page Sizes Based on Monitor Resolutions. Retrieved from https://www.thoughtco.com/page-sizes-based-on-monitor-resolutions-3469969 Kyrnin, Jennifer. "Learn to Design Page Sizes Based on Monitor Resolutions." ThoughtCo. https://www.thoughtco.com/page-sizes-based-on-monitor-resolutions-3469969 (accessed March 19, 2024).