Pop-Up Dimensions: Mobile: 640 (W) x 960 (H) Tablet Portrait - 1536 (W) x 2048 (H) [For myTV only] Tablet Landscape - 2048 (W) x 1536 (H) [For myTV only] File format/ size: Must provide (.gif or .jpg) still image

- max. 75KB for Mobile - max. 400KB for Tablet

Close button: A 30 x 30 pixel close button will be placed on the top-left corner of an ad by default

of the app (not required in the creative) When the user clicks it, the app will return to the content Close behavior is handled by the app; please ensure that no advertiser branding or

call-to-action content is present at this location Junior Pop-Up Dimension: Mobile: 640 (W) x 730 (H) File format/ size: Must provide (.gif or .jpg) still image

- max. 75KB for mobile Material guideline: 1 click-through URL is allowed for each Pop-up Ad Landing page should be hosted by client 3rd party ad serving tag is not allowed Submission deadline: All ads must be submitted at least 3 working days prior to campaign launch

THUNDER & LIGHTNING Mobile Crazy Ad

Specification Version: 1.8 (Jun, 2013)

THUNDER & LIGHTNING Mobile

Crazy Ad provides advertisers with

the flexibility and freedom to

design their own execution using

HTML5, CSS and JavaScript for

interstitial ad that brings in-app full

page browsing experiences with

interactive rich media capability for

user.

Platform Phone: iOS 4+, Android 4+

Tablet: iOS 4+, Android 4+

Placement Full screen interstitial

Dimension Due to the variety of screen sizes and ratios in mobile devices, creative is highly recommended built as following resolutions.

Phone: o Portrait: 320 (W) x 480 (H)

Tablet: o Portrait: 768 (W) x 1024 (H) o Landscape: 1024 (W) x 768 (H)

For better appearance, ad developer should use responsive / multi-size layout instead of fixed display area with JavaScript and CSS to rework the creative to various dimensions and adjust the creative layout accordingly.

Submission material HTML creative: Creative must be submitted as finished HTML,

including images, HTML, CSS and JavaScript etc. Ad developer can choose one of the following ways to

build their creative: o Universal creative – including all layouts (portrait /

landscape / phone / tablet) into one creative that able to detect the dimension of container and the orientation of device with JavaScript for display corresponding layout.

o Separate creative – build the phone and the tablet layouts into two creative separately. For phone creative, it only need to cater portrait layout while for tablet creative, it need to contain portrait and landscape layout and able to detect the orientation of device with JavaScript for display corresponding layout.

Format: ZIP file(s) containing the completed creative. Total file size (including all loaded data on running

ad): o Universal creative – max. 700kb o Separate creative (phone) – max. 200kb

(tablet) – max. 500kb Any external resource link is not allowed except approved

vendor. All ad material must hosted by TVB.COM.

continued

continued

Backup images (for unsupported device): Phone (portrait only):

o Dimension - 320(W) x 480 (H)

o File format - .gif / .jpg

o File size – max. 50kb Tablet (portrait):

o Dimension - 768(W) x 1024 (H)

o File format - .gif / .jpg

o File size – max. 160kb

Tablet (landscape): o Dimension - 1024(W) x 768 (H)

o File format - .gif / .jpg

o File size – max. 160kb

Description: Create a text file, named “readme.txt” to describe

following ad info: o Click-through URL (optional):

e.g. http://www.tvb.com o Out-App landing page (iOS only):

Yes – open in Mobile Safari No – open in in-app browser Out-app only for Android

o Third party impression tag (optional): e.g. http://www.xxx.com

o Creative: Universal – one creative Separate – two creative

Submission deadline At least 7 working days prior to campaign launch

TVB.COM will provide testing within 3 working days upon receipt of all creative elements built to correct specifications.

Incorrectly submitted creative will be returned for revision and may result in scheduling delays.

File format HTML, CSS, JavaScript and images (jpg/gif/png) etc.

No flash / audio / video creative.

Click-through URL Only one click-through URL is allowed.

