1920X1080 resolutions: What Is 1080p Resolution? FHD Explained

24 августа, 2023

Understanding screen resolution in the context of responsive design

Estimated reading time: 10 minutes

It takes only 0.05 seconds for users to form an opinion about your website, and a large majority of these first impressions are based on your design.

Considering the range of devices and screens that we now use daily, it’s obvious that how your site looks and feels can vary from one user to another.

One key to optimizing for these different experiences is by understanding screen resolution and the role it plays in how your website or webshop will look like in different screens that your customers are using.

In this article, we’ll discuss the basics of screen resolution, responsive design, and why understanding these concepts is critical for your UX and conversion rate optimization.

What is screen resolution?

Screen resolution refers to the number of pixels displayed on a monitor screen. It’s usually expressed as (horizontal pixels) x (vertical pixels).

For example, 1920×1080, the most common desktop screen resolution, means that the screen displays 1920 pixels horizontally and 1080 pixels vertically.

High resolution screens display more pixels (and therefore, more elements in the web page) than lower resolution screens.

Screen resolution is not to be confused with screen size, which just refers to the physical size of the screen (i.e., width x length). Devices with the same screen size may have different resolutions, in the same way that different screen sizes may display the same resolution.

However, size does affect the optimal screen resolution for a device—a smaller screen needs fewer pixels (lower resolution) to properly display elements on a screen, while a larger screen has to be able to display a higher resolution to ensure sharp-looking images and other visual elements.

Display settings and screen resolutions

Different devices come in varying pre-configured settings, which affect how your website or webshop gets displayed in them.

For instance, a mid-range laptop usually has the capability to display 1920×1080 pixels—the same resolution as most standard desktop monitors. However, since a laptop has a smaller screen size, a 1920×1080 resolution will render elements smaller in this display, affecting usability and readability.

To work around this problem, most laptop displays are “zoomed” to a recommended setting that fits the size of the screen, making elements bigger and the text more readable.

In the sample default settings above, the laptop has a 1920×1080 resolution, but is set to a 150% recommended scale so that elements on the screen can be displayed properly relative to the physical screen size (approximately 12.2×7 inches).

(The laptop in the example above)

To know the actual display resolution in this case, you can use the formula:

screen resolution / (scale/100)

So, 1920 horizontal pixels / (150/100)

= 1920 / 1. 5 = 1280

And 1080 vertical pixels / (150/100)

= 1080 / 1.5 = 720

In our example, the laptop actually displays 1280 pixels horizontally (i.e., along its width) and 720 pixels vertically (i.e., along its length, without scrolling), scaled at 150% from the original 1920×1080 resolution, because of this configuration setting.

It’s also important to note here that since the original resolution is higher, the zoomed display is also much sharper compared to a screen with a default 1280×720 resolution at 100% because of the density of the pixels.

Here’s the same laptop at 100% scale (notice how the elements in the page are smaller).

Responsive design is the default approach to designing websites today.

A responsive web page basically means that it responds to the device it’s being viewed on and adjusts the layout, placement, and size of the content and elements accordingly so that the page looks good no matter what screen it’s being viewed on.

About breakpoints

A standard responsive design implementation enables a web page to automatically scale and fit to the screen it’s being viewed on. This means that whether the page is being viewed on a high- or low-resolution screen, the layout and relative placement of elements in the page will be more or less maintained.

This generally applies to a range of screens with only a few size differences—for example, a desktop and a laptop. However, as you go from big to small (like from a desktop to a smartphone), there are certain points where the page layout has to be adjusted).

For example, a two-column layout may fit just fine in larger screens—but when you start to scale down, the column widths will at one point be too narrow for the content to be viewed properly, which makes it necessary to transform the layout into just one column.

(Sample two-column layout)

(The same page in a smaller mobile screen, transformed into one column)

In responsive design, there are so-called “breakpoints” that mark the point where an update in layout is necessary to maintain great user experience.

Breakpoints are usually considered in terms of desktop, tablet, and mobile resolutions.

In this sample layout for desktop view, the text is relatively big and there is a lot of space for the elements on the page.

As you start to scale down to smaller sizes or lower resolutions, responsive design is needed to ensure that the font size and images also get smaller. This is to maintain the general look of the layout and avoid an interface where the text gets too big for its container and the screen is crowded with too large elements.

Let’s see the desktop layout above in a tablet resolution:

