Posts tagged "IE7"

June 18, 2014

HD Websites in Adobe Muse CC 2014

Smarter HD Websites
HD Handling of Placed Images
HD Handling of Background Images
The HiDPI (on/off) Button Widget
In-Browser Editing Anywhere
HTML Heading Tags for Improved SEO
The Benefits of Dropping Internet Explorer 7

The release of Adobe Muse CC 2014 includes significant improvements in both the application and the HTML/CSS code it generates, continuing our pattern of improving the quality of code with every release. Prior versions of Adobe Muse CC were built on Adobe AIR. Adobe Muse CC 2014 is a 64-bit native application and requires a 64-bit operating system. Users will begin seeing differences immediately as the interface has been updated to support high definition screens and provide freedom to arrange windows and palettes as in other Adobe applications. More significantly, we’ve added several improvements to the code generated by Adobe Muse CC.

Smarter HD Websites

Adobe Muse CC 2014 introduces support for Creating High Resolution Websites that render high-resolution images on high-resolution devices, standard resolution images on standard devices without the performance penalty of loading the high-resolution images, and an optional HiDPI (on/off) Button Widget that can be placed on a page to enable site visitors to disable HD rendering when viewing from a high-resolution device on a slow network.

On a High Definition (a.k.a. Retina) display the area occupied by one pixel on a standard display is replaced by at least four pixels. That is, each pixel is at most half as wide and half as tall. Therefore, taking full advantage of all these tiny pixels requires just as many pixels in the images displayed on a website. However, four times as much data means roughly four times as long to load that data and website visitors are impatient. The tendency of site visitors to abandon a site and give it negative reviews after only a couple of seconds is well documented in articles by the New York Times, Radware, KISSmetrics, and others.

Many HD websites have two problems:

  1. They download both the HD image and the standard resolution image, resulting in five times as much data even on standard resolution devices.
  2. They do not give site visitors the option to disable the HD rendering on HD devices running on a slow network.

For HD enabled websites, Muse automatically generates standard resolution and 2x resolution images and then loads the appropriate version for the device from which it is being viewed. Images that are Placed into a Muse layout are exported as HTML <img> elements. Images that are imported as background fills are exported as background-image CSS properties. In both cases, the images are imported into Muse at half their natural dimensions. At export time, an image is generated at half-resolution for standard displays and the high-resolution image is exported for high-resolution devices. The image that is rendered by the browser is determined based on the properties of the viewing device and whether or not HD rendering has been disabled using Muse’s option HiDPI (on/off) Button Widget.


 

HD Handling of Placed Images

Images Placed into Muse are exported as <img> elements. The standard resolution images are referenced by default in the ‘src’ attribute. The 2x resolution image has the same name as the standard resolution image with  “_2x” appended and is referenced by the ‘hidpi-src’ data property. At page load time, if the device pixel to html pixel ratio is at least 1.5 and HD rendering has not been disabled using Muse’s optional HiDPI (on/off) Button Widget, then the ‘src’ attribute will be updated to reference the HD image.

Default HTML for HD Image

<img src="images/loren.jpg" 
      data-hidpi-src="images/loren_2x.jpg" 
      alt="Loren at home" width="230" height="153"/>

HTML for HD Image on HD Display with HD Enabled

 <img src="images/loren.jpg"
      src="images/loren_2x.jpg" 
      alt="Loren at home" width="230" height="153"/>

 

HD Handling of Background Images

Images imported as background fills are exported from Muse using ‘background’ or ‘background-image’ CSS properties.

<html class="html js">
     ...
     <div class="colelem" id="u74"><!-- simple frame --></div>
     ...
 </html>
#u74
{
   ...
   background: #FFFFFF url("../images/loren.jpg") no-repeat left top;
   background-size: contain; 
}
.hidpi #u74
{
   background-image: url("../images/loren_2x.jpg");
}

Rendering of the high-resolution background images on the page is achieved by adding the ‘hidpi’ class to the html element as follows:

<html class="html hidpi js">

When viewed on a standard resolution device, the HD images are completely ignored thereby avoiding a performance penalty.


 

The HiDPI (on/off) Button Widget

Anyone who has attempted to watch an HD video on the web over a slow connection knows it is not enough to automatically switch to serving up HD content based on the resolution of the display. Ultimately, the site visitor needs to be given the option to disable HD content. Adobe Muse CC 2014 solves this problem by providing an HD Button which can be custom styled within Muse. When present on a page of the site, visitors who are viewing on a high resolution display can toggle the rendering behavior of the site by clicking the button.

