One thing I have noticed is that there is a weird transitional period we are in with a number of major sites who have optimized for the iPhone and iPad already.<p>For example, photos in the News Feed on Facebook are HiDPI, as are <i>some</i> images on Google. My guess is these were already being used for places to be served for iOS and Android. However, it's hit and miss: the Google logo is never HiDPI.<p>Last time this came up was when Marco wrote a post saying "design for Retina" and a bunch of comments complained asking why people should design for just the Retina Macbook Pro. That's not just short-sighted, it's wrong <i>now</i>: the number of high density mobile platforms means designers should be very worried how their site looks.<p>And, for the most part, sites look <i>terrible</i>.
I find vector images to be a godsend when creating responsive web sites. They are easy to implement and 'future proof' your website so when the next iDevice comes out with twice the resolution as the current gen retina devices your icons will look just as crisp. Of course Bitmap images remain a pain in the bum.
This is a good, comprehensive overview of the options for high-density web pages. However, I'm curious about their CSS media queries.<p><pre><code> device-pixel-ratio,
-o-device-pixel-ratio,
-moz-device-pixel-ratio,
-Webkit-device-pixel-ratio { … }
</code></pre>
I was under the impression that you should put the vendor-prefixed versions first, followed by the unprefixed one. (Also, I don't think "-Webkit-" should be capitalized, but I don't know if it matters.) To wit:<p><pre><code> -o-device-pixel-ratio,
-moz-device-pixel-ratio,
-webkit-device-pixel-ratio,
device-pixel-ratio { … }</code></pre>
I was hoping that with the advent of the Retina display, high density displays would lead to a transition back from pixels to ratios but apparently that call was to early; instead we get CSS pixels.
Something to add into the mix: I've had a few friends have decent success with Cedexis' tools for content targeting. One of the complaints that I hear about retina-enabling websites is the performance impact on mobile users. I had a demo whipped up for me once that will serve up different site versions depending on a number of factors, including platform and connection type/quality. So someone on a 3G iPad connection can get the non-retina version, while someone on a wifi link will get the full-res version.<p>The long and the short is that I have a feeling that we are going to see more and more interesting tools popping up in the near future as more and more web designers purchase hidpi computers and decide to write up some library to make their life easier when they decide to retina-enable their websites because it looks horrible on their machine.
I can't speak toward the other icon font resources the article mentioned, but IcoMoon did a great job taking SVG files and turning them into a font. The app supports custom character mapping and comes with a sample icon library.<p>App:
<a href="http://keyamoon.com/icomoon/#toHome" rel="nofollow">http://keyamoon.com/icomoon/#toHome</a><p>Sample library:
<a href="https://github.com/Keyamoon/IcoMoon--limited-" rel="nofollow">https://github.com/Keyamoon/IcoMoon--limited-</a>
You should probably start realizing that there are more devices than ever before.<p>They are all different and iOS/retina is taking smaller and smaller shares of it. Designing for that is designing for last generation platform-specific web and has little future.
If you are using Firefox on a Retina MacBook Pro, you can get crisp HiDPI text if you download Firefox Aurora 16* and change about:config pref <i>layers.acceleration.disabled</i> to <i>true</i>. (This workaround is temporarily broken in Nightly 17 builds.)<p>Disabling Firefox's accelerated layer renderer is clearly a temporary workaround, but the improvement in text quality is awesome. To track Mozilla's progress on full support for HiDPI text, you can follow <a href="https://bugzil.la/674373" rel="nofollow">https://bugzil.la/674373</a><p>* <a href="https://www.mozilla.org/en-US/firefox/aurora/" rel="nofollow">https://www.mozilla.org/en-US/firefox/aurora/</a>
IMO, what none of these techniques address is being able to on-the-fly detect if Retina and show higher-res images in a slideshow format.<p>There is plenty of talk out there about how to display bg images but not much (none?) that I have found to address the use case I talked about above.