Simulating Mobile Sites on an iPad

2.1.2011

Mobile phones are one of the most personal items in our lives. You may share your apartment, workspace, bathroom, bed or perhaps toothbrush. But a phone. That's different. Your phone follows you around, almost always within arms reach.

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. IPads 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.

If you show a client a mobile website on an iPad, you can both stand with the device at a comfortable distance, using 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

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 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 scales 2.4 times */
@media (min-width: 768px) {
  body {zoom:2.4;}
}

/* Landscape iPad scales 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 sales tool. It turns a personal experience into a shared group experience and allows developers and designers to help show how the site can be interacted with.

Read More
CSS