Member.site theming and setup

kitblake commented 6 years ago

Describe how the building and implementation of this task will benefit the RChain Membership or the RChain blockchain: The Wordpress instance where we're developing content for the member.site currently has a default theme. When it launches the site will need to look like RChain. As new branding is in the pipeline the design should simply follow existing house style, as used in rchain.coop and developer.rchain.coop, and not get too creative.

An existing Wordpress theme will be chosen and customized with RChain look&feel. This will be installed for review. Based on feedback from this issue's assignees, one or two iterations will be needed to fine tune the theme.

The theme will be created on a development server, with no content, then migrated to the member.site instance. Once installed, additional configuration will be needed such as installing certain plugins. Exactly how much work will be required is not clear yet.

As for midterm planning, the initial member.site will be an MVP. After it launches we'll collect feedback. Later, when the branding lands, we'll need to make content and style adjustments.

Estimated Budget of Task: $3600 (guesstimate, to be adjusted) \ Estimated Timeline Required to Complete the Task: 2 weeks \ Measure of Completion: New and approved theme is installed/configured on the member.site.

-- \ Legal \ Task Submitter shall not submit Tasks that will involve RHOC being transacted in any manner that (i) jeopardizes RHOC’s status as a software access token or other relevant and applicable description of the RHOC as an “asset”—not a security— or (2) violates, in any manner, applicable U.S. Securities laws.

kitblake commented 6 years ago

@AyAyRon-P @makys @patrick727 @pmoorman @ian-bloom @dckc (Did I forget anybody?) As part of a bounty system governance test, I'm inviting you to "assign" yourself to this issue (assuming you're actually interested). I could 'just do it' but assigning should be opt-in. Anybody else who's interested can opt-in too.

The idea is Github will preserve the assignees and then in the future it'll be easily and visually apparent who was a decision maker. This should overlap with the Budget/Reward system.

PatrickM727 commented 6 years ago

I'm not a contributor anymore @lapin7 can you make me a collaborator to this repo so i can assigm myself and add labels x,y,z

kitblake commented 6 years ago

@PatrickM727 Looks like you're in, if so we can delete these messages.

kitblake commented 6 years ago

Here's a link to the theme development site (may load slowly): http://rchain.maartenvandomburg.nl/

kitblake commented 6 years ago

These are comments already sent in an email, posted for the record:

HOME PAGE

Header

Logo left in header: looks a little lonely. We could try one with "Cooperative" text. But let's wait and see.
At some point Members may have a login, and then they'll have a profile menu, which will presumably be flush right in the header, as on other service sites. Could be the menu items will center then. Keep it in mind...
Nice search widget.

Upper banner section

I'll figure out the content.
Would be good to center the logo (visually) vertically, but let's wait on content.

Benefits section

The thumbs-up icons are still the old salmon color.
Would be nice to have six different icons.

Video banner section

Not sure about the scarlet background for the video. Kinda intense. Try a flat gray? Then we keep the scarlet as highlight color.

Call To Action section

Looks fine, content TBD.

Footer

Nice social icons. Could be a bit lighter.
Currently we have: Twitter, Telegram, Reddit, Github, YouTube.
We also have Medium, Facebook, LinkedIn.. but these are not needed.

LOWER PAGES

These exist but design/theming is to be done.
Is it possible to have different sidebars per site section? Thus different sidebar content in About, Get Involved, Membership, Support.

ToDo:

Figure out (submenu) navigation for About and Membership pages.

AyAyRon-P commented 6 years ago

Hi @kitblake I just had an opportunity to read the above and will take a look shortly at the dev link and provide feedback

kitblake commented 6 years ago

@AyAyRon-P content is very much in progress

Andrekuipers commented 6 years ago

I just made the first version of the membership page, you can check the page via the navigation

lapin7 commented 6 years ago

@Andrekuipers please fill out form: RChain Active Member Registration https://docs.google.com/forms/d/e/1FAIpQLSecwGUVFNx_Xa_Qsw5bxLnaKstPS8kQnfrUGqpuf22rLDteDg/viewform

kitblake commented 6 years ago

@Andrekuipers The Membership page looks good. That scarlet rule is subtle but strong. If this is more or less a template for the subpages then we're on a good track. More content to come..

iamcoderisk commented 6 years ago

I dont think it's advisable for a company that's still trying to stand while building its brand to develop its official website with WordPress. I can solve that problem using a framework and build the site from scratch in the space of two days if I am permitted.

Andrekuipers commented 6 years ago

Why not?

http://www.wpbeginner.com/why-you-should-use-wordpress/

