Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Footer Redesign (Donate button Phase 2) #5856

Open
kmlshalf opened this issue Jul 28, 2021 · 13 comments
Open

Footer Redesign (Donate button Phase 2) #5856

kmlshalf opened this issue Jul 28, 2021 · 13 comments
Assignees
@kmlshalf
Labels
feature

Comments

@kmlshalf
Copy link

kmlshalf commented Jul 28, 2021 •
edited

Context

We are updating the footer to include a donate button and revamp the look + layout of it. The donate button will only show up in the footer for logged-out visitors.

The new footer will have a new color scheme and layout, and have a wavy top. Scratchr2 footers will remain mostly the same, other than a color change to match the new footers.

Assets & Quick Links

Figma File (go to Footer Responsive)
Donate page (for donate button)
Donors list (for supporter thank you blurb)
Join page (for join button)
Wave SVG Generator

States

The footer will have 4 different states: Logged-in homepage, logged-in (not homepage), logged-out (not homepage), logged out homepage. You can see all the different states in their responsive forms in the figma file.

Logged-out homepage

When a visitor is logged out on the homepage, the footer will show both join and donate buttons, as well as the blurb thanking supporters of scratch.
loggedouthomepage

Logged-out (not homepage)

When a visitor is logged out (but not on the homepage), the footer will show both join and donate buttons but will not show the thank you blurb.
loggedout

Logged-in homepage

When a visitor is logged-in on the homepage, the footer will not show join or donate buttons but will show the thank you blurb
loggedinhomepage

Logged-in (not homepage)

When a visitor is logged-in (but not on the homepage), the footer will not show join or donate buttons or the thank you blurb.
loggedin

Responsiveness

At width 560px, anything on the right side that is not in one of the content columns (language selection, join + donate buttons, thank you blurb) will be moved below. The height of the footer will be extended to make room for these adjustments. In addition, at width 560px the number of link options will be reduced.
Options that will be removed are:

  • The entire "Scratch Family" column
  • For Parents, For Educators, and For Developers options in "About Scratch" column

Screen Shot 2021-07-27 at 2 16 29 PM

Similarly, at width 360px column titles will be taken out and options will be further reduced to only include the following: About Scratch, Jobs, Contact Us, Community Guidelines, FAQ, and Ideas. Legal links (DMCA, Privacy Policy, Terms of Services) will always remain at the very bottom of the footer and will not be removed regardless of screen size.

Screen Shot 2021-07-27 at 2 28 45 PM

Text columns will always be 130px wide in width and with 28px space between each new line across all screen sizes.

Screen Shot 2021-07-27 at 2 19 35 PM

Thank You blurb

"donors" (underlined) will link to to the donors list in all instances where the Thank You blurb shows in the footer (homepage).

Screen Shot 2021-07-19 at 10 18 16 AM

Wave SVG top

Here is a resource that generates a path for making an SVG wave. The estimated path for the wave in the design (using the generator) is M0.00,49.98 C243.43,29.11 303.93,100.16 500.00,49.98 L500.00,150.00 L-2.91,154.44 Z

The wave should stay approximately the same (shallow wave) when resizing.

Localization

For languages that result in longer text strings, text should start on a new line if it exceeds the width of 130px (if in text column). This applies to all screen sizes.

Screen Shot 2021-07-27 at 2 13 42 PM

Scratchr2 Update

To keep the footer consistent, we will be updating the colors for Scratchr2 to match the new update. The text color and background should be the same as the new footer (white and dark gray). Content, layout, and behavior will stay the same.

Screen Shot 2021-08-12 at 9 50 54 AM

Menu Links

The following are the links for the footer menu options, organized by category:

About

About Scratch
For Parents
For Educators
For Developers
Our Team
Donors
Jobs
Donate

Community

Community Guidelines
Discussion Forums
Scratch Wiki
Statistics

Resources

Ideas
FAQ
Download
Contact Us

Scratch Family

ScratchEd
ScratchJr
Scratch Day
Scratch Conference
Scratch Foundation
Scratch Store

Legal

Terms of Use
DMCA
Privacy Policy
@kmlshalf kmlshalf self-assigned this Jul 28, 2021
@Accio1
Copy link
Contributor

