Optimizing Your Site for the iPad Mini and iPhone 5

In the past few months, Apple has rolled out an iPhone and an iPad with different screen sizes than previous devices.

If you haven’t yet paid attention to making your site mobile-optimized, the popularity of these new devices, along with many other options from Apple and in the Android world, make it that much more important for you to do so.

Let’s assume that you already have a mobile-optimized site. What do these new devices mean for your website?

iPhone 5’s New Screen Size

The iPhone 5 introduces a taller screen size. The hardware display resolution is 1136 × 640, compared with 960 × 640 for the iPhone 4. The effective resolution is half of these numbers (due to the retina display), or 568 × 320 compared with 480 × 320 for the iPhone 4. So there’s an effective height increase of 88 pixels.

Typically, the pages of your mobile site are all taller than this anyway, and users scroll to see more content. Since you will also have lots of visitors from Android phones with a variety of screen sizes, you can’t make any assumptions about screen dimensions.

If you’ve used responsive design and haven’t done any iPhone-specific tweaking, you’re probably all set for the iPhone 5. If you have sized any pages to exactly fit an iPhone screen, there will be an 88-pixel blank space at the bottom on an iPhone 5. If you want a non-scrolling home page that fills the screen on a variety of devices (without blank space at the bottom of all but the smallest ones), you’ll need to add code (using either CSS media queries or JavaScript) to resize some element(s) depending on the screen height.

Apple’s New Maps App

The iPhone 5 also introduced Apple’s new Maps app, replacing Google’s Maps app. Older iPhones also get the new Maps app when they are upgraded to iOS 6.

You have no doubt heard the complaints about Apple’s Maps app. In time, Apple’s data and features will grow to match Google’s, but today, they are behind.

In any case, any links to Google Maps on your website will still display Google maps on iOS 6 devices; they will just be shown in the browser-based version of Google Maps, instead of in the maps app. (Note that this is not true for native apps; if you have an iOS app that links out to the Maps app, it will now display the Apple Maps app.)

The iPad Mini: Just a Smaller iPad

While the iPhone screen got bigger, the iPad family gained a smaller version, the Mini.

Despite it’s smaller size, the iPad Mini does not introduce a new effective screen size; like earlier iPads, it is 1024 × 768. It is physically smaller, of course, with a diagonal measurement of 7.9 inches, compared with 9.7 inches for earlier iPads. As a result, each pixel is smaller, but from an HTML rendering perspective, the devices are identical.

As a result, if your website works well on earlier iPads, it should be fine on the iPad mini. However, everything will be about 20% smaller. If you have small text that is barely readable on the iPad, it will be even harder to read on the iPad mini. And if you have menu items, buttons, or other touch targets that are hard to hit on an iPad, they will be a bit harder to hit on an iPad mini.

If you are using high-resolution images to optimize for the retina display on other recent iPads (which gives you twice as many physical pixels as effective pixels), that effort is wasted on the iPad Mini. The Mini’s pixel density, at 163 pixels per inch, is greater than the effective density of the iPad (132 pixels per inch), but not as high as the physical pixel density of the Retina display (264 pixels per inch). The higher-resolution images won’t hurt anything on the iPad Mini, but they won’t help either.

Bottom Line: No Big Changes

If your website is well-designed for the iPhone and iPad, it’s probably just fine for the iPhone 5 and iPad mini. If you have pages that are tuned to the height of the earlier iPhone screen, or if you have text or buttons that are already too small on a regular iPad, you may want to do some tweaking.