/ Ver.1.0. Production Regulations

Transcription

1 Harper s BAZAAR ONLINE / Ver.1.0 Production Regulations 1

2 <Desktop>Rectangle Banner - HTML5 1/4 Overview The HTML5 Rich banner is a format available on the Sizmek platform for a polite banner. Overview of Rectangle Banner Rectangle 2

3 <Desktop>Rectangle Banner - HTML5 2/4 Included Template Files You have archive the workspace into a new ZIP file, preserving the directory structure. Template File Name Description 1 HTML index.html 2 Styles styles/style.css The ad file, with the ad configuration and initialization code. *It is a required file. The style sheet for the ad and its elements. *It is a required file in the Styles folder. 3 Scripts scripts/script.js scripts/ebloader.js Example code for the template *It is a required file in the Scripts folder. A script that loads EBLoader securely or insecurely. *It is a required file in the Scripts folder. *It cannot be edited. 4 Images images/backup.jpg The image is shown: - If the ad is not displayed - As a wallpaper for the ad in the collapsed state. *It is a required file in the Images folder. *Up to 100KB Maximum File Size Total size of files must be within 4MB. Supported Platforms OS Windows 10 Browsers Microsoft Edge Browser Windows 7, Windows 8.1 Internet Explorer 11 and above, Firefox 18 and above, Google Chrome 26 and above Mac / OS X 10.10, OS X Google Chrome, Safari 10.0 and above, Firefox 18 and above 3

4 <Desktop>Rectangle Banner - HTML5 3/4 Customizing All of the HTML5 banner functionality is programmed in the template files. At minimum, the only changes you will need to make are to the loaded image and video assets and their respective styles. To update the layout and design of a template, open the index.html and style.css files in a next editor. Note When updating or replacing images or videos, make sure to also update references to their filenames and dimensions found in index.html and style.css as necessary. To update the layout and design of a template, open the index.html and style.css files in a text editor. The index.html also contains JavaScript that can be modified to change or extend functionality. The properties of available include: Property Name ad banner 1 Description Div containing the entire ad. *It cannot be edited. Div containing the banner. *It cannot be edited. Please refer to the next page <div id="banner"> As for the following function, please refer to scripts/script.js. Function Name initeb startad clickthrough Description Ensures EB is initialized before starting the ad. * Required Starts the ad. * Required Handles the click-through * This function have to be called if ad is clicked. 4

5 <Desktop>Rectangle Banner - HTML5 4/4 index.html *It cannot be edited. 1 Please refer to the previous page 5

6 <Desktop>Mouse-Over Expand Banner - HML5 1/4 AD Material Please refer to the next page. Overview of Expandable Banner 1. When user access to the webpage, it loads a collapsed panel. 2. When user s cursor is on the collapsed panel, an expanded panel with launch. When user s cursor is off the expandable area, then the expanded panel will collapse, and collapsed panel will appear again. Collapsed Expand panel Panel 6

7 <Desktop>Mouse-Over Expand Banner - HTML5 2/4 Included Template Files You have archive the workspace into a new ZIP file, preserving the directory structure. Template File Name Description 1 HTML index.html 2 Styles styles/style.css scripts/script.js 3 Scripts scripts/ebloader.js 4 Images images/backup.jpg The ad file, with the ad configuration and initialization code. *It is a required file. The style sheet for the ad and its elements. *It is a required file in the Styles folder. Example code for the template *It is a required file in the Scripts folder. A script that loads EBLoader securely or insecurely. *It is a required file in the Scripts folder. *It cannot be edited. The image is shown: - If the ad is not displayed - As a wallpaper for the ad in the collapsed state. *It is a required file in the Images folder. *Up to 100KB Supported Platforms OS Windows 10 Browsers Microsoft Edge Browser Windows 7, Windows 8.1 Internet Explorer 11 and above, Firefox 18 and above, Google Chrome 26 and above Mac / OS X 10.10, OS X Google Chrome, Safari 10.0 and above, Firefox 18 and above 7

8 <Desktop>Mouse-Over Expand Banner - HTML5 3/4 Customizing All of the HTML5 Mouse On Expand functionality is programmed in the template files. At minimum, the only changes you will need to make are to the loaded image and video assets and their respective styles. To update the layout and design of a template, open the index.html and style.css files in a text editor. Note When updating or replacing images or videos, make sure to also update references to their filenames and dimensions found in index.html and style.css as necessary. To update the layout and design of a template, open the index.html and style.css files in a text editor. The index.html also contains JavaScript that can be modified to change or extend functionality. The properties of available include: Property Name ad banner 1 Description Div containing the entire ad. *It cannot be edited. Div containing the banner. 300x600 *It cannot be edited. panel Div containing the expansions. 962x600 *It cannot be edited. Please refer to the next page <div id="banner"> <div id="panel"> As for the following function, please refer to scripts/script.js. Function Name initeb startad expand collapse clickthrough Description Ensures EB is initialized before starting the ad. * Required Starts the ad. * Required Expands the ad. Collapses the ad. Handles the click-through * This function have to be called if ad is clicked. Note As for Sizmek HTML5 API, please find the URL below. 8

