Designing Digital Magazines for Different Tablet Sizes

Popular Science+ "Top Tech 2010" on the Samsung Galaxy Tab

This week, Bonnier R&D and Popular Science introduced our latest digital publishing experiment, Popular Science+ Top Tech 2010, an app created exclusive for the new Samsung Galaxy Tab. The app is a one-time special issue of the magazine, showcasing its top 100 innovations of the year across 11 categories. The issue is built on the same platform we use to publish on the iPad, Mag+, as a creative experiment in what it takes to make a magazine on a 7-inch wide-screen display, and on an Android-powered device. We believe there is still a need for a lot of experimentation in the market - and to keep on discussing with our users what functionality and design they prefer.

Here are some of our key learnings so far:

Size matters
With 7-inch screens, there are some serious design constraints. Less screen real estate makes it harder to use the magazine designer’s essential tool, a sense of scale, to create dynamic, engaging and clearly organized layouts. There is a tendency for everything to shrink down to a similar size, with nothing popping out to catch your eye. Clearly, the screen resolution needs to be very good when presenting image-driven magazines on smaller screen devices.

However, although it requires more simplified layouts, the 7-inch wide-screen display still gives designers enough space to be graphic and create deliberate layouts—unlike, say, 4-inch smartphone screens, which offer the best experience when made entirely hierarchical (imagine your favorite newsreader app with a full screen of text). Luckily, our Mag+ platform with two distinct layers, a look mode and a read mode, is very suitable for smaller screen estate. In general, we see that text-driven magazines will be easier to translate to smaller screen sizes than the more visually driven.

But screen shape matters more than screen size
As we began adapting the layouts for this screen, we found that what necessitated rethinking even more than the smaller size was the wide-screen (1024x600) format of the device. Simply having a different shape to the creative canvas means you need to re-examine the relationship between elements on the page. The solution is to make the pages simpler and more hierarchical, as you have less room for multiple elements interacting in the same visible space. In this way, we can keep a beautiful, immersive presentation that doesn't make the screen feel crowded.

Orientations become more distinct
The more rectangular wide-screen shape means there's more difference between the vertical and horizontal orientations. For instance, to keep type at an easily readable size and in a column of sufficient width, the vertical orientation creates a lot of overlap between text and images. So we decided to lock orientation to the horizontal, which gives the images and text more room to breathe, while still using the layered presentation unique to Mag+ to create that feeling of dynamic and interactive stories, with new images moving into place as the user scrolls the text. We also of course kept the Mag+ feature that lets you turn off the text and focus solely on the images. The more widescreen your canvas, the more difficult to create beautiful design that works when the device is rotated. We belive that more magazines will be forced to lock the experience to one direction only.

There's great potential for multimedia
The wide-screen format really shines at showing off HD videos, so we're eager to further exploring integrating that content into publications, particularly in the full-screen style overlapping with content, which is unique to Mag+.

As we continue to push into the world of tablet devices, we’ll share our learnings in this blog. What other tablet experiments would you like to see? Let us know in the comments.