, March 21 2012

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.

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.

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

, September 30 2011

Mobile Stats 57% of Mobile Posting on Facebook from Mobile Web

One of the discussions we often get invited to contribute to with clients is a discussion on their mobile strategy.

What's the right thing for them to do: mobile apps or mobile web?

Each client has their own situation, customer needs, goals and context. A blog post won't do justice to answering the full question.

But this blog post seeks to provide some data on how people use the largest website in the world with their mobile devices.

Using data gathered by Dan Zarrella in his strong post New Data: 33% of Facebook Posting is Mobile, we broke down the 33% of mobile traffic posting to Facebook a little further to see how they were accessing Facebook.

(Click for full size image.)

According to the 70,000 samples Dan gathered, mobile web contributes 57% of the mobile posts to Facebook. All apps combined contribute 43%.

So when we hear rumors of Facebook's Project Spartan now we can start to see the reasoning behind the investment and direction towards a full HTML 5 version of Facebook.

Reading into the numbers, I think we can guess that Facebook see mobile web's popularity today and they also see a dominant future for the mobile web.

So while apps are part to their mobile strategy, the mobile web is essential.

(Thanks to Darren Barefoot for the coffee and conversation that spurred this post.)

, September 21 2011

Starting Guidelines for Tablet and iPad Website Design

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

, November 9 2010

The right to zoom

A couple of days ago, Peter-Paul Koch kicked off a debate concerning zooming on mobile optimized sites. 

Given the de-facto standard amongst mobile optimized sites on the web today is to prevent zooming, PPK is definitely swimming up stream with this opinion.  I love that! :) Has the mobile design world really been heading in the wrong direction all this time?  Since we spend pretty much all day thinking about the mobile web here at Mobify, his tweet raised some eyebrows here and led to a great discussion about the value of zooming.  I'll talk about our conclusions, as well as some new features Mobify has to empower site designers.

Before I weigh in on the subject, it makes sense to answer two questions.  1)  Why would a visitor to a mobile optimized site want to zoom on content?  and 2) Why would a mobile site designer want to prevent zooming?

Let's begin by addressing the first question.  The zoom metaphor was introduced in mobile browsers as a way to mitigate the small but pixel-dense displays available on mobile devices.  By zooming, the site visitor can make text more readable, and see more detail in images.  I'll leave out other rich media - if a video or flash element is consuming a significant chunk of visitor attention, these elements will tend to be full-screen.  Since all modern mobile browsers integrate zoom functionality, explicitly blocking it contravenes what is becoming an established convention.

So why would designers want to prevent zooming?  First, it makes navigation faster on touch devices.  When a mobile visitor makes a swipe gesture, there's only one axis for interpreting the input.  It prevents accidentally scrolling content offscreen in a horizontal way.  Children and young-adults may find precise swipe gestures trivial, but for the majority of adults, the swipe interaction method is very new, and inaccurate swipes are common.  Second -- unlike a desktop browser, designers of mobile sites can have complete confidence that the web browser is occupying the entire screen real-estate, and for modern smart phones, they can be certain the screen has a minimum virtual width of 320 pixels.  This lets designers custom-tailor the site, including navigation and site-branding for a specific size.  Tremendous effort is expended on desktop sites designing around not knowing how wide or how tall the browser will be.  Many sites don't even make the attempt and use fixed layouts.  You could say a fixed-layout on desktop is similar to a mobile site that doesn't allow zooming, but in fact that's not the case.  On mobile, at least in the case of 90+% of smart phones in use today, you can make safe assumptions about what will happen when you set a non-scalable device-width viewport.  No such assumption holds for desktop browsers.

If a designer does a good job with the type-face, is there a reason for zooming?  In some cases, there might be.  Site visitors with visual impairments, for example, might want much larger text than what would be optimal for a typical visitor.  An image might include high-resolution detail that a mobile visitor would like to zoom on.  (That said, most high-quality mobile sites lower the resolution of images for mobile visitors to speed up 3G load times.)

Can we have the best of both worlds?  Sure!  Mobify has created a widget designers can add to their site which allows visitors to enable and disable pinch/zoom on their mobile optimized site.  Mobify also includes a feature which when enabled, automatically wraps anchor tags around images and lets visitors click on the image for a full-resolution version.  These widgets will be available in the next release of Mobify Studio, look for the announcement soon.

