Getting Ready For HD Web Design

Posted on October 23, 2012 by

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.

For example, buttons rendered by CSS can have virtually zero image degradation when used on any image size. In the long run, imageless designs will really pay off and we would have much less to worry about when 300+ ppi displays finally dominate the industry. Other than CSS3, objects rendered with JavaScript and HTML5 canvas can also achieve similar scalability.

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.

The method above is all well and great, but it only works with CSS background images. What if you want to embed an image using HTML? Even further, this has drastic implications for video as well, so how can you serve up custom videos to high ppi screens. Unfortunately, there’s no real answer using pure HTML. Perhaps the need will become so great that we’ll see something like this in the future, but for now, you’re out of luck. What if you choose to embed images using HTML? This method could have a drastic implication for videos as well as you can properly serve up custom videos on high resolution displays. But JavaScript seems like a more powerful solution and some sites have implemented ways for detecting high resolution devices, such as iPhone 4 with JavaScript. Sticking with HTML and CSS can pose huge problem, especially if you are not familiar with JavaScript.

It doesn’t matter if you are an Apple fanboy or a hater. For Web designers, the rise of high resolution displays will kick start a new trend in the industry, which will fundamentally change the way they build websites. This article should encourage you to explore various actions: media queries, SVG, CSS3, JavaScript and HTML5 canvas. They should fill arsenal of weapons that can attack problems related to content viewing on 300+ ppi displays. More robust options for serving up multiple HTML-embedded images to the right devices are sorely needed and hopefully they’ll pop up in the near future.

Author :

  • Editor