Apple Website

With the rising number of devices with dense screens, it is becoming harder and harder for websites to look uniform across multiple platforms. Apple’s Retina Displays have four times the amount of pixels as a standard LCD screen, which means photos and websites are four times smaller than they are on the average display. If you view a 200 x 200 photo on the iPad 2 and the put the same photo on the new iPad, the picture would be twice as small on the new iPad’s Retina Display. The picture is still 200 x 200 pixels, but 200 pixels on the new iPad takes up half as much screen real estate than 200 pixels on the iPad 2. Picture it this way… If you displayed a small website on a 13 inch MacBook Pro, it may look perfect. If you put that same website on a 27 inch iMac, things may be a little small. In reality, the website is the same size, but it simply fills up more area of the 13 inch screen, so it appears bigger. The same concept applies to the older iPad display and the Retina Display, except the screen size is actually the same on both devices… The new iPad just has four times as many pixels.

Apple optimizes their own website for the iPad’s Retina Display, but for the average web designer, it is not practical. For their www.apple.com/ipad page, Apple uses image_replacer.js to automatically determine if the user is on a Retina-enabled device. If yes, the JavaScript file will switch out all of the standard .png images with HD ones that are four times as large. This is a very unique idea from a programming aspect, but it doesn’t really make sense from a web design aspect… Loading images that are four times as large will put bandwidth strain on the server, take up more space online, and give the user four times as much data to download.

As with any argument, this can go both ways. If you use the technique that Apple uses, it will require a lot of extra programming that most web designers don’t have time for. If you simply optimize your entire website for Retina Displays without even using the JavaScript file, it will cause your website to look enlarged on older screens that are not quite as dense. If you do not optimize your website for Retina Displays, it will work just as well on an old PC as it will an iPad, but the graphics won’t be as rich as they are on some Retina-optimized apps.

As for 1 Tech Portal, I am keeping it the way it is. I do not have the time to go in and make each graphic of my template optimized for HD displays. More importantly than the time, large graphics would put a strain on my web server and cause the site to run slower. 1 Tech Portal looks fine on the iPhone 4 and 4S as well as the new iPad. I still want to support the 26% of 1 Tech Portal viewers who use Windows XP. In reality, the only website that should be updated to support Retina Display technology is Apple’s own site. It is great that many app developers are redesigning their iPad apps to support the new Retina Display, but the Internet just isn’t ready to go HD.

Share this page:

Share to Google Buzz
Share to Google Plus
Share to LiveJournal
Share to MyWorld
Share to Odnoklassniki