AMP Header Style

  • osseonews

    (@osseonews)


    8 years ago

    Your AMP Header Style for Design Three (the design we tested), has an annoying bug on mobile phones. The header stays fixed on the mobile screen, which is fine, but the problem is the header doesn’t stay on the top of the screen and visible, it keeps scrolling with the page, and content remains visible on top and the bottom (the content read goes on top of the banner, because the header doesn’t stay on top, but floats). This has an effect of making the header look like a scrolling banner on the AMP website when viewed on mobile phones. It is very annoying and makes reading the AMP post very annoying on mobile phones. This is not the usual experience with fixed headers, which stay fixed, while the content sort of disappears as you scroll down the page (the content doesn’t go on top of the header). It’s hard to describe the actual appearence here, but it’s very annoying, and not the usual functionality for a fixed header on mobile.

    Ultimately, we fixed this by changing the CSS for #headerwrap to static instead of fixed, but this is not a good fix, because we’d like the header to remain fixed, just not float down the screen, while content goes up, as you scroll down.

    Please look into this. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    Hey @osseonews

    Thank you so much for using the plugin and your AMAZING feedback.

    I have added this in the Github issues list. I will make sure that this is fixed in the future updates.

    Also, can you please share the URL or the screenshot? I would like to see the behavior (user experience wise), so it will help me understand better.

    Regards,
    Ahmed

    Thread Starter osseonews

    (@osseonews)

    Thanks for your quick reply. Unfortunately, we can’t send a screenshot or URL, because we had to fix the CSS on our AMP site, to make the header static, and Google already updated the CSS, so no longer show the error, which only happens when the header is set as fixed in the CSS.

    Also, this error won’t show in browsers, just thru a mobile device, i.e. iphone.

    Again the error is that even though the header is fixed, when you scroll the content moves up above the header and shows on the phone browser, making it look like the header is a floating banner of some sort. It’s really quite unannoying. I think this is a CSS issue, but I’m not a CSS expert, so not sure what to fix. I’ll try to see if we can replicate the error via some sort of mobile simulator and send a screenshot.

    leverager

    (@leverager)

    Hi,
    I can confirm we are experiencing the same issue when you click from an amp link on google, there seems to be an incompatibility with Google’s own header link at the top, so the sticky header floats in the middle of the page as you scroll down obstructing the view. This doesn’t seem to happen when you preview an amp page by visiting the /amp link directly, but when the amp page is served from a google search result (where the google link header appears at the too.).

    Please fix this as soon as possible as it’s annoying to users and causes a high bounce rate.

    Also would be great to have an option to choose not have the sticky header (in other words for the header to remain at the top of the page so that it is no longer visible if you scroll down). This is what the majority of the news site do (for example the telegraph.co.uk) and for usability sounds like the best option as google already includes a header at the top which reduces the amount of screen real estate available.

    Thanks
    Chris

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘AMP Header Style’ is closed to new replies.