iPad

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.

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.

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.

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

Starting Guidelines for Tablet and iPad Website Design

In the last few weeks we’ve been working with clients on extending Mobify Enterprise, our galaxy-leading mobile e-commerce product to include tablets like the iPad.

As a result, we’ve been learning a ton about what works, what doesn’t work and what are some best practices when adapting a website design for a tablet and iPad world.

And we thought we’d share.

This isn’t a definitive list but it does provide a great start if you’re designing for tablets, reviewing wireframes or just thinking about how to reach people who are visiting your website on tablets and iPads.

As our senior engineer Roman Rudenko says, “These are my gut feel guidelines.”

• Make text larger for readability. Bonus tip: Consider offering a text resizing control.
• Increase padding and line-height of densely packed links to increase touch accuracy. This applies especially to form elements and calendar dropdowns.
• Remove mouse hover interactions wherever possible. If you want to keep them, extend them to support tap-and-hold interactions as well as mouse hover.
• Consider making design reflow-friendly to cover the full range of tablet screen sizes — from 600px to 1000px wide — instead of fixing page widths in stone.
• Beware the Flash. With iPads such a big portion of the tablet market, Flash elements need to be removed.
• Remove elements using the declaration (real or simulated) “position: fixed” because they slow down page scrolling on tablets to much greater extent than on desktop.
• Consider cutting some HTTP requests, as you would on mobile. While tablets have screen area close to that of laptops, their processing power is closer to that of 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.

Have more tips to add? We’d love to hear them.

Please add them below as comments and we’ll keep building this out.