Amphtml: Allow style of the amp-sticky-ad close button.

[jpettitt]

We used to be able to style the close button -

We had a nice close button the same size and the one adchoices uses and we had it to the right of the ad only moving up if the page was 320px wide using media queries. It looked nice, it worked.

The latest code push seems to have broken all that by putting !important all over the place

Now we've got this ugly looking button we can't position and can't style.

It's looks terrible. Why was this change made? It's pure UX, it's one thing to dictate that a close button must exist but to dictate how it looks? This is just ugly.

[erwinmombay]

/to @zhouyx

[jridgewell]

/cc @jasti

[zhouyx]

changed by #5015. @mkhatib do we want !important

[jpettitt]

FYI the code does even prevent the button from being hidden -

background: none;
    border: none;

makes it go away (please don't make them !important too)

I'd love to be able have more control so I can do things like this

[jasti]

@jpettitt Separate from this breaking change, I do believe that AMP should have control of the size and placement of the close button. If you think this close button is ugly, let's discuss how to make it better.
I can vet your suggestion with UX experts. Do you have other suggestions?

[jpettitt]

Hmm, may ask why? That's getting well outside the performance aspects of amp and into dictating site UX. Things like close buttons are a very site specific feature.

We did a few things in styling this - we made the amp-sticky-ad itself frame the ad unit and not be full width. We moved the close button to the right of the and frame rather than above except where the viewport was 320px when we used a media query to push the close button to the position you normally have it. We also downsized it to match the ad-choices standard close button.

That's a bare minimum.

Beyond that it would be nice to be able to do things like

In the big picture I'm struggling to understand why AMP needs to control this. Yes it makes sense to require a button. It's appearance is site UX and AMP seems to keep encroaching into UX decisions that have nothing to do with performance or even general usability (the width restriction on amp-sidebar is another example). AMP has nothing to say about play buttons, allows styling of carousel button, allows arbitrary amp-sidebar triggers. But for some reason this button is special? Why?

Should I be opening a discussion topic about the boundaries of AMP UX?

Where there is an enforced UX decision at a minimum is should be explained, with supporting evidence, why it's better for users. The more seemingly arbitrary UX choices AMP makes the less attractive it is and the more people start to question if it's really about performance or about Google imposing it's UX standards.

[EDIT: The immediate issue is moot - I realized can make it do whatever I want with transform: - the bigger question is still one that should be resolved. ]

[mkhatib]

Sorry for the breaking change, I should've given it a bit more thought. Happy to roll this back if deemed necessary (defer to @dvoytenko @cramforce).

The reason I made this change is to try to avoid cases where the button is in-accessible to the user - either by on purpose abuse of hiding the close button (to not allow user to dismiss the sticky ad) or by accident (Small close button inaccessible on mobile).

Admittedly there are of course many ways around this (you mentioned transform as one way). Not sure if it'll be possible to cover all cases.

I think this is a really good discussion to have and whether these !important statements and whether it is possible to actually control this as needed.

[jpettitt]

Understood. Personally I think it's going to be very hard to make the button such that it can't be removed. With the current setting I could remove or visually change it with left:, transform:, left:, margin:, background:, border: , opacity:, visibility:, display: and probably a few more I can't think of right now.

Right now our prod version is this which I looks fine to me.

[dvoytenko]

@mkhatib I'd say we can live without !important here. Everyone is correct in saying that it's still too easy to hack the button off the screen.