Skip to Content
Main Content

Hiker Looking Out Over Mountains

3 Minute Read | November 14, 2022

Should I Consider Large-Scale Displays When Redesigning My Website?

What Is a Large-Scale Display?

Common large-scale screen widths are 1360, 1440, 1536, and 1920 pixels. Modern web design typically accounts for all these sizes.

Recently, though, we’ve seen even wider screens, especially 2560px, more and more often. These larger screen sizes are sometimes referred to as 4K, or Ultra-High Definition.

Who Is Using Large-Scale Displays?

Browser stats for the United States show screen sizes wider than 1920px are still under 3% of desktop resolutions in use, and global stats are even lower. But smart TVs and UHD screens are growing in popularity, and people are browsing the web on them. Expect that to become a trend.

Desktop Screen Resolution Stats for the US, showing 1920 pixel-wide screens at almost 22%
 

How Do People Use Large-Scale Displays?

Monitors with large screens and high resolutions are great for maximizing productivity. They offer more screen real estate for multitasking. Users can spread out windows and applications for simultaneous use. All wide-screen monitor users aren’t looking at your website in full-screen.

That’s a good thing!

Most websites aren’t optimized for full-screen displays. Many are fixed at a specific maximum width in the middle of the screen. Some stretch content in unnatural ways to fill the expanse, which creates difficult-to-read text area widths and blurry images or images that don’t scale to fit. On high-resolution monitors, text can become too small to read or content might be packed too densely.

Screen grab of H&R Block's website home page showing distortion of spacing due to viewing on a large-scale display.

Scaling can become problematic on large-scale and 4K displays when sites aren’t designed specifically for them. In this example from H&R Block, the site stretches to fit the screen width, but the text doesn't adapt, leaving large gaps of white space between elements.

Image of a Wikipedia page that shows how content is constrained in the center with white space on either side when viewed on a large-scale display.

When not designed specifically for large-scale or high-definition 4K displays, website content is often constrained to a center column with lots of white space on either side, as in this example from www.wikipedia.com.

Should I Redesign My Website for 4K Monitors?

Will users benefit from a display maximized for large screens? Ask yourself these questions:

  • Do your site visitors use large-scale devices? Google Analytics can show you the screen sizes of your current site visitors.
  • Do you have adequate budget for design, development, and testing to optimize for large-scale displays? Rule of thumb: Add 10% to the project cost, but costs will vary depending on project scope.
  • Do you have scalable graphics, images, and media assets to support large-scale design? Can your team manage the creation of additional sizes, assets, and optimization work going forward?

If the benefit is clear, proceed with thoughtful planning. Designers and developers can create unique designs for large-scale displays that deliver optimal user experience on very large screens. Include a large-scale comp or prototype from the start, and use it for testing designs throughout development.

On mobile devices, site developers tend to stack content and add columns of content as screens grow to large tablet and desktop sizes. As screens get extra large, designers must choose to stretch content or add more columns, and that choice is never simple. It can turn on the specifics of the displayed content and on the design and branding.

Options for typography are also limitless as screen sizes grow. Rather than add more columns, developers can choose to upscale content so that it fits the space proportionally, as done for smaller screens.

Final Thoughts

Adoption of 4K displays are on the rise. If you’re planning for the future and have the necessary budget, it’s smart to include large-screen layouts in your design and development. However, not all organizations have the resources to design for large-scale displays today. For now, that’s OK. But, in a few years you'll definitely want to budget to accommodate them.

If you’re looking to redesign your website and have questions about designing for large-scale displays or need design assistance in general, our team is here to help! Reach out to us anytime.

Authored By

Sydney Shimko

Sydney Shimko

Front End Development Practice Lead

hand-drawn owl

Get Expert Tips

