CSS image sprite for high resolution retina display - iPad 3

iPad 3 has an incredible 2048 × 1536 pixels high-resolution retina display. If we serve it the same images we used for PC or even for iPad 2, all the images/icons are gonna look blurred on this high resolution iPad 3. Reason is its high resolution.

In order to make our icons look better on high resolution we have to use different background image for high resolution devices with the help of CSS Media Query. I will call the image as: image-2x.png

What is image-2x.png?
Suppose we are using 36x36 size icon for regular screen resolutions, the same icon has to be 72x72 pixels for high resolution. Twice the size of normal resolution. If we are using sprite image for our project and the size is 200x200 for regular screen with all the icons in it, the same image for high resolution devices has to be 400x400 pixles.

How to use it separately for high resolution devices?
CSS Media Query:
/*For regular screen resolutions*/

.spriteImage{ 
  background: url(SpriteImg.png) no-repeat left top;

}

/*For high resolution screens*/

@media (-webkit-device-pixel-ratio: 2){ 
    .spriteImage{
        background: url(SpriteImg-2x.png) no-repeat left top;

    }
}

Note: The -webkit-device-pixel-ratio: 2 will change in future depending on the screen resolutions. Here pixel-ratio 2 is used for iPad 3

Ok - what is the problem?
If we use the 2x background image and background-position based on what it is in that large image, nothing will work.

Why?
The HTML container we are serving the large background image remains the same size, for instance: 36x36. How will I fit 72x72 background image in 36x36 size container? Especially with image sprite.

How?
CSS3 background-size: property to rescue.

What does background-size do?
The background-size CSS property specifies the size of the background images.

The solution:
Consider my hi-res image for iPad 3 has 200x400 dimensions. When I am defining the background-size of this image for hi-res devices I will write it as –
background-size: 100px 200px;

Did you see what happened above? With background-size property I already squeezed the 200x400 image to 100x200. Meaning – the pixels of hi-res image are now been packed together to half size of it, which will result in displaying better quality on high resolution devices.

Also, we have to set the background-position considering the background image size 100x200 px, not 200x400 px.

This technique is a lot more confusing in the beginning. But when you know how it works, then it’s too simple.

Optimizing Web Experiences for High Resolution Screens

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

http://www.mobify.com/blog/ipad-3-and-retina-screen-what-it-means-for-your-mobile-commerce-site/

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

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

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

How Apple.com will serve retina images to new iPads

http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/

- What they’ve chose to do is load the regular images for the site and then if the device requesting the page is a new iPad with the retina display, they use javascript to replace the image with a high-res version of it.

The heavy lifting for the image replacement is being done by image_replacer.js. Jim Newberry prettified the code and placed it in a gist for easier reading.

Another interesting part of image_replacer.js is that it checks for the existence of 2x images before downloading them:

- As far as I can tell, there is no attempt to prevent duplicate downloads of images. New iPad users are going to download both a full desktop size image and a retina version as well.

The price for both images is fairly steep. For example, the iPad hero image on the home page is 110.71K at standard resolution. The retina version is 351.74K. The new iPad will download both for a payload of 462.45K for the hero image alone.

The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded.

-Unfortunately, it means that there are now three http requests for each assets: a GET request for the standard image, a HEAD request to verify the existence of the retina image, and a GET request to retrieve the retina image.

Optimizing Web Experiences for High Resolution Screens:

http://bradfrostweb.com/blog/mobile/hi-res-optimization/

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

@media queries

We can use @media queries to target hi-res displays and serve them up different styles, including different background images. While not entirely related to images, Brad Birdsall demonstrates how you can finesse designs for hi-res displays. I wonder if there are the same issues regarding media queries and asset downloading with pixel-density as there are with device widths.

Grayscale images with CSS3 Filter Property

img{
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */   
   
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);   
}

Demo

CSS Media Query min-width Vs min-device-width with meta viewport

As I was working on responsive UI, the one thing that confused me a lot was the min-width and min-device-width.

@media screen and (min-width : 320px) and (max-width : 480px) { 
    /*Your CSS goes here*/ 
}

This was working properly in my PC browser as: min-width describes the width of the rendering surface of the output device such as the width of the browser window which changes as I resize my PC browser window.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    /*Your CSS goes here*/ 
}

This was working properly in my iPhone Safari browser as: min-device-width describes the width of the output device, meaning the entire screen or page, rather than just the rendering area.

I was googling for only one media query that should work for both: on the resized PC browser and on iPhone's Safari browser. And here is what worked for me - 

The Solution:
Defining <meta name="viewport" content="width=device-width"> in  HTML page resolves the issue with

@media screen and (min-width : 320px) and (max-width : 480px) { 
    /*Your CSS goes here*/ 
}

This meta tag and media query combination works perfectly on PC browser and iPhone's Safari. Here is more on Combining meta viewport and media queries.

jquery for css media query

Here is how we can target different devices with the help of jquery, modernizr and CSS Media Query -

We need to include Modernizr and jQuery js files in our HTML to get this working -

<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>

<script type="text/javascript">
$(window).resize(function() {
    if (Modernizr.mq('(max-width: 1024px)')) {
        // do something

    }
});
</script>

In this example below we are targeting 'Samsung P6200 Galaxy Tab 7.0 Plus'

<script type="text/javascript">
$(function(){
    if (Modernizr.mq('(max-device-width: 1024px) and (min-device-width: 600px)')) {
       alert('You are in!');

    }
});
</script>

Developing cross platform mobile apps with PhoneGap Build

https://build.phonegap.com/

No separate SDKs are required. No separate IDEs are required (i.e. Eclipse for Android and Xcode for iPhone and so on). PhoneGap Build helps you develop native apps with HTML5, CSS3, and JavaScript for six platforms in one go.

Things you need to know before starting with PhoneGap Build:
Chrome Extension: Ripple Emulator
https://chrome.google.com/webstore/search-extensions/emulator?hl=en

PhoneGap Emulator
http://emulate.phonegap.com/

PhoneGap Build
https://build.phonegap.com/

Introduction to PhoneGap Build