631402 - Add a friendly banner linking to our mobile site

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect, P4)

Description

[Wil Clouser [:clouserw]]

This was designed in bug 622692.  We want to put this banner at the top of every page and show it using CSS if the width of the page is <=500px.

The banner is here:  http://people.mozilla.com/~jgrlicky/drop/AMO/mobile_mockups/view_mobile_site_banner_orange_2.png

Other notes:

- There should be a link in the footer next to "Report Trademark Abuse" that goes to the mobile site
- Clicking the [x] will store the preference in local storage and it never expires
- if the preference is present, don't show the banner (obviously)
- jgrlicky has psd's and all that if you have questions on gradients, etc.

Comment 1

[Wil Clouser [:clouserw]]

Can you add this to your home page and toggle it on with one of the buttons at the top?

Comment 2

[Chris Howse [:chowse]]

Just added. Click on the 'Small Screen' option to see it:

http://chowse.github.com/amo-redux/homepage.html

Here are the changes:

https://github.com/chowse/amo-redux/commit/e7ac77eef1b15a81ab42c22fce8918bd1cf12636
https://github.com/chowse/amo-redux/commit/415fe0f92eff37816296c9d0ee70cc61829cc47a

Comment 3

[Chris Howse [:chowse]]

Attachment: Screenshot of the Banner

Adapted it to match other AMO banners, but kept the copy and colors. Note the large size is intended to make it an easier click target for mobile devices, even when zoomed. I placed the link on the left rather than the right in the event that the view isn't zoomed out far enough initially.

Comment 4

[Wil Clouser [:clouserw]]

Thanks, calling this fixed.

I'll file an implementation bug for the new banner once we split the main page up.