Free Consultation: +1 (888) 374 0906

With the release of retina displays, such as Apple's new MacBook Pro with retina display, designers have been thrown yet another curve ball with which to keep our designs up to par. Not only do retina graphics exist on mobile and tablet devices but now need to be optimized for desktop computers!

I have the great opportunity with ideaLEVER to be able to both design and develop some mobile sites for our clients, and am lucky enough to own an iPhone 4 to test the following example with. If you are lucky enough to have a iPhone 4s, Nexus, Galaxy, iPhone5, Surface Tablet, iPad3, the new iPad, or even a shiny new MacBook Pro with retina display then this will tickle your fancy.

Yesterday, I found myself with the challenge of trying to increase the clarity of the graphics implemented on my iPhone4, realizing that they were all slightly fuzzy.

Thankfully, the answer to all my problems was already tucked away in our new default structure.css file, in the form of the retina display media query. Every new SiteCM skeleton site (staging site) comes with the full list of most widely used media queries in anticipation of our resellers implementing a responsive design.

It looks just like this:

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {        
/* styles go here */
}

That fancy piece of CSS targets all devices, like the ones listed above and more, with "retina" screens (in other words, 2x the pixel ratio) to display additional styling, such as new graphics to be sharper, which is what we are going to do here.

The example

The site we are working on is www.wildlifeaccidents.ca . When viewing the original implementation on an iPhone 3, 3GS, Google Nexus, Blackberry Curve and Storm, the site displays great. But on an iPhone 4, upon closer inspection, all of the graphics (logo, icons) look slightly fuzzy. The reason for this is that retina screens use twice the pixels depth to give us better text rendering that's closer to print than ever before. You would think that this means you need to create images at a higher resolution, but no.

The simple awnser to this is that you need to supply the browser with images that are still 72ppi, but at twice the size. So if your logo if 150px by 150px, to support all retina devices you need to supply the same logo at 300px by 300px, and use CSS to resize the background to still fit within your 150px container.

Here is the CSS for the standard layout for one of my objects (note that CSS unnecessary for this example has been removed):

.ui_logo { 
width:171px;
height: 108px;
background: transparent url(/mobile/images/logo.jpg) no-repeat center center scroll;
}

Notice the image path leads to "logo.jpg" and my container size is specified here, to mimic the size of the image as if it were inline.

To optimize this for retina screens, I will simply take my logo layer in Photoshop (and hopefully you are using a vector smart object, or at least a smart object of a logo that is massively big, so you are not using destructive design habits) and then easily scale it up to twice the size it currently is.

To do this, I would use the Move Tool (hotkey "V"), and click once on one of the anchor points to activate the scaling feature. Then put in "200.00%" in the width and height of the advanced options in the top toolbar and press ENTER (you may have to hit ENTER twice). next, take the slice tool (hotkey C, SHIFT+C) and create a slice that is 2x the size EXACTLY (it is important to retain proportions here) as the first image. Name the image the same as the original, but add "@2" to the end of the file name so it's easily identifiable as the retina graphic. Last, Optimize the image by Saving for web and devices (CTRL+ALT+SHIFT+S on Windows, CMD+OPT+SHIFT+S Macintosh) to the same folder.

Going back to my structure.css file, in the retina media query at the bottom of the style sheet, start a declaration for the objects background image you want to replace:

.ui_logo {     
background-image: url(/mobile/images/logo@2.png);
background-size: 171px 108px;
}

Refresh, and you're done!

Now I have some beautiful crisp graphics on retina displays (which should also translate to those shiny new MacBook Pros that Apple is now selling).

Thanks to Chris Spooner, and his article on Line25.com for helping with this technique. He also has a great tip on how to replace HTML images with retina enhanced ones with some JavaScript.

Planning on supplying us a mobile design in the future? Here are some tips to help us maximize the quality of our implementation for your designs:

  1. Retain all vector paths, and shape layers made in Photoshop
  2. If you are exporting from illustrator to Photoshop, these layers will be rasterized which will not allow us to resize your graphics to maximum quality. You will need to send us an additional  file(s) with your objects scaled to 200% of the original artwork. This includes:
    1. Warped shadows
    2. Arrows
    3. Icons
    4. Logos
  3. Give us the original source files of your images and graphics if you would like us to do it ourselves.

Something to keep in mind

If your client wants to support these newer displays such as the iPhone 4, then this will take some extra development time to create, code, and test these new graphics so budget your time appropriately.

If you want to improve your mobile site graphics on your existing mobile or responsive/adaptive website, contact us for a quote.

Happy coding!

Write A Comment

Post A Comment

 
Submit
ideaLEVER
Thursday, January 31st, 2013 at 4:08PM
Hi Nancy,
Great point about download speed. This is a point to take into consideration when doing an implementation for your website.

However, being that the media query only targets devices that have a retina displays this also means its only targeting devices that are more likely (almost guaranteed) to have faster connections as most (if not all) of these devices run off of faster networks such as the 4G and LTE networks which can handle this issue of downloading bigger images. Unfortunately there is no media query to detect bandwidth so your decision to use a technique like this should be based around your users (are they from a big metropolitan area with greater network speed or some random neck of the woods still on dialup or slow cable?). Most likely people with intensly slow connections who would be most affected by this performace issue wouldn't have access to a smart phones or be spending much time browsing the web via a mobile device as their carriers probably aren't up to speed in their area (pun intended).

Also, you do not have to declare a background size for the default graphics as they will always display at the intended/images actual size, and be "cropped" if you will to its elements size and the position values you have defined (if they are declared).

Remember that media queries are meant to override the default CSS based on a device matching its query string.

Lastly, in your point about IE9 compatability, browsers ignore any declarations they don't understand, and this is beating a dead horse anyways because there is no computers out there yet (to my well researched knowledge) that have a retina display for Windows computers that run Ie9 as these retina display screens are new and cutting edge and likely running IE10 which is now on the market and does support CSS3 media queries.

If you do happen to run into an instance where you are running IE9 on a retina display desktop device (which is unlikely but for a rhetorical instance), then just add a min/max width variable to the query so it targets only smaller screens and problem solved! This solution was mainly meant for mobile phone users who want to have the super crisp graphics, they really do make a difference! There is almost always a way to fiddle with CSS to make it handle those scenarios.

Thanks for your comment!

- Lea
ideaLEVER
Thursday, January 31st, 2013 at 3:58PM
It absolutely does affect bounce rates, and speaks for itself about the quality of work with those extra attention to the details. Thanks for your comment Jim!
Nancy K. Richard
Wednesday, January 23rd, 2013 at 6:04PM
You could, but then you’re still making your user (on a slower connection) download a larger graphic. You would also be forced to declare a background size for your normal graphics which wouldn’t be compatible with IE browsers before version 9.
Jim
Wednesday, January 23rd, 2013 at 12:18PM
I am finding these curve balls in every algle on online work these days :-)

Great article - I am getting things up to speed with graphics for the reasons you mention. I think not doing so will negativly impact the clients conversions, as poor graphic display just sends you bounce rate up.

Sign up for email updates from our team

View Our Privacy Policy or Terms of Use