While this sample tablet layout is responsive in the sense that it has scaled down properly to fit the smaller screen size, there are specific issues with it that can affect the user experience (see notes in the screenshot).

At this point, a layout update is needed.

In this sample, the elements have been rearranged a bit—maintaining the general design concept of the original desktop layout, but updated in a way that better fits the device and screen resolution it’s being viewed on.

This is made possible by adding a breakpoint for 768×1024 resolutions and below.

How do you decide on which breakpoints to add?

The most ideal breakpoints for your design depend on your site’s content and other elements. Your web designer and developer will have to check how your site looks like when scaled up or down to different resolutions to determine when there is a need to adjust the layout.

As mentioned above, the usual breakpoints considered by designers are:

Desktop

  • 1920×1080 (standard desktop monitors)
  • 1440×1280 (common resolution of Macbooks)
  • 1280×720 (smaller laptops)

Tablet

  • 1024×768 (landscape orientation)
  • 768×1024 (portrait orientation)

Mobile

  • 375×667 (iPhone 6s and similar sizes)

In some cases, you may even add minor breakpoints where there is no drastic change to the overall layout, but where your designer and/or frontend developer has to adjust minor things such as paddings, margins, or font size for better UI/UX.

Know your users’ top screen resolutions

To better design for your actual users, it helps to know what devices and screen resolutions they’re actually using to view your website. With this information, you can optimize your design for the screen resolution used by most of your visitors. If you have a Google Analytics account, this is fairly easy to find out.

(As of July 2020)

  1. From your Analytics dashboard, go to Audience > Technology > Browser & OS
  2. Click the “Secondary dimension” dropdown and search for “Screen resolution”, then click to add it to the table.
  3. To sort by the most popular, simply click on the “Users” column.
  4. You can further refine your data by choosing a date range in the upper right corner of the dashboard. One year’s worth of data can be a good reference.

(Sample Analytics data on top screen resolutions)

Understanding retina displays

Retina is a term coined by Apple for the display resolution of its devices.

In a nutshell, a retina display is double the pixels (horizontally and vertically) so it essentially has four times the pixels of non-retina screens. On top of this, each element is also doubled in size, making it still the same size as in a non-retina display, but much sharper and crisper. (Think of it like a Windows desktop at 200% zoomed display.)

In the context of responsive design, there is no special layout consideration for Retina screens since their displays show the same base resolution as its non-retina counterparts.

Needless to say, it’s not possible to get your website to look 100% the same across different screen resolutions.

But the point of responsive design is not to ensure that your website looks the same always; rather, that it’s optimized for the best look and user experience regardless of device, screen resolutions, and screen sizes.

Here are some important things to consider instead:

  1. Are your most important elements visible above-the-fold across screens?

Considering that not all users scroll all the way down a web page, make sure that all key information like your value proposition and call-to-action are always visible above-the-fold in different screens, big or small.

  1. Is your text easy to read?

Adjust font size and text containers accordingly to optimize for readability, always. According to Google, an ideal column should contain 70 to 80 characters per line, so when a text block grows past this number, consider adding a breakpoint.

 

Interested in learning more? Contact us today and our project managers will be happy to help you.

What is the Screen Resolution or the Aspect Ratio? What do 720p, 1080i & 1080p Mean?

In days gone by, screen resolution (also called display resolution) wasn’t much of an issue. Windows came with a few preset options, and to get higher resolution or more colors (or both) you would install a driver for your video card. As time went on, you could choose better video cards and better monitors as well. Today we have lots of options when it comes to displays, their quality and the supported resolutions. In this article I would like to take you through a bit of history and explain all the important concepts.

It all started with IBM & CGA

The color graphics technology was first developed by IBM. CGA was first, followed by EGA and VGA–color graphics adapter, enhanced graphics adapter, video graphics array. Regardless of the capability of your monitor, you’d still have to choose from one of the few options available through your graphics card’s drivers. For the sake of nostalgia, here’s a look at a once well-known CGA display.

With the advent of high definition video and the increased popularity of the 16:9 aspect ratio (I’ll explain more about aspect ratios in a bit) selecting a screen resolution is not the simple affair it once was. However, this also means that there are a lot more options to choose from, with something to suit almost everyone’s preferences.

Let’s look at what today’s terminology is, and what it means.

The screen is what by what?

