Oringinal article found here: http://www.lukew.com/ff/entry.asp?1142

For three generations of the iPhone, Apple kept the screen consistent (320x480 pixels and 3.5 inches diagonal). But now Apple's new iPhone 4 boasts the "highest resolution phone screen ever (960x640 pixels, 3.5 inches diagonal, & an 800:1 contrast ratio)." What's the impact to designers?

But first, why is it an issue? Because of PPI (pixels per inch) or pixel density variations.

"A screen with lower density has fewer available pixels spread across the screen width and height, where a screen with higher density has more — sometimes significantly more — pixels spread across the same area. The density of a screen is important because, other things being equal, a UI element (such as a button) whose height and width are defined in terms of screen pixels will appear larger on the lower density screen and smaller on the higher density screen."

Initial Palm and Android smartphones were in the same ballpark as Apple's first set of iPhones so ppi (pixels per inch) was roughly the same across these devices.

• iPhone: 320x480 | 3.5 in | 164ppi
• Palm Pre | 320x480 | 3.1 in 186ppi
• Palm Pixie | 320x400 | 2.63 in | 194ppi
• T-Mobile G1 | 320x480 | 3.2 in | 180ppi
• 
MyTouch 3G | 320x480 | 3.2 in | 180ppi
• 
HTC Hero | 320x480 | 3.2 in | 180ppi

The next set of Android phones featured much higher PPI only to be bested by Nokia's next generation of smartphones and finally the iPhone 4.

• Motorola Droid | 480x854 | 3.7 in | 264ppi
• Nexus One | 480x800 | 3.7 in | 252ppi
• 
HTC Desire | 480x800 | 3.7 in | 252ppi
• Nokia N97 | 360x640 | 3.2 in | 229ppi
• Nokia N900 | 800x480 | 3.5 in | 266ppi
• Apple iPhone 4 | 960x640 | 3.5 in | 326ppi

So how do designers manage these jumps in pixel density? Here's a round-up of recent articles that tackle the issue.

Updated on: July 29 1010 with a few dditional resources.

Designing for iPhone 4's Retina Display by Josh Clark (author ofTapworthy) looks at the impact of the Retina Display on iPhone application development.

• Starting in iOS 4, dimensions are measured in “points” instead of pixels. Conveniently enough, the iPhone screen is 320x480 points on both iPhone 4 and older models.
• On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide. So: just specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen.
• To add high-resolution images to your app, you have to include a second set of all your graphic files. For every image in your app, add a second version that’s twice the size, adding @2x to the name.
• Photoshop fans should learn to get comfortable with Illustrator. By building your app graphics in vector format, you can export them in whatever size you like with limited muss or fuss.

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.

• If you want your applications and web sites to look beautiful on the iPhone 4's new retina screen, you're going to have to create high-resolution versions of your bitmaps and/or use vectors.
• You basically have to design liquid interfaces (and interface elements) for your apps.
• SVG can help in creating resolution-independent designs.
• Since browsers do not currently have automatic support for loading high-resolution versions of image and video assets, we can use a combination of CSS media queries and JavaScript for the same effect.
• With CSS3 media queries you can then build Web sites with completely different CSS files based off the pixel-ratio of CSS pixels to device pixels, including higher res artwork as necessary.
• This approach also degrades gracefully, since you can specify the lowres CSS file and then higher res CSS files inside media queries that will be ignored by browsers that don’t understand them.

High DPI Web Sites by Dave Hyatt outlines how the WebKit team is thinking about allowing Web authors to effectively support very high resolution devices.

• Most Web site authors have traditionally thought of a CSS pixel as a device pixel. However as we enter this new high DPI world where the entire UI may be magnified, a CSS pixel can end up being multiple pixels on screen.
• Safari actually supports PDF as an image format (the hands of the clock Dashboard widget are an example of this). However other browsers do not support this format. The agreed-upon standard for scalable graphics on the Web is SVG.
• Our goal with WebKit is to make SVG a first-class image format, so that it can be used anywhere you might use a PNG, a GIF or a JPG.