Ensure your destination or landing page will be viewable to mobile device users e.g. Avoid using Flash navigation elements.

Call API Use TVB_Ad_ClickthroughURL() JavaScript function (provided by TVB.COM ad template API) to call the landing page instead of hardcode the click-through URL.

Layout

Phone - portrait

continued

30px 290px

320px

30px

450px 480px

Close button: 30(W) x 30(H)

Creative Ad area: 320(W) x 480(H)

continued

Tablet - portrait

Tablet - landscape

30px 738px

768px

30px

994px 1024px

Close button: 30(W) x 30(H)

Creative Ad area: 320(W) x 480(H)

30px 994px

1024p

x

738px

30px

768px

Orientation Phone o Display portrait creative only o In portrait mode, the screen will be displayed a full-page

portrait creative. o In landscape mode, the creative will be rotated and

shrink to fit the screen with same aspect ratio.

Tablet o Ad developers need to contain portrait and landscape

layout into one creative that able to detect the orientation of device with JavaScript for display corresponding layout.

Close button A 30 x 30 pixel close button (not required in the creative)

will be placed by the app on the top-left corner of the ad.

When the user clicks it, the app will return to the content.

Close behavior is handled by the app; please ensure that no advertiser branding or call-to-action content is present at this location.

Portrait

Creative

Crazy Ad

running on

smartphone

Portrait

Creative

Portrait mode Landscape mode

Crazy ad

running on

tablet

Portrait

Creative Landscape

Creative

Portrait mode Landscape mode

3rd party ad serving tag Third party ad-serving of any creative element is not supported; however third party click and impression tracking is permitted.

Unsupported Device By default, the HTML5 creative can be displayed on any iOS/Android app compliable mobile device. However, in real world, some old version OS browser or specific manufacture’s browser will produce the non-standard result, like wrong positioning or poor performance, and causes bad user experience. In that case, the ad will be displayed the backup image only instead of the HTML5 creative.

Besides, TVB.COM will provide testing upon receipt of all creative elements built to correct specifications. Non-compliant creative elements will be returned for revision.

We do this to proactively exclude poorly-performing platforms like Android 2.x or 3.x from advanced rich media and ensure they still have a smooth experience.

HTML5 CREATIVE GUIDELINES

Guide to HTML5 ad Creative Development Version 1.5(May, 2013)

Welcome to HTML5 Creative

Guidelines. This is article to learn

the secrets of building ads in HTML5

for TVB.COM mobile application.

Here you’ll find specification,

guides, sample code and links to

helpful resources.

File Extension All file resources should be complied with the following extension in deliverables:

*.html – the html files of the promotion site *.jpg, *.png, *.gif – the image files *.js – the javascript files *.css – the css files *.xml – the xml files *.txt– the text files *.otf– the font files

File Structure All file resources should be structured as follows:

index.html – default page [project] – html file [project/images] – images files [project/js] – JavaScript files [project/css] – css files [project/font] - font files

readme.txt – ad setting description

Sample code Here is an example: <!doctype html> <html>

<head> <meta charset="UTF-8"> <title>HTML5 Ad demo</title> <!-- Comment CSS --> <link href="css/html5AdDemo.css" rel="stylesheet" type="text/css"> <!-- Comment JS --> <script type="text/javascript" src="js/html5AdDemo.js"></script>

</head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- Comment Ad content --> <div id=”adContent”></div>

</body> </html>

Download an example mobile Crazy Ad

HTML coding The authoring of all HTML, JavaScript or CSS code is the sole responsibility of the creative agency and must comply with HTML5 and W3C standards. Please ensure your code is run through a W3C HTML validation script before submission.

Keep in mind that heavy JavaScript execution can consume substantial computing resources and deteriorate the user experience. TVB.COM reserves the right to pull down ads that have problematic code.

continued

continued

Use relative path instead of absolute path for all external resources such as JavaScript and CSS in html file.

For optimum performance and readability you must ensure that external resources such as JavaScript and CSS are placed in the head tag rather than in the body of the HTML creative.

