Create few different designs to fit many banner ad sizes

1

Hi all :slight_smile:
I’m experimenting using responsive or flexible designs so I can create let’s say five sizes that will cover 14 possible sizes of a banner. The problem is that some sizes overlap. If I create a design for horizontal banners starting from 300 px wide (and 90 px in height), it conflicts with vertical banners that are also 300 px wide, but 600 px in height.

How can I create different designs that will match the desired size?

I’m testing the sizes with Safari device simulation, which is a great help. Have almost every size covered but when it comes to 300x600 ad, it displays the design for 300x90 or bigger. Maybe what I want is not possible or I want Hype to do something not expected?

Test_adaptable.hype.zip (2,1 MB)

1 Like
2

hype API has got a layoutrequest. so if you can make rules you can serve layouts regarding those …

3

“IF” is the problem :joy:

4

shouldn't :slight_smile:

you say you've got 14 adsizes and 5 layoutsizes.
so make a matchinglist:
layoutnameOne : match adsize xy and adsize xy
layoutnameTwo : match adsize xy and adsize xy

so on layoutrequest we could take the actual bodysize and show the desired layout ...

just a guess ... but why shouldn't this work ¿ :slight_smile:

5

In this very moment I have absolutely no clue how to do that since my field of expertise is graphic design, I’m not a developer. But nowadays it seems you have to master two or three very different careers to earn one salary :wink:

1 Like
6

in that case the answer is no.
breakpoints in hype cover the width not the height.

1 Like
7

I suspected it since breakpoints are generally used in webpages and the height is not in question since the content wil be distributed. But I’m interested in doing so for ads and small pieces. Maybe a feature request, or it’s just me wanting this to happen? It would be a dream to be able to generate 14 sizes designing only 5 basic sizes.

  • As a note, Google Web Designer allows you to resize the document live and preview the breakpoints horizontally and vertically but that is a specific tool to design ads and it’s understandable they have some specific tools (and lack many others Hype has).
8

what about file sizes¿ if you pack all banners in one zipped document won’t you run into filsizelimits¿!

anyway: if you could provide a list i could give it a shot …

9

I’m not sure about filesizes, I’m experimenting methods to create and maintain HTML5 banners faster and easily. Ideally they wouldn’t have a size problem since it’s the same as I did before when export different scenes. The resources are the same, only the html changes and the placement of the assets changes. And I have only to design and maintain a basic set of 5 designs, not 14.

But if I can’t find a way to display a vertical or horizontal design when needed, this approach is not interesting to design large banner sets. I guess my case is not average but easily you find yourself creating 10, 14 or 20 different sizes when working with online ads. Having a flexible base design would ease things a lot, avoiding to place elements manually just for a few pixels here and there.

The problem is, how to tell Hype that a specific design is meant to be vertical or horizontal.

For example, depending on the breakpoints I can have all of the horizontal sizes from one design. But if there is a vertical banner with the same wide, it uses that same design and looks terrible. This is a 300x600 banner with a distribution intended for horizontal banners larger than 300 px wide.

Captura de pantalla 2017-11-20 a las 17.42.19.png1382×1620 1.14 MB

A solution woud be to separate horizontal and vertical banners in two documents, but I really wouldn’t like to do that. I guess if there are no rules for vertical breakpoints, I’m asking too much from Hype and this usage is not intended.

10

did you mean something like this. ( must admit layouts do my head in)

<script>
function layoutRequest(hypeDocument, element, event) {

 var Lname = hypeDocument.currentLayoutName()
   console.log(Lname)
	
	var height = "innerHeight" in window  ? window.innerHeight  : document.documentElement.offsetHeight; 
           
              
              if (height  > 90  && Lname == 'Personalizado3_300_H90') {
              hypeDocument.showLayoutNamed('Diseño sin título_300_H280')
              
              }
              
    Lname = hypeDocument.currentLayoutName()
   console.log(Lname)
	console.log( height ) 
 

  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});
</script>

Test_adaptable_v2.hype.zip (2.1 MB)

3 Likes
11

Holy Cow!! That is quite something! :open_mouth: Thank you for it.

However… I’m having problems with some sizes. The sizes I’m trying to cover are: 120x600, 160x600, 250x250, 300x50, 320x50, 300x250, 300x600, 320x50, 320x480, 468x60, 728x90, 970x90, (and sometimes 1000x40 and 1366x40 that are extremely wide formats).

12

Can you post a project with those setup, doing so may make it easier to continue this

13

Hi! Not with all of them, but I can share my initial template with the most important / common sizes. As per the sizes, the firs value given is always the horizontal dimension (width).
SET_base.hypetemplate.zip (104,4 KB)

14

adLayoutRequest.hype.zip (2.0 MB)
so this is a generic attempt.
checks out window width and height of the document.
tests for portrait or landsscape.
tries to find the best fitting layout …

EDIT: removed my samplefiles from the server, so below is the pure servicelink
http://matthewjamestaylor.com/responsive-ad-checker

may work :slight_smile: without guaranties … :wink:

p.s. from a logic point this attempt should work. if it does not there is probably a scripting missmatch :slight_smile:

3 Likes
15

I didn’t know about this tool but I’m very impressed! It works quite well with your “attempt”. Also, thank you very much for sharing this resource with me :smiley:

16

yeah, seems to work like a charm :grin: a good hypedocument-setup should do the rest

on first place potrait or landscape is considered
on second place the breakpoints being set are considered
on third place the best matching layoutproportion of above …

if there’s not matching the hypedefaultlayout will be shown.

so that would be the rules to set up a document