Displays May Be Ultra-Wide, But That Doesn’t Mean Your Web Page Should Be | Martech Zone

Chances are, you’ve likely visited a website whose design incorporates the full width of the browser. You may have noticed the content wasn’t easy to digest as your eyes scanned the full width of the page. It’s actually a well-known readability and user experience (UX) issue.

Research in typography and cognitive psychology suggests that shorter line lengths make reading easier and more comfortable. When lines of text are too long, it becomes more challenging for the eyes to track from the end of one line to the beginning of the next. This can lead to increased eye strain and difficulty in absorbing the content.

Column Usage History

The science of column usage is fascinating and rooted in practicality and readability.

  1. Historical Perspective: The tradition of narrow columns in newspapers can be traced back to the early days of print media. In the early 17th century, when newspapers first emerged, they were often printed using a single, broadsheet format. However, as newspapers evolved, the layout changed to include multiple columns. This change was driven in part by technological constraints and economic factors. The printing presses used in those times were limited in their ability to print across wide spaces without losing quality, and narrower columns meant more text could fit on a page, making the newspaper more cost-effective to produce.
  2. Readability and Eye Movement: From a scientific perspective, the width of newspaper columns is closely tied to how our eyes and brains process written information. The optimal line length for text readability is typically around 50-60 characters per line.
  3. Impact of Column Width on Reading Speed and Comprehension: Studies have shown that narrow column widths can enhance reading speed and comprehension. This is because shorter lines allow quicker eye movement and easier text scanning. In contrast, wide columns can slow reading as the reader’s eye has to move more significantly from line to line.
  4. Adaptation to Modern Design: While the traditional newspaper format has remained the same, digital media have had to adapt to different screen sizes and reading habits. Online newspapers and e-readers often offer adjustable column widths to accommodate personal preferences and different device sizes.

The principles derived from newspaper column design have also influenced web design. Websites often use narrow text columns or grid layouts for easier reading, reflecting the centuries-old wisdom of newspaper layout design.

Browser Widths and Screen Resolutions

Statistically, the most common browser widths and screen resolutions vary depending on the device type. Here is a table displaying the most common resolutions and their market share percentages for mobile, tablet, and desktop devices:

Mobile Tablet Desktop
360×800 (11.65%) 768×1024 (26.96%) 1920×1080 (22.7%)
390×844 (7.26%) 810×1080 (9.68%) 1366×768 (14.47%)
414×896 (5.66%) 1280×800 (6.76%) 1536×864 (10.41%)
393×873 (5.16%) 800×1180 (5.04%) 1440×900 (6.61%)
328×926 (3.84%) 962×601 (2.99%) 1600×900 (3.8%)

These statistics should significantly influence webpage design. Given the diversity of screen resolutions, a one-size-fits-all approach is not feasible. Businesses must invest in mobile-responsive design, considering the significant share of traffic generated through mobile devices (55.67%) and desktops (42.4%).

Designing for ultra-wide screens might not be the most effective approach as it can lead to a difficult reading experience due to the longer horizontal span of text. Designers typically use one standard desktop and mobile resolution to scale designs, ensuring a smooth user experience across devices. The choice between responsive and mobile-first web design depends on the target audience and their preferred devices.

Ultra-wide Browser Design Best Practices

Designing user interfaces (UI) and ensuring a positive user experience (UX) for ultra-wide displays involves several best practices. These practices aim to optimize the use of space, enhance readability, and ensure ease of navigation. Here are some key guidelines:

  1. Responsive Design: Ensure your website or application is responsive, adapting fluidly to different screen sizes. This is crucial for ultra-wide displays where the aspect ratio differs significantly from standard screens.
  2. Controlled Column Widths: Limit the maximum width of text columns for text-heavy content. Wide columns can make reading difficult, as the eye has to travel a long distance from the end of one line to the beginning of the next.

A good rule of thumb is maintaining column widths accommodating 60-75 characters per line.

  1. Use of Grids: Implement a grid system to organize content effectively. Grids help create a balanced layout and can be useful in managing whitespace on ultra-wide screens.
  2. Zoning: Divide the screen into distinct zones for different types of content or interaction. This helps users to navigate the interface more intuitively and reduces the cognitive load.
  3. Sidebar Navigation: Consider using sidebars for navigation and additional information. This utilizes the extra horizontal space effectively without affecting the main content area.
  4. Hierarchical Layout: Employ a clear visual hierarchy to guide the user’s eye through the content. This is especially important on larger screens with a higher risk of disorientation.
  5. Consistent Alignment: Maintain alignment consistency across the interface. Misaligned elements can be more noticeable and distracting on wider screens.
  6. Focused Content Areas: Create focused areas for important content to draw user attention. This can be achieved using contrasting colors, size variations, or graphical elements.
  7. Avoid Horizontal Scrolling: Horizontal scrolling can be disorienting and should be avoided. Design layouts that accommodate content vertically, even on wider screens.
  8. Optimize for Readability: Ensure text size, line spacing, and font choice are optimized. Too small or cramped text can be challenging to read on a large display.
  9. Multitasking Facilitation: Since ultra-wide screens offer more space, design interfaces that facilitate multitasking, like multiple open windows or panels.
  10. Accessibility: Keep accessibility in mind, ensuring that all users, regardless of their device, can access and use your site effectively.
  11. Testing Across Devices: Test your design on various devices, including ultra-wide monitors, to ensure it scales and performs well across all possible scenarios.
  12. Use High-Resolution Images: Utilize high-resolution images that don’t pixelate on larger screens, maintaining the visual quality of your interface.
  13. Balanced Whitespace: Use whitespace judiciously to create a layout that doesn’t feel crowded yet effectively utilizes the expansive screen real estate.

Remember, the key to an effective UI/UX design for ultra-wide displays is not just about scaling up elements to fill space, but rather about thoughtful organization and adaptation of content to enhance user engagement and experience.

For some average font sizes, the width of 75 characters (including the space between characters) in pixels would be approximately as follows:

  • 10pt font: 375.0 pixels
  • 12pt font: 450.0 pixels
  • 14pt font: 525.0 pixels
  • 16pt font: 600.0 pixels
  • 18pt font: 675.0 pixels
  • 20pt font: 750.0 pixels

These calculations assume that the width of a character in an average font is roughly half its height, including a space between characters. So… a 1920px wide screen may require being broken into multiple columns to maximize readability.

The decision on which website dimensions to use should be based on the target audience’s demographics, including age, gender, location, and income, as these can dictate the devices they use.

Google Analytics 4: Screen Resolutions

If you’d like to review your visitors’ subsequent behavior, GA4 can provide this in Reports > User > Tech > Overview.

Be sure to filter your data for weekends or after-hours, events, and conversions… you may find insight and opportunities to better present your content based on when and why visitors interact based on their screen resolution.

GA4 Screen Resolution by User


Source: martech.zone