<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
	type="text/css" href="css/highdpi.css" />

But that is only 1/3rd the story.  How do you make sure high resolution images are used when viewing with a High-DPI display?  Aral Balkan has the answer: http://aralbalkan.com/3331 But what he illustrates only works for “sprites.”  That is, divs and other elements that use background-images where the src is specified in CSS. In that special CSS file, we specify the size of the background and include high-res background images that override the normal CSS. However, there is the problem of elements that specify their src in the HTML. I.e., img, video, etc. Aral, touches on what is required but leaves the implementation as an exercise.  I’ll dive into the details:

1. Create double resolution copies of all your images. Name these with a suffix of “@2x”. So for logo.png, the double res would be logo@2x.png. Make sure that all of your image tags have at least a width attribute specified. (But, you are already doing that aren’t you?) If you don’t, your image dimensions will be increased to the new high-DPI source by the browser.
2. Create a highdpi.css file.  Contents:

   .replace-2x {
   	font-size: 1px;
   }

   The sole class, .replace-2x contains an attribute that has no effect on img tags. This is the flag that will tell our javascript it is okay to do image replacement.

3. In your source HTML, add the replace-2x class to all of your images that have a double resolution counterpart.
4. In your HTML head, add the link for your high-dpi stylesheet:

   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"
   	href="/css/highdpi.css"/>

5. Create and include in your source, a highdpi.js file.  We are going to assume you are using jQuery for your site.  Contents:

   function highdpi_init() {
   	if(jQuery('.replace-2x').css('font-size') == "1px") {
   		var els = jQuery(".replace-2x").get();
   		for(var i = 0; i < els.length; i++) {
   			var src = els[i].src
   			src = src.replace(".png", "@2x.png");
   			els[i].src = src;
   		}
   	}
   }
   jQuery(document).ready(function() {
   	highdpi_init();
   });

The trick here is that we check to see if the font size for our special class is set to value declared in our high-DPI CSS file. (Our flag) It will only be set if the browser passed the media query. If the flag is set, grab every element in the DOM with the replace-2x class and change the src attribute to point to our high-res counterparts. If you have access to one, pull up http://flowz.com on an iPhone 4 and take a look at our logos here (zoom in if it isn't immediately apparent to you):

Image without ".replace-2x"

Image with ".replace-2x"

(Under normal DPI monitors, the images will look identical.)

1. Note: all text looks good, except text rendered using Cufón and sIFR. We hit that problem. A blog post will follow on that. ↩

Sidebar

I really, really wanted to be able to do something different then what I described above. I wanted to define a class: .highdpi-supported on the body tag of all the pages that support high-dpi. I then wanted to add an uncommon attribute on that class to act as the flag to tell javascript to go ahead with image replacement. Unfortunately, I could not find any such attribute that was relatively safe *and* didn't affect page layout. So in the end, I'm stuck with adjusting the font-size attribute on the .replace-2x class.  Maybe someone else can come up with a better flag.

Some CSS I just wrote:

border: 1px solid gold;”

— Justin Ouellette

I’ve been doing AJAX since before it was AJAX.  I’m not nearly alone in this.  In fact, hundreds of thousands, if not millions of developers were already well into using XHR before it was big.  But somehow, some markitecture dewsh[sic] bags coined the term and Web 2.0 neophytes and PHBs alike took hold and never let go.  In case you were wondering, the technology was around for almost six years beforehand.

The damn thing is, it is a terrible acronym that doesn’t even accurately describe the technology.  No one developing a scalable application who knows anything about performance would dare to use the XML of the X in AJAX to communicate between their remote (remember: LIGHTWEIGHT!) client and the server.

I have reason to believe through my masterful powers of LOGICAL reasoning that %99.999 of developers out there will actually be using either delimited text or JSON.  Of course, I tend to stay away from the Microsoft world that defies logic, so my numbers might be inflated.

I can see why the markitecture dewsh avoided the term AJAJ as it doesn’t have a catchy pop culture product to propel it into PHB minds.

I propose an alternative for “the enlightened” individuals that chose to skirt the masses of Web 2.0 hype:

JAJA

As in JSON And Javascript Asynchronously.  Or for those severely irked:

JAJAWLD (With Less Dewshiness)

Imagine your client coming to you and asking, “Could you sprinkle some JAA JAA in with this project?”

Ahh, to live in an alternative universe even for just a few minutes.

In the beginning it was difficult to understand the difference between Advertising and Marketing. In fact, I had thought they were one and the same. Each time I asked an “expert,” I got back a litany of different definitions, all of them long and complex.

Not long after I left the company, I finally ran across a simple definition that boiled down a few of the different elements of marketing and advertising.  It certainly brought the bright light of realization shinning down from the heavens.  (The source is either Ad Week or Ad Age magazines¹)

It’s all starting to make sense now isn’t it?