Targeting the iPhone 4 Retina Display with CSS3 Media Queries by Walt Dickinson shows how to use CSS3 media queries to target the Retina Display.

• In order to preserve the design of existing websites, images are automatically pixel-doubled. And this creates a schism between “device pixels” and “CSS pixels”.
• With CSS3 media queries, you can use device-pixel-ratio, for targeting specific pixel densities. This tells browsers to include High PPi CSS files only if the device pixel ratio is 2 or higher. This CSS file overrides the background images of some of my site’s graphics with higher resolution versions and uses the background-size property to set the correct CSS pixel dimensions.

In What does 320dpi mean to designers? Tim Van Damme provides a list of tricks and techniques for design on the Retina Display.

• Colid lines and drop shadow on text should be 2px wide. Subtle glows however should be 1.5px
• All the objects you design should measure a multitude of 2. Designing a 50×50 pixel circle will turn out to be 25×25 on an older iPhone.
• Try doing as much as you can with code. Drawing gradients and lines and more with pure code delivers performance gains.
• For objects that need an image, you should always provide 2 images, one for each resolution.
• Keep testing the interface you’re designing on an actual iPhone. Save your files on Dropbox. Grab your iPhone, open the Dropbox client, and view them on the device.

Optimising for High Pixel Density Displays by Optic Swerve outlines a CSS and JavaScript approach for web sites/apps that cater to high density pixel displays.

• Start with a basic fluid CSS design. Tweak for specific ‘device-width’ ranges with Media Queries. Even better, use ‘width’ queries for even further flexibility and easy prototyping. Tweak further with ‘device-pixel-ratio’ queries.
• The ‘text-rendering’ CSS options, specifically ‘optimizeLegibility’ are worth enabling on high pixel density screens.
• Create one large (2x resolution) image and then scale down by 50% (in-browser) via CSS for all pixel density displays. Devices without a perfect ‘2’ pixel ratio will still produce better results than a low-resolution image, for far less work.
• Use the CSS tools at your disposal. They're resolution independent and bandwidth friendly.

http://maxvoltar.com/sandbox/fontsmoothing/

A demo showing the difference of:

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;

Build your panel using normal CSS techniques and valid HTML.
Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
Inside that link, put an empty span tag (<span></span>, not <span />)
Give the panel position: relative;
Apply the following CSS to the empty span:
{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1
}

It will now cover the panel, and as its inside an <a>  tag, it's a clickable link.
Give any other links inside the panel position:relative; and a suitable z-index (>1) to bring them in front of the default span link.

Mozilla Labs engineer and TC39 representative Dave Herman joined us at YUIConf 2011 to give this keynote talk on the future of JavaScript, covering many of the new features currently under consideration for ES6, the next edition of the ECMAScript standard.

http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web...

A great write up about creating more organic background patterns. Inspired by cicada mating and birth patterns.

On one hand you want to keep the file dimensions as small as possible to take best advantage of the tiling effect. However, when you notice a distinctive feature — for instance, a knot in some woodgrain — repeating at regular intervals, it really breaks the illusion of organic randomness. Maybe we borrow some ideas from cicadas to break that pattern?

Here is an interesting article from Trent Walton on using CSS to basically place background images within your text. This gives us the ability to add a bit of texture and style to a normal piece of text and depreciates nicely in unsupported browsers.

After a bit of digging around, I have found a couple of great resources regarding the use of corner radii in your designs.

http://www.css3.info/preview/rounded-border/
The above site gives a great breakdown on what is actually going on.

http://border-radius.com/
This site is generates them for you, including cross browser functionality for web-kit, gecko, and css3.

Paul Irish gives a history and explanation about how low-level HTML5 entities work: the doctype, the charset, the parsing algorithm. He also covers attribute quoting, what values are valid IDs (snowmen and songs totally work), and doctype personalization.