So Your Site Supports Mobile, But Does it Support Hi-Res Monitors?

May 1st, 2016

There's no doubt the world of web publishing has been heavily focused on supporting mobile in recent times, and it's mainly due to the demands of tech giants themselves, including Google and Facebook. But what about hi-resolution desktop and laptops monitors? It seems the world has been so focused on meeting the demands for a proper mobile experience by the tech elite, many have failed to meet the demands of users as a whole. While more and more publishers are turning their attention to supporting the mobile world, many have failed to properly add support for hi-res monitors, for which their adoption is now becoming the norm. Here we're going to talk about why it's bad for publishers to get forget about the desktop user, and how the technologies that surround hi-res monitors have changed, and how publishers can work to better support them.

The Web's Ever Growing Desktop Audience:

For starters, despite the cries of those tech giants that mobile is the future, the desktop and laptop experience is actually far from dead! In fact, their use is only increasing, thanks to die-hard console and PC gamers, as well as the adoption of smart T.V's, where it's become the norm for cable viewers to traverse the web in between their favorite shows. Without a doubt, the online gaming audience that exists on the web today has now eclipsed the quarter million mark, and these numbers don't reflect mobile users at all! Steam, the predominantly desktop gaming platform is among the largest with a user base that has now eclipsed the 125 million mark, and continues to grow at an exponential rate. Even XBOX Live alone has over 55 million members, and guess what, they're all on hi-res monitors, and virtually all of them surf the web from the console's integrated Bing browser.

What's even more alarming is the fact that the average desktop and laptop monitors are becoming more and more and more hi-res every day. A decade ago laptops traditionally had a resolution of 1024x768, which was a standard for the time. Likewise, desktop monitors typically had a 4:3 aspect ratio, and 1152x864 resolutions. Coming 2016, and the present and widely accepted standard resolution for laptop monitors fall between 1366x768 and 1600x1050 pixels. High end laptops now ship with a standard resolution of 1920x1080px. While the laptop monitor have clearly evolved, the desktop monitor has now eclipsed the 4K mark (4,096x2,160px). Monitors with a resolution this high have pixels so small you'd need a magnifying or a telescope to view a single pixel with the naked eye!

The challenge these devices bring are the fact that most websites don't scale proportionately with these hi-res devices. The typical website displayed at a resolution of 1920x1080 either displays content in a bloated format, where just a few elements fill the entire screen, or they don't scale elements to fill the empty space. Another problem lies in the sizing of fonts, which typically appear as tiny letters on larger and higher resolution monitors, making it difficult for people with visual impairments to read properly. In fact, as I stated in a another article last year, the number one complaint I received during my time as a tech support specialist was the fact the end users couldn't read the fonts on the screen!

Let's take a look at CNET:

This image was taken at 1920x1080 resolution. Now, notice the menu at the top of the screen properly rescales to fill the entire screen, although the elements don't appear bloated, and the fonts have been rescaled to a large enough size they're easily readable, even by those with visual impairments. By the way, you can enlarge any of these photos by simply clicking them and they will open in full size in a new tab.

a hi-res image of CNET's user interface at a resolution of 1920x1080 px

While all appears to be well at the top viewable areas of the screen, once you move down to the navigation menus it's easy to see the fonts are tiny at best, and elements appear as if they're scaled down disproportionately to the elements at the top. The problem here is, many with visual impairment issues won't be able to properly read these tiny fonts.

Now let's take a look at Google Plus. The first picture is the current, yet previous user interface being displayed at a resolution of 1920x1080px, that is still available to network members today. Notice how the elements don't properly rescale to fill the screen, they're rather small and difficult to see at best. Also notice how the fonts are so small they're likely difficult for a person with even 20/20 vision to make out on the screen. Also notice the huge empty spaces on both sides of the interface. This is the result of a UI that fails to rescale to fill the screen as I noted above. The end result is tons of unused space for which the elements could have been expanded.



a hi-res image of a Google Plus Community user interface at a resolution of 1920x180 px

Now we'll look at Google Plus at a resolution of 1920x1080, but this time from the new user interface. Notice the elements now appear to be completely bloated, in fact they're so large just a few posts on this platform appear to engulf virtually the entire screen! Just look at the size of the community logo, it's humongous! Also notice the empty space on the right side of the screen.



a hi-res image of a Google Plus Community within the new user interface at a resolution of 1920x1080 px

Here Google has been pushing publishers heavily to better support mobile devices, yet they can't even support today's standard desktop and laptop monitors, epic fail!



And let's not forget about Facebook!
A hi-res image of Facebook's user interface at 1920x1080 resolution
Here we go again, as Facebook appears to suffer from the same problems haunting Google Plus. Notice Facebook's UI has huge empty spaces on both the right and left side of the page, and the fact the fonts are so small they're almost unreadable.

Just as with the evolution of the internet towards becoming a more mobile web, the vast changes we see today regarding hi-res monitors appear to be presenting a whole new set of challenges. As publishers, we're all faced with the intricacies of an advanced modern day web where new and proprietary technologies seem to emerge on a daily basis.

The real question is, why are publishers ignoring these hi-res monitors when billions continue to adopt their use? The answer lays squarely in those demands of tech giants like Google, and it all has to do with the fact they're the world's largest search engine, and everyone wants to rank.

The honest truth is that the myths surrounding the idea that the world is going mobile is nothing but a lie. Sure the use of mobile has eclipsed the desktop experience, but mobile users can't do what a desktop user can do, and they're typically a lot less engaged than the typical desktop user. In fact, mobile users typically spend a fraction of the time engaging with any one thing on the web as compared to their desktop counterparts. Because mobile users are typically on the go, they may only check out their social apps for a minute or so, watch a few seconds of a video on Youtube, or read part of the latest news headline from one of their many apps.

Getting Developers On Board:

It's not just web publishers who've failed to support the modern web, but developers to are definitely to blame. For instance, we host hundreds of free online games on this site, and believe it or not, 9 out of 10 do not support hi-res monitors. Game developers are still making games at a fixed resolution of 640x480px, and because of the way these games are programmed, they cannot scale past the predefined resolution that were encoded with. Some developers have sought to produce games at higher fixed resolutions, such as 800x600. While these higher resolutions will help to better support the modern day hi-res monitors, they only serve to compound the problem since they, just like the older 640x480 games, don't support rescaling at any degree.

Other integrated apps such as sliders which many sites across the web make use of today also have their constraints. Some do scale proportionately, while others typically do not.

All being said, to state the desktop and laptop experience is dying is a complete joke to say the least. Steam alone makes it clear that desktop users won't be disappearing anytime soon. While I agree that web developers and publishers alike should continue to develop for a better mobile experience, they should also stop pretending that hi-resolution monitors don't exist.