I am sure some of you already know that the term «resolution» isn’t correct when it’s used to refer to the number of pixels on a screen. That says nothing about how densely the pixels are clustered. «Resolution» is technically the number of pixels per unit of area, rather than the total number of pixels. Here, I’ll be using the term as it’s commonly understood, rather than the absolutely technologically correct usage.

Since the beginning, resolution has been described (accurately or not) by the number of pixels arranged horizontally and vertically on a monitor, for example 640 x 480 = 307200 pixels. The choices available were determined by the capability of the video card, and they differed from manufacturer to manufacturer.

The resolutions built into Windows were very limited, so if you didn’t have the driver for your video card you’d be stuck with the lower-resolution screen that Windows provided. If you’ve watched Windows Setup or installed a newer version of a video driver, you may have seen the 640 x 480 low resolution screen for a moment or two. It was ugly even on CGA screens, but that was the Windows default.

As monitor quality improved, Windows began offering a few more built-in options, but the burden was still mostly on the graphics card manufacturers, especially if you wanted a really high resolution display. The more recent versions of Windows can detect the default screen resolution for your monitor and graphics card and adjust accordingly. This doesn’t mean that what Windows chooses is always the best option, but it will work, and you can change it if you wish, after you see what it looks like. (I will talk about this in a future article.)

Mind your P’s and I’s

You may have seen the screen resolution described as something like 720p or 1080i. What does that mean?

To begin with, the letters tell you how the picture is «painted» on the monitor. A «p» stands for progressive, and an «i» stands for interlaced.

The interlaced scan is a holdover from television and from early CRT monitors. The monitor or TV screen has lines of pixels arranged horizontally across it. The lines were fairly easy to see if you got up close to an older monitor or TV, but nowadays the pixels on the screen are so small that they are very hard to see even with magnification. The monitor’s electronics «paint» each screen line by line, too quickly for the eye to see. A progressive display paints all the odd lines first, then all the even lines.

Since the screen is being painted in alternate lines, flicker has always been a problem with interlaced scans. Manufacturers have tried to overcome this problem in various ways. The most common way is to increase the number of times a complete screen is painted in a second, which is called the refresh rate. The most common refresh rate was 60 times per second, which was acceptable for most people, but it could be pushed a bit higher to get rid of the flicker that some people perceived.

As people moved away from the older CRT displays, the terminology changed from refresh rate to frame rate, because of the difference in the way the LED monitor works. The frame rate is the speed with which the monitor displays each separate frame of data. The most recent versions of Windows set the frame rate at 60 Hertz, or 60 cycles per second, and LED screens do not flicker. And the system changed from interlaced scan to progressive scan because the new digital displays were so much faster. In a progressive scan, the lines are painted on the screen in sequence rather than first the odd lines and first the even lines. If you want to translate 1080p for example, is used for displays that are characterized by 1080 horizontal lines of vertical resolution and a progressive scan.

There’s a rather eye-boggling illustration of the differences between progressive and interlaced scans on Wikipedia here: Progressive scan. For another interesting history lessons, read also Interlaced video.

What about the numbers: 720p, 1080i and 1080p?

When high-definition TVs became the norm, manufacturers developed a shorthand to explain their display resolution. The most common numbers you will see are 720p, 1080p and 1080i. As we’ve seen, the «p» and «i» tell you whether it’s a progressive-scan or interlaced-scan display. And these shorthand numbers are sometimes used to describe computer monitors as well, even though in general a monitor is capable of a higher-definition display than a TV. The number always refers to the number of horizontal lines on the display.

Here’s how the shorthand translates:

  • 720p = 1280 x 720 (16:9 aspect ratio)
  • 1080p = 1920 x 1080 (widescreen display -16:9 aspect ratio)
  • 1080i = 1920 x 1080 (widescreen display -16:9 aspect ratio)
What is the Aspect Ratio?

At the beginning I mentioned the term aspect ratio. This was originally used in motion pictures, indicating how wide the picture was in relation to its height. Movies were originally in 4:3 aspect ratio, and this carried over into television and early computer displays. Motion picture aspect ratio changed much more quickly to a wider screen, which meant that when movies were shown on TV they had to be cropped or the image manipulated in other ways to fit the TV screen.

As display technology improved, TV and monitor manufacturers began to move toward widescreen displays as well. Originally «widescreen» referred to anything wider than the common 4:3 display, but it quickly came to mean a 16:10 ratio and later 16:9. Nowadays, nearly all computer monitors and TVs are only available in widescreen, and TV broadcasts and web pages have adapted to match.

