Mobile Advertising Specs

Transcription

1 Mobile Advertising Specs Standard Ad Size rmal Display vs. Retina Display Design Guidelines for Retina Display Creatives Design Guidelines for 300x250 Creatives Interstitial Full Screen Ad Size Responsive vs. non Responsive HTML5 Ad Create by Google Web Designer Video Aspect Ratio in 300x250 Swipe Cube Swipe Banner & Swipe Tablet Swipe Interstitials Video Peeling Ad Flip Card Ad Flipboard Slider Card Deck Double Tap 3D Touch Survey Rectangular Video Interstitial Video Interstitial Custom Ad Gyroscope Gyroscope Cheers Gyroscope Pouring Coffee Music Interaction Hitstation Heat Distortion Overlapping Slider Panorama 360 Panoramic 360 Panoramic Video

2 Unless explicitly specified in IO, Adello requires these ad sizes for all campaigns Send us the PSD / AI and our production team will adapt the creative into all of the ad sizes on your behalf Static: JPEG / GIF / PSD / AI Animation : GIF Static: JPEG / PSD / AI Rectangle Mobile Banner Tablet Horizontal Banner News feed Carousel Ad Size: 300x250 px Ad Size: 320x50 px Ad Size: 728x90 px Ad Size: 1200x628 px Ad Size: 1080x1080 px Max text in image: 20% Max text in image: 20% File Size: 120 kb File Size: 80 kb File Size: 120 kb File Size: 120 kb File Size: 120 kb 2

3 rmal Display vs Retina Display rmal 300x250 Retina display 600x500 3

4 Design Guidelines for Retina Display Creatives 600x500 The ad unit final display will be the normal size Design not retina in display 600x500 size. Please ensure text is readable in normal size Display on publisher website 300x250 Retina display design will automatically fit into publisher website in 300x250 4

5 Design Guidelines for Retina Display Creatives 300x250 display on publisher website Layout design in 600x500 Retina Display Dos Don'ts 24px 12px Elements are aligned. Call to Action button is big enough so the user can tap it. Logo and brand are clear and visible. Text is short and effective. Text font is too small and long. Call to Action button size is not adequate for mobile. Font size should x2. if normal font size is 12px, the retina display font size should set 24px. Tips for designer : try to zoom out 50% to design instead of 100% in your PS/AI. 5

6 Design Guidelines for 300x250 Creatives Dos Don'ts Basic elements for a good legibility Editable File Font file.ttf or.otf PSD or AI Font For slogan and references: 16px General Text Minimum size: 20px CTA (Button) Minimum Width: 40px Minimum Height: 40px Elements are aligned. Call to Action button is big enough so the user can tap it. Logo and brand are clear and visible. Text is short and effective. Text font is too small and long. Call to Action button size is not adequate for mobile. Background image competes with the text and logo, making the ad difficult to read. Background Image The image should not interfere with the text legibility. 6

7 Interstitial Full Screen Ad Size Commonly used AdFormat in Mobile Advertising Mobile Pre-/Interstitial Ad Size: 320x480 px Format: GIF animate, PNG, JPG File Size: 200 kb 7

8 Responsive vs. non Responsive Applicable to Interstitials on only non responsive responsive size fixed auto-fit to the screen ios screen size Android or other mobile OS screen size ios screen size Android or other mobile OS screen size 8

9 HTML5 Ad Create by Google Web Designer Mobile & Tablet Google Web Designer Setting Rectangle Ad Size: 300x250 px Mobile Banner Ad Size: 320x50 px Tablet Horizontal Banner Ad Size: 728x90 px New document setting Ads Environment Responsive Layout Creative guildline Video Animation length Animation loop File size recommend Click-through Published maximum images recommend Banner n-google Ad 300x250, 320x50 or 728x90 non-select t support 30 secs Stop after 30 secs 150 KB or smaller Your landing URL Max images for each ad unit 9