lapin7 commented 6 years ago

@iamcoderisk please fill out form: RChain Active Member Registration https://docs.google.com/forms/d/e/1FAIpQLSecwGUVFNx_Xa_Qsw5bxLnaKstPS8kQnfrUGqpuf22rLDteDg/viewform

PatrickM727 commented 6 years ago

Word press is what we are going with for right now.

If you can rapidly create something in another framework that proves it phenomenally better, do it.

If not, then lets continue focusing on how we can make the next iterations of this site better. @kitblake @Andrekuipers this is looking good.

What do you think next steps are? What resources do you need(people, rhoc, authorization)

Lmk

iamcoderisk commented 6 years ago

Let me work on something...

kitblake commented 6 years ago

@PatrickM727 Right now @Ojimadu and I are working on content (for the MVP version) and tracking our progress in issue #595. Anybody else who wishes to contribute would be welcome! There's plenty to do, especially if you look beyond the MVP as visible in the latest outline in the GDoc: https://docs.google.com/document/d/1JXM8k-fzf78Y_GbfkDdsekmdeVqqifC4VM0zEMBDxDw/edit

With @Andrekuipers' help we'll get all MVP pages laid out with content. Then we'll migrate everything to the rchain.me instance. That should happen next week (i.e. first full week of May).

Still an unknown is the KYC app. For now we're assuming it'll be a third party (thus external url) as described in #553. Or we live with the current one for awhile longer. I have no news about the payment status in #511 either.

When all is ready for prime time then we'll need to make infrastructure changes. But let's first push it along until it's done – and approved by all – before we start interacting with systems people. We have budgets in the B/R system which, barring unforeseen complications, should be sufficient. You could budget vote on the content and theming issues (login first).

In the meantime any critique from others would be welcome. Better now than later..

dckc commented 6 years ago

The theme looks like it's coming along well, but I wonder how much of the budget should be allocated to the April pay period. I'm putting in something, but probably not the whole $3600.

Andrekuipers commented 6 years ago

It was a busy weekend, I made all the pages with the content from the old site. Please let me know what you think.

dckc commented 6 years ago

Is there an important reason we can't all collaborate on the same WP instance? http://rchain.maartenvandomburg.nl/ seems pretty slow and unreliable. I'm struggling to see any of the work you did over the weekend.

I'd really like to see all the work done in https://coop-member-v1.rchain.me/ where many of us have access since Apr 2. (cf. #595, #446 )

kitblake commented 6 years ago

@dckc That's the plan:

With @Andrekuipers' help we'll get all MVP pages laid out with content. Then we'll migrate everything to the rchain.me instance. That should happen next week (i.e. first full week of May).

We'll try to get it done in the next days.

Andrekuipers commented 6 years ago

Yes Wednesday we will move the website to the https://coop-member-v1.rchain.me/ I made the website on my own server because I needed the content from the old website. Now that I have all the content we can migrate it to https://coop-member-v1.rchain.me/

kitblake commented 6 years ago

We have a blocker on the migration, @Andrekuipers needs database access. I've requested it from @ian-bloom and Jeremy Busk.

Andrekuipers commented 6 years ago

The new site is live on https://coop-member-v1.rchain.me :)

During the database migration the old Wordpress accounts were deleted, apologize. I don't know which person had an account, please let me or Kit know if if you need a new account on the new website.

dckc commented 6 years ago

Ah.. cool...

I had an account. I guess we'll get to scribbling in the same place soon; meanwhile...

I guess it's pretty, but I hope people are not coming here to watch a show but to get involved. This style where practically the only thing "above the fold" on the page is a big image seems like such a waste. I guess it's popular, but I don't know why.

Is it really important to have 145Kb of javascript too? performance measurements show the page takes 3 seconds to load! And it's over a megabyte.

Andrekuipers commented 6 years ago

The website is not optimized yet.. When the design is approved I will focus on optimizing the files for speed. Till then all the feedback is welcome!

dckc commented 6 years ago

I suppose you have an iterative approach in mind and that there aren't really "before approval" and "after approval" epochs. My approval of the design is heavily influenced by page weight, as noted.

Andrekuipers commented 6 years ago

Good to hear, I will focus on the page speed and minimize the javascript!

dckc commented 6 years ago

Oh... also... "Coop Membership Benefits, Coop Membership Benefits ..." is basically lorem ipsum, right? I'm not the sort of reviewer who can judge the page independent of the copy, so I'm standing by until the real copy is there -- at least the copy that was hashed out a few weeks ago.

Andrekuipers commented 6 years ago

Yes that's right. I think Kit will fill in the content @kitblake ?