Until 2010, 16:10 was the most popular aspect ratio for widescreen computer displays. But with the rise in popularity of high definition televisions, which were using high definition resolutions such as 720p and 1080p and made this terms synonyms with high-definition, 16:9 has become the high-definition standard aspect ratio.Today, finding 16:10 displays is almost impossible.

Depending on the aspect ratio of your display, you are able to use only resolutions that are specific to its width and height. Some of the most common resolutions that can be used for each aspect ratio are the following:

  • 4:3 aspect ratio resolutions: 640×480, 800×600, 960×720, 1024×768, 1280×960, 1400×1050, 1440×1080 , 1600×1200, 1856×1392, 1920×1440, and 2048×1536.
  • 16:10 aspect ratio resolutions: – 1280×800, 1440×900, 1680×1050, 1920×1200 and 2560×1600.
  • 16:9 aspect ratio resolutions: 1024×576, 1152×648, 1280×720, 1366×768, 1600×900, 1920×1080, 2560×1440 and 3840×2160.
How does the size of the screen affect resolution?

Although a 4:3 TV’s display can be adjusted to show black bars at the top and bottom of the screen while a widescreen movie or show is being displayed, this doesn’t make sense with a monitor, so you’ll find that Windows will not even offer you the widescreen display as a choice. You can watch movies with black bars as if you were watching a TV screen, but this is done by your media player.

The most important thing is not the monitor size, but its ability to display the higher resolution images. The higher you set the resolution, the smaller the images on the screen will be, and there comes a point at which the text on the screen becomes so small it’s not readable. On a larger monitor it is possible to push the resolution very high indeed, but if that monitor’s pixel density is not up to par, you won’t get the maximum possible resolution before the image becomes unreadable. In many cases the monitor will not display anything at all, if you tell Windows to use a resolution the monitor cannot handle. In other words, don’t expect miracles out of a cheap monitor. When it comes to high-definition displays, you definitely get what you pay for.

Conclusion – It’s is all a confusing mess

If you are not very technical, it is very likely that you are confused by so many technicalities. Hopefully this article has managed to help in your understanding of the most important characteristics of a display: aspect ratio, resolutions or type. I won’t stop here however. In the next article, I’ll talk about how you can change your display resolution so it works best for you.

How to make the resolution 1920×1080 — detailed instructions

The screen resolution determines how much information is shown on the display. It is measured horizontally and vertically in pixels. At low values, such as 640×480, fewer elements will be displayed on the screen, but they will be larger. When the resolution is 1920×1080, the monitor displays more items, but they are smaller. The resolution modes for each display are different and depend on the graphics card, monitor size, and video driver.

How to make resolution 1920×1080

Note! Support for 4K and 8K displays is integrated into Windows 10.

By default, the system selects the best display settings for a computer based on its monitor.

Quality comparison of Full HD, 4K and 8K screen resolutions

Optionally, you can manually change the screen resolution to Full HD for each desktop.

Contents

    • Video — How to set the resolution to 1920×1080
  • How to change the resolution to Full HD
  • How to set the resolution to 1920×1080 if it is not in the screen settings
    • Video — How to set the screen resolution to 1920×1080 9002 7

Video — How to make resolution 1920×1080

How to change resolution to Full HD

Here’s how to change the resolution to Full HD for each individual desktop as well as all Windows 10 users.

Change the display resolution to 1920×1080

Note! Sometimes attempting to change the display quality of a picture can result in the tiles of applications pinned to the start menu being empty. If this happened to you, then restarting File Explorer should do the trick.

In general, the whole operation to change the screen resolution comes down to the following steps:

Step 1. To open the display settings follow step 1,2 or step 3:

  1. Open Settings (the gear in the Start menu).

    From the Start menu, open Settings or click on the gear icon

  2. Click/tap the System icon and go to step 2.

    Click on the «System» icon

    Go to the «Screen» tab

  3. Right-click on the desktop, and then in the menu that opens, find «Display Settings». Go to step 2 (see screenshot below).

    We right-click on the desktop, in the menu that opens we find «Display Options»

Step 2. If your PC has multiple displays, select the one from the list (for example: «2») whose resolution you want to change (see screenshot below).

Select the one from the list in which we want to change the resolution, if we have two displays

Note! If all your displays are not showing up, click on the «Detect» button. So Windows will try to find them.

Pressing the «Discover» button to search for other desktop screens

