HTML5 and CSS3: Get Your Website Ready for High-Resolution Displays

When Apple introduced a new high-resolution display – the so-called Retina display – for its iPhones, iPads, and MacBooks a couple of years ago, they ushered in a new era of display quality. On such screens, the human eye can’t discern individual pixels anymore. With high-res displays being the norm rather than the exception today, you’ll find more and more middle-range high-res mobile devices. Many apps are already high-res compatible, and now you can also create high-res websites using HTML5, CSS3, and JavaScript – without additional JavaScript libraries. Double as Sharp Thanks to Double Pixel Density Mobile devices traditionally use a default width of 320 pixels, so many mobile websites are designed to this width. High-res displays, however, come with double the pixels or even more. To prevent a website from appearing half its size on a display of double density, it will be scaled up. This works just fine with fonts and vector graphics. Bitmap-based formats like JPEG and PNG files, however, become blurred and pixelated. Because such displays become more and more popular, providing web projects in high-res quality is an important factor for web designers and developers. HTML5 and the srcset Property People had been struggling for […]