The way a website appears can vary from one screen to another. This seems obvious when you consider how different a responsive website can look between a desktop computer screen and a mobile phone screen. However, there can also be differences between different desktop computer screens. This article explains how screen resolution may cause a website (from any provider) to appear differently on different screens/devices.
Screen resolution is defined using a measurement called pixels. Pixels are tiny squares of light that change colour to collectively present the text and images you see on a screen. The total number of pixels a screen can show horizontally and vertically is its screen resolution. For example, a screen that has a resolution of 1920 x 1080 pixels can display 1,080 pixels vertically and 1,920 pixels horizontally. This is a popular resolution that's also known as 1080p or Full HD. Modern Mac computers will typically have a much higher screen resolution still, such as 5120 x 2880 pixels, known as 5K.
There are statistics available that show the percentage of people using different resolution screens. For example, see these screen statistics for New Zealand. A common trap for designers is to design a web page offline (eg as an image in Photoshop) without considering how it will appear within different screen aspect ratios or within a website visitor's browser if their screen is a lower or higher resolution than the designer happened to be using when they created the design.
The relative size of common screen resolutions are visually shown here:
Modern screens typically have more pixels than older screens, and therefore have images that appear sharper than older screens. There are many different screen resolutions. The way the same website appears at different screen resolutions is illustrated by the examples below (note how the relative size of the white logo and the menu items change between these views).
You can see by the examples above that the amount of content that can display on a screen increases as the resolution increases. All the extra text and images on the higher resolution screens will still appear sharp and readable to the person with that higher resolution screen.
Although computer screens are normally set to their maximum resolution so they display the sharpest image possible, you can change the resolution through your computer settings if you wish. Some people do this accidentally and then wonder why their screen seems to be 'zoomed in' and display extra large (and therefore less) content on their screen. Some people with poor eyesight change their resolution deliberately to make their content larger and easier to read.
NOTE: This article refers to screen resolution, not browser zoom settings. Some people may accidentally change the zoom settings in their internet browser (eg Chrome) and then wonder why websites appear bigger and show less content than they expect. For instructions on how to change your browser zoom settings for Chrome please click here.
There are some online tools that can tell you what your screen resolution is. For example, http://whatismyscreenresolution.net
If you wish to change your screen resolution, you can check your settings and change it as long as your screen hardware itself supports a different setting.
How to change your screen resolution settings (Windows)
Use your mouse to right-click on any empty area on your computer desktop home screen, then click the menu item Display settings. A pop-up will show your current settings with a drop-down list under the heading Display resolution. If it says (Recommended) next to a resolution, this identifies the native resolution of your screen, which is likely to look the best for you.
To change your screen resolution simply click the down arrow for this drop-down list and select a different resolution. Windows will change your resolution temporarily and you must click Keep changes or it will revert back to the previous resolution automatically after 15 seconds.
NOTE: If your computer is plugged into a second external monitor screen that has a lower resolution capability than your main screen, this may force your main screen resolution to become reduced to the same lower resolution as the second monitor.
How to change your screen resolution settings (Mac)
Click the Apple icon at the top left-hand corner of your screen, then click About This Mac. Click the Displays tab at the top of the pop-up that appears to see the size and resolution of your screen. You can change your screen resolution by clicking on the Displays Preferences... button at the bottom right-hand corner, then select Scaled for the Resolution setting and choose your new resolution.
