Retina Display and CSS Background Images
by Erik Runyon on October 13, 2010
Anyone who owns an iPhone 4 has experienced the beautiful new Retina Display. Text is amazing, colors are vibrant, but apps and sites that are not updated to handle this display usually look less than stellar. This is because the Retina Display, which has a display that is twice the resolution of most devices, scales images up so they appear to be the “correct size”. The solution to this is to target these devices using a media query and replace the graphics with a higher-quality version.
Use case: m.nd.edu
My first opportunity to work with and fix this issue was for m.nd.edu. The first step may also be the most difficult. Through trial and error I worked with our designer Jim Gosz to re-create the entire interface in both standard and double resolution. For this article, I’ll focus on the home-screen icons, displayed here at double the size to accommodate the Retina Display. Below is a screen-shot from the iPhone 4 simulator which shows how the images appear pixelated due to scaling.
Bring in the Big Guns
The original icon size on the home-screen is 57×57 pixels. For the Retina Display, Jim created additional icons at 114×114. I chose to follow the naming convention Apple uses in its SDK to target the high-res images by adding the suffix “@2x” to the file-name. So for low-res devices, if the standard icon is “icon-news.png”, the RD devices would be “icon-news@2x.png”. To get these into the mix, I added a media query into the css file that targets the Retina Display:
@media all and (-webkit-min-device-pixel-ratio: 2) {
#home-news a {background-image:url(images/icon-news@2x.png);}
}
However, after refreshing the screen, the images look like this:
Obviously not ideal. This is where the background-size property comes in. By adding
#homenav li a {background-size:57px 57px;}
to the Retina Display portion of the style-sheet, the 114px images will display at 57px and thereby make everything appear at the proper scale. The background-size property will also accept “auto” as a value. So I could have used “background-size:57px auto;”. With this in place, the icons appear as below:
I think we can all agree that looks much better. Is this something I’ll use on every site I build? Probably not. Creating multiple versions of each graphic is labor intensive. But for mobile specific sites, it’s definitely worth it. Especially since we’ll be seeing more devices arriving soon with similar screens.
Using Print Styles to Create a Basic Mobile Experience
by Erik Runyon on January 24, 2010
In the last article, we made our print stylesheet. Now we’re going to take that stylesheet and turn it into a basic mobile stylesheet. Now when I say basic, I’m talking VERY basic. This is not what you’re displaying to your iPhone and Android users.
Copy, Paste and Tweak Your Way to Mobile
First off, create an empty your mobile stylesheet and link it up:
<link href="/css/mobile.css" media="handheld" rel="stylesheet" type="text/css" />
Grab your print styles and paste them into your mobile stylesheet. You’ll need to take a few of the items you hid (such as navigation), bring them back and give them some style. As with print, focus on what’s important to this user experience and hide what’s not.
Branding is Still Important
We’re going to use the same in-line images we included in our print stylesheet to brand our mobile site. How you have them set up in your print style may be all you need. If not, feel free to use "width" on them to make them fit. I typically recommend against using css to change the height/width of images, but I make an exception in this case.
Images
Since most of your content images are going to be wider than the screens of most phones, you should add max-width:100% to images in your content.
Text
One of the first things a basic mobile user should see on your page (either immediately preceding or following the header) is skip links. This is a list of anchor tags to key elements on your page. At a minimum, it should include links to navigation and content. As an added bonus, these links are helpful to screen readers as well. Be sure to hide this list in your print and screen stylesheets.
When it comes to body copy on the web, there has been a long-standing serif vs sans-serif debate. As a personal preference, I usually go with sans-serif for screen body copy (serif for titles), and serif for print. If you look at my print stylesheet, you’ll see the following font stack:
Georgia, Times, "Times New Roman", serif
For screen and basic mobile, I’m using:
"Lucida Grande", Lucida, Helvetica, Arial, sans-serif
And Off We Go
If recent trends tell us anything, it’s that an increasing percentage of web users are going to be accessing our sites on small screens. As developers, it’s our responsibility to to give at least a passing nod to these users and give them a pleasant experience. Offering basic mobile styles is the first step.
Two of the easiest way to test your newly crafted mobile view:
- Opera 10′s small screen view (View > Small Screen)
- Switching your style view if Firefox using the Web Developer extension. (CSS > Display CSS By Media Type)