10 Video Aspect Ratio in 300x250 Mobile & tablet Original Aspect 16:9 Aspect Ratio Final production 4:3 16:9 16:9 vs vs In 4:30 aspect, the KFC & Halal logo is out of view In order to ensure that the video renders in full view, Adello will resize the width & height. Please provide the overlay graphic so that we can create a bounding box on the negative space. The two placement sizes are 320x480 and 320x250 With the bounding box and video, we will render the ad unit in the correct aspect. If you do not have a bounding box, please specify a background color & provide a logo 10

11 Adello s Rich Media Templates

12 Swipe Cube Swipe Cube Maximum File Weight Video Video Quality Video Durations 3 to 6 static images JPEG or GIF rmal size: 300x250 Retina display: 600x500 (Recommended) Each image should be less than 100kb 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 One video : 20 secs recommend, MAX 30 sec Two videos : Combine all 30 secs MAX The format offers the possibility to combine multiple creatives together in a rich interactive format. 12

13 Swipe Banner & Swipe Tablet Swipe Banner Swipe Leaderboard 3 to 6 static images JPEG or GIF rmal size: 320x50 Retina display: 640x100 (Recommended) rmal size: 728x90 Retina display: 1456x180 (Recommended) Maximum File Weight Each image should be less than 100kb The format offers the possibility to combine multiple creatives together in a rich interactive format. 13

14 Swipe Interstitials Video Swipe interstitials Maximum File Weight Video Video Quality Video Durations 3 to 6 static images JPEG or GIF ad size: 320x480 Each image should be less than 150kb 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 One video : 20 secs recommend, MAX 30 sec Two videos : Combine all 30 secs MAX The format offers the possibility to combine multiple creatives together in a rich interactive format. 14

15 Peeling Ad 2-3 images: front & back + Backside (optional) Dimension JPEG or GIF rmal size: 300x250 Maximum File Weight Video Video Quality Each image should be less than 100kb 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 te: Video is available on 2 nd page only Video Durations One video : 20 secs recommend, MAX 30 sec A catalogue-like ad format where the user swipes the front page to discover more content. 15

16 Flip Card Ad 2 images: front page and back page JPEG or GIF rmal size: 300x250 Maximum File Weight Video Video Quality Video Durations Each image should be less than 100kb 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 One video : 20 secs recommend, MAX 30 sec. A Flip Card ad format where the user flips / turns the ad to discover more content. 16

17 Flipboard 2 to 6 static images JPEG or GIF rmal size: 300x250 Retina display: 600x500 (Recommended) Maximum File Weight Video Video Quality Video Durations Each image should be less than 100kb 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 One video : 20 secs recommend, MAX 30 sec Two videos : Combine all 30 secs MAX A book-like ad format where user swipes pages to discover more content. 17

18 Slider 2 to 8 static images JPEG/GIF Header Maximum File Weight JPEG or GIF Mobile & tablet interstitial Mobile & tablet banner: 320x50, 728x90 Rectangle: 300x250 Each image should be less than 100kb Video Video Quality Video Durations 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 One video : 20 secs recommend, MAX 30 sec Two videos : Combine all 30 secs MAX A carousel-like format providing the ability to display multiple messages in a clean on concise fashion. 18

19 Card Deck 2 to 8 static images JPEG or GIF Mobile & tablet interstitial Mobile & tablet banner: 320x50, 728x90 Rectangle: 300x250 Maximum File Weight Video Video Quality Video Durations Each image should be less than 100kb 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 One video : 20 secs recommend, MAX 30 sec Two videos : Combine all 30 secs MAX A stack of cards displayed on top of each others. The user can swipe the cards away to reveal the one below. 19

20 Double Tap 1 static JPEG/GIF creative and 1 JPG/GIF/PNG creative for the overlay appearing in click JPEG or GIF Mobile & tablet interstitial Mobile & tablet banner: 320x50, 728x90 Rectangle: 300x250 When the user first tap the ad, a message is overlaid on top of the ad. When this message is taped, the user is redirected. 20

