1. Design-Once Strategy for Tablets
{Creating a single layout for all 7”-10” tablets}
Popular Mechanics initially designed the monthly editions twice—once for iPad
and then again for 7” Android tablets (which then got stretched up for 10” Android
screens, to not-great results). Realizing this wasn’t a sustainable nor desirable
workflow, I created a streamlined production process which resulted in a
single design usable on screens of varying sizes, aspect ratios and resolutions.
2. I created a list of design, technical, and conversion considerations,
from legible type sizes to accommodating different aspect ratios
to the differences in color and tonal representations across different devices.
I even suggested using a responsive grid: 3 columns for 10” devices, 2 columns
for 7” devices, 1 column for phones (though reformatting for phones would be
much more complex). We decided to narrow our scope to just tablets,
which mostly rely on differences in cropping and functionalities.
3. iPAD
The screen has
generous margins along
the sides. Elements can
intrude into the margins
but will be cropped out
on the Android versions.
ANDROID
The margins have
been cropped off to
accommodate different
aspect ratios. (Even the
7” and 10” ratios differ!)
Headline type was
slightly repositioned
ALL DEVICES
The text sizes are
optimized to be
comfortably read at both
10” and 7” sizes. The
same file is used for all
formats—a single process
feeding all exisiting and
coming devices within
this dimension range.
4. FUNCTIONALITY
DIFFERENCES
Popular Mechanics’
iPad app is custom
programmed in-house,
so it has some advanced
functionalities not
offered by the Android
e-Readers, such as this
Google map usage. These
features are dropped
for Android tablets.
We also balance
functionality
differences with their
importance and avoid
certain features only
available for iPad,
so that the user
experience across
platforms doesn’t
vary too widely.