The background of ad container (WebView) is opaque white. If the background color of html body is transparent, the ad background color will be white.

External resource links

For avoiding missing links error, any external resource link is not allowed except the following approved white list:

code.jquery.com ajax.googleapis.com media.admob.com

Compression / Encoding

All deliverables (js, html etc.) should be in UTF-8 encoding

All external resources (CSS, JavaScript, fonts and images etc.) recommend be inline within the HTML using base64 encoding. This is essential for ads to display correctly when the user is offline.

We recommended that all CSS and JavaScript be minified for optimal delivery and user experience.

It is also recommended that lossless compression be applied to images via tools such as Smush-It or OptiPNG prior to base64 encoding.

Browser support In general, all ads should be followed system requirements of apps to compliant different native browser of OS.

System requirements of TVB.COM apps table

OS myTV TVB News TVB Finance TVB Zone

Android 2.2+ 2.2+ 2.2+ 4.0+

iOS 4.0+ 5.0+ 5.0+ 5.0+

It is difficult for development to compliant all version of native browser on different OS (targeting which OS to run the ad is allowed). However, it is highly recommend test the ad on Android 4.0+ and iOS 6.0+ environment because there are majority OS versions for TVB.COM apps.

Compatibility It is important for developer to understand the compatibility of HTML5 APIs and CSS3 on mobile platform.

Recommended online resources: When can I use … Mobile HTML

continued

Key HTML5 APIs compatibility table continued

Feature Safari on iOS Chrome on Android

Platform iPhone & iPad Phones & Tablet

Versions tested 3.2 to 6.1 1.5 to 4.2

Canvas API W3C API 2D Drawing API

SVG W3C Working Group Scalable Vector Graphics

3.0+

Motion Sensors W3C Standard Accelerometer, Gyroscope, Magnetometer

4.2 3.0+

Touch Events W3C API touchstart, touchend, touchmove, touchcancel

2.1+

Source: mobilehtml5.org

Key CSS3 compatibility table

Feature iOS Android Phones (2.0+)

Android Tablets (3.0)

CSS3 Transforms rotate, translate, scale, skew, matrix

*

CSS3 Transforms 3D scale3d, translate3d, perspective, backface

4.0+

CSS3 Transitions Animations between two states

*

CSS3 Animations Keyframe Animations

*

*Android < = 2.3.3 - not support animating multiple properties, only

single properties. Read this article for details.

Source: media.admob.com

Device testing / Debugging

Testing on the actual device with different platforms is the best solution for checking. However, it is not available to everybody.

For ad testing, it can break down into the following four tiers. 1. Test build of the application: load the ad with AdMob SDK

test app on the device. 2. Native web browser on the device: Mobile Safari and

Android Chrome browser. 3. Device simulator: Xcode SDK: iOS Simulator(Mac only),

Device Anywhere, BrowserStack, Adobe Edge Inspect. 4. Desktop browser: running on a similar rendering engine

(Webkit) as the mobile web browser such as Safari and Chrome.

RAINBOW Mobile Flipping Ad

Specification Version: 1.2 (June, 2013)

RAINBOW Mobile Flipping Ad is

an interstitial ad that allows

advertisers to showcase different

product images to users in an

interactive manner. Users can

swipe across different product

images one by one with elegant

transition effect.

Platform Phone: iOS, Android

Tablet: iOS, Android

Placement Full screen interstitial

Interaction

Mobile flipping ad sample include: Background image, overlay image page, navigation bar (center-bottom), click-through URL area (right-bottom) and close button (left-top)

Swipe symbol indicator is pop-up for 3 seconds to notify user to navigate different images with swipe gesture.

Next page is displayed while the navigation bar is also updated. The pages are navigating with the loop feature.

1

Flipping to next page with swipe from right to left or click the right arrow button on the navigation bar, vice versa for navigating previous page.

2 3

Mobile flipping ad is a multi-page interstitial ad that appears on