HD rendering is active

HD rendering is on and supported by the display.

HD is available but deactivated.

HD rendering is available but deactivated.

HD assets are available but the display is not HD.

The display does not support HD rendering.

 


 

In-Browser Editing Anywhere

With the release of Adobe Muse CC 2014, the In-Browser Editing feature is available for any site that is published using the built-in FTP Upload feature.

One of the Muse team’s goals is to give designers the freedom to publish anywhere. Adobe Muse CC 5.0 introduced In-Browser Editing on sites published to Adobe Business Catalyst, where site owners could replace images or make changes to text from within the browser. That is, the content of the site could be updated without using Adobe Muse CC. When an Adobe Business Catalyst site was opened in Muse, Adobe Muse CC would merge any edits made via In-Browser Editing back into the Muse document.

In the future we plan to add new custom form features which can be used by sites published to any hosting provider supporting PHP. In addition, we plan to make it easier to publish to your favorite host directly from Adobe Muse CC.


 

HTML Heading Tags for Improved SEO

HTML heading tags (e.g., h1, h2…) clarify the page content structure, thereby improving SEO and accessibility. In previous releases, heading tags could only be specified using paragraph styles. Now, they are directly accessible from the Text palette.

h1, h2

Applying heading tags to paragraphs for improved SEO.


 

The Benefits of Dropping Internet Explorer 7

As noted in a previous post, we’ve made the conscious decision to drop support for IE7 in Adobe Muse CC 2014 to provide a better experience in more modern browsers. For example, in order to support 100% width elements in IE7, we used hand-coded JavaScript to adjust the width at runtime resulting in a performance lag. If you re-export your site from Adobe Muse CC 2014, the 100% width elements will use CSS to adjust the width resulting in faster performance and a better rendering experience. As always, you merely need to re-export your site from the latest release of Adobe Muse CC to benefit from this and numerous other code improvements and bug fixes.

8:03 AM Permalink
June 17, 2013

Muse 5 Code Improvements and IE 7

On June 17th, Adobe released Muse CC 5.0 as part of its Creative Cloud offering. This update to Muse CC includes numerous features such as Scroll Motion animations (also known as parallax scrolling), the ability to use Muse Forms with any hosting provider that supports PHP, In-Browser Editing of Muse generated sites hosted by Business Catalyst, a new Layers Panel, and Vertical Text. This release also includes several bug fixes, minor code-gen improvements to simplify the HTML and improve fidelity in older browsers and a significant improvement to the handling of rotated objects.

In my post about Muse 4 code improvements, I described an improvement in how Muse deals with rotated objects in Phone and Tablet layouts in which the CSS3 transform property is used to rotate objects in the browser instead of rasterizing the objects. There are multiple advantages to this approach including higher quality rendering, less data to download to the local browser and therefore faster performance, and text remains selectable and searchable. Muse CC 5.0 extends this approach to desktop layouts. That is, rotation by itself is no longer a cause for rasterization in any Muse layout and all you need to do to get this improvement is republish your Muse site from Muse CC 5.0.

So what was the hangup and why were we able to release the improvement for phone and tablet layouts in Muse 4? CSS3 properties like ‘transform’ are supported by modern browsers, including those on phones and tablets. However, older browsers, which primarily includes Internet Explorer 8 and older, do not support CSS3 properties and therefore require custom JavaScript code to implement the missing browser feature. For rotation, this JavaScript code had to be tailored to work on both IE 7 an IE 8 because there are significant behavioral differences in the two IE versions. If we could have ignored IE 7, we would have been able to release the CSS3 rotation improvement in Muse 4 without restrictions. However, because we promise to preserve Muse layouts across supported browsers, including IE 7, we decided to delay the improvement for desktop layouts until Muse CC 5.0. This delay gave us time to improve the JavaScript implementation for rotation to support both IE 7 and IE 8. This example leads to several questions including who uses IE 7, what about graceful degradation, and why not give users the choice of whether to use a feature that can only be viewed from modern browsers?

Who Uses Internet Explorer 7?

Chances are, not you.

In 2012, Microsoft began automatically upgrading the browser installed on Windows XP, Vista and Windows 7 via Microsoft Update. For Windows XP users, this update results in IE 7 being replaced with IE 8. If you are using Internet Explorer 7 and not doing so for testing purposes, then you are running an old version of Windows and chances are either do not have access to the internet, perhaps because you are behind a firewall that prevents access, or you have disabled Microsoft Update.