Step 3. If you are not sure which number a certain display has, click on the «Detect» button (in the screenshot below). This will cause the system to briefly display the number of each display. However, this feature only appears when multiple monitors are connected.

Click on the «Define» button

Step 4. Follow step 5 (recommended) or step 6 (custom) to change the screen resolution of the selected display.

Step 5. Select a screen resolution of 1920×1080 or Full HD.

  1. It should be marked as recommended in the corresponding menu (see screenshot below).
  2. If you are satisfied with the selected display mode, click/click Apply and go to step 7 (see screenshot below).

    In the «Resolution» option, select «1920×1080», click «Apply»

  3. You will have 15 seconds to save or discard changes before the system automatically reverts to the previous screen resolution. This is useful if you don’t want to see this dialog after making changes.

    Click «Save» or «Revert changes»

Step 6. Select the display mode and screen resolution (custom).

  1. Click/click on display adapter properties (see screenshot below).

    Click on the link «Properties of the graphics adapter»

    Note! Starting with Windows 10 build 17063, you need to click on the Graphics adapter properties text link to change the resolution of the selected display.

  2. On the Adapter tab, click the List All Modes button (see screenshot below).

    On the «Adapter» tab, click the «List of all modes» button

  3. Select the display mode you want to apply to the selected display, and then confirm.
  4. Click OK (see screenshot below).

    Select the resolution we need, click «OK»

  5. If the selected screen resolution (in our case it is 1920×1080) or display mode suits you, click «OK» and go to step 7 (see screenshot below).

    Click «Apply», then «OK»

  6. You will have 15 seconds to save or cancel your changes before the system automatically reverts to the previous screen resolution. This is useful if you don’t want to see this dialog after making changes.

    Click «Save» or «Revert changes»

Step 7. If you have multiple displays connected to your computer and you want to change the screen resolution for each of them, repeat step 4 above.

Select the one from the list in which we want to change the resolution, if we have two displays

Step 8. When you’re done, you can close Options if you like.

Read the detailed instructions on how to change the screen resolution for Windows 7 in the new article — «How to change the screen resolution in Windows 7».

How to set the resolution to 1920×1080 if it is not in the screen settings

  1. Go to the «Start» menu, open the «Control Panel».

    In the «Start» menu, open the «Control Panel»

  2. Click on the Hardware and Sound section.

    Click on the «Hardware and Sound» section

  3. Select the «NVIDIA Control Panel» item.

    Select the item «NVIDIA Control Panel»

  4. In the window that opens, click on the «Change resolution» item.

    Click on the item «Change resolution»

  5. Click on the «Create custom permission» button.

    Click on the «Create custom permission» button

  6. In the fields «Horizontal pixel» and «Vertical pixel», enter the values ​​1920×1080, respectively, click «Test», then confirm the action by clicking «Yes».

    In the fields «Horizontal Pixel» and «Vertical Pixel» enter 1920×1080, click «Test»

    Press «Yes»

  7. In the window you will see the created permission, click «OK», then «Apply».

    Press «OK»

    Click «Apply»

You have set the required permission 1920×1080 on your computer.

Note! The item for creating a permit may have a different name. It depends on the video card installed on your computer.

Video — How to set the screen resolution to 1920×1080

Did you like the article?
Save so as not to lose!

Recommended related articles

Changing the screen resolution in Windows

Windows 11 Windows 10 More. ..Less

If you want to change the size of what is displayed in Windows, there are two ways to do so.

If you have external displays connected to your computer, be sure to select which displays you want to change before you begin.

  1. Select Start > Settings > System > Display and browse section which displays displays.

  2. Select the display to be changed. After that, follow the instructions below.

Resize content on screen

  1. Scroll to section Scale and layout .

  2. Select Scale , and then select an option. As a rule, it is best to choose one of the ones marked as (Recommended).

«Change screen resolution»

  1. Stay on the screen or open the parameters display .
    Open display options

  3. Select Start > Settings > System > Display , and look at section Change display layout .

  4. Select the display to be changed. After that, follow the instructions below.

Resize content on screen

  1. Stay on screen or open display parameters .
    Open display options

  2. Then in section Change the size of text, applications and other elements select one of the options. As a rule, it is best to choose one of the ones marked as (Recommended).

«Change screen resolution»

  1. Stay on the screen or open the parameters display .
    Open display options

  2. Scroll down to Scale and layout .