Support for high pixel density screens in Adobe Muse CC 2014

The high pixel density screen proliferation introduced a new “requirement” for most web sites: providing two different resolutions for the images. If you decide on going just for the standard resolution, then those pictures will look fuzzy on devices such as iPhone 5 or 5s, iPad Air, or MacBook Pro with retina display.

In order to get around this problem the common solution is to have two versions for a given image: “normal” resolution (to be used for low pixel density screens) and twice the resolution (for high pixel density screens). Then with a little bit of JavaScript you can serve the right image.

Adobe Muse CC has now support for handling high-resolution screens. As because we are talking about Muse, it doesn’t involve any coding. You just have to enable an option and use 2X images.

For the rest of this post I will explain the two workflows around this feature: when you create a new website or when you want to update an existing one.

Creating a new website

When you create a new website and you want to enable high density images you have to choose HiDPI (2x) option for the Resolution setting. See the image below.

muse-cc-1

Once you selected this option you will see a Warning window; just confirm the selection by choosing “Use HiDPI”.

muse-cc-2

This is it pretty much. The only thing you have to take care of when adding an image to your design is to use an image with a resolution twice as big as the one you actually need. For example, if you need a 200 pixels by 50 pixels for your design, make sure you actually create one that is 400 pixels by 100 pixels.

When you add an image to your Muse site you will see that a 2X icon in the assets panel and also the size of the image on the canvas is actually 50%.

muse-cc-3

As I already said this is it – Muse will take care of the rest and serve the right resolution depending on the screen density of the viewer. I will explain what happens under the hood in the last section.

Updating an existing Muse project

If you have a Muse project that was created maybe in an older version when this feature was not supported you can actually update your project and use it. This is a two-step process.

First, you open the Site Properties panel (File > Site Properties) and go to the Content section. Here you should see the Resolution option (bottom-right); choose HiDPI (2x) option and confirm the selection.

Second step is to replace the images with ones that 2x. If you go to the Assets panel and take a look at the images you most likely won’t see any 2x icon for any (if you do see, then it means that you use that image at lower resolution than the picture resolution). All you have to do is to recreate those images twice as big and relink the assets (easiest way is to overwrite the existing images and then choose Relink option – right-click on one of the images in the assets panel and choose Relink).

muse-cc-5

Finally, you have to publish your project and update the site on your server.

What happens under the hood

So how does it work? For every image you use in your project when HiDPI option is switched on, Muse will generate one that is 50% smaller. This smaller image is used by default.

When the page loads on high density screens, some JavaScript code will replace the 50% image with the big one automatically. Your viewers won’t see anything strange, they will just enjoy the site with crisp images :D.

However, there is a drawback: for high-density screens there are 2 downloads for each image – 50% and 100%. If you want to give viewers a way to switch off this feature (maybe to save bandwidth when they use their mobile data plan) you can add a button from the Widgets panel that lets them enable/disable this feature.

muse-cc-6

Unfortunately there is not any easier workaround for this download problem, at least until W3C decides on a better CSS property for images that will allow to specify multiple resolutions for the same IMG tag.

This is just one of the new features available in Adobe Muse CC. Make sure you check the others and take a look at Muse site of the day to see what designers are creating with this tool.

Leave a Reply

Your email address will not be published. Required fields are marked *