Frontpage changes for CHS-Lookit merger

[mekline]

Note: there's an implementation example at here but treat this issue as ground truth!

A few changes to the front page to come into effect with the new domain name!

• [x] At the top, below the gray navigation bar, show a banner for families who previously saw totally different content when visiting childrenhelpingscience.com

Ideally colored the "CHS yellow" - eye-catching without introducing an additional color to our already colorful front image Text: "ChildrenHelpingScience and Lookit have merged - click here to make an account or explore studies below!"

• [x] Change large "Childrenhelpingscience.com" text and subtitles -- BG

New, largest font, below the CHS cartoon: "Children Helping Science" Immediate below, medium font: "Powered by Lookit" Below after a space, same size: "Fun for Families, Serious for Science"

• [x] Mobile improvement - can we have the left and right columns of screenshots vanish when the screen is narrow -- BG

(So the top of the page is just : "CHS Logo, Children helping science, subtitles, participate button, with the latter visible without scrolling on a phone!)

• [x] Mobile improvement - Can the three favicon paragraphs stack, rather than becoming three very narrow columns, when the width decreases? -- BG

• [x] Add university logos of the PARC scientists, in the following arrangement: -- BG

Row 1: MIT, UT Dallas, Harvard Row 2: Minerva, Stanford, Yale

(See current CHS for how this looks + hopefully all needed IMG files)

Mobile: ideally these should stack to a vertical list on narrow views

• [x] (Maybe) add picture links to filtered search groups by age range

The creation of age-group-filtered pages/links is in a separate issue: #1199

(Mobile: ideally these should stack to a vertical list on narrow views)

[becky-gilbert]

@mekline Here's some demos of the changes to the homepage.

Here's how the top of the page responds to re-sizing: https://user-images.githubusercontent.com/9041788/235256415-04967eb8-7a40-4b8c-bed5-584b2eaf8de7.mov

Here's how the bottom responds to re-sizing: https://user-images.githubusercontent.com/9041788/235256436-3b494212-2493-412f-99d2-390f8db7a699.mov

Here's the whole page on mobile: https://user-images.githubusercontent.com/9041788/235255653-36e92bf0-9d80-48c8-af55-02eb0c6d324c.mov

[becky-gilbert]

Screenshots of the home page on various screen widths:

[becky-gilbert]

@mekline a few questions:

1. For the banner text, it seems weird to me to have the 'click here to make an account' text for users who are already signed in. Can we have some alternative text for logged in users? Something like this?

2. Bootstrap provides a default yellow color for alerts that is based on our theme CHS yellow, but shifted to be lighter for the background and darker for the text. I thought you wanted the banner background to exactly match the yellow in the CHS logo, so I edited the banner background color to match the logo and switched to black text. What do you think? Below are screenshots of the default shifted color scheme, for comparison.

3. Right now, the banner will appear every time someone visits the home page. Is that ok? I think I could set it up so that the banner doesn't appear again after it's been dismissed/closed, but I would have to switch to a different method (Django's message system rather than bootstrap's alerts). Also, I think this solution would still only work within the same browsing session, so the banner would appear again each time the person visits the website in a new session (since I believe we store no/minimal persistent cookies).

[mekline]

1. Great catch, yes let's have different text for a logged in user
2. I forgot the alert color was shifted to our CHS color palette, let's do it that way! (As in your screenshot for 2)
3. Doesn't bother me to have it appear multiple times, so feel free to not rewrite this!

[mekline]

Additional front page changes:

• Thanks so much for the videos! It turns out I am wrong about the university logos - they take up a lot of vertical real estate when allowed to stack in this way. Can you make them remain 3 across when the page resizes? See the current childrenhelpingscience.com for comparison.

• Laura request: Please move the MIT logo to 1st in the order among that group

Now that we have multiple sections (plus Project Garden, see below) and more text, the bolding on "Join researchers from these schools and many more" looks oddly big to me. Instead, can we introduce a visual break of some kind after the 3rd blurb ("with fun activities") - just a spacing is fine - and then have this in regular text. So this would look like:

(...)

From home

blurb blurb blurb

With fun activities

blurb blurb blurb

(space)

Join researchers from these schools, and many more!

(logos)

[mekline]

Please add the project Garden Logo, with a "blurb" that explains what it is. (Logo is on Canva - there are both long & square versions, please use either one or both, whatever makes most sense for scaling).

So all together, let's make it so we have a clear alternation of text explanation & photos, so the whole site goes like this:

(...)

From home

blurb blurb blurb

With fun activities

blurb blurb blurb

(space)

Join researchers from these schools, and many more!

(school logos)

Interested in participating in a project with many studies? Learn more about Project GARDEN. In this series of studies, your child will help an animated fox named Fen find the “GARDEN Library” while playing games to help Children Helping Science understand children’s development from many different angles!

(project garden logo)

See our current studies for different age groups:

(babies photo)

studies for babies (under 1)

(...etc)

[mekline]

@becky-gilbert Done with frontpage edit/updates!

[becky-gilbert]

@mekline I could use your input on the home page GARDEN section and text/logo placement.

Option 1: Text above the logo

I think this is the way you requested it - text first, followed by logo below.

One thing I noticed is that the logo will be pretty huge if we want it to take up the same width as the rest of the content, so I also tried reducing the width of this section on larger screens.

Here's how it looks on mobile:

Option 2: Logo floats next to text (except on mobile)

I also tried floating the logo next to the text on larger screens. Here are examples using different sizes for the logo.

Here's how it looks on mobile (logo could go either above or below text):

Can you let me know which of these you prefer, and if you have any other feedback/requests for this section? Thanks!

[becky-gilbert]

@mekline could you have a look at my comment above and let me know your thoughts on the logo/text placement for the new GARDEN section? After that I'll update the PR for these changes (#1200) and it'll be ready for review 🎉

[mekline]

Oh shoot, I had given a comment on this but the internet ate it! Option 2 is great! (With the text moving below on small widths)