Move right video above content on Acceptable Ads Certification Tool page of acceptableads.com

[juliandoucette]

Background

The 1/2 column right video on the ​Acceptable Ads Certification Tool page of acceptableads.com looks a little awkward on tablet and desktop.

What to change

Change the 1/2 columns to 7/12 columns and move the video underneath the heading and hr.

[juliandoucette]

I can create a mockup if product thinks this is a good idea.

[athornburgh]

Replying to juliandoucette:

I can create a mockup if product thinks this is a good idea.

I think it's a good idea and a mockup would be niece as well :)

[juliandoucette]

Large desktop

[juliandoucette]

Small desktop

[juliandoucette]

Large tablet

[juliandoucette]

Small phone

[juliandoucette]

This is not looking so hot (especially because of the yellow notice which prevents the text from being seen above the fold). I tried 1/2 column but I thought it looked better as 2/3 column on desktop and tablet. Let me know what you think.

[jeen]

I've got some questions/ feedback:

• Why is the Acceptable Ads certification tool (Beta)repeated twice in the breadcrumb? This seems to be a mistake.
• For smaller screens, we should reduce the font size and corresponding padding down. Right now the font size and padding all remain the same. Smaller screens are typically viewed from a shorter distance, so reducing these down won't impair readability.
• The above suggestions aren't unique to this page but I think should be implemented across our site. These updates would also solve the fact that the text goes below the fold on small screens currently.
• I also think that the header shouldn't be sticky, but should appear when the user scrolls down the page.

[juliandoucette]

Replying to jeen:

I've got some questions/ feedback:

• Why is the Acceptable Ads certification tool (Beta)repeated twice in the breadcrumb? This seems to be a mistake.

Yes. I will create another ticket for this issue.

• For smaller screens, we should reduce the font size and corresponding padding down. Right now the font size and padding all remain the same. Smaller screens are typically viewed from a shorter distance, so reducing these down won't impair readability.

I agree. I will create another ticket for this issue.

• I also think that the header shouldn't be sticky, but should appear when the user scrolls down the page.

This will be addressed by #4868.

---

Alternatively, we could move the second section underneath the video and keep the 2 column layout. See the following attachment.

[juliandoucette]

Desktop 2 column fold.

[juliandoucette]

Desktop 2 column scrolled

[juliandoucette]

Created:

• #5134 ACCEPTABLE ADS CERTIFICATION TOOL (BETA) is repeated twice in breadcrumbs on acceptableads.com
• #5135 Reduce font size and padding on smaller screens on acceptableads.com

[juliandoucette]

• Are there any public release or promotion dates for AACT that I should be aware of @jobp?
• Still awaiting your feedback on my latest mock ups @Jeen?

[jeen]

Replying to juliandoucette:

• Still awaiting your feedback on my latest mock ups @Jeen?

I wouldn't put the Easy Implementation optimized for your audience text below the video, as it makes it harder for the user to scan the text on the page.

I am in favour of having the video under the title instead.

[juliandoucette]

• @jlow please confirm priority
• This will basically require a page re-write (function, not content)

[jeen]

Just rethinking this again:

The video should come as the first item on the page, the title below it, and then the rest of the body text.

This is not a major priority since it is a beta tool, and the video placement does not hinder the functionality of the page.

[juliandoucette]

Resolved by ​https://hg.adblockplus.org/web.acceptableads.com/rev/fd68e194112e