Statistics

Those who monitor browser usage are reporting a steady decline of Internet Explorer 7 usage. According to StatCounter.com, global usage of Internet Explorer 7 dropped from almost 3% in March, 2012 to 0.54% during May 2013. Internet Explorer 6 usage in May, 2013 was 0.24%.

StatCounter Browser Version, May 2013

Global usage of Internet Explorer 7 is down to 0.54% in May, 2013…and dropping.

Also, according to analytics from our CDN data, fewer than 3% of visitors to Muse sites in May 2013 were from people using Internet Explorer 7 and that number is dropping.

What about Graceful Degradation?

Graceful degradation is a fault tolerance strategy for situations where a browser does not fully implement a feature. Instead of taking the approach that a browser is either fully supported or not at all, the idea is to employ a strategy that more broadly defines browser support and introduces the notion of levels of support.  There is a very good description of Graded Browser Support at yuilibrary.com that I encourage you to read. For the most part, Muse has employed a strategy of attempting to make a page look the same in all browsers. Typically, that means either rasterizing in cases where there isn’t support for an HTML feature or writing a JavaScript polyfill to add support in older browsers. However, there are already examples of graceful degradation in Muse. For example, Internet Explorer 7 and 8 render drop shadows as solid and opaque where as shadows in modern browsers can have transparency and are knocked out by the object casting the shadow. In order to prevent the Internet Explorer 7 & 8 shadow from bleeding through the object, we disable shadows in Internet Explorer 7 & 8 if the object casting the shadow has a transparent fill while preserving the shadow in modern browsers.

IE7 default rendering of shadow on item with transparent fill.

IE7 default rendering of shadow on item with transparent fill.

IE 7 with shadow disabled as a graceful degradation.

IE 7 with shadow disabled as a graceful degradation.

Modern browser rendering of shadow on transparent filled item.

Modern browser rendering of shadow on transparent filled item.

 

Considering that Internet Explorer 7 is becoming so little used, diverting development resources to preserving the layout in that browser doesn’t make a lot of sense. That said, there are still a significant number of people using Internet Explorer 8 and we are committed to fully supporting that browser by continuing to write JavaScript polyfills when appropriate. Using graceful degradation as a strategy for Internet Explorer 7 gives us more freedom to use HTML5 constructs. This rotation example begs the question, why not include a set of features that are only available for modern browsers so that users can decide when to gracefully degrade the rendering in older browsers in favor of a better experience in modern browsers?

Modern Browser Only Features

HTML5 includes a number of features that older browsers do not support and some features that only some modern browsers support. Moreover, there can be and often are significant differences between modern browsers in how they render or support various features. For example, HTML5 supports a border-image property where an image can be rendered as a border pattern. However, there is a wide variety of support for this feature in different browsers as you can see from the following screen shots.

Chrome

Chrome rendering of the CSS3 border-image property.

Chrome rendering of the CSS3 border-image property. Notice the clipped portions at the corners.

Firefox

Firefox rendering of the CSS3 border-image property.

Firefox rendering of the CSS3 border-image property. Non-uniform scaling is used to prevent clipping.

Internet Explorer 9

Internet Explorer 9 does not support border-image.

Internet Explorer 9 does not support border-image.

Would you be in favor of Muse CC adding a set of features that can only be rendered by modern browsers as long as it was made clear that they will not work in older browsers or will be gracefully degraded in older browsers? What if the rendering of a feature differed significantly between modern browsers? Note that taking this approach in Muse 4 with CSS rotation wouldn’t have helped get the feature into Muse 4 because we didn’t have enough time and resources to add the proper user interface for such a feature.

Back To Internet Explorer 7

The Muse CC team will be reducing its investment in supporting Internet Explorer 7 by taking a more graded approach that uses a strategy of graceful degradation. Muse CC sites will not drop content when viewed in Internet Explorer 7. However, the Muse CC team will no longer be writing custom JavaScript specific to IE 7 to enable a visual effect. For customers, that decision might be considered good news as it frees up resources to develop other features or solutions. This decision also gives us the opportunity to revisit some of our code and improve the use of HTML5 constructs. That said, it is always our policy to gracefully degrade whenever possible so you shouldn’t worry about whether visitors to your site can access the content of your site. With only 1 in 200 people surfing the web using Internet Explorer 7 and decreasing, you might ask what took us so long? We take browser support very seriously so you don’t have to. As always, you design, we code.

9:10 PM Permalink