Skyline Grid 2.0b main wallpaper
Skyline Grid 2.0b main header

The issue with responsive websites on UHD and 4K displays

For the longest time, mobile displays, especially smartphones and small tablets, have been under the spotlight, as web design trends have finally shifted towards supporting a better mobile browsing experience on smaller touchscreens. With that said, the home entertainment industry is about to make the case for yet another wave of potential changes we might need to take into consideration, when hiring a professional web developer to build a responsive website for a business.

How does your website display on a 4K monitor?

During Summer 2015, Apple has released the iMac 5K, as well as its entry level 4K iterations, whose display resolution is as much as four-five times the typical resolution most users are accustomed to when browsing the web. To most Apple users this comes as no surprise, as the Retina display is a technology that has been supporting higher than normal resolutions for a while, however, the way Apple has handled it, was to create a way to squeeze four times the pixels into the same resolution as an average laptop, instead of blowing up the actual resolution, which is why web browsing is not affected on Retina displays. The end result is sharper images, smoother video playback, and better color definition, with the added bonus of being able to implement cinema quality video formats.

Home entertainment on smart TVs, has also contributed in making the case for higher resolution of computer displays, as consumers demand increasingly sharper and higher resolutions when streaming movies or TV shows, particularly in cord-cutter territory.

While on tablets and smartphones, high resolution in web browsing is barely noticeable, due to the way mobile chips handle display scaling, on desktop displays things are a little different.

On a 4K display, for instance, the native resolution may fall anywhere between 3000x2000 and 3500x2500 pixels. This is not a big deal when watching movies, or playing games, if anything it makes it for a stunning experience, as long as you have the right GPU and a decent amount of memory.

Even the desktop UI elements, like the Windows taskbar, or the Apple menu, are designed to scale accordingly, to ensure that no matter how high the resolution is set, the operating system's UI elements scale accordingly to provide a comfortable user experience.

Web browsing, unfortunately, is an entirely different animal, which is why web development calls for responsive practices according to screen size and pixel density, to ensure a consistent experience across different devices.

In simple terms, there is no such thing as automatic display scaling for websites, aside from the browser's built-in zoom function, which, as the name suggests, has nothing to do with scaling, as much as it is merely a method to blow up a webpage to see it better, which, most of the times, is just a terrible idea.

Windows PC users who have recently upgraded to a 4K or 5K display, as rare as they may be, are likely to hit the roof, the first time they visit their favorite websites. The first thing that pops, is how much space is left on each side of a fixed-width website, which is essentially a website whose width remains the same past a certain display resolution.

For instance, opening a website which has a maximum width of 1024 pixels, on a 4K or 5K display, will make said website look ridiculously thin, with a ton of space on the left and right of the content, in spite of the fact that 1024 pixels is a widely accepted resolution recommended for most desktop devices.

The fact is that as more 4K and 5K displays reach regular consumers, the higher the chances will be, that the web browsing experience will be just as awkward as it used to be on a non-mobile responsive website displayed on the first high-resolution smartphone displays.

Modern websites need to take into consideration future trends, including larger screens, and this does not just entail the width of a website, or the height of headers, but everything else as well, including font size, dimensions of photos and illustrations, graphic elements like Canvas animations and web apps. No matter the screen size, users must be able to read the content, and experience it just as clearly as they would on mobile phones, or regular desktop screens.

Example of an HD-responsive website

While “HD-responsive” may not be a buzzword yet, the practice of making a website responsive towards giant screens, is just as important as it is for smaller screens. This is why the layout and interface size of websites built with Skyline Grid are built to scale up, just as well as they scale down.

If you are reading this on a ultra-high-definition display, like a 4K or 5K monitor, you may already notice how a website like SkylineGrid.com is designed to adjust proportionally on bigger screens, instead of turning into a horribly thin strip of content that is way too small to read.

Here is a fun experiment that even the less tech savvy user can do to better understand what’s going on:

If you are using Google Chrome, right-click anywhere within this web page, and select “Inspect element”. This will split the browser in two views, one it the regular website you are on now, and the other is a code view, showing the HTML parsed from this website by your browser.

If the split view is horizontal, you’ll need to change it to vertical, by clicking on the three dots next to the X. This will open up a menu labeled “Dock Side”. By clicking the little icon in the middle, with the horizontal split view image, the dock will change to a vertical position.

Once that’s done, simply drag the dividing edge between this webpage and the code view, and watch as the site resizes automatically according to the size of the browser window.

On a high-definition display, this behavior can be observed changing beyond regular display sizes, to accommodate 4K, 5K or even higher resolutions.

For more information on responsive web design for high-resolution displays, and how to ensure that your website offers that experience to UHD users as well, send us an email or contact Skyline Grid by phone, at (408)307-9344.

Author:

administrator

Excerpt:

How to solve the issue of responsive websites on high resolution desktop displays,

Category:

editorial

Created:

6th December, 2015

Published:

Post roll

• You hired a great developer: here is what you need to do, to get your moneys worth.

• Web design shouldnt be a product: it should be a service

• Taking online orders? Here is a crash course on the technology you need

• Three reasons you really want to build your own website, but probably shouldnt

• E-commerce: how much does it cost to sell online?

• Seven Tips on Writing Content for Business

• A perfect example of click bait in content marketing: Apple Pay

• This is why some payment processors are more expensive than others

• Content publishing and public opinion

• Websites pushing unwanted software are finally on Googles Blacklist

• This is why some people want you to believe that the World (Wide Web) is coming to an end.

• Does your business offer Robots on Demand?

• This is why i am a night-owl web developer

• Next Google Search update: Is your website expendable?

• Web hosting gone wrong? Here is three tell-tale signs.

• Three major advantages of built-to-order websites

• The issue with responsive websites on UHD and 4K displays

• Bye Bye MD5! Welcome Portable PHP Password Hashing!

User comments

Average rating: 0 out of 5

Login or create a free account to comment