{"id":241350,"date":"2016-05-09T07:11:49","date_gmt":"2016-05-09T14:11:49","guid":{"rendered":"http:\/\/css-tricks.com\/?p=241350"},"modified":"2017-04-10T17:57:50","modified_gmt":"2017-04-11T00:57:50","slug":"optimizing-large-scale-displays","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/optimizing-large-scale-displays\/","title":{"rendered":"Optimizing for Large-Scale Displays"},"content":{"rendered":"
The following is a guest post by Jon Yablonski<\/a>. Jon told me he recently worked on a project where there was a lot of emphasis placed on giant<\/strong> screens. Jon is going to show us that just like RWD work of any kind, it requires planning. Extra media queries are useful for targeting the huge displays, and typography can take you far.<\/em><\/p>\n <\/p>\n With the rise of ultra high-definition displays and devices that enable browsing the web via smart TVs, the internet is increasingly being accessed and viewed on screens that dwarf traditional desktop displays. Most websites fall short of being optimized for this scale. But if you’re building responsive websites, it\u2019s likely that the tools you need to scale your content are already in place. In this article, we\u2019ll take a look at the challenges and techniques for optimizing your site on large-scale displays.<\/p>\n First, let\u2019s identify what exactly constitutes an large-scale display. According to W3Counter<\/a>, screens with a device width of 1366×768 pixels are the most common large device resolution. The next common large resolution is 1920×1080 pixels. These values come primarily from desktop monitors, and most websites will adapt to these screens without much problem.<\/p>\n Traveling up the scale, the next most common device width lands at 2560 pixels wide. This width is what you will find with most high-definition desktop displays that start with 27\u201d monitors. It is also the range at which most websites begin to struggle because of excess screen real-estate.<\/p>\nIdentifying Large-Scale Displays<\/h3>\n