I've been getting a lot of questions around how to optimize mobile websites (not native applications) for the iPhone 4's Retina Display. It's a little known fact that almost all the Android phones here also have really great screens that would also want some optimization lovin'. So I'll break this down into "What does this mean for non-developers" and "What this means for developers" section. Developers should probably read the sales section too.
What this means for non-developers (or the Sales & Marketing people in your organization)
First, what does it even mean to optimize a website for a specific phone? Well, I'm glad you asked. The iPhone 4 has 2 times the resolution in the same space that the original iPhone had the same amount of space. Android phones generally have 1.5 times the resolution the original iPhone had. Here's an image of what happens when we don't optimize for these devices (click the image to embiggen and see what I'm talking about).
You'll notice in the unoptimized version, the iPhone 4 and Android phones bills are much much fuzzier than the original iPhone images. In the optimized section, the images actually get shaper as you go to the Android and iPhone 4 device.
"Great," you say. "Clearly all of our clients are going to want to optimize all their sites!"
In order to do this, however, it requires developers to slice and dice things three times instead of once. It also requires a little bit more coding. (read: it's more expensive to optimize for these devices). So when you sell mobile websites you need to start delivering this as an option to optimize the site. If the optimization is refused, you need to specify in the assumption that "We will only optimize images for devices with a pixel-ratio of 1."
If you are optimizing the site for devices, we should specify that PSDs should have as many assets in vector format as possible.
Non-developers, you can probably stop reading now.
What this means for Developers
So sales has successfully sold a device optimized mobile site and it has landed on your plate. Congratulations. How on earth do you do this? First, slice the asset three times. One at normal resolution, one at 150%, and one at 200%. Put these in folders named 15 and 20 for Android and iPhone4 respectively.
Next, you need a new CSS for each device (sucky, I know). The only thing that you really need to specify in these is the background-image: assets, not anything else.
Then in the file you need to specify to use the CSS
Android
CSS:
-
<link
-
rel="stylesheet"
-
type="text/css"
-
href="/css/screen-15.css"
-
media="only screen and (-webkit-min-device-pixel-ratio: 1.5)"
-
/>
iPhone 4
CSS:
-
<link
-
rel="stylesheet"
-
type="text/css"
-
href="/css/screen-20.css"
-
media="only screen and (-webkit-min-device-pixel-ratio: 2)"
-
/>
Almost there!
In our html we have:
So in our main CSS file say we have
CSS:
-
.dollarImage
-
{
-
background-size: 800px 349px;
-
background-repeat: no-repeat;
-
}
-
-
#dollar
-
{
-
background-image: url(images/dollar.jpg);
-
}
The CSS for Android would be:
CSS:
-
#dollar
-
{
-
background-image: url(images/15/dollar.jpg);
-
}
The CSS for iPhone 4 would be:
CSS:
-
#dollar
-
{
-
background-image: url(images/20/dollar.jpg);
-
}
For img tags, just explicitly set the width and height and always use the highest res image so:
HTML:
-
<img width="800" height="349" src="images/20/dollar.jpg" alt="it's a dollar"/>.
Happy Coding!
