Comments on: How to make your web content look stunning on the iPhone 4′s new Retina display

By: My most immense WORKFLOW icon Internetsite

My most immense WORKFLOW icon Internetsite — Sat, 12 May 2012 02:49:25 +0000

Fascinating blog! Is your theme custom made or did you
download it from somewhere? A design like yours with a few
simple tweeks would really make my blog stand out.
Please let me know where you got your design. Cheers

By: Bill

Bill — Sat, 31 Mar 2012 14:25:05 +0000

Just one problem: In Safari on the iPad, trying to get a 1500 pixel wide image to render 1:1 with the iPad’s hardware pixels, it not easy. The result is that the image quality is reduced as the iPad scales the image up to 1536 pixels in portrait, or more in landscape. Even 36 pixels of change results in a noticeably softer image as a result of the scaling.

The benefits of the retina display are therefore lost. For general web browsing this doesn’t matter, but for people who are making photo galleries and care about the quality of their hi-res website galleries, this is really a disappointing situation.

The only way photos can EVER look pin-sharp on the retina display, is when they are presented without any scaling, which is not easy to achieve for both portrait and horizontal orientation at once.

By: Michael Robinson

Michael Robinson — Sat, 10 Mar 2012 15:52:40 +0000

Ok, the new iPad is on the way, how about an updated article?

Thanks…this is great stuff.

By: Steven West

Steven West — Fri, 24 Feb 2012 18:23:24 +0000

Hey there!

Thanks for the excellent post, helped me out with a load of situations, but there’s one thing that isn’t working for me.

You stated that in the “A call for native browser support for high-DPI image and video substitution” an image would be replaced with the “@2x” version of it, if the image was viewed in a Retina display, but for me it’s not working.

I currently have a navigation menu, with icons next to the items, I have created two copies of the image, one named “home.png” and the Retina one “home@2x.png”, yet when I view this on my iPod Touch 4G, it displays the low resolution version.

Thanks!

By: Patrick H. Lauke

Patrick H. Lauke — Sun, 18 Dec 2011 13:35:33 +0000

Sorry, late to the game here, but I was just testing some browser behaviour relating to this and stumbled across your post. My question: for web content, why bother with the specific media query stuff to serve higher-dpi images only to high-dpi devices? Why not just specify the high-dpi versions in all cases, and let browsers on lower-dpi devices render the graphic down? Is it purely to have absolute pixel-perfect control over how things look on low-dpi devices? And not just with CSS, also good old image elements…

By: matt

matt — Fri, 09 Dec 2011 19:08:02 +0000

thanks! This helped me out greatly

By: Lee Probert

Lee Probert — Thu, 25 Aug 2011 14:16:05 +0000

Would make sense for the time being for Safari on an iPhone 4 to do the image swap in exactly the same way it would for the native apps.

Until there’s a slicker solution that works with all ‘future’ hi-res displays.

By: datenkind

datenkind — Thu, 14 Jul 2011 14:01:40 +0000

Thanks for this little guide. I just stumbled over some problems with a small embedded webserver that fracked up the SVG i used for menu icons and which worked great on the Retina – when not using this embedded server. I can’t re-engineer the problem, but I just did it your ways – and it just works. :)

By: Designing for the Retina Display (326ppi) « bento blogging

Designing for the Retina Display (326ppi) « bento blogging — Fri, 27 May 2011 02:33:23 +0000

[...] How to make your web content look stunning on the iPhone 4’s new Retina display by Aral Balkan outlines the high-level impact of the Retina Display on Web design & development. [...]

By: andy matthews

andy matthews — Tue, 11 Jan 2011 20:42:23 +0000

Thanks for this article Aral. Exactly what I needed for the mobile website I’m building.