9 <Desktop>Mouse-Over Expand Banner - HTML5 4/4 index.html *It cannot be edited. 1 Please refer to the previous page 9

10 <Desktop>Back Ground Ad AD Material 1. Png file(within 300KB) 2. Link URL 1400px 982px 209px Size * 3 rd -party tags can not be accepted Within W 1400 pixel x H 1600 pixel *Important AD image should be placed within W1400px H600 File 200px 600px ALT text NG Creative appearance with in the red line on the right - The page s height is subject to change by the actual contents. Materials deadline Before 10 business days Environment Assumed screen width W px 1400px The background materials should be sent as well as Rectangle banner. All ads must indicate advertiser's logo or company name. Background ad must not draw a frame border. Please make the contents part white or transparent. 10

11 <Mobile> TOP IMPACT The Top Impact banner is automatically opened when the page is first displayed. Tapping the CLOSE Button closes the panel. Top Impact 828px 640px Reminder 828px 640px Please do not place important elements, because depending on the device width, it is cut and displayed. Specifications File format Maximu m File Size Dimensions (W x H) Notes 1. TOP IMPACT gif/jpg 300KB Please keep the important element within the width of 640px, because depending on the device width, it is cut and displayed. The CLOSE button will be provided by a third party ad server. The advertiser does not have to provide one. 2. Reminder gif/jpg 100KB Please keep the important element within the width of 640px, because depending on the device width, it is cut and displayed. 3. BIG panel(substitute) gif/jpg 100KB BIG panel ad will accommodate retina display. Therefore size of appearance will change in accordance with display size. 4. Bottom banner gif/jpg 50KB Precautions * This ad will accommodate retina display. Therefore size of appearance will change in accordance with display size. * Less than one other multiple display is allowed. Advertiser will not be able to replace an ad once it is posted. 11

12 <Mobile> TOP IMPACT VIDEO Tapping the CLOSE Button closes the panel. Top Impact 828px 640px Reminder 828px 640px Teaser Video (auto play, no sound) Please specify the video installation position with a rectangular ruled line of 16: 9. Please do not place important elements, because depending on the device width, it is cutted and displayed. Specifications File format Maximu m File Size Dimensions (W x H) Notes 1. TOP IMPACT gif/jpg 300KB Please keep the important element within the width of 640px, because depending on the device width, it is cut and displayed. Please specify the video installation position with a rectangular ruled line of 16: 9. The CLOSE button will be provided by a third party ad server. The advertiser does not have to provide one. 2. Video file MP4 5MB Within 1280x720, aspect ration 16:9 Seconds : within 60 seconds / Video Codec : MP4 / Video resolution : Less than 1280x720px / Video frame rate : 30[fps] / Total bit rate : 716[kbps] / Audio Codec : Mp3,Mp4 3. Reminder gif/jpg 100KB Please keep the important element within the width of 640px, because depending on the device width, it is cut and displayed. 4. BIG panel(substitute) gif/jpg 100KB BIG panel ad will accommodate retina display. Therefore size of appearance will change in accordance with display size. 5. Bottom banner gif/jpg 50KB Precautions * This ad will accommodate retina display. Therefore size of appearance will change in accordance with display size. * Less than one other multiple display is allowed. Advertiser will not be able to replace an ad once it is posted. 12

13 <Mobile> Top Impact Video & BIG panel video The Top Impact banner is automatically opened when the page is first displayed. Tapping the CLOSE Button closes the panel. Top Impact 828px 640px Reminder 828px 640px Specifications Please specify the video installation position with a rectangular ruled line of 16: 9. Please do not place important elements, because depending on the device width, it is cutted and displayed. File format Maximu m File Size Dimensions (W x H) Notes 1. TOP IMPACT gif/jpg 300KB Please keep the important element within the width of 640px, because depending on the device width, it is cut and displayed. Please specify the video installation position with a rectangular ruled line of 16: 9. The CLOSE button will be provided by a third party ad server. The advertiser does not have to provide one. 2. Video file MP4 5MB Within 1280x720, aspect ration 16:9 Second : within 60 seconds / Video Codec : MP4 / Video resolution : Less than 1280x720px / Video frame rate : 30[fps] / Total bit rate : 716[kbps] / Audio Codec : Mp3,Mp4 * Top impact and BIG panel video will be silent except when playing native players. 3. Reminder gif/jpg 100KB Please keep the important element within the width of 640px, because depending on the device width, it is cut and displayed. 4. Bottom banner gif/jpg 50KB Precautions * This ad will accommodate retina display. Therefore size of appearance will change in accordance with display size. * Less than one other multiple display is allowed. Advertiser will not be able to replace an ad once it is posted. 13