The rise in mobile web traffic since the advent of the iPhone is phenomenal.
User Experience and Frontend Engineers have and must continue to provide great
experiences on portable devices. By using CSS media queries, many sites have
already tailored their look and feel to support the plethora of smart phones
that have followed the iPhone’s lead in providing a first-class mobile web
browser. As I pointed out in my presentation at BarCamp Chattanooga last
year, there are two approaches to targeted CSS for mobile devices. The first
is a traditional
<link /> with a
media attribute and the second is to use
@media query selector in your existing StyleSheet.
The release of Apple’s new iPhone 4 this week has brought an additional
challenge to this mix. Just as John Gruber predicted, Apple is no longer
px to physical pixels on it’s new device. (Dave Hyatt of the
Webkit project first hinted at this years ago.) Why? My guess is to keep
sites that have already been customized to the previous iPhones’ 320×480
display working as they have been. What this means in practical terms is that
a mobile site (one optimized for an iPhone) viewed on an iPhone 4 appears just
as it does on older iDevices, except with better text rendering (honestly,
“better” isn’t even the right comparison here) and pixelated graphics. Wait,
Let’s say you have a link in your site’s header with a logo image set as a background. The image is 64×64 pixels. On an iPhone 4, that same 64×64 area is blown up to 128×128 to compensate for the double density of the device’s display. So is the logo. To be fair, overall the image scaling the device is doing is some of the best I’ve seen; but sitting next to the crispest text on any digital device out there, it looks fuzzy. The problem is less noticeable with JPGs than with PNGs to my eyes; photos in the body of the page were indistinguishably scaled while the graphics applied in CSS (which are all PNGs) looked poor.
Fortunately, the fix is straightforward. The first step is to figure out the
appropriate media query to target an iPhone 4. Walt Dickinson picked up that
part for us based on Hyatt’s aforementioned piece. The second is to create
a new version of each graphic that is double the horizontal and vertical
resolution of the original (ie, our 64×64 pixel logo will now be 128×128
pixels.) The final step is to overwrite the
background-size properties on each of our CSS selectors that have a
background-image rule applied.
background-image should, obviously, point
to our new higher resolution graphic, while
-webkit-background-size gets set
to the dimensions of the original graphic. You could forgo targeting iPhone
4 separately and just have all of your mobile viewers get the larger image and
scale it down, but that significantly impacts the download size of the page to
users that gain no benefit from the larger image.
Here’s a sample of how to do this all in one CSS file:
Besides background images,
text-shadow rules also benefit from having their
To see some more awesome techniques for adapting layouts using CSS
queries, read Responsive Web Design by Ethan Marcotte and look for
“Adaptive Layouts With Media Queries” by Aaron Gustafson in the Summer
issue of .net Magazine.