Introduction
Navigation & Site Map
Grids & Layouts
Color palette
Text Treatments
Buttons & Icons
Imagery
Hyperlinks
Messaging Objects
Pop-up Windows
Forms
CSS Grid & Layout
CSS Buttons
Files for Download
Definitions and Terminology
  New Browser Windows and Pop-ups
  Pop-up Window Properties
General Rules
  Links Within Pop-ups
  Required Content
Categorizations
  Marketing/Promotional
  Vertical Rectangle with Auto Scroll
  Vertical Rectangle
  Small Horizontal Rectangle
  Medium Horizontal Rectangle
  Large Horizontal Rectangle
  New Browser Window
Definitions and Terminology
New Browser Windows and Pop-ups
New Browser Windows (with browser buttons)
A new browser window that appears above the parent window from which it was launched. These browser windows will have full functionality (all the users toolbars) and can be of two types:
  • Sized New Browser Window This would be a new browser window that has a specific size and screen position.
  • New Browser Window This would be a new browser window which would be the same size as the parent window with full functionality.
Pop-up Windows (sized, no browser buttons)
A sized window launched from the original parent window with no functional browser buttons, just the page title bar and the close button. A pop-up window must be smaller than the background window or interface. Screen relative position can be defined.

Current examples of pop-ups include:

  • Functional components
  • Informational components
  • advertisements
 Back to top
Pop-up Window Properties
Below is a list of terms that will be used to describe the various properties of a pop-up window.
  • Focus: describes which window takes the foreground once a pop-up is launched
  • Directories: boolean value; Controls the standard browser directory buttons
  • Height: numeric value; Specifies the height of the window in pixels
  • Width: numeric value; Specifies the width of the window in pixels
  • Location: boolean value; Controls the location entry field
  • Menubar: boolean value; Controls the menu at the top of the window
  • Resizable: boolean value; Controls the ability to resize the window
  • Scrollbars: boolean value; Controls the horizontal and vertical scrollbars
  • Status: boolean value; Controls the status bar at the bottom of the window (allows users to view link locations, status of load, etc.)
  • Toolbar: boolean value; Controls the standard browser toolbar
 Back to top
General Rules
Links Within Pop-ups
There are various types of links that can be included in pop-up windows.
  • Anchor links
  • Page links (pop-up navigation)
  • Parent window links

Anchor links:Anchor links will be used for the pop-ups containing long scrolling text pages. Currently these include FAQs and Terms and Conditions pages. The bank of anchor links should ideally not go below the fold of the pop-up window. If they do then a page navigation approach may be necessary to break up this information.

Page links: Some pop-up windows will contain links that will load a new page into the same pop-up window. Currently these include Terms & Conditions, any pop-ups with navigation, including left navigation and page pagination links. A differentiation should be made between page links and external links. Page links only link to content designed to be within the current pop-up window, with no further links to information which could be pulled into the pop-up window. These type of links would be considered external.

Parent window links: Some of the form utilities and certain page types have functionality that will load information into the original parent window and/or reload the parent window with new information within the Marriott web environment. An IA should decide the use of parent window links. There are good examples of parent window links and potentially bad examples. A good example would be the golf directory map pop-up window that acts as an external form of page navigation. Using the parent window to give further information on content described within the pop-up window should be avoided. This content should either be worked into the pop-up window or the use of a pop-up in general should be reconsidered. Moving a user to a completely new area of marriott.com within the parent is a potentially confusing function.

Links that are not allowed within pop-ups: Links which will lead to any "external" information, such as a third party site, need to be either launched in a brand new, fully functional (new browser window as opposed to a pop-up window) window. A good example of this would be using a pop- up window for a Hertz promotion (which is housed on hertz.com as opposed to Marriott.com). If this promotion has no external links whatsoever then it can be launched into a pop-up window. If there is external content links then the hertz promotion must be launched into a new browser window to allow the user full functionality when they move into the hertz.com content.

Links that launch a second instance of Marriott.com should be avoided as well, even if it is in a new browser window. This type of link should instead be a Parent window link and the marriott.com content should only appear once. Having multiple instances of marriott.com is potentially confusing and should be avoided.

 Back to top
Required Content
All pop-ups should have the standard Marriott header and page title. The only exception is the promotional pop-up and potentially third party generated pop-ups that will have to be examined on a pop-up by pop-up basis.
 Back to top
Categorizations
Marketing/Promotional

This type of pop-up window will contain a single image with a link(s) that loads the relevant content into the parent window. Any text required will be included in the image. If multiple links are required within a single pop-up the images can be cut to accomplish multiple links or an image map can be utilized.

Approximate size:
235x206 pixels (not including browser)

Attributes:
scrollbars=no
menubars=no
toolbars=no
status=no
resizable=no

Uses:
Marketing advertisements

Allowed content:
Image
Image Link(s) if multiple offers in same window
Image Map Link(s) if necessary

 Back to top
Vertical Rectangle with Auto Scroll

This pop-up is specifically designed to handle large amounts of text or scrolling content. The current format of the Hotel Map & Directions pages also fits within this sizing.

Approximate size:
398X583 pixels (not including browser)

Attributes:
scrollbars=auto
menubars=no
toolbars=no
status=no
resizable=no

Current Uses:
Terms & Conditions (with page links and without)
FAQs (with anchor links and without)
Hotel Map & Directions page
Any pop-up requiring large amounts of text or scrolling content (with or without anchors and page links)
Any Pop-ups requiring large amounts of information (scroll bar is allowed)

 Back to top
Vertical Rectangle

This pop-up is smaller than pop-up 2 and does not have the autoscroll functionality. The sizing is setup to work with the IPIX windows and can be used for other content which would work with this window size and not need a scroll bar.

Approximate size:
350X475 pixels (not including browser)

Attributes:
scrollbars=no
menubars=no
toolbars=no
status=no
resizable=no

Current Uses:
IPIX
Photo Gallery?

 Back to top
Small Horizontal Rectangle

The smallest of the rectangles, pop-up 4 is designed to contain small amounts of data with no scroll functionality. When passing information to the parent window the presence of the close button must be determined by an IA.

Approximate size:
352x306 pixels (not including browser)

Attributes:
scrollbars=no
menubars=no
toolbars=no
status=no
resizable=no

Current Uses:
International Hotel Photos
Small Form Element Pop-ups
Smaller Informational windows

 Back to top
Medium Horizontal Rectangle

The medium rectangle pop-up will work for larger form element pop-ups and can also be used for the photo tour shots. Navigation can be included at right for the available photos.

Approximate size:
585x385 pixels (not including browser)

Attributes:
scrollbars=auto
menubars=no
toolbars=no
status=no
resizable=no

Current Uses:
Larger Form Element Pop-ups
Resort Map
Photo Tours

 Back to top
Large Horizontal Rectangle

The largest of the pop-ups, pop-up 6 will be designed to handle the step by step pop- ups which have right navigation. The current floor plan pop-ups will also use this format and now open fully expanded instead of having the expanding window functionality. Large form element pop-ups, as in this example, can be housed in this window.

Approximate size:
585x535 pixels (not including browser)

Attributes:
scrollbars=auto
menubars=no
toolbars=no
status=no
resizable=no

Uses:
Navigational Pop-ups (step by step, any right navigational pop-ups)
Floor plan Pop-ups

 Back to top
New Browser Window

Any time a new browser window is launched it ideally will be sized at 90% of the original browser size.

 

 Back to top