top of content and allows user to horizontal swipe across

different images with flipping effect over a background image.

A

A B

Demo http://addemo.tvb.com/fl

Browsing platform: Mobile : native browser (recommended) Desktop: Google Chrome browser (animation only)

Dimension Phone: 320 (W) x 480 (H)

Tablet: 768 (W) x 1024 (H)

Submission material Page image Quantity – 2 to 4 images Dimension (phone) – 320(W) x 440(H)

(tablet) – 768(W) x 974(H) File format – .jpg / .gif /.png

– all images must be use same format File size (phone) – max. 70kb /image

(tablet) – max. 100kb /image

Background image (optional – refer to default background on p.7) Dimension (phone) – 320(W) x 480(H)

(tablet) – 768(W) x 1024(H) File format – .jpg / .gif /.png File size (phone) – max. 50kb

(tablet) – max. 100kb

Description: Create a text file, named “readme.txt” to describe

following ad info: o Click-through URL (optional):

e.g. http://www.tvb.com o Out-App landing page (iOS only):

Yes – open in Mobile Safari No – open in in-app browser Out-app only for Android

o Third party impression tag (optional): e.g. http://www.xxx.com

Download sample download phone material sample

download tablet material sample

Submission deadline At least 5 working days prior to campaign launch

Incorrectly submitted creative will be returned for revision and may result in scheduling delays.

Layout Phone

Download mobile flipping ad phone layout (.psd file)

Continued

30px 290px

320px

30px

450px 480px

Close button: 30(W) x 30(H)

Page area: 320(W) x 320(H)

Swipe Indicator

84(W) x 84(H)

Navigation bar

124(W) x 26(H)

Background image area: 320(W) x 480(H)

120px

320px

40px

98px 124px 98px

Next

page

butto

n

Click-through URL area: 90(W) x 40(H)

Click-through URL

90(W) x 40(H)

Previous

page

button

Tablet Continued

Download mobile flipping tablet layout (.psd file)

30px 738px

768px

30px

994px 1024p

x

Close button: 30(W) x 30(H)

Page area: 768(W) x 768(H)

Background image area: 768(W) x 1024(H)

Swipe Indicator

84(W) x 84(H)

Navigation bar

124(W) x 26(H)

206px

768px

50px

322px 124px 322px

Next

page

butto

n

Click-through URL area: 290(W) x 50(H)

Click-through URL

290(W) x 50(H)

Previous

page

button

Close button A 30 x 30 pixel close button (not required in the creative)

will be placed by the app on the top-left corner of the ad.

When the user clicks it, the app will return to their app.

Close behavior is handled by the app; please ensure that no advertiser branding or call-to-action content is present at this location.

Click-through URL One click-through URL is allowed in the ad creative if required.

Client needs to make a button / graphics with some “call-for-action” message at the bottom-right corner of background image (refer to “Layout” part of this document).

Please ensure your destination or landing page will be viewable to mobile device users e.g. Avoid using Flash navigation elements.

Orientation Portrait creative only

In portrait mode, the screen will be displayed a full-page portrait creative.

In landscape mode, the creative will be rotated and shrink to fit the screen with same aspect ratio.

Phone

Tablet

Mobile flipping

ad running on

smartphone.

Mobile flipping

ad running on

tablet

Portrait mode Landscape mode

Portrait mode Landscape mode

3rd party ad serving tag Third party ad-serving of any creative element is not supported; however third party click and impression tracking is permitted.

Default background For any advertiser who cannot provide background image, the background color is allowed to set with custom web color (e.g. #ff0000) that is selected by advertiser.

For the case with click-through URL, default click-through URL

button will be added at the bottom-left corner.

Unsupported device As the 3D flipping transitions require 3D transform support browser to run, devices that lack 3D support, like Android 2.x, will fall back to a fade transition (click to demo).

For any device with poor performance on running that ad, the page navigation feature will be disabled and the navigation bar will not be showed. The screen will be only displayed the background image and first page image while user can click the click-through URL to landing page.