Closed ScottDowne closed 6 years ago
Email modal shouldn't appear more than once in a session
Right, I think we talked about a hard refresh makes it appear again?
I think that's probably fine, yeah.
Email field on modal doesn't validate email address format.
Should "m" in nav bar go somewhere? cc @beccaklam @natalieworth?
Legal links seem good to me. We might want to add a cc license. @caltrider - in your discussions with Legal, did they review the footer?
@hannahkane Fixed the signup box showing up too often.
@ScottDowne Should I be QA-ing CSS right now?
@ScottDowne
@ScottDowne Landing Page - Desktop
More to come ... would it be easier if I made these changes?
Some feedback from my initial pass at QA: Home Page
Why We Made This Guide Page
Email Modal
- Email modal checkbox disclaimer still has placeholder text displaying "I’m okay with mozilla handling my info as explained in {linkPrivacyNotice}"
Edit by Théo: this got broken when I edited the strings, I have a fix in a pending pull request
Product Reviews
cc: @natalieworth @beccaklam @ScottDowne
Can we update the images for the header and the footer too (header takes a while for me to load cause it's not the down-sized version):
cc @ScottDowne
A few more things on main nav:
@ScottDowne Thinking about prioritization of the technical tasks still to be addressed, here's where I'd start:
@HPaulJohnson The first item, "CSS changes" is too much for one task and needs to be broken down a bit. I remember a lot of requested changes.
@ScottDowne based on QA ask to add the 'privacy not included' logo to subsequent pages. Designs for this: https://redpen.io/p/gr44a4589bde3fdc12 Basically when the user scrolls pass the large landing page with the title "privacy not included" could the logo transition to sit in the header?
@natalieworth Need to figure out mobile direction for this which is trickier given less real estate: https://redpen.io/p/gr44a4589bde3fdc12 (last three redpens) do you have a preference?
@ScottDowne Re: QA on making the landing page more conducive to scrolling/more action to get the user to scroll, could we animate the arrow like this: https://codepen.io/rightblog/pen/EagNMN?q=animated+arrow&limit=all&type=type-pens or like this: https://codepen.io/mfritsch/pen/VYdeEE?q=animated+arrow&limit=all&type=type-pens
@ScottDowne On the tile category page it reads "Why we made the guide' and on the actual page with that story it reads "Why we made this guide." Let's standardize to "Why we made this guide"
@caltrider On Friday I remember we wanted to update the categories on the homepage to use a verb, should we go with “Browse Game Consoles”, “Browse Home Hubs”, etc?
Couple on things on the "Why we made this guide" page @ScottDowne @HPaulJohnson @beccaklam
We still have a dead link I need a link target for, which I was told is something @brettgaylor has?
@brettgaylor The site has a link for "Read more from our partners at Gizmodo and Univision" which I'm not sure where it should go, and I think people mentioned you had it? If not, sorry for the distraction.
@TheoChevalier Yes! That works great for the categories. Please do that and let @ScottDowne and @beccaklam when they are ready to update. Thank you!
@TheoChevalier @caltrider @HPaulJohnson here's the copy QA sheet I was talking about on the call: https://docs.google.com/spreadsheets/d/1Au0W0lMzUevwW8HDoGDMjx1gXshTA2Js77MDqUnMT0I/edit#gid=992855100
@tlasadea @caltrider @HPaulJohnson Copy has been updated with the latest changes in this ticket + the QA sheet, if there’s more just ping me
Recap of outstanding items from our call this morning:
Site-wide
[x] provide OG meta tags copy (copy added in #1093)
[x] update OG mata tags into the site (Scott)
[x] provide share images (design) note for @natalieworth: we can take the designs you've created for social marketing and add the "A holiday buyer's guide from Moz://a" tagline to them for these; 1 for Twitter and 1 for Facebook
[x] provide Share Progress copy @ScottDowne here is the copy deck.
[x] implement Share Progress content (Scott)
[x] finalize "Privacy Not Included" branding in the header on all subpages comps (design)
[x] Implement "Privacy Not Included" branding in the header on all subpages (Scott)
[x] Change "M" logo to full "Moz://a" wordmark in header
[x] in breadcrumb navigation on subpages, make clicking on "category" take you to the full page category grid (instead of first category on homepage).
Homepage
[x] Make initial scrolling more intuitive by providing a "peak" of the intro to guide content and making the arrow animated to clearly communicate more content below the fold. (design and dev)
[x] Move the italicized paragraph about Consumer Reports in intro to the bottom of page, directly below the category content. (note on this for @ScottDowne and @beccaklam - we could probably make the type a bit bigger now that it has it's own real estate at the bottom; also not sure if it still needs to be italicized).
[x] Remove red styling on links to make them less prominent (design and dev)
[x] Make the categories more clearly clickable by adding "Browse [category]..." copy to each section.
[x] for categories, swap the order and emphasis of existing section heading and subheads, and make the subheads "browse [cat]" underline to denote links.
Why We Made This Guide Page
[x] Update template to move content up and to match Natalie's design
[x] Update copy on menu and page headline so they are consistent
[x] Update font (per Jen's comment above) so that it is consistent throughout.
[x] Add Links: 1. Link to our survey in the in the first graph where we say "then we did a survey". Here's the link for the blog post: https://medium.com/mozilla-internet-citizen/10-fascinating-things-we-learned-when-we-asked-the-world-how-connected-are-you-2c9601c36ef0 2. Link out to the Digital Standard when we talk about it in the Consumer Reports graph. Here's the link to the Digital Standard: https://www.thedigitalstandard.org/
Product Category Pages
[x] Update type treatment to be consistent with rest of site
[x] Style product photos to be consistent, have less white space
[x] and less drop shadow.
[x] Add copy above comments section to introduce that section. Copy should exist in properties files now.
Product Pages
[x] Resize all photos
[x] Hyperlink Product name and remove long link
[x] De-emphasize "copy link" button by moving it down below review or as a text link below description
[x] Rework checkmarks to better communicate positive/negative attributes and generally make these pages more scanable.
[x] Add link target to the "Read more from our partners at Gizmodo and Univision" link.
On Safari (version 11.0) the CSS looks off and there is some weird stuff happening with the initial copy on the homepage. @ScottDowne @beccaklam @natalieworth
@tlasadea thanks for pointing this out. I can look into it.
On the category page with all the tiles, exercise is spelled wrong on "health & exercise".
Also, on the product pages, should we capitalize Camera, Microphone, and Track Location?
cc: @ScottDowne @beccaklam @natalieworth @HPaulJohnson
@ScottDowne Here are the links for the "Why We Made This Guide" post:
Link to our IoT survey blog post (in the first graph): https://medium.com/mozilla-internet-citizen/10-fascinating-things-we-learned-when-we-asked-the-world-how-connected-are-you-2c9601c36ef0
Link to the Consumer Reports Digital Standard (in the Consumer Reports graph): https://www.thedigitalstandard.org/
@ScottDowne Here's the redpen: https://redpen.io/p/gr44a4589bde3fdc12 for adding the "privacy not included" logo to the header for both desktop and mobile. You will also find the design for the updated review page in there. We decided to go with a "yes and no" system and using a red/green system to denote whether a yes or no is good or bad. Does that make sense? It may take some inferring on your part to figure out what is good or bad unless @caltrider @HPaulJohnson know of someone with capacity and knowledge who can go into the reviews and denote whether something is good or bad? cc: @natalieworth
@beccaklam - these all look good to me. let's move forward with this direction.
@ScottDowne i'm getting the scrambled text on scroll (per Temi's comment above) in mobile chrome as well.
Safari stuff should be fixed.
@ScottDowne that fixed it in mobile/chrome too.
@ScottDowne note that I added a new, small change to the breadcrumb nav in the master list of outstanding updates above.
@HPaulJohnson That might be tricky. The hamburger menu isn't a link, it's some js functionality. (which is how we get the transition) that you can toggle on and off. I cannot make a link work like it and still work like a link.
Per our call this a.m., here's the final list of things that will carry us to the homestretch:
P1
[x] Implement @ScottDowne's change to improve scrolling behavior on homepage
[x] Update images in Share Progress for social sharing buttons. Need @natalieworth to export final FB & TW versions and for @ScottDownewne to host somewhere we can link to via URL.
[x] Update OG tags with new copy and social share images.
[x] Apply type treatment styling to *Privacy Not Included header
[x] Fix *Privacy Not Included header in mobile/potrait mode
[x] Update product images on all category and product detail pages with resized photos.
[x] On Product detail pages, update "What Does It Know About Me?" section using alternating grey/white row style to match "Can It Spy On Me?" section styling.
[x] Swap order of "Privacy Policy" and "What Can Happen If Something Goes Wrong" content at bottom of product reviews.
[x] Apply header styling to "Got Questions?" copy above Coral
[x] Update "Contact Us" target to point to general MoFo support email queue (advocacy@mozilla.com).
[x] Add link target to the "Read more from our partners at Gizmodo and Univision" link. (link to: http://www.univision.com/seguridad-online)
[x] Fix link target for Digital Standard in consumer reports footer on homepage to point to: https://www.thedigitalstandard.org/
[x] Update "Share this page" link target in footer to point to: http://share.mozilla.org/352/184264
P2
[x] Use full "Moz://a" wordmark in header for desktop view
[ ] Adjust placement and styling of Consumer Reports partnership disclaimer at bottom of homepage
[x] In breadcrumb navigation on subpages, make clicking on "category" take you to the full page category grid (instead of first category on homepage).
[ ] Apply additional styling to "What Can Happen If Something Goes Wrong" content at bottom of product reviews to add emphasis given importance of this copy in the overall hierarchy of the reviews.
[ ] Find a better placement for "copy link" button on product reviews so it isn't on the same line as the "Safety Review" headline. Actually think it might work at the very bottom of the review, as a way of separating the product review piece from the additional content and coral parts of the page.
cc: @ScottDowne @beccaklam @natalieworth @caltrider
@ScottDowne created ticket #1096 to track progress moving this site to staging, then production.
Share progress images are here https://drive.google.com/drive/folders/0B20-0lpP23c0SGZGYTA2Ul9abFk?usp=sharing
thanks, @natalieworth already updated share progress buttons with these.
https://advocacy.mofostaging.net/en-US/privacynotincluded/category/gadgetsgizmos/automaticpro
I'm mostly just looking for people to find things I have missed.
I'll be doing my own rotation of QA, but any help is appreciated.
Staging is here: https://advocacy-mozilla-org-st-pr-395.herokuapp.com/en-US/privacynotincluded
Comps are here: https://redpen.io/p/jbf0c36c8838f136ad
The product page isn't complete. Neither are images and copy, but still feel free to take a look at it.
Comment in this ticket with any issues you find however you see fit.
@natalieworth @beccaklam