Mobile Web

14 Essential Tactics for Mobile: Email, Search and Social Media Marketing

Mobify powers over 20,000 mobile websites and reaches over 20% of the smartphone subscribers on the planet.

So we have a lot of data about what works in mobile marketing.

Add that original data to great additional sources and we have a pretty good view what works in mobile marketing.

So we wrote an e-book on the topic, broken into the following chapters:

• 6 tips for making mobile email work
• 4 critical ways mobile search is different
• 4 tactics for mobile social media sharing

The e-book is now available for free download as a PDF.

Get it by clicking here:

14 Essential Tactics for Mobile: Email, Search and Social Media Marketing

 

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

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