Embedded Media and Future Web Design Philosophy

This article finishes off the series with a look at a few advanced media formats, as well as a look ahead to the future of Web design.

The article is accompanied by an example Web site that illustrates and supplements the information presented in the article and provides code examples. Developers can view the Web site side by side with a normal desktop browser and the Nokia Web Browser on their mobile device. Developers are free to use any pieces of code to develop their own site.

• Open the example site
• Download the source files as a zip package

Video content in the mobile browser

The example site demonstrates the behavior of video content in the Nokia Web Browser. After the link has been clicked on, the .rm (RealVideo 8) video on the site is first downloaded to the device and then automatically opened in the video player. The Nokia Web Browser shipping with S60 3rd Edition does not have the capability of playing inline video; the Feature Pack 1 browser has added support for inline video playback without launching an external player.

The files can be in any video format supported by the S60 platform, including the following:

• 3GPP
• MP4
• Real Video7, 8, 9, 10

The Video Plug-in implemented in S60 3rd Edition, FP1 does not support locked content that is protected by a Digital Rights Management (DRM) scheme.

In the future, embedding video content on the Web page will be easier. Flash Lite 3, announced by Adobe in early 2007, will include support for video and bring mobile devices one step closer to the browsing experience provided by desktop browsers.

Designing Flash for the mobile browser

Flash content, such as animated banners, is an everyday sight on Web pages. While Flash support on desktop browsers is widespread, mobile browsers may be unable to show the same information, effectively losing some of the site’s content. Possible solutions to this problem include:

• Deciding not to display Flash content on the mobile display by removing the elements
• Substituting static images for Flash content
• Using Flash Lite

Nokia Web Browser on S60 3rd Edition FP1 adds support for Flash Lite, making it possible to display embedded Flash content on the mobile display. When designing content, developers should consider the advantages of using Flash Lite instead of full Flash. In many cases, the functionality provided by Flash Lite is sufficient, and the same Flash Lite content can be displayed on both the desktop browser and the mobile browser. However, Flash should not be used for critical components such as navigation.

Substituting Flash content
The ideal way of substituting Flash content in browsers that do not support Flash would be the use of the <object> element in the HTML markup. However, the Nokia Web Browser currently does not support this method and an alternative solution is needed. Note that the browser is in development and the issues are addressed in future releases.

The example site features a JavaScript™ function for checking the Flash support on the browser and substituting content. Try viewing the example site on different browsers — the bottom label of the banner on the left-hand side reads “Flash,” “Flash Lite,” or “Picture,” depending on what is supported by the browser.

First, the function checks if the device platform is the S60 platform and if the browser supports Flash Lite:

function checkFlash() {
 if(navigator.platform && navigator.plugins && document.getElementById("flash")) {
if(navigator.platform == "Series60") {    for(var i = 0; i < navigator.plugins.length; i++) {
      if(navigator.plugins[i].name == "FLASHLITE") {
         var flashEnabled = true;
         break;
      }
   }

Next, if Flash Lite is detected, the browser is instructed to replace the Flash object with a secondary Flash Lite object. If the browser does not support Flash Lite, a static image is displayed as the final alternative:

   if(flashEnabled) {
          document.getElementById("flash").innerHTML = "<object type='application/x-shockwave-flash' data='flash/ad_skyscraper_lite.swf' width='120' height='600'><param name='movie' value='flash/ad_skyscraper_lite.swf' /><img src='flash/placeholder.jpg' alt='Picture of Nokia N77' /></object>";
      } else {
          document.getElementById("flash").innerHTML = "<a href='http://europe.nokia.com/phones/n77'><img src='flash/placeholder.jpg' alt='Picture of Nokia N77' /></a>";
      }
   }
 }
}

Embedding audio

From a design and usability point of view, embedding large audio files into HTML pages is not recommended. However, there may be situations where this feature is required. Please bear in mind that there may be a considerable time lag before the audio begins to play. It is usually a good idea to allow the user to switch off the sound.

With the Nokia Web Browser, embedding audio for playback is straightforward, as both “embed” and “object” methods work.

The Browser Audio Plug-in (BAP) downloads and plays audio files when the user selects them. BAP also plays background sound embedded in a Web page. The volume level is stored in the Central Repository and can be configured by the user. The files can be in any audio format supported by the S60 platform, including the following:

Real Audio Voice/ MP3/ MIDI/MPEG4/ AMR-NB/ AAC/ AMR-WB/ EAAC

In addition, the FP1 browser also adds support for WAV file playback.

When the current page defines the audio to be played, the browser begins to play it automatically. If multiple windows are open, only audio from the top window is played. Audio requests from other windows are ignored.

If the user tries to open an audio file while another audio file is playing, the browser stops the initial file and closes it. The newly requested file is played instead.

Embedding SVG

Embedding Scalable Vector Graphics (SVG) is also a simple process for the Nokia Web Browser, although plug-ins may be required for some desktop browsers. Both static and interactive SVG content can be displayed, however, since interaction usually requires JavaScript, there are issues of portability across platforms. SVG is an open source, lightweight graphic solution that is well suited to mobile devices.

Progressive enhancement — the future Web design philosophy

The diversity of Web technologies and users will inevitably increase in the future. The dominance of one major browser application will decline as Web users access their favorite content with a multitude of applications and from a variety of mobile devices, such as laptops, PDAs, and mobile communication devices. The profile of the Web user will also be upgraded: in the future, the new Web user may use a mobile device as his/her primary or only access to the Web. This evolution requires a rethinking of the overall Web design philosophy.

The traditional Web design approach is the graceful degradation strategy. The design driver is that Web sites are developed for the latest technologies and newest browsers; at the same time, there is the challenge of trying to keep the site somewhat presentable while losing features (“degrading”) in older browsers. In practice, this approach is often unsuccessful due to lack of development and testing resources and the attitude that the user will eventually update to the latest browser software anyway. The core assumption is that browsers will progressively get faster and more powerful, incorporating support for all the available technologies.

Progressive enhancement reverses the design strategy by focusing on the lowest common denominator. Everything begins with a basic markup document to which the designer adds layers (“enhancements”) of presentation and behavior, using technologies such as CSS, JavaScript, or Flash. All the progressive elements are externally linked so that browsers with limited capacities do not have to handle code that would only slow them down or clog a limited network connection.

The principles of progressive enhancement are:

• Basic content and functionality should be accessible with any browser or connection type; an enhanced browsing experience is provided to advanced browsers;
• Sparse semantic markup and separation of content and presentation;
• Enhanced presentation and functionality provided with layered and unobtrusive elements, such as externally linked CSS and scripts;
• Respect for user preferences.