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.

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

Addin JS Interactive to website homepage? #1730

Closed
ZibbyKeaton opened this issue Jul 10, 2018 · 12 comments
Closed

Addin JS Interactive to website homepage? #1730

ZibbyKeaton opened this issue Jul 10, 2018 · 12 comments

Comments

@ZibbyKeaton
Copy link
Contributor

I wanted to see if it would be possible to add a link to JS Interactive to the website? Either as a banner as we've done with the security warning or as a potential tab that links back to the JS Interactive website - see what JS Foundation has done: https://js.foundation.

We've done this in the past with Node.js Interactives and its driven a lot of traffic to our event websites. Please let me know if this is okay with the community. If so, I would like to share a special UTM link. Thanks for your time and look forward to hearing back from the group on this.

@fhemberger
Copy link
Contributor

@ZibbyKeaton Sure, let's do this. Should we link to https://events.linuxfoundation.org/events/js-interactive-2018/ directly?

I made a quick mock how a banner could look like on the website:

@ZibbyKeaton
Copy link
Contributor Author

@fhemberger I think this looks great. I don't know if we could stick a mini button in there that states "Learn More" and when folks click on it they can go directly to the website. If that's too much, then I think this would be perfect. I would agree that we send them directly to the homepage of the event site. If we could use this UTM that would be much appreciated: https://events.linuxfoundation.org/events/js-interactive-2018/?utm_source=nodesite&utm_medium=homepagebanner&utm_campaign=jsint18&utm_term=eventpage UTMs help the marketing team determine what promotions are working and not, so we can continually do a better job of promoting the event to the right channels.

@ZibbyKeaton
Copy link
Contributor Author

@fhemberger I was able to pull this banner graphic that we've already created around this to make it easier - see here: https://drive.google.com/file/d/19EpcU3uiGYRKeGsFjKHT_AMm_gZALZp4/view

@fhemberger
Copy link
Contributor

@ZibbyKeaton Sure, link and UTM is no problem.

Your banner graphic is a bit larger than the one I came up with, this is how it would look:

a) at the same with of the content (735px wide)
b) adjusted to the width of the two download buttons (515px wide)

new_banner


new_banner_v2


My version (515px wide) in comparison:

fh_banner_v2

What do you think?

/cc @nodejs/website /cc @amiller-gh

@ZibbyKeaton
Copy link
Contributor Author

I like option b, but will defer to those that have a design mindset :)

@ZibbyKeaton
Copy link
Contributor Author

Let me know if there's anything else you need from me here @fhemberger

@fhemberger
Copy link
Contributor

@ZibbyKeaton Was hoping for some more feedback. Personally, I'd still prefer option c. ¯_(ツ)_/¯

Will add the banner over the weekend.

@sonicdoe
Copy link
Contributor

If you don’t mind, here’s my two cents (option B vs. option C):

  • The text is easier to read in C. The dark blue text on the black background is hard to read in B.
  • The font in C fits with the rest of the website.
  • The “See the lineup” button in B probably doesn’t make a lot of sense when the whole banner is clickable (which I’m assuming it will be).
  • I like that C explicitly mentions Canada. nodejs.org is pretty international and not everyone may think of Canada immediately.

@bjb568
Copy link
Contributor

bjb568 commented Jul 13, 2018

I like how the text in option C is aligned left and right against the edge of the container, making the grid-ness of the layout feel more natural. However, with C more than B, due to the smaller margins, it looks like an abrupt transition from a light theme to a dark theme. I like that C is more efficient with space, so I think the best option would be a variant of C with a lighter background color than the dark grey, maybe something closer to the light color scheme of the JS Foundation logo.

JS Foundation

@WaleedAshraf
Copy link
Contributor

I would suggest
"C" with background colors of "B" (dark colors are looking good)
OR
Remove the "SEE THE LINEUP" button from "B" and change the text color from "Blue" to "White"

@fhemberger
Copy link
Contributor

Sorry, I don't have the original layered image, so I can't do combinations of both. Will start with C for now …

@ZibbyKeaton
Copy link
Contributor Author

Know this is closed, but just want to thank everyone in this thread for helping me with this and special shout out to @fhemberger! Thank you and I hope everyone has a lovely week.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants