Create high resolution websites using Adobe Muse

Enhanced in Adobe Muse CC 2014.3 | February 2015

Adobe Muse now supports HiDPI displays that run Windows. If you are using a Windows HiDPI hardware, notice that the Adobe Muse interface appears dramatically sharper.

HiDPI, stands for high dots per inch, is a term given to screens with high pixel density or simply high resolution. With higher pixel density, HiDPI screens can display text and graphics with greater detail than a standard display. For example, Apple's Retina Display available with iPhone, iPad, some Windows devices, iPod touch, and more can display high resolution text and graphics.

The web designs created in Adobe Muse can take full advantage of the display quality provided by high-resolution (HiDPI) screens, such as Apple Retina displays.

Taking advantage of HiDPI in Muse is simple:

• Change the site resolution setting to HiDPI
• Create images that are at least twice (2x) the size they will appear on the site

When you upload or export a HiDPI site from Muse the code generated will include both standard and 2x images and will automatically detect which images to use when the site is viewed on a HiDPI or standard resolution display.

Enabling HiDPI in Adobe Muse

The resolution menu in the new site dialog will give you the option to choose between Standard and HiDPI (2x).

You can alter the resolution setting after creating a site by choosing File > Site Properties.

Creating assets with 2x image data

To take full advantage of HiDPI screens, your assets must be of higher resolution to be able to display at a higher quality. At a minimum, the size of an asset must be 2x times the size as displayed on your site.

Creating 2x images is simple. A 2x asset must be at least twice the visual size it will appear on the screen. For example:

When you place a HiDPI asset on the web page canvas, Adobe Muse optimizes the image by reducing the size to 50%. The reduction in visual size is to facilitate a smoother and efficient design experience. Such images are indicated by "2x" in the Assets panel. Note that, Adobe Muse preserves data of the original asset to serve higher pixel density when the asset is viewed on a HiDPI screen. Rasterized text, as well as effects that output as images are automatically generated at 2x and standard size by Adobe Muse at publish or export.

To ensure your assets are 2x and thus hold enough data to display at a higher quality, open the Assets panel (Window > Assets). When an asset holds enough data, the 2x icon will appear next to its listing. If the 2x icon does not appear next to your asset, it does not hold enough data to display at the highest quality, and will display at standard resolution.

Exporting HiDPI images

There are special cases when Adobe Muse does not export a high resolution image, that is an image with 2x data. When images are scaled to fit containers, applicable for pages with background images, full screen slideshows and so on, Adobe Muse does not export a HiDPI version of the image on publishing. More particularly, under the following scenarios only the standard version of the image is exported:

• 100% width: Scale to fit/scale to fill
• Full screen slideshow: Scale to fit/scale to fill
• Browser/page background: Scale to fit/scale to fill

Also note that, tiled background images are handled differently when compared to background images set to scale to fit/fill. In case of tiled images, Adobe Muse supplies both standard and high resolution images for standard and HiDPI screens respectively, when exporting the website.   When working with Adobe Muse, if you tile a high resolution image with 2x data, it is treated as any other image and placed on the web page canvas at 50% of the original size. On exporting, the half-dimensioned image (50%) is exported as the standard resolution image and the native image as high-resolution image with 2x data.

Considering your site visitors

HiDPI displays allow site visitors to view the highest visual quality web content by using more image data. 2x image sises result in images files 4 times the size of the standard resolution image. To view HiDPI images site visitors must load 4 times more data. In order to make content appear faster on HiDPI sites Muse exports HiDPI assets as well as Standard resolution assets. The standard resolution assets are loaded first, while the HiDPI assets progressively load on top of the standard versions.

The HiDPI (on/off) Button widget

While the progressive loading solution is convenient for many site visitors, it may be troublesome to those site visitors on a limited data plan or other connection with limited or expensive download quotas. For those site viewers, you may want to consider adding the HiDPI (on/off) Button Widget. When the HiDPI (on/off) Button is placed on a page, that page will initially load only standard resolution and the HiDPI button will appear off. If the site visitor then toggles the HiDPI Button to on, from that point forward all pages containing the HiDPI (on/off) button will load HiDPI images, until the site viewer turns HiDPI off, quits their browser or clears cookies. Pages that do not contain the HiDPI (on/off) button will always load HiDPI images when being viewed on a HiDPI or retina screen. If the site is not being viewed on a HiDPI screen or retina device, the button will be in its unavailable state and only standard resolution images will be loaded.