kitblake commented 6 years ago

Yes, @Ojimadu and I are working on content (in issue #595).

kitblake commented 6 years ago

My approval of the design is heavily influenced by page weight, as noted.

@dckc I nodded when I saw your comment. However, the paradigm has shifted (as Nielsen also noted). It's ok to scroll, in fact it's preferred to waiting for successive page loads. Every crypto site I know is an SPA (Single Page Application).

A while back I was involved in a project and pushing for cramming more content 'above the fold'. The designer shot me a look and said, "Is it so much effort to hit your space bar?". That was when I learned to appreciate SPAs, where a complicated application loads in the background, but there's no waiting. Once it's in, you have instant gratification. And shift-space takes you back up!

Here's a telling comparison, and it's a frenemy of ours: https://universa.io/ Load time: 8.74 seconds. But you see stuff above the fold right away. Bytes in: 2.346 megabytes. It loads in the background. This SPA has 11 sections.

Also let me point out that, from my location at least, our WP instance has never been fast. There's probably infrastructural optimization we can do too. But first the MVP.

kitblake commented 6 years ago

Thanks to Jeremy Busk, we now have email integration into the WP instance, and people will be receiving invites.

pmoorman commented 6 years ago

@kitblake what does the email integration integrate with? Which tool do you use for the emailing? (curious because of #219)

kitblake commented 6 years ago

@pmoorman jeremybusk - Hier à 18:04 Kit, email relay works now from coop-member-v1. I installed the Easy WP SMTP plugin and added in relay parameters.

It's relaying to rchain.me.

kitblake commented 6 years ago

Here is a provisional list of theming ToDo's for the Member site. Feel free to add your own. Content contributions are welcome too (but discussion of content goes in #595).

Header

[x] Let's try the RChain logo with Cooperative: https://github.com/rchain/style_guide_and_files/blob/master/web/Rchain_brand_scarlet_horiz.png
The site needs OG tags in the head. For now og:image and twitter:image should default to a non-transparent RChain logo.
The About section will have subpages and we need to get submenus in the nav working.
We need a plugin for a Calendar. Config is already sent. Calendar is a top level nav item.

Pages

Subpages require a sectioned layout.

Footer

Social media icons: need links. To add: Telegram, Reddit, Github icons.

Optimizations

On Home in mobile format, is there a way to get the CTA buttons to fall below the right-side elements?
The search results page has a default WP sidebar.
The copyright in the footer should render the year with php or js: https://designshack.net/articles/the-footer-copyright-notice/

pmoorman commented 6 years ago

@kitblake I could help with content

dckc commented 6 years ago

The site needs OG tags in the head.

"needs" is a strong word. In what sense is our MVP critically incomplete without OG tags? Which of our use cases won't work without it?

The About section will have subpages and we need to get submenus in the nav working.

In our March 24 MVP, I don't see anything regarding subpages for About. submenus makes me nervous... I guess I should look into this further.

kitblake commented 6 years ago

OG tags are a Must have because they make sharing the URL on social media much more appealing.

@dckc I'll demonstrate the difference in Discord (which renders rich previews like Twitter, Telegram, etc. do).

Edit: Dan has rich previews in Discord turned off. Figures. The guy just isn't social.

dckc commented 6 years ago

I don't see "nice rendering when shared via social media" among any of our MVP requirements.

I don't doubt it's nice to have, and as long as it doesn't slow things down, now is as good a time as any to add it. But take care with that word "need".

kitblake commented 6 years ago

Progress:

The Calendar is setup. Not the prettiest colorwise but fine for an MVP.
The OpenGraph and Twitter tags are working.
Configured OG component per page.
All the subpages have layout now.

Some ToDo's before going live (not necessarily an exhaustive list):

Change footer and include social icons
Check mobile responsive
Optimize page speed

kitblake commented 6 years ago

OpenGraph tags have been configured for all pages.

kitblake commented 6 years ago

We're making some last little layout fixes..

Andrekuipers commented 6 years ago

Footer changes with social icons, making the website responsive is done :)

Optimize page speed will be done when the website is migrated to the new domain.

AyAyRon-P commented 6 years ago

@kitblake @Andrekuipers

Are there any updates to this project? Do we need to add anything or can we close this out and archive the links in the issue?

kitblake commented 6 years ago

It's blocked. See https://github.com/rchain/bounties/issues/595#issuecomment-401557405 Once it goes live on the correct subdomain @Andrekuipers needs to do some speed optimization. Then we'll close this issue.

pmoorman commented 6 years ago

@kitblake any news here?

rchain / bounties