The introduction of Retina Display on the iPhone 4S and the new iPad has pushed forward the need for higher pixel density. It is certainly wonderful for users’ perspective, but for Web designers this trend can significantly change the way they build websites.
Web designers should be ready for HD Web design and know how their websites will look like on high resolution display. They need to take steps to prepare themselves and learn skills that can help them to stay relevant for years to come.
How Apple started it all?
Many Web development professionals have been using Macs faithfully for years. They may not be old timers, but long enough to become completely addicted to all things Apple. They represent stubborn individuals of the web development community with overt attempts to go against the mainstream, Windows-loving world. From a little underdog startup, Apple has become the most valuable brand in the mobile industry. You may not have a Mac in your home, but it is more likely you have an iPod, iPhone or iPad.
This article doesn’t try to wax you eloquently to become an avid Apple fan, but you need to be aware that Apple is the ultimate mover and shaker in the mobile industry. Few cared when Ericsson released the world’s first touchscreen smartphone. But when Apple released the original iPhone, the world held is breath and happily greeted the dawn pf a new era. Before the iPhone 4, mobile Web community had little interest with high resolution screen. For years, consumers’ interest on HD technologies was related only to television and other related products When Apple dropped the iPhone 4 in 2010, it brought us something really nice, the Retina Display, with an astounding pixel density of 326 ppi (pixels per inch). This was a game changer. Nearly two years later, Apple introduced the 3rd generation iPad with 264ppi, which was a significant improvement over previous iPad models.
What should we do?
Enough for the history lesson, but as a web designer you should be aware that millions of users are accessing the web using high resolution display. Many images we use today have very low resolution. This is unavoidable because opening high resolution layered PSDs can slow your machines to a crawl. Imagine how much slow downs we would get on an image-rich website that’s filed with 300+ ppi images.
Additionally, high resolution stock photos are more expensive and they take forever to load if users are not covered with proper 3G or 4G network; the list goes on.
Consequently, images between 50 and 100 ppi is the norm, but they may not display properly on the new iPad with 264ppi of pixel density. Think about it, millions of people are browsing the mobile Web with high resolution display. Make no mistake; the trend will continue to escalate as other device makers play catch up. iPhone 4 isn’t the only 300+ ppi devices, Samsung Galaxy S3, HTC One X, Nokia E6 and LG Optimus 4X HD also come with ultra crisp displays. Apple is also exploring the next obvious place for Retina Display implementation: laptops.
High pixel density is an interesting issue in the web development community. The Internet is made of many different components coming together in a perfect harmony. One part that runs too far ahead of the others may upset the balance and bring chaos.
Fortunately, we’ve been preparing for this occurrence for years and many of us don’t even know about it. The rise of HTML5 and CSS3 has really pushed forward the notion of using only reasonable amount of images that we normally use in a markup. Today, many UI elements are rendered by browsers, which allow them to scale up just fine on any display size that you throw at them.
Scalar vector graphics (SVG) are the right step toward total resolution independence. The technology has been around for so many years, but it had only recently seen cross-browser support with Internet Explorer 9 finally jumped on the bandwagon. Adobe Illustrator is the right tool to use when working with SVG. This app is usually used for creating and modifying vector-based graphics with engine scalability. Things you create with Adobe Illustrator can be exported as SVG files and in turn implemented on the Web as scalable objects.
Advantages of SVG over CSS may seem fuzzy at first but it will become clearer when we are working with complicated images. Rendering simple buttons with CSS is really simple, but things can get really complex and messy when it comes to working with detailed graphics like Starbucks logo, for example. As an alternative to fiddling with CSS for hours, it is much easier to just export the vector of a complex graphic to an SVG file and embed it firefly into any webpage.
This is all well and good. Given that many Web designers have been tackling with imageless designs for some time, taking things a little further with SVG, shouldn’t really that much of a curve ball. But unfortunately, raster images, such as photos can easily crush the dream of complete resolution-independent design. We can’t easily get around this limitation, no matter what we have inside our bag of tricks.
Serving up different version of image for different devices is obviously inefficient. This sucks, but you don’t want to serve up subpar images forvretina displays and you don’t want to make low resolution displays load those huge photos. Unfortunately, in many cases this is your only solution.