How Monitor Size Impacts Website Viewing Experience

The size of a user's monitor can significantly impact their browsing experience. With the growing popularity of laptops, tablets, and smartphones, web designers face the challenge of creating websites that look good and function well on a variety of screen sizes and resolutions. While some websites use fixed-width layouts, responsive web design (RWD) is widely recommended, including by Google, as it offers a more fluid and adaptable approach. RWD employs media queries and dynamic serving to ensure websites respond and resize according to the device's viewport, providing a positive user experience across different monitor sizes.

Responsive web design

The key to responsive web design is flexibility. This means that the design should be able to adjust to different screen sizes, resolutions, and devices, such as desktop computers, laptops, tablets, and smartphones. It also involves using fluid grids, where the width of the website is not fixed but rather adjusts to the size of the browser window.

Another important aspect of responsive web design is the use of media queries. Media queries allow designers to run a series of tests, such as the user's screen size or resolution, and apply CSS selectively to style the page accordingly. This enables designers to create different layouts for different screen sizes, ensuring that the website is optimised for all devices.

In addition, responsive web design considers the user's behaviour and environment. For example, a user accessing a website on their iPad may have a VPN, and the website should not block their access.

Screen resolution vs display resolution

The terms "screen resolution" and "display resolution" are often used interchangeably, but they refer to slightly different things.

Screen Resolution

Screen resolution refers to the number of pixels a computer monitor can display, both horizontally and vertically. For example, a screen with a resolution of 1920x1080 can display 1,920 pixels horizontally and 1,080 pixels vertically. This is also known as full HD or 1080p.

The resolution of a screen is important because it affects the sharpness and clarity of an image. A higher resolution means a higher number of pixels, which results in a sharper and clearer image. Conversely, a lower resolution means fewer pixels, leading to a blurry or pixelated image.

Display Resolution

Display resolution, on the other hand, is the size your device behaves at. This is often different from the screen resolution, especially on mobile devices. For example, the iPhone XR has a screen resolution of 828x1792 but behaves as if it is only 375px wide. This is because a mobile device is held quite close to the user, so smaller pixels are needed to get a clear image, while text needs to be larger to be easily readable.

Factors Affecting Screen and Display Resolution

The physical size of a screen also affects the image quality. An image displayed on a smaller monitor will appear sharper compared to the same image on a larger monitor with the same resolution. This is because the pixels are spread over a larger number of inches, resulting in a loss of clarity and sharpness. Therefore, larger screens need higher resolutions to maintain image quality.

The pixel density, expressed in pixels per inch (PPI), is another important factor. A higher PPI means a sharper image, as it indicates a higher number of pixels in every inch. A lower PPI results in a blurrier image.

When choosing a monitor, it is important to consider not only the screen resolution but also the physical size of the monitor, the pixel density, and how it will be used. For example, a high-resolution 4K monitor offers amazing image quality but comes with a high price tag. On the other hand, a 1920 x 1080 resolution display is perfect for tasks that aren't visually heavy, like typing documents.

Fixed-width layout

Advantages of fixed-width design:

• The layout remains the same for all users, which is ideal for companies wanting to present a consistent corporate image.
• Fixed-width pages and columns provide better control over line lengths, preventing them from becoming too long when viewed on larger monitors.

Disadvantages of fixed-width design:

• If the browser window is smaller than the page, parts of the content may be cut off and require horizontal scrolling to view. This is a hindrance to ease of use and should be avoided.
• Elements may shift unpredictably if the browser's font size is different from the one used in the design process.
• Trying to exert absolute control over the display of a web page goes against the nature of the web as a medium.

• It offers a more consistent user experience and is faster and easier to develop than variable-width sites.
• Designers can have more control over the presentation, with hard values for widths, line lengths, and typography sizes.
• It is ultimately easier to maintain than variable-width sites.
• It suits websites that are entirely textual, like applications and administration panels.

However, fixed-width designs can fail in edge cases, such as when users have lower-resolution screens than what the site was designed for. Additionally, long lines of text can be difficult to read, and media like images or Flash objects are challenging to scale in fixed-width designs.

• Specify a min-width and max-width in 'em' units so that the page is responsive to liquid layout but doesn't get stretched too far.
• Use a combination of fixed and fluid layouts, known as Responsive Web Design (RWD), to provide the best of both worlds.
• Use percentages instead of pixels to define the width, allowing the site to "stretch" across the whole screen.

Liquid layout

In a liquid layout, the majority of components have percentage widths, meaning the layout adjusts to the user's screen resolution. This can be more user-friendly, as it adapts to the user's setup, and ensures consistency across different devices. It also eliminates the need for horizontal scroll bars on smaller screens and reduces the amount of code needed, improving loading times.

However, liquid layouts can be challenging to implement, particularly when dealing with complex layouts and large amounts of content. Designers may have less control over what the user sees, and images, videos, and other content may need to be set at multiple widths to accommodate different screen resolutions.

Liquid design is particularly useful for websites with large audiences, as it ensures compatibility with various screen sizes. It is also beneficial for e-commerce websites, as it ensures products and services are presented optimally, improving the shopping experience.

Overall, liquid layout is a flexible and adaptable approach that enhances the user experience by ensuring websites look good and function well on all devices.

Adaptive layout

Adaptive web design is a website structure in which different website code is tailored for different user groups. This can be achieved through a single URL (Dynamic Serving) or with mobile-specific URLs. Server-side device detection is used to determine what should and shouldn't be sent to the requesting device.

Adaptive design works by detecting the screen size and loading the appropriate layout. This is in contrast to responsive design, which uses CSS media queries to fluidly adjust to different screen sizes.

Adaptive design is useful for retrofitting an existing site to make it more mobile-friendly. It also gives designers more control over the content and layout. However, it requires more upfront work and ongoing maintenance.

• Amazon
• USA Today
• InterContinental Hotels Group
• Turkish Airlines
• IKEA
• AccuWeather
• Adidas
• Dropbox
• Medium
• Slack
• Shopify

Frequently asked questions