3997513/Blog/Should-I-Consider-Large-Scale-Displays-When-Redesigning-My-Website3
<h2>What Is a Large-Scale Display?</h2> <p>Common large-scale screen widths are 1360, 1440, 1536, and 1920 pixels. Modern web design typically accounts for all these sizes.</p> <p>Recently, though, we&rsquo;ve seen even wider screens, especially 2560px, more and more often. These larger screen sizes are sometimes referred to as 4K, or Ultra-High Definition.</p> <h2>Who Is Using Large-Scale Displays?</h2> <p>Browser stats for the United States show screen sizes wider than 1920px are&nbsp;still under 3% of desktop resolutions in use, and global stats are even lower. But smart TVs and UHD screens are growing in popularity, and people are browsing the web on them. Expect that to become a trend.</p> <p><img alt="Desktop Screen Resolution Stats for the US, showing 1920 pixel-wide screens at almost 22%" loading="lazy" src="/Northwoods-2020/Blogs/StatCounter-resolution-US-monthly-202109-202209-bar-1.png" /><br /> &nbsp;</p> <h2>How Do People Use Large-Scale Displays?</h2> <p>Monitors with large screens and high resolutions are great for maximizing productivity. They offer more screen real estate for multitasking. Users can spread out windows and applications for simultaneous use. All wide-screen monitor users aren&rsquo;t looking at your website in full-screen.</p> <p>That&rsquo;s a good thing!</p> <p>Most websites aren&rsquo;t optimized for full-screen displays. Many are fixed at a specific maximum width in the middle of the screen. Some stretch content in unnatural ways to fill the expanse, which creates difficult-to-read text area widths and blurry images or images that don&rsquo;t scale to fit. On high-resolution monitors, text can become too small to read or content might be packed too densely.</p> <p class="border"><img alt="Screen grab of H&amp;R Block's website home page showing distortion of spacing due to viewing on a large-scale display." loading="lazy" src="/Northwoods-2020/Blogs/4K-1.jpg?Large" /></p> <p class="caption">Scaling can become problematic on large-scale and 4K displays when sites aren&rsquo;t designed specifically for them. In this example from H&amp;R Block, the site stretches to fit the screen width, but the text doesn&#39;t adapt, leaving large gaps of white space between elements.</p> <p class="border"><img alt="Image of a Wikipedia page that shows how content is constrained in the center with white space on either side when viewed on a large-scale display." loading="lazy" src="/Northwoods-2020/Blogs/4K-2.jpg?Large" /></p> <p class="caption">When not designed specifically for large-scale or high-definition 4K displays, website content is often constrained to a center column with lots of white space on either side, as in this example from <a href="http://www.wikipedia.com">www.wikipedia.com</a>.</p> <h2>Should I Redesign My Website for 4K Monitors?</h2> <p>Will users benefit from a display maximized for large screens? Ask yourself these questions:</p> <ul> <li><strong>Do your site visitors use large-scale devices?</strong> Google Analytics can show you the screen sizes of your current site visitors.</li> <li><strong>Do you have adequate budget for design, development, and testing to optimize for large-scale displays?</strong> Rule of thumb: Add 10% to the project cost, but costs will vary depending on project scope.</li> <li><strong>Do you have scalable graphics, images, and media assets to support large-scale design?</strong> Can your team manage the creation of additional sizes, assets, and optimization work going forward?</li> </ul> <p>If the benefit is clear, proceed with thoughtful planning. Designers and developers can create unique designs for large-scale displays that deliver optimal user experience on very large screens. Include a large-scale comp or prototype from the start, and use it for testing designs throughout development.</p> <p>On mobile devices, site developers tend to stack content and add columns of content as screens grow to large tablet and desktop sizes. As screens get extra large, designers must choose to stretch content or add more columns, and that choice is never simple. It can turn on the specifics of the displayed content and on the design and branding.</p> <p>Options for typography are also limitless as screen sizes grow. Rather than add more columns, developers can choose to upscale content so that it fits the space proportionally, as done for smaller screens.</p> <h2>Final Thoughts</h2> <p>Adoption of 4K displays are on the rise. If you&rsquo;re planning for the future and have the necessary budget, it&rsquo;s smart to include large-screen layouts in your design and development. However, not all organizations have the resources to design for large-scale displays today. For now, that&rsquo;s OK. But, in a few years you&#39;ll definitely want to budget to accommodate them.</p> <p><em>If you&rsquo;re looking to redesign your website and have questions about designing for large-scale displays or need design assistance in general, our team is here to help! <a href="/Contact-Us" linktype="2" target="_self">Reach out to us</a> anytime.</em></p>
/Northwoods-2020/Hero-Images/Hiker-Looking-Out-Over-Mountains.pngHiker Looking Out Over MountainsAdoption of #4K displays are on the rise. If you’re planning for the future and have the necessary budget, it’s smart to include large-screen layouts in your #websitedesign and development. https://nwsdigital.me/3E8hzHs @northwoods #websitedevelopment #websiteredesignSydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgSydney Shimkohttps://ctt.ac/cAb_X<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "23630176", formId: "40c5bbae-05a2-42ea-94dd-1662181fd56e" });</script>/Northwoods-2020/Blogs/Social-Media-Cards/Should-I-Consider-Large-Scale-Displays-When-Redesigning-My-Website---Blog.jpg?LargeShould I Consider Large-Scale Displays When Redesigning My Website?2022-11-14T00:00:00/Northwoods-2020/Blogs/Social-Media-Cards/Should-I-Consider-Large-Scale-Displays-When-Redesigning-My-Website---Blog.jpgWebsites that aren't optimized for large-scale displays can render text in a way that's too small to read, content that's too densely packed, or images that distort to fill the expanse. But does that mean you should immediately optimize your website for larger displays?362219/People/Sydney-ShimkoSydneyShimkoFront End Development Practice Lead<p>Sydney is a skilled UX developer who seamlessly blends the aesthetics of thoughtful design with responsive, semantic code. With a passion for delivering top-notch solutions, she negotiates constant change in the field of front end development and ensures functionality across an ever-growing variety of devices and screen sizes. Sydney is also Northwoods&rsquo; go-to web accessibility expert, and she strives to deliver creative, efficient solutions that improve usability for everyone. When not crafting exceptional websites, Sydney is an avid mountain biker, road cyclist, and coffee enthusiast and serves as co-head coach to the Shorewood Mountain Bike Team.&nbsp;</p>Sydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgSydney ShimkoAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesUX & Website DesignUX & Website StrategyWebsite DevelopmentPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesNWS DigitalSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02024-02-20T12:01:50.88000