Foundation.mozilla.org: Test and add new homepage content

[kristinashu]

Once code is ready, update the homepage with real content and do a final design QA check (CMS fields, layout, functionality, different devices and browsers...).

Final designs

https://redpen.io/p/bn82314af4898269e1

Test on

• [x] homepage-refresh.mofostaging.net
• [x] foundation.mofostaging.net

Launch on

• [ ] foundation.mozilla.org

QA copy styles

• [x] Headings: ticket here #5083
• [x] Body copy
• [x] CTAs

Gathered Content

• Dynamic content will be determined here https://github.com/mozilla/foundation.mozilla.org/issues/5019
• Evergreen content is here
• Blog profile photos https://github.com/mozilla/foundation.mozilla.org/issues/5020

Icon JPGs

• Areas of focus
• Partner logos

Analytics

• Make sure Analytics (events) are in place: AT RISK - Cade mentioned it may not be possible this sprint (Taís)
• Annotate in GA once site is launched

Localization

• Localize homepage

Before launch

• [x] make sure edit rights are/can be granted to folks for the homepage
• [x] make sure evergreen content is revised and in place
• [x] make sure images for non-evergreen content are in place
• [x] make sure content for non-evergreen content is in place. STATUS: ready to go

[taisdesouzalessa]

@cadecairos could you please ping me when all features land on https://homepage-refresh.mofostaging.net/en/? I feel that some of the changes haven't landed yet and that is why I am having issues visualizing and editing all fields together in the CMS. Does it make sense? If it doesn't we can chat tomorrow.

This is my design last QA list for all the features once they land and I can then create implementation tickets if major issues show up (which I think it will be minor since I have been doing QA in individual components).

[cadecairos]

Was checking out the new homepage using the responsive design view, and the Hero button extends off the page when the button text is too large:

l

[taisdesouzalessa]

Tks for checking, Cade :). I caught that too and I'll add it to the QA list. Let us know if you find any other issues (the more eyes on QA the better).

[taisdesouzalessa]

Design QA (site front end):

• [ ] DESKTOP/TABLET/MOBILE - Thin black border visible when profile picture has a light background. Ticket filed: #5102
  

• [x] DESKTOP/TABLET/MOBILE - "Empower action" icon is smaller than others. Ticket filed: #5103
  

• [x] MOBILE: "Our area of focus" title is 24px instead of 22px. Ticket filed: #5103
  

• [ ] MOBILE: reduce character counting of CTA to 26 OR allow button to break into multiple lines - button is getting cut in smaller screens - as Cade pointed above. Ticket filed: #5105
  

• [ ] MOBILE (iphone 5 viewport) - top of the title gets cut. Ticket filed: #5107
  

CMS issues:

• [x] ~Not sure this is an issue or it will gets fixed once we merge the update to staging: when clicking on “view live” on “https://homepage-refresh.mofostaging.net/cms” I am directed to “https://foundation.mofostaging.net/en/”~

• [x] Nice to have: reorder the CMS editing blocks order to follow the live page order. Ticket: #5108
  

[Pomax]

the preview link is a sites setting issue, and won't affect the deploy

[taisdesouzalessa]

One more thing @sabrinang identified (tks!!):

• [ ] when we adjust the browser window to narrower width, this is what we see - ticket #5123
  

[taisdesouzalessa]

Found one more bug - hopefully is the last - in the "quote" section the image doesn't go full width in mobile. Filed a ticket here: #5126 cc: @mmmavis @Pomax

[taisdesouzalessa]

And this is launched 🚀 . Thanks, team!