975199 - Specify Sponsored Image requirements for partners based on IAB (including format, resizing, layout, etc)

Status: VERIFIED FIXED

(Firefox :: Tabbed Browser, defect)

Description

[Jennifer Morrow [:Boriss] (UX)]

The first iteration (Directory Tiles v1) of the Tiles project is intended to demonstrate a type of tile users will see (Directory Tile) and begin the process of gathering CTR and Impressions performance data on tile usage to determine if there exists value both for our users and partners.  Sponsored Tiles, which are paid to be include in the Tile Grid, are sourced from partners.

Specifying the format of these tiles will consist of balancing user and partner needs.  For users, effective communication of what the tiles are and an elegantly designed layout with often disparate tiles is key.  For partners, the ability to easily provide tiles and understand specifications is the goal (in the first version, likely leveraging existing assets such as those specified in the IAB spec.)

Comment 1

[Jennifer Morrow [:Boriss] (UX)]

Mardak, I think I have a question for you specifically.  The IAB Display Advertising Guidelines' Universal Ad Package (http://www.iab.net/guidelines/508676/508767/displayguidelines#note2) specifies two relevant sizes of units, described as WxH in pixels: 300x250 and 180x150.  While asking sponsors for 180x150 tiles and showing less than 9 for small window sizes is safest in a v1, it'd be ideal to be able to show units as 300x250 at larger screen sizes.  My question is if we ask for both from partners, would we be able to scale elegantly between 180x150 and 300x250 - perhaps even smaller and larger segments as well - as new tab is resized?  Practically, for this initial v1, we may be stuck with 180x150 only.  But having the option of displaying at 300x250 at larger windows - even if scaling is impossible - gives us more flexibility to render well at bigger screens.

Comment 2

[Ed Lee :Mardak]

(In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #1)
> would we be able to scale elegantly between 180x150 and 300x250
I would think that the different resolutions aren't just scaling, e.g., additional information might be shown at the higher resolution or objects are repositioned as resolution changes.

I suppose it might be safer to take the smaller resolution and scale it up as we approach 300x250 then switch completely to that higher resolution and scale that up as necessary. (As opposed to taking the higher resolution and shrinking it potentially losing some information.)

So if we go with not shrinking and only scaling up, what should be done if the tab wouldn't have fit 9x 180x150 tiles + padding/etc.

Comment 3

[Jennifer Morrow [:Boriss] (UX)]

(In reply to Ed Lee :Mardak from comment #2)
> (In reply to Jennifer Morrow [:Boriss] (Firefox UX) from comment #1)
> > would we be able to scale elegantly between 180x150 and 300x250
> I would think that the different resolutions aren't just scaling, e.g.,
> additional information might be shown at the higher resolution or objects
> are repositioned as resolution changes.
> 
> I suppose it might be safer to take the smaller resolution and scale it up
> as we approach 300x250 then switch completely to that higher resolution and
> scale that up as necessary. (As opposed to taking the higher resolution and
> shrinking it potentially losing some information.)
> 
> So if we go with not shrinking and only scaling up, what should be done if
> the tab wouldn't have fit 9x 180x150 tiles + padding/etc.

Thanks, Mardak.  This seems like a sensible way to start: ask for 180x150, try to scale up at bigger screens (maybe not even in v1), and see how it performs.  That way, sponsors only have to provide one thing, we have a viable way to try scaling, and if scaling doesn't perform well enough we have a backup option (just show 180x150).

I'll specify this in a mockup and attach that to this bug, but here's what I'm thinking if you want to weigh in earlier:

* Tiles are normally 180x150, arranged in a 9x9 Tile Grid.
** 9x9 Tile Grid will be vertically and horizontally centered in Firefox window (assuming no search bar for now) 
** If the window is large enough (to be specified) to show tiles at larger 300x250 resolution, the tiles will expand to 300x250 but not bigger (similar to Chrome’s New Tab and Opera’s Speed Dial) 
* In v1, only 9 tiles are shown, but future versions will allow for scrolling down, progressively loading  more tiles
* A gutter of n pixels will be present between and around all tiles
* If the window is too horizontal or vertical to show 3 rows/columns of tiles with their gutters, 2 will be shown.  If too small for 2, then 1 will be shown (similar to Opera Speed Dial) 
* If the window is too small for one full tile, just the top right of the tile and gutter will be shown (similar to Firefox today)

Comment 4

[Jennifer Morrow [:Boriss] (UX)]

(Actually, most of the behavior in Comment 3 would be added to bug 975208)

Comment 5

[Ed Lee :Mardak]

To be clear, when you say 180x150, is this the resolution of the image of what a partner would provide? You had some mockup/specs elsewhere indicating the total size is 180x150 with a maximum brand image of 134x104.

In either case, given a background color, that theoretically fits with the brand image's edges (or uses transparent background), we can fill in the background color in any direction.. even a circle ;)

Comment 6

[Jennifer Morrow [:Boriss] (UX)]

Attachment: Draft mockup: partner tile size and requirements

(In reply to Ed Lee :Mardak from comment #5)
> To be clear, when you say 180x150, is this the resolution of the image of
> what a partner would provide? You had some mockup/specs elsewhere indicating
> the total size is 180x150 with a maximum brand image of 134x104.
> 
> In either case, given a background color, that theoretically fits with the
> brand image's edges (or uses transparent background), we can fill in the
> background color in any direction.. even a circle ;)

Attaching a draft image pre-document, but hopefully it'll clarify.  The background color is intended to be exactly the same as the background of the tile we're given - partners can provide it, or we can detect it, but it can't be visible when the tile's rendered.

Comment 7

[Ed Lee :Mardak]

Thanks that helps. Fyi, 180x150 is 1.2 ratio or 6:5. A 4:3 ratio with 150px tall would be 200px wide.

Comment 8

[Jennifer Morrow [:Boriss] (UX)]

Attachment: Mockup: Partner tile size and requirements

Comment 9

[Jennifer Morrow [:Boriss] (UX)]

Correction: For option 3, Unit is 180x86px