The line between mobile and non-mobile has been blurry for a while. We have tablets and netbooks that fall somewhere between phones and desktops, and even other devices such as game consoles browsing the web, all with varying screen sizes, resolutions, and densities. Now with the iPad 3, we have a device with a 9.7 inch screen with more pixels than the vast majority of desktop monitors. The typical method for displaying a site across such disparate screen sizes without having a completely separate mobile version, is using CSS media queries; in particular, the min-device-width and max-device-width queries.
However, min- and max-device-width can’t tell the difference between an iPad 2 and an iPad 3. This is because for media queries, the iPad3 reports its resolution as 1024×768 just like the iPad 2. Apple did the same thing with the iPhone 4 – it uses the iPhone 3GS’s resolution for media queries. The reason for this is simple; the screen size is the same. If the iPad 3 reported its accurate resolution, sites that had versions optimized for the iPad 2 would treat the iPad 3 as a desktop browser. Moreover, without scaling styles to double the specified size, most sites would be difficult to read. The solution to distinguish one from the other is the media query -webkit-device-pixel-ratio. A value of 2 indicates a retina display, that is, iPad 3 or iPhone 4+. A value of 1 indicates normal screens, but since only certain webkit browsers support this property, you should probably assume 1 and specify overrides for 2.
Most desktops are assumed to have a screen density of roughly 72 ppi (pixels per inch,) meaning that an image 288 pixels in width will take about 4 inches of screen space. At the iPad 3’s native density (264 ppi,) the same image would only be slightly more than an inch wide. Therefore, unless specifically told otherwise, the retina display will double the pixel size of elements on a web page. This makes fonts ridiculously clear and sharp, because they’re rendered using twice as many pixels. For images however, the benefit of the retina display is lost if simply doubling the resolution. Serving images at double the size to the iPad 3 means that your images are as clear and sharp as the text. The downside is that your images now use four times as many pixels (double the width and double the height,) making the file size much larger and hurting download times. It’s up to you to decide how much to optimize in either direction.
In some cases, it really will be necessary to create a completely separate mobile version of your website. Whether you do that or not is entirely up to you and dependent on the details of your individual project. In either case though, you should keep in mind that simply splitting up mobile and non-mobile may be rather limiting. The iPad (along with other tablets) certainly has mobile-like qualities, but it has the screen size to support a more robust site than a phone. With different versions, you have to decide if you want tablets to get the mobile or non-mobile version, or if you want to create a third, tablet-specific version. With media queries, you can adapt to several different screen resolutions, which also has the benefit of being more future-proof.
I certainly think that on those sites for which a single, responsive version is practical, media queries are one important piece of making them work well across platforms. It’s important to realize that they’re usually not the only piece though. Using lightweight JavaScript libraries to handle multiple image resolutions based on media queries, or serving different size images through use of the background-image property avoids loading large images on small screens. Note that some devices, iPhones in particular, download background images for hidden elements, so simply hiding the element with CSS won’t do the trick. In fact, specifying a “default” background image, then overriding it with media queries may cause the device to download both images. The way to work with this is specify both versions of the background image using media queries. One with max-device-width and one with min-device-width.
If you are using one responsive website for all devices, you’ll want to make sure that you don’t have overlap, particularly for the smaller devices. It’s a good idea to start by building the minimal version and progressively adding to it. If done correctly, this has the additional benefit that devices that don’t support media queries will get the minimal version. In addition to the previous tips regarding images, you should keep other resources in mind as well. For example, let’s say you have a large JavaScript library that handles some advanced techniques that you’re not displaying to mobile users. Having them download the JavaScript for the unused effect then becomes pointless, you should use a (small) JavaScript solution to determine when to load larger libraries. Even HTML can cause unnecessary bloat. If you have a large portion of your site hidden from mobile users, you might consider separating it out into multiple versions, or using AJAX to load in the desktop-only parts. Remember that in addition to smaller screens, users on mobile devices usually have much more limited processor power and memory, and often have to deal with less than ideal connection conditions. Serve them content with those limitations in mind and you’ll do fine.
