iPad 3 and Retina Screen: What it means for your mobile commerce site


On March 19 the shiny new third-generation iPad hit shelves.

The product is close to a guaranteed success – Apple is already having
trouble meeting pre-order demand and it follows on the heels of two
prior iPad home runs that created a new device category and still
dominate the tablet market.

The biggest change in the new iPad 3?

A huge jump in screen resolution from 1024 × 768 pixels to an incredible
2048 × 1536 pixels. Apple calls this super-high-resolution screen its
Retina display.

After a few days of using the new iPad with its Retina display, we can
confirm the screen is remarkable and very noticeable in many areas (more
on this later).

As Kevin Suttle posted on Twitter: “No seriously, this screen is so
bright and crisp it looks fake.”

So what does the Apple iPad Retina display mean for your website and
your business?

How big is the iPad Retina display?

The question isn’t really how big but how dense.

The iPad 3 screen remains the exact same size as previous iPads – 9.7
inches. Yet that same screen size now packs more pixels than a
high-definition 50-inch TV.

Think about how clear a Blu-Ray movie is on a high-definition TV.
Compress the image on that TV to the 9.7-inch screen of the iPad. Then
add about 50% more pixels. That’s how crisp and sharp images are on the
new iPad’s Retina screen.

Or, that’s how crisp and sharp images can be on the iPad’s Retina
screen. Very few images are actually that crisp and sharp because very
few images are large enough to take advantage of the screen’s
capabilities.

As you can see from these comparative images of pixel displays under a
microscope
, there is a massive difference between the iPad 3 Retina
display’s pixels and previous iPads.

The Problem the iPad Retina Screen Creates

The iPad Retina’s precise rendering of images often literally reveals
the rough edges around almost all the images across the web.

flower-comp

We wanted to dig deeper into what this meant for web designers. So we
asked expert web designer Dave Shea to help us understand the
consequences.

“We’ve all seen clip art printed out from the web,” said Mr. Shea. “On
paper, these jagged, pixelated illustrations stand out like a sore
thumb. A professional graphic is crisp and clear even when printed. The
iPad Retina display will make all your existing graphics look like
pixelated clip art.”

As John Gruber said, “the iPad display is so good that it shows,
like no device before it, just how crummy most images on the web are.”

Designing Tablet Websites for iPad Retina

So with great opportunities come great challenges. In this case, the
challenge is – what can we do to make images look amazing on the iPad
Retina screen?

Here are a 4 tactics we’re pursuing to adapt websites to the new iPad
Retina screen.

1. Prioritize Important Images

The first step we wanted to take was to understand what images are more
important than others.

For many of our mobile commerce customers, product images are
particularly valuable for selling products, especially in fashion and
apparel.

High-quality images provide customers with a view of product details
right down to the fabric texture, stitching, seams and garment quality.
There is a direct correlation between the quality of these images and
the conversion rate and revenue of fashion and apparel sites.

So start with product images because they sell the product. Or start
with whatever images on your site are the key eye candy for your
audience.

Most web production workflows already start with larger,
higher-resolution images that then are scaled down for the web. So the
right images are available, they just need to be made accessible to the
iPad Retina screen.

And besides, the alternative is not good.

“If images are a blurred mess, or the visitor has to use some kind of
synthetic ‘product zoom’ feature to get a high quality experience,
that’s going to cost you in conversions,” said Mobify’s Chief Architect
Peter McLachlan.

2. Make Text Into Text

The first thing everyone notices on the iPad Retina display is how
clear, crisp and sharp text is rendered. The reading quality is
noticeably heightened.

The downside to this jump in text readability is that text that is not
text looks comparatively terrible.

What kind of text isn’t text?

Text that’s an image. Overlay text. Button text. Text in navigation.
Text in headers, sidebars, search boxes and more. All of these examples
are example of text that is commonly saved as images on websites.

This text may be saved as image text for all sorts of reasons – it’s
easier, it’s more well-defined, it’s a brand guideline.

No matter why it’s saved as an image the reality is that it looks lousy
on higher-resolution displays like the iPad Retina.

So designers are faced with a problem – they can either work with the
higher-resolution display and make the text into text with the
appropriate placement and styling or they can start managing multiple
versions of images with the text.

Either approach can work but it’s our hunch that making text into text
is the best path forward for a scalable design approach.

3. Boost Button Sizes

Buy Now. Add to Cart. Learn More. Start Here.

Buttons provide the bridges between micro-conversion points on the web.
They’re everywhere and they’re incredibly important to the efficacy of a
website.

They are also almost always the focal point of a web page. They provide
the desired outcome. They move the user between conversion points in a
process.

So when they look bad, people notice. On the new iPad Retina display,
almost all buttons look bad.

Even Amazon’s famous 1-click Add to Cart button looks grainy and
blurred.

The buttons that look the best feature the least adornment. Bezels,
reflections, gradients – all these effects reduce the readability and
clarity of buttons.

When possible, avoid them. If you’re using them, make the contrast
between elements as high as possible, with white text on dark, solid
backgrounds providing the best view that we found in our browsing.

4. Make the Logo Bigger

It’s a common joke among designers that the client is always going to
say, “make the logo bigger.” But in this case, it makes perfect sense.

Logos are common images that stand out poorly on the Retina display
because they’re on every page and often highly optimized for
performance.

Identical logos viewed on an iPad and iPad 3. Images scale up
to fit the iPad 3’s higher resolution screen screen and look blurry as a
result. As you can see above, the same image looks blurry and undefined
on the iPad 3.

logo-comparison2

This is relevant because all “regular” images on most sites are not good
enough quality to be displayed clearly on the iPad 3.

So change them and make your brand or your customer’s brand look as good
as you know it is.

Update 5. How to create High Definition (HD) images for the iPad Retina display

Thank you to folks who asked the question in the comments – how do you
create the image.

The simplest answer is just to double the dimensions of the image then
use CSS to make it the right size.

So if you want to create an HD image at 200 x 200 on a Retina display,
create the image at 400 x 400 then use CSS to control the HD image down
to 200 x 200: img { width:200px; height:200px; }.

The HD images are still 72 dpi resolution.

The tricky part is then preventing non-HD devices from unnecessarily
downloading the larger images.

How Mobify.js Manages Resources for iPad Retina

So how do deliver the right experience to the iPad Retina in a scalable
way that ensures outstanding performance?

This is where a client-side adaptation framework like
Mobify.js
 comes in.

(Try Mobify free here.)

Mobify can detect extra-high resolution displays, like the iPad 3 Retina
and iPhone 4 and iPhone 4s with Retina, and serve them higher quality
images.

And unlike many other techniques, like the approach Apple has taken to
delivering Retina-quality images by just double-serving images
, it
lets you just serve the right image to the right device. So page
performance is always as fast and snappy as possible.

Using the Mobify.js method simply gives developers full control so they
can always deliver the right experience to every screen.

And essential additional technologies like great image minification and
a global Mobile Cloud CDN are part of the infrastructure that makes
deployment a breeze.

Developers using Mobify just add a higher resolution image reference and
a few lines of code telling it to display on high-res devices. Done and
done. You’re ready for iPad Retina displays and any other
high-resolution displays on the horizon.

Designer and air guitar champion Rob Weychert summed it up succinctly
in a tweet:

“Screen resolutions are going to increase. Period. Adaptation is the
name of the game in web design. The sky is not falling.”