Redesign website.

[Anish-Agnihotri]

Hey everyone!

This is the beginning of a thread based on the brief conversation that happened on the Riot server. I'm looking to help redesign the DAppNode website to give it a modern uplift. I had originally posted a cleaner demo of the current website with optimized file size, proper responsive CSS, and small design changes (here: https://anish-agnihotri.github.io/dappnode-redesign/), but @dapplion spoke about straying from the original design, which would obviously be a better idea.

Current Issues:

1. Website doesn't have a cohesive theme with the rest of the DAppNode applications.
2. It looks somewhat outdated, with not 100% responsive CSS, and various reused elements over the page.
3. It is pulling 36 external requests, with a 932KB page size, resulting in a 38% Lighthouse, 83% Pagespeed, and 85% YSlow score.
4. It is only one page, which is a landing page.

Design Ideas:

1. I'd like to expand the website to have landing, documentation, community, and more. A lot of my inspiration comes from websites like https://makerdao.com/ (especially the community call-to-action) and https://bloom.co (especially the developer documentation).

Examples of what I mean:

Development Ideas:

1. I can stick to React, switch to Vue/Mithril, or do completely static assets + static file host if you'd like.

I'm open for thoughts, ideas, etc. Feel free to comment below and post anything you've got in mind and I'd love to have a chat!

Also, just an FYI, the SSL certificate on https://dappnode.io expired four days ago. It should be auto-renewed though hopefully 🤞 .

[Anish-Agnihotri]

Working on an about page at the moment. Heres a sneak preview:

I'll keep dropping things as I go, please feel free to comment on what you like, what you don't, what you need, things to change, etc.

[Anish-Agnihotri]

Migrated the above page to the main page actually, and added quite a bit of stuff while I was at it:

Here is a live preview: https://anish-agnihotri.github.io/dappnode-redesign/

Still super rough ofc. The menu is not even close to responsive, and other stuff still needs to be done, but the main page is slowly coming together.

Screenshot of live preview at current stage:

As always, feel free to comment and let's discuss where to take this.

[dapplion]

@Anish-Agnihotri Huge thanks to you for leading this massively necessary initiative. I agree with https://makerdao.com/ and https://bloom.co as references. The last version you posted of https://anish-agnihotri.github.io/dappnode-redesign/ is looking really good! I would request to stick to react as that what the team knows, so in case we have to push an update we can. A part from that, you can modularize ditch components or whatever is necessary to fulfill your goals, specially your point number 3, which is concerning:

It is pulling 36 external requests, with a 932KB page size, resulting in a 38% Lighthouse, 83% Pagespeed, and 85% YSlow score.

I outlined this hackmd in the past with the key concepts for the new version of the dappnode.io site. You are already embracing them but I'll share just in case https://hackmd.io/uJmhp9Z9QyitN9QGzwSjqQ?both.

• Due to the quality and relevance of our promo video, dappnode.io has to be video driven.
• Short to-the-point information. Include one headline and one explanatory sentence at most.
• Avoid long text explanations, that is taken care by the video.
• Include one single and clear call for action button.
• No long scroll-down page, restrict total content to what state above (video + headline + call-for-action), links to github/riot, supported by section, and not much extra content.

Do you think we should reduce the number of benefits? Right now there are 18, and we can figure out with the team which ones are really important.

[Anish-Agnihotri]

Thanks for the fantastic overview and summary! I’m glad to be able to help in anyway, and I love web development, so it all ties in! The hackmd you supplied is perfect for defining what you’re looking for in the website.

First off, I’ll migrate the website to React. Makes complete sense, and after I had started some of the sections of the website, I realized it was inevitable, since routing menu pages manually, especially for when I add in the documentation section with its own set of pages would be a nightmare. That and the fact that to keep it DRY, it would make sense to define the components once and then route the data through, rather than the manual rendering that is currently being done by copy/pasting HTML content.

Next, the hackmd clears up a lot of my confusions, haha. I was going through the Medium blog today and noticed the incredible
Promo video, and was thinking to myself why it wasn’t the showcase. Focusing on video-first, with a bold cta, and minimal text sounds like the best way to go. On that note, I also noticed that some of the benefits were redundant. I went ahead and cut a lot of them down to one-liners, and removed some of the longer ones, but it would make most sense if the team could go over those and decide on maybe the 5-6 absolute most important ones to showcase, and I can migrate those away from the landing to possibly a secondary page like about. I think they would probably be the technology focused ones, so things like VPN, browse eth domains, etc., but that is certainly something that we can talk about.

Altogether, I’m looking forward to helping out and getting a fresh look out the door with the new year! I’ll keep dropping updates as I go here and maybe more infrequent ones on the Riot, but please do feel free to interject whenever you’d like. In addition, since Github pages doesn’t compile React, I’ll setup a heroku applet quickly tomorrow so that there’s always a way to access the dev version of the repository live (without the hassle of setting it all up, haha).

And, forewarning: I sometimes run astray with ideas upon ideas, and feedback is always appreciated to stay aligned to the end goal of a simple revised site :). So, do let me know if you think something should be changed, added, etc. And I’d be more than happy to have a chat!

[dapplion]

So happy to see your enthusiasm <3

I recommend you to check out create-react-app if you haven't https://reactjs.org/docs/create-a-new-react-app.html#create-react-app, it comes with all the webpack / bundling / build setup. Then you use this awesome tool that automates the gh-pages deployment of a create-react-app with 3 lines of code https://github.com/gitname/react-gh-pages#tutorial.

I'm glad the hackmd helped you to clear things up. I wouldsuggested on doing one single page with all the content in the main (and only) route for now. The top navigation bar can reference locations within the same page triggering an autoscroll.

Please keep me updated, I can help on direction / design or pure code questions you may have!

[Anish-Agnihotri]

Oh! That tool is fantastic, thanks for linking! I'll take a look at it and migrate over to React, deploying to Github pages for sure.

And, for sure. I'll begin with just the single one page landing with the navbar links smooth-scrolling to anchor points on the page.

I'll keep you updated and will comment if I need anything or for feedback!

[Anish-Agnihotri]

Just dropping an update. Had a busy last two days, but setup the React app with publishing to gh-pages today. I'm aiming to have everything completed and ready for a review within the next week at most.

[Anish-Agnihotri]

IMHO I suggest a prominent link to the readthedocs documentation in the dappnode.io page and differenciate it from the current wiki documentation? it is a bit confusing which one is the relevant one. If there is a linnk there I didnt find it . Maybe a top menu with links to github, readthedocs etc could be useful ...

Noticed some comments on the Riot and just wanted to know thoughts on this. I'm working on a large video focused CTA at the top (I'll push within the next day), and am wondering if you'd like me to add menu links at the top to the github, etc?

[Shelpin]

Hey Anish!!!! It is such a privilege to have community members like you!! pure proactiveness,enthusiasm and knowledge!! we really appreciate it....!!! I am drafting the content part and structure, according to DApplion´s guidelines , so will see in detail your awesome work to have it fitted with the minimum hassle on the amazing work you already have done!!! Will ping you back soon!!have a great day!!

[dapplion]

@Anish-Agnihotri I can confirm that we will assign a bounty for your contribution on this! Can you update me on your progress? Where can I see the latest version? Thank you!