The arrival of iPad mini has been widely anticipated. To anyone
paying attention, the arrival of the iPad mini should not be a
revelation. The only somewhat surprising fact is the iPad mini doesn't
ship with Apple's vaunted Retina display.
We wanted to know how the iPad mini would affect our work (we power
$100-million in mobile commerce and empower over 75,000 developers with
our adaptive mobile web platform).
So we tapped into our in-house design, development and product expertise
and put our minds to thinking about how best to build for the iPad mini.
Summary: The most popular thing to do on an iPad is surf the web.
Yet existing desktop and mobile websites won’t gracefully adapt or
perform well on Apple’s new iPad mini because it is a new device type
with a screen size between mobile and tablet – too large for mobile
experiences, too small for desktop experiences.
Overall, we anticipate the iPad mini will be seen as a huge leap forward
in the mounting evidence that every modern websites needs to be adaptive
to meet demands of visitors using any and every device. In particular,
websites whose revenues are directly linked to the quality of the
experience they provide to customers – e-commerce vendors, multi-channel
retailers and media companies – need be adaptive starting now.
The bottom line? If you want to be relevant on the web today your
website must adapt and perform on all the devices that use the web.
Quick History: Desktop Websites on Tablets & iPads
We’ve found that for the most part, standard desktop sites can work on a
full-sized iPad. Provided they avoid major obstacles – Flash elements or
modal windows – desktop sites can be an underwhelming but passable
experience to present to tablet visitors.
Tablet web experiences improve immensely with some adaptive
enhancements: touch-enabled interface elements; larger buttons; and
smart input forms that use the device’s capabilities. We regularly see
increased conversions and effectiveness when websites are designed
specifically for tablet devices (like this one for Ideeli), not with
one-size-fits-all designs that just happen to accommodate tablets.
But a desktop site won't work on a seven-inch iPad mini. A typical
12-pixel font will be unreadable. The buttons will be unclickable. The
form inputs will drive people away.
At worst, a desktop website will look broken. At best, a desktop website
will be hard to use.
The closest comparison experience is to viewing a desktop website on a
mobile device. It’s painful with all that pinching, zooming, targeting
tiny links, and panning around to read any text.
That’s a similar, painful experience as your visitors will have viewing
your desktop website on their iPad minis. So what can you do?
Here are five ways web designers and developers need to rethink website
delivery for iPad minis in today’s post-PC, multi-device universe.
1. Desktop Websites on Tablets are Dead
Let’s start with the obvious: your desktop website alone isn’t going to
cut it.
If you have a mobile website, you can consider sizing it up to
accommodate the iPad mini screen. If you have a tablet website, you can
consider sizing it down to accommodate the iPad mini screen.
Of these two options, we anticipate that sizing up a mobile website will
be the best approach as a starting point.
But this is a Band-Aid solution. It’s time to address the big question
of how to make your website adaptive to all devices. The world is
shifting.
We live in a multi-screen world where Google reports, “90% of people
move between devices to accomplish a goal, whether that’s on
smartphones, PCs, tablets or TV.”
As a device closely related to the smartphone, we anticipate the iPad
mini will fit into the above graphic between smartphone and tablets – as
a tool people will use in the setting (car, bus, home, office, beach)
and context (productivity, leisure, research, entertainment) they choose
to suit their needs.
So your website has to adapt to all the various ways people will use it.
Here are some starting guidelines to make that happen.
2. General Tablet Design Guidelines
Now let’s get to some of the nitty gritty details of designing for
tablets, like the iPad mini.
To start, we’ve compiled these general guidelines from designing for
tablet devices.
The new wrinkle with the iPad mini is a new screen size. So, first
ensure that your design accommodates a 1024 x 768 pixel-sized screen
(same as iPad 1 and 2) in both portrait and landscape orientations, then
start with:
- Bigger text – Make text larger for readability, with a minimum
font size of 14 pixels.
- Better padding – Increase padding and line-height of densely
packed links to increase touch accuracy. This applies especially to
form elements and calendar dropdowns.
- Removed hovers – Remove mouse hover interactions wherever
possible. If you want to keep them, extend hover to support
tap-and-hold interactions as well as mouse hover.
- Content fluidity – Consider making the design flexible to cover
the full range of tablet screen sizes – from 600px to 1000px wide –
instead of fixing page widths in stone.
- Banished Flash – With iPads clinching such a big portion of the
tablet market, Flash elements must be removed.
- Faster positioning – Remove elements using the declaration (real
or simulated) "position:fixed" because they slow down page scrolling
on tablets much more than on desktop.
Bonus tip: Devise your own tablet design guidelines by observing what
people say, what they do and how those are sometimes the same and
sometimes different. Talk to your users and listen to what they say.
Then review your analytics to see what they do. Where your observations
diverge, we recommend using data to guide your decisions without being
deaf to what people are saying.
For example, one recent tablet enhancement we discovered was immensely
beneficial was a text resizing control. In interviews, users said they
loved it because they didn’t need to use their reading glasses. In
analytics, users showed they loved it with deeper sessions and a better
conversion rate.
Each website’s tablet design guidelines must come from the specifics of
its situation so start with your users and respond to their needs. Read
on for how to do that.
3. Surprise: User Habits May Vary
The iPad mini may have the same 4:3 aspect ratio as the iPad and it may
be called an iPad, but it’s an altogether different creature from the
tablet that’s already sold over 100-million units.
Apple's new "middle child" sits somewhere between the iPhone and the
iPad. We anticipate the size and form factors of the seven-inch device
will make it more portable than the iPad and yet much more of a personal
device, like the iPhone and iPod Touch.
A different form may also mean different function for the iPad mini.
For instance, we think the iPad mini will be a huge hit for commuters
and travellers who can easily slip the seven-inch screen into a handbag,
laptop bag, purse or carry-on case. People will use it for content
snacking, distraction, entertainment and productivity. We predict that
iPad mini users will seek out and engage in immersive experiences:
e-books; movies and videos; games and other types of entertainment;
reading in medium and long form; social media like Facebook and Twitter;
and shopping and product research.
Of course, we’ll need to wait and see how iPad mini user behavior
emerges. But once patterns emerge, it’s imperative you understand user
habits and be able to build experiences that people return to. For
foundational understanding, we always like to revisit the three modes of
mobile usage:
- Repetitive Now users are seeking recurring real-time
information, such as stock quotes, sports scores and auction
listings.
- Bored Now users are seeking distraction, entertainment or
connection through a mobile device on services like Facebook,
Instagram and Twitter, or in their email.
- Urgent Now users are seeking urgent information on their mobile
device that is often related to location or activity, mostly through
search engines and recommendation sites like Yelp or Foursquare.
We’ve gone in-depth to unpack these modes in this blog post: Three
Modes of Mobile User Experience.
And no matter how people use your website, the #1 requirement across
all websites and all kinds of web usage is that the experience is fast.
4. Performance: Not Optional
The iPad mini will connect to the web by wifi and by cellular networks
so its performance will resemble a smartphone more than a full-sized
desktop computer.
To succeed in designing and developing for the iPad mini, web builders
will need to respect performance constraints, both in delivering content
and in running content on the device. Here are some best practices to
ensure your customers get a snappy and satisfying experience.
- Cut down on HTTP requests. While tablets have screen areas close
to that of laptops, their processing power is much more like phones.
Additional on-page elements – like Facebook Connect and Google +1 –
might fit into a tablet-sized wireframe, but real-world performance
and user experience can quickly suffer.
- Optimize your images. The iPad mini boasts a beautiful,
high-definition display that's not quite Retina quality but close.
It’s tempting to serve the largest possible image to the device and
then let it take care of downsizing the image. Don’t be tempted! Not
taking responsibility for your images is digitally wasteful and
makes for a poor user experience. Serve the right images to the
right device, full stop.
- Manage scripts and styles. You know all those JavaScript
snippets in your web page and CSS styles, or stylesheets, that load
for desktop visitors? Yeah, your iPad mini visitors don’t want them
slowing down the page and sucking up device resources. Use a service
like Jazzcat to concatenate JavaScript and CSS.
- Choose CSS transitions. For animation effects on the device, use
CSS transitions rather than JavaScript animations. They’re faster.
- Bonus tip: Use 3D transforms to trigger hardware acceleration.
Your users will thank you with increased usage.
The last word in iPad mini performance is this common refrain – you
can’t simply deliver your desktop website and expect everything to be
dandy.
So how to deliver an optimized website for the iPad mini?
5. Go Beyond Responsive and Get Adaptive
Responsive design techniques are almost certainly going to be part of
your approach to building for a multi-screen world of devices, including
the iPad mini. They are part of our approach, too.
But responsive design is just one element of an overall adaptive
approach that incorporates more than just front-end CSS.
As Brad Frost puts it in his excellent presentation, Beyond media
queries: anatomy of an adaptive web design:
Responsive web design by definition is defined as fluid grids,
flexible media and media queries. However, it’s part of a much broader
adaptive philosophy/strategy. Because the term has grown in
popularity, it should come to define all that goes into crafting
multi-device web experiences.
So call it responsive or adaptive, the critical idea is to maintain a
One Web approach. That is, to use open web standards like HTML, CSS
and JavaScript, and to deliver an amazing experience to your users
through the same URLs.
If your website is not too complex, the simple tactics of responsive
design may provide a full-enough solution – fluid grids, flexible media
and media queries.
But, as soon as you get any complexity, big responsive design pain
points arise, such as:
- Image management and optimization – Images for different devices
and displays need to be available, but it’s hard to manage images
with responsive design. Here’s a good overview of responsive design
image optimization issues.
- Resource management and optimization – Beyond image management,
overall resource management – images, scripts and CSS primarily – is
not part of responsive design but has a huge impact on a website
experience.
- Content reflowing – Responsive design uses the property
display:none and is very limited in how it can manage content
display.
- User Interface (UI) elements – Many devices work best with
specific UI elements tailored to that device. Form inputs, menus,
image sliders all are examples of UI elements that work best when
they’re specific to a device type.
- Tables of data – Combine the pain of images and content
reflowing and you have the problem of dealing with tables in a
responsive design. Some partial solutions exist but they’re very
challenging to implement.
Responsive web design is a great series of techniques for front-end
layout. What it needs now is better tooling and advanced functionality
to address some of the gaps and pain points that remain.
The reason that 86% of responsive website simply deliver the same HTML
pages – with all associated image, script and code resources – to all
devices –
is because it’s hard to do otherwise. Instead of doing the
hard work, most responsive website spray their data to every device and
pray it will work out in the browser.
The addition of the iPad mini and its projected sales success makes the
need for a fully adaptive approach more critical than ever before. Now
is the time to start investing in an approach that’s future friendly.
We have a vision to mobify the web – to make it amazing on all devices.
We’re working on products, strategies and approaches that make
responsive and adaptive websites, and that ensure one website will work
on all screens no matter the size, shape, pixel density, user interface
elements, or new variable aspect yet to be invented.
If you’d like to see what that means today, try out Mobify Studio for
free.
