O'Reilly logo

Designing Web Interfaces by Theresa Neil, Bill Scott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 5. Overlays

Overlays are really just lightweight pop ups. We use the term lightweight to make a clear distinction between it and the normal idea of a browser pop up. Browser pop ups are created as a new browser window (Figure 5-1). Lightweight overlays are shown within the browser page as an overlay (Figure 5-2). Older style browser pop ups are undesirable because:

  • Browser pop ups display a new browser window. As a result these windows often take time and a sizeable chunk of system resources to create.

  • Browser pop ups often display browser interface controls (e.g., a URL bar). Due to security concerns, in Internet Explorer 7 the URL bar is a permanent fixture on any browser pop-up window.

    If Orbitz used a browser pop-up window for its calendar chooser (it does not), this is how it might look

    Figure 5-1. If Orbitz used a browser pop-up window for its calendar chooser (it does not), this is how it might look

By using either Flash or Ajax-style techniques (Dynamic HTML), a web application can present a pop up in a lightweight overlay within the page itself. This has distinct advantages:

  • Lightweight overlays are just a lightweight in-page object. They are inexpensive to create and fast to display.

  • The interface for lightweight overlays is controlled by the web application and not the browser.

  • There is complete control over the visual style for the overlay. This allows the overlay to be more visually integrated into the application's interface (compare Figure 5-1 and Figure 5-2).

    Figure 5-2. Orbitz ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required