Accio1 commented Jul 28, 2021

This looks really nice! I love the wave and new colour!

@Cool-Scratcher
Copy link

I'd much prefer it if the color is the classic Scratch blue, but nice redesign! Looks a lot better than the old one

@ahmetlii
Copy link

That definitely looks very nice. I think linking to https://scratch-wiki.info or respective wikis on other languages would also be helpful for non-English users (whether the language has a wiki can easily be detected via looking to [language-code].scratch-wiki.info), possibly with a fallback to en.scratch-wiki.info

@Accio1
Copy link
Contributor

Accio1 commented Jul 28, 2021 •
edited

That definitely looks very nice. I think linking to https://scratch-wiki.info or respective wikis on other languages would also be helpful for non-English users (whether the language has a wiki can easily be detected via looking to [language-code].scratch-wiki.info), possibly with a fallback to en.scratch-wiki.info

@ahmetlii Isn't this current functionality? If you change your language to French, you can observe that the Scratch Wiki link changes to https://fr.scratch-wiki.info/ with it defaulting to https://en.scratch-wiki.info/ if the selected language doesn't have a wiki. See #4121

@ahmetlii
Copy link

@Accio1 didn't realize it was solved. Thanks for letting me know! 👍

But still, I think that it may also be good to link Test Wiki redirects too, like in Albanian, the sq.scratch-wiki.info may be linked in the footer, which redirects to corresponding Test Wiki main page (and becomes the main subdomain for that language after transferred to a separate wiki).

@PurpleZen
Copy link

I really like the color of this! It kinda has a Scratch 1.4 vibe to it, but I like that. The wave design has a really creative look and feel to it, which I think fits nicely within Scratch.
Off-topic, but I think this would be a nice main color across the site. It's kinda subtle, but very easy to look at :)

@Samq64
Copy link

Samq64 commented Jul 28, 2021

Cool! By any chance is the Scratch Lab link going to be added the footer? I've seen it suggested a couple of times on the Scratch forums and thought now would be a good time to bring it up since you're already planning on redoing the footer.

@RedGuy12
Copy link

RedGuy12 commented Jul 28, 2021 via email

@mxmou
Copy link
Contributor

mxmou commented Jul 29, 2021

Off-topic, but I think this would be a nice main color across the site. It's kinda subtle, but very easy to look at :)

This is the color otherwise used for text, so I don't think it can be used as an accent color.

@PurpleZen
Copy link

Off-topic, but I think this would be a nice main color across the site. It's kinda subtle, but very easy to look at :)

This is the color otherwise used for text, so I don't think it can be used as an accent color.

Ah, that makes sense! I do see why it wouldn't be used then.

@kmlshalf
Copy link
Author

Small update * PLEASE READ *
We will be adding Scratch Lab to the Scratch Family column and reordering Scratch Family.

The new order will be the following:
ScratchJr
Scratch Lab
Scratch Day
Scratch Conference
Scratch Foundation
ScratchEd
Scratch Store

@kmlshalf
Copy link
Author

kmlshalf commented Aug 12, 2021 •
edited

Cool! By any chance is the Scratch Lab link going to be added the footer? I've seen it suggested a couple of times on the Scratch forums and thought now would be a good time to bring it up since you're already planning on redoing the footer.

Thanks for bringing that up @Samq64 ! We will be adding it to the footer :)

@jeffalo jeffalo mentioned this issue Apr 30, 2022
Closed
@nasirkhan
Copy link

Is there any estimated date to release this new design? When we conduct workshops at different schools and someone opens the site from a mobile device and pointed the issue that the homepage design is broken!

this issue is about a year old and i did not find and pull request tagged with this.

I reported an issue #6744 about a month ago and I can see the broken footer till today. For me it is a very small fix and if no one is here to look into this, I can do this for you. Please share a contributors guideline and i will send a pull request soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kmlshalf kmlshalf

Labels
feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@nasirkhan @carljbowman @kmlshalf @Accio1 @mxmou @RedGuy12 @ahmetlii @Cool-Scratcher @Samq64 @PurpleZen