21 3D Touch 2 Static images Layered PSD/AI JPEG or GIF Mobile & tablet interstitial Mobile & tablet banner: 320x50, 728x90 Rectangle: 300x250 Take advantage of the force touch screen to create new interactions. A second creative is revealed when the ad is pressed. Phone model support iphone 6s, iphone SE, iphone 7 21

22 Survey 1 to 8 Images Layered PSD/AI JPEG or GIF Mobile & tablet interstitial Mobile & tablet banner: 320x50, 728x90 Rectangle: 300x250 A format to engage your user with your brand. The survey can be interstitial and with different paths depending on the user s answers. 22

23 Rectangular Video 1 static image and 1 video JPEG or GIF Rectangular : 300x250 Maximum File Weight Video Video Quality Each image should be less than 100kb 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 Video Durations 20 secs recommend, MAX 30 sec Video auto-plays muted, optionally an audio toggle button can be added. 23

24 Interstitial Video 1 static image and 1 video JPEG or GIF Mobile interstitial: 320x480 Tablet interstitial: 768x1024 Maximum File Weight Video Video Quality Each image should be less than 100kb 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 Video Durations 20 secs recommend, MAX 30 sec Video auto-plays muted, optionally an audio toggle button can be added. 24

25 Interstitial Custom Ad Frame by Frame layered PSD/AI file PSD or AI Mobile interstitial: 320x480 Tablet interstitial: 768x1024 Allows users to share greetings with Ikea products on social media. 25

26 Interstitial Custom Ad Frame by Frame layered PSD/AI file PSD or AI Mobile interstitial: 320x480 Tablet interstitial: 768x1024 Shake the phone for interactive animation. 26

27 Interstitial Custom Ad Frame by Frame layered PSD/AI file PSD or AI Mobile interstitial: 320x480 Tablet interstitial: 768x1024 Shake the phone for interactive animation. 27

28 Gyroscope Frame by Frame layered PSD/AI file PSD or AI Mobile interstitial: 320x480 Tablet interstitial: 768x1024 Tilt the phone in all directions to experience a 3D environment effect. 28

29 Gyroscope - Cheers Frame by Frame layered PSD/AI file PSD or AI Mobile interstitial: 320x480 Tilt the phone left or right to cheers. s 29

30 Gyroscope Pouring Coffee Frame by Frame layered PSD/AI file PSD or AI Mobile interstitial: 320x480 Tilt the phone left or right for pouring effect. 30

31 Music Interaction - Hitstation Frame by Frame layered PSD/AI file Audio Audio PSD or AI Mobile interstitial: 320x480 Rectangular : 300x250 Format:.mp3/AAC Bitrate: 128kb Implement Fade in and Fade out (recommended) Audio Durations MAX 20 sec per audio sample Showcase multiple audio samples within a mobile optimized interactive ad format. 31

32 Heat Distortion Frame by Frame layered PSD/AI file PSD or AI Mobile interstitial: 320x480 Rectangular: 300x250 Heat distortion effect on one of the Ad layers. 32

33 Overlapping Slider 2 Static Images JPG/GIF PSD or AI Mobile interstitial: 320x480 Rectangular: 300x250 Drag the slider left and right to visualize 2 different creatives. 33

34 Panorama Frame by Frame layered PSD/AI file Video Video Quality Video Durations PSD or AI Height: 480px Width: between 900px and 1500px 150kbps, 20-30fps 720p / 1080p for 16:9.mov.mp4 One video : 20 secs recommend, MAX 30 sec Two videos : Combine all 30 secs MAX Pan left and right to discover more content. 34

35 360 Panoramic 360 JPEG JPG/GIF Footer or Header PSD or AI 360 image rmal size: 3000x1500px Footer/Header Width: 320px Rotate the phone in all directions to experience a 3D environment effect JPEG Sample 35

36 360 Panoramic Video 360 video JPG/GIF Footer or Header PSD or AI Video Quality Video Durations 150kbps, 20-30fps.mov.mp4 30 seconds video Rotate the phone in all directions to experience a 3D environment effect. Video Sample 36

37 Sandor Laczko Country Manager Switzerland