Retina displays have become one of the most talked about technology concepts after Apple brought out devices with this technology built in, namely the new Macbook Pro range. Essentially, retina displays have such a high pixel density that individual pixels can’t be distinguished by the naked eye. This has meant big changes in web design world – so what does it mean for you and your business?
The Apple MacBook, for example, has over 5 million pixels crammed into its screen to achieve retina display. As a result, images appear crystal clear. You can call this technology the next stage of liquid crystal display (LCD). So, where does web design come into the picture?
Challenges for Web Design Posed by Retina Displays
With more and more people using hand held devices to access the internet and many of these devices using retina displays, like the Apple iPhone 5 for instance, it has become imperative that web pages be compatible with this high resolution viewing. Otherwise, web pages appear blurred on these super HD screens. Pictures appear like a collage of small squares, when they should be a vibrant and appealing addition to your site.
The second problem that is posed for web design is high load times. This increase in download times is more prominent on smaller devices, as they struggle to download the higher resolution images offered up by servers designed for their display. Disk usage increases as well. In a nutshell, a traditional web design fails to take into consideration the needs of your users on a retina display device.
The silver lining is that websites can be developed with near perfect print quality and font rendering can be smoother. Shrunk images can accommodate more content in smaller screens. Essentially, your website can become more beautiful and user friendly on a retina display, but steps must be taken first to insure its usability.
How to Tackle the Problem
Right now, this field of web design is at a very early stage. Existing technologies such as JavaScript can be used to identify retina displays and offer up specifically tailored solutions. The good thing about this solution is that it can be easily automated. Server side detection is the other option. Although it works effectively to load only one image, it does not work well with servers that do not offer processing on the server side, a classic example being Content Delivery Networks.
Content generated through CSS and PHP is another option, the major benefit of which is that it works on almost all kinds of mobiles and browsers including Chrome, iOS, Android, BlackBerry, Safari and Opera. Loading times can be reduced by implementing box shadows and gradients in the code itself, instead of within the images. While using photoshop, images can be scaled by 200 percent. Also, use of solid colors and patterns reduces impact of image distortion. Use snap to pixel option for scaling. Vector graphics can be used to tackle the problem with complex images.
Some developers also advocate creating a one-size-fit-all retina web design. This is simple and effective if you are prepared to waste bandwidth, put up with late loading and accept less optimal quality images on low resolution screens. This is not recommended however, as the majority of your user base will be on standard resolution screens.
If you do not want to put up with such problems, you should develop websites in two different sizes – one adapting for retina displays and the other with half sized images for normal screens.
Is your website ready for the Retina Web? Talk to Tann Westlake about how you can make these improvements.