How To Optimize Your Website for Large Displays
You don’t have to have been in the Web design or online marketing industries for long to have heard the mobile-first mantra repeated again and again. Both novices and veterans alike are obsessed with mobile-friendly Internet, with many guidelines claiming you should focus only or almost only on the small screen. Although the enormous growth in mobile Internet usage is undoubtedly very important, it is also important to remember that not everyone wants or can use their smartphones for all of their online activities. Particularly when it comes to productivity and even a great deal of online commerce, the desktop remains the favourite platform.
While there’s nothing wrong with prioritizing mobile, neglecting the big screen remains a big mistake. After all, no matter which way you look at it, the bigger screen offers a far more immersive experience than the tiny screens of smartphones and tablets, particularly when it comes to e-commerce and extensively visually orientated websites. Mobile traffic might account for the majority in many cases, but just as there’s a trend for technology to get smaller, there’s also a trend for screens and resolutions to get larger. Most websites don’t offer an optimal experience even on a standard high-definition monitor with all of the unused whitespace. Try viewing any typical website on an ultra-high-resolution 4K monitor, and you’ll find that it’s practically unreadable.
Increasing Screen Sizes and Resolutions
Screen resolutions are constantly getting higher, even in the case of smartphone screens. In the case of smartphones, screen resolution is of little importance when it comes to Web design, but it’s a very important consideration for desktop users. According to statistics published by w3schools in January, 2016, the most common screen resolution was 1366×768, the standard resolution on most low- to mid-range laptop computers, which accounted for just over a third of their visitors. The same study revealed that around a sixth of Internet users have a screen resolution of 1920×1080, which is the standard high-definition resolution found on most desktop computers and Internet-enabled TVs. A small minority almost entirely consisting of desktop users browse the Internet using other resolutions:
. 3840×2160, also known as 4K or UHD (Ultra High-Definition) is set to become the new industry standard, replacing 1920×1080 in the coming years.
. Ultra-wide monitors with aspect ratios of 21:9 and resolutions of 2560×1080 or 3440×1440 remain non-standard, but are increasingly widely available.
. Apple’s 5K Retina display for the iMac boasts one of the highest screen resolutions of all available to consumers at 5120×2880.
Ultimately, higher resolutions and bigger screen sizes are inherently superior, so it shouldn’t come as any surprise that the trend is upward in the case of both. In fact, some manufacturers, such as Sharp, have already demonstrated 7680×4320 pixel (8K) displays!
Image Optimization
When it comes to optimizing a website for viewing on the larger screen, including, to a lesser extent, even the popular standard HD resolution, there are a few major pitfalls. One of the most important complications of designing websites for the large screen is the size of any graphical elements. Of course, larger screens demand larger and crisper images, but this also means much greater file sizes in turn leading to lengthy loading times. Video content optimized for 4K is even more demanding, with file sizes often surpassing 300 MB per minute!
While you can largely forget about exclusively streaming 4K video until almost everyone has the fastest fibre-optic connections currently available, images are, fortunately, a little easier to optimize. Most importantly, you should use scalable vector graphics for as much of your visual content as possible, particularly for navigational elements and pretty much anything else that doesn’t require a photo to represent it. Unfortunately, vector images, such as those in the industry-leading SVG format, only consist of textual instructions defining different geometric shapes and lines, making the format unsuitable for content such as photos.
To offer an optimal experience to all users, from those browsing on the small screen to those using the highest-resolution displays currently available, using media queries to automatically display the optimal size of the image for the display in question is the best approach to take. For example, you can have multiple copies of each image in different resolutions and create JavaScript queries to automatically serve up the correct one for the screen resolution and type of browser (whether it’s a desktop or mobile one). To manage multiple versions of your images more effectively, it’s also a good idea to establish consistent file-naming conventions.
Responsive Design
By far the easiest way to make a website suitable for browsing across all Internet-enabled devices is to adopt responsive design techniques. Many content management systems, such as WordPress, have numerous themes available for them that already feature responsive designs. Nonetheless, unless your website is something fairly simple in terms of design, such as a blog, responsive design itself is often not enough. Relying only on using a responsive theme often leads to broken navigation functions on the smaller screen. As such, many websites, particularly e-commerce stores and those offering any kind of Web-based service, provide a separate mobile-optimized version alongside a responsively designed version for the varying screen sizes of desktop and laptop computers.
A responsive framework basically consists of a CSS source code allowing you to create and customize a positioning grid for the various elements on your page in accordance with different common screen resolutions. After all, the days of seeing messages at the bottom of websites reading ‘best viewed at 1024x768k’ are long gone! In other words, using a responsive framework will allow you to design a website for displays of all sizes. Additionally, you can also use CSS to optimize font sizes and create media queries. However, with a good responsive theme or framework at your disposal, you’ll save a great deal of time rather than coming up with something from scratch.
When structuring your media queries, it’s usually a good idea to take a mobile-first approach. However, you should then ensure that your media queries include other popular display options, such as the following:
. Tablets and smartphones in portrait mode
. 16:9 aspect ratio displays with resolutions of 1366×768 and 1920×1080
. Wide-format displays with resolutions of 2560×1080 and 3440×1440
. Ultra-high-definition displays with resolutions of 3840×2160
. Apple Retina 5K displays with a resolution of 5120×2880
Taking into account the above display options should ensure an optimal browsing experience across the vast majority of devices.
Final Words
You should take every step to ensure that your website offers an optimal experience on all Internet-enabled devices rather than focussing exclusively on mobile users without giving desktop users a second thought. The mobile Web might be bigger than ever, but the miniaturised screens will never be a substitute for the 4K and 5K displays that are heading towards becoming industry-standard in the near future.
Join over 50,000 developers, designers and entrepreneurs!
Get exclusive articles, special deals and freebies delivered straight to your email inbox!