, October 20 2010

Optimizing blogs for mobile with CSS3 and Mobify Studio

  • Tutorial Details
  • Topics: CSS3 'nth-child' Pseudo Selectors and Mobify Studio's CSS Filter
  • Application: Truncating blogposts for mobile use
  • Difficulty: Moderate
  • Estimated Completion: 15 mins

Hi, my name is Nico and I'm a web designer at Mobify. After spending the past four months designing dozens of mobile sites with Mobify Studio, I have come across many useful CSS techniques for optimizing mobile sites. In this blogpost, I'll be covering how to truncate blogposts on your mobile site using 'nth-child' CSS3 pseudo selectors.

Blogs are very popular on mobile because they have frequently updated, snack-sized articles which are often shared on Twitter and Facebook. When mobifying a content-heavy blog, we need to decide what content from the desktop site is relevant for mobile.

The majority of blogs display full-length blogposts on the homepage, which is fine for desktop but people browsing from their smartphones are looking for a snack, not a full-course meal! Showing full entries of all the blogposts on the homepage of your mobile blog can sometimes be too much for mobile users.

before-after

TRUNCATING BLOGPOSTS WITH NTH-CHILD CSS3 PSEUDO-SELECTORS

Instead of showing the full entries on the homepage, hiding the content and displaying only the title and metadata of blogposts makes it easier for mobile users to scan the content. The simple way to do this is by selecting and hiding the portions of content you do not want to display. For example, if blogpost in a blog was marked up like this (let's pretend there is content in between the tags):

  1. <div class=”blogpost”>
  2. <h3 class=”title”></h3>
  3. <p class=”metadata”></p>
  4. <p class=”content”></p>
  5. <p class=”content”></p>
  6. <p class=”content”></p>
  7. </div>

The CSS to truncate the blogposts would consist of the following:

  1. .blogpost .content { display:none }

By applying the CSS above, we end up with all the blogposts truncated:

truncated-blog

But what if you only wanted the older blogposts truncated, and the 4 newest entries to be shown in full? Fortunately, there is a way to specify exactly which blogposts are truncated on a given page.

  1. .blogpost:nth-child(n+5) .content { display:none }

What the code above does, is select and hide the content of all the blogposts except for the first four. The CSS selector used is called an nth-child pseudo-selector. I highly recommend the following articles at Sitepoint and CSS-Tricks which both do a great job of explaining how nth-child selectors work. Below is a reference table borrowed from Sitepoint that may help put things into perspective:

nth-child-table

Using nth-child selectors can be confusing especially if you are a visual learner. When I first started using nth-child it didn't make much sense to me either until I started using this handy CSS3 structural pseudo-class selector tester by Lea Verou, which can be used to visually calculate and test pseudo-class expressions.

CAVEATS

Unfortunately, a large number of older mobile devices are equipped with browsers that do not support CSS3 pseudo-selectors. This means some older Blackberry and Nokia devices will not be able to display truncated blogposts and paginators as shown above.

Another important thing to keep in mind is that when elements are hidden with display:none, the assets from the hidden content will still be downloaded by the browser. This is a major problem because when optimizing a site for mobile, we definitely do not want any unnecessary assets to be downloaded.

MOBIFY "CSS FILTERS" TO THE RESCUE!

One of my favourite features of Mobify Studio is the amazing CSS Filter, which is essentially a server-side display: none. Since the display:none is applied on the server-side before the mobile site is served, it has two major advantages:

​1) Allows any elements to be hidden with CSS3 selectors such as nth-child, even if the device it is being served does not support CSS3.

​2) Prevents the mobile browser from downloading assets which should be hidden, saving the mobile user time and bandwidth.

For a detailed explanation of how to hide content with Mobify's CSS Filters, please have a look at this thread in the Mobify Community Forums. From there you will also be able to have your technical questions answered by our staff.

CONCLUSION

Careful consideration of the mobile user's needs means taking extra steps to make your mobified site more scannable by removing unnecessary content and options. The same technique we used to truncate the blogposts can also be applied to truncate other elements of a mobile site, such as paginators or menu lists. Combining the power of nth-child pseudo selectors with Mobify's CSS Filter allows for greater control of the mobile experience.

Subscribe to the Mobify Webdev Blog

Get regular updates to help you create amazing adaptive web experiences.

No spam — we promise!