Hans Sprecher

Simulating Mobile Sites on an iPad

Hans Sprecher, @honzie

2.2.2011

One of the huge differences between in iPhone and an iPad is mobile phones are probably one of the most personal items in our lives. Think about it. You may share your apartment, workspace, bathroom, bed, or even toothbrush. But a phone. That's different. Your phone follows you around, almost always within arms reach. Awake, on the job, outdoors, asleep at night—it's with you.

So, when demoing a mobile site, it can be difficult to show how users will actually interact with the website and device.

A Solution for Mobile Site Demos

One way to demo mobile sites is to use an iPad.

The iPad has the same interactive rules and rough experience as an iPhone. However, it's a much larger device, which changes how people can interact with it. One nice thing about iPads is how they sit on tables flat. They look up at users, almost wishing to be turned around and shared. People can gather around, touch, swipe, resize, and interact with the device and each other.

This means that if you show a client a mobile website on an iPad, you can both stand with the device at a comfortable distance, playing around with the interface.

Upsizing the Demo

When using an iPad to demo a mobile site, it makes sense to have the site match the scale of the iPhone. This means the images will be scaled up and the text will be scaled up. This turns the iPad into a massive sheet of paper that is a playful, large iPhone.

The Scaling Ratios

* Note that the 4G is double the resolutioin of older iPhones. This means many developers simply double their websites for the 4G. In fact, few developers are likely to upsize the resolutions of their images to be readable on the extremely dense resolution of a 4G.

The Math

768 / 320 = 2.4
1024 / 480 = 2.133

This means that for portrait sites, you'll need to multiply the site by 2.4 times to make the iPhone fit onto the iPad. For landscape sites, increase the size by 2.133 times.

The CSS

Since the iPad uses a very capable WebKit browser, you can use CSS3 media queries and the CSS zoom property in order to upscale the site. Here is some CSS that you can easily drop into your stylesheet to size up websites automatically for iPads.

/* Portrait iPad should scale
the site 2.4 times */
@media (min-width: 768px) {
	body {zoom:2.4;}
}

/* Landscape iPad should scale
the site 2.13 times */
@media (min-width: 1024px) {
	body {zoom:2.133333;}
}

Conclusion

By using media queries and scaling mobile websites designed for iPhones and newer Androird devices to display on iPads, you can give yourself a dynamic sales tool. It turns a personal experience into a shared group experience and allows developers and designers to help show how the site can actually be interacted with.

Please let me know if you find any errors or discover any enhancements to this method of simulating an iPhone on an iPad. Drop me a line via Twitter @honzie.