The technique involves creating two sets of background images. One standard-sized version and a double-sized version (@2x) for high pixel-density screens like the Retina display or Droid phone display. For the purposes of this example, let’s say I have a default icon that’s 50px X 50px.

#link-id a { background-image:url(images/icon.png); }

The Motorola Droid has a pixel-density of 1.5 so I set that as my baseline.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
		#link-id a {
			background-image:url(images/icon@2x.png);
		}
}

Notice the subtle difference in how the ratio is calculated for Opera. Also, Mozilla’s vendor prefix has a slightly different syntax. I’m following Erik Runyon’s advise here and using Apple’s style guidelines by naming the hi-res icon with the same name as my normal-resolution icon, but with @2x appended. In this case, the “@2x” version is 100px X 100px. The next thing you’ll have to do is scale the hi-res icon down.

background-size: 50px 50px;

That’s it. Now high pixel-density devices will render a suitably high-resolution image and normal-resolution devices will get a smaller image.Similar Posts:

• Media Queries for High Pixel-density Devices
• Responsive Images: Keep It Simple; Keep It Small
• One Site
• When to Use CSS content Property
• Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout

It was really a good event for those of us in Minneapolis who are interested in current and emerging web technology. The interesting this to me is how much Twitter added to the experience for those of us participating.

If you weren’t monitoring things on Twitter, you really missed out on an ongoing conversation. The most obvious observation is that there was a general air of excitement about the event and a lot of people were merely expressing that sentiment in real time. That had one benefit: I was able to get a sense of what was happening in sessions that I was not attending. At least once it influenced my decision to bail out of one session in favor of another.

The second, perhaps more valuable thing about Twitter at the event was a stream of continuous feedback. We were not 30 seconds into the conference before someone was commenting on the @klayon‘s introduction. Tracking “#minnewebcon” from my cell phone was like having an ear to the wall. The best part about that? The organizers of the event responded directly to me about a couple of comments I made. They were paying attention and that’s important.

There will be more formal methods for providing feedback in the next few days, but if you want to troubleshoot the problems in real-time and address them, Twitter is your friend.Similar Posts:

• MinneWebCon 2008
• Will Twitter Get Benched?
• Careful Where You Point That Thing
• MinneWebCon 2009
• I Was There

Twitter is cool, but some of the more advanced mobile features are like little command line commands. Technology people are cool with that and early adopters are willing to learn it, but what about a 14-yr old? Bringing those services to those consumers is going to require a big improvement in the UI and probably take a lot more bandwidth.

A phone or computer is still a relatively crude device when you consider the number of steps it takes to accomplish a task. After a while it feels natural, but for a lot of day-to-day things, it could be a lot simpler. We’re just not there yet. We’ll get there. Apple took a step in the right direction with the iPhone when they totally disregarded all current phone interfaces. Even that is only the beginning.Similar Posts:

• Transparency
• Amazon.com Announces TextBuyIt
• Go Mobile Young Man!
• Comcast using Twitter to Respond to Consumer Complaints
• One Site

In the mid nineties when what we know as the web was overtaking the Gopher procotol and computers were entering homes and lifestyles everywhere, there was some talk about the dehumanizing effect of the personal computer. Baby Boomers were worried that the kids would spend too much time isolated in front of the computer screen. That notion seems so quaint now.Similar Posts:

• Go Mobile Young Man!
• WordPress’ Auto Update Is OK, But The Command Line Is Faster
• Transparency
• Amazon.com Announces TextBuyIt
• Using Social Networking Sites for Research