Proposal: Redesign Erlang Website with Modern Design Principles

[hichemfantar]

Edit: Hosted prototype https://erlang-website.vercel.app/
Prototype Repo: https://github.com/hichemfantar/erlang-website

Description

The current Erlang website, while functional, could benefit from a modern refresh to better represent the vibrant and evolving Erlang community. This proposal aims to rebuild the website using modern design principles with TailwindCSS for styling, ensuring a visually appealing, highly responsive, and developer-friendly experience.

---

Objectives

1. Modern Design:
   • Clean, intuitive UI that resonates with both new and experienced developers.
   • Improved navigation and content hierarchy for easy access to learning resources, documentation, and community links.
2. Built-in TailwindCSS:
   • Use TailwindCSS to streamline the design process and maintain consistency across components.
   • Facilitate rapid prototyping and customization.
3. Content Accessibility:
   • Enhance accessibility features (e.g., ARIA roles, proper semantic HTML).
   • Ensure the website meets WCAG standards.
4. Performance:
   • Optimize for fast load times and high Lighthouse scores.

---

Proposed Stack

• Frameworks: Next.js with Nextra
• Styling: TailwindCSS
• Deployment: Vercel or GH Pages (via Next Static Generation).

---

Inspiration

Here are some examples of modern and visually compelling developer websites:

• React.js

  • Clean layout with a strong focus on interactivity and learning resources.
  • Great use of Tailwind for styling consistency

• Vue.js

  • Consistent design with clear navigation and call-to-actions.
  • Developer-friendly tone and design.

• Astro

  • Modern and approachable aesthetic with bold typography and animations.
  • Well-structured layout for documentation and blog content.

• Vite.js

  • Minimalist design with vibrant color accents and straightforward navigation.
  • Lightweight and performant, reflecting its core philosophy.

---

Action Plan

1. Research & Wireframes:
   • Collaborate with community members to identify core pain points and desired features.
   • Design wireframes/mockups for feedback.
2. Implementation:
   • Build the website using Next.js.
   • Integrate TailwindCSS for consistent and reusable styles.
   • Ensure full responsiveness and accessibility.
3. Content Migration:
   • Port existing blog posts, and community links to the new design.
4. Testing & Feedback:
   • Conduct usability testing with community members.
   • Gather and incorporate feedback for iterations.

---

Community Involvement

This redesign is a collaborative effort. We encourage contributions from designers, developers, and accessibility experts to make the new website a proud representation of the Erlang community.

---

Expected Outcome

A sleek, modern, and accessible Erlang website that attracts new users, supports the community, and highlights the capabilities of the language and its ecosystem.

Feel free to suggest additional features or share feedback! 😊

[garazdawi]

Hello!

We welcome all the help we can get, as none of us maintaining this site know much/anything about web development.

When implementing this version of erlang.org 5 years ago, the first prototype was in Next.js using SSG, but I decided to use Jekyll instead hoping that it would lead to an easier to maintain website. Not sure if it was the right decision or not, but it has worked well for us in the past 5 years. After choosing Jekyll, others have suggested we use Hugo or even Docusaurus.

Any re-design will have to focus on maintainability, as both we and other non-web developers have to be able to do updates without too much of an effort. I would not mind changing CSS framework from Bootstrap to Tailwind, as that seems to be what everyone has settled on right now.

One pain point that you will find is that members of the Erlang community rarely have web-development as their main focus, so getting the wider community interested might prove difficult.

Maybe a good start would be to do a post on https://erlangforums.com asking if anyone else is interested in helping out and then go from there. I will try to help out as much as I can, but I don't have a lot of time to spend on this.

[hichemfantar]

Thanks for the detailed reponse!
I'm working on a prototype and I'll share it soon here and in the forums 🚀

[hichemfantar]

@garazdawi here's the prototype, let me know what you think

[garazdawi]

I’ll take a more thorough look on Monday, but my initial reaction is that I like it. I assume you created it using next.js? Can I have a look at the source?

[hichemfantar]

Great to hear, it’s next js and mostly markdown so it’s super easy to maintain.
Source https://github.com/hichemfantar/erlang-website

[hichemfantar]

@garazdawi i could use your input on how to handle EEPs

should we just move them to the same repo and render them directly as markdown?

This will eliminate the need for a different repo and we can get rid of the gh actions

[garazdawi]

They need to be in a separate repo as we want the discussions and contents to be separate from the main website.

I've not had time to look anything today, I'll see if I can find time tomorrow.

[hichemfantar]

having them in a separate repo is no issue, the new website supports rendering remote content

[hichemfantar]

@garazdawi included a few eeps as examples https://erlang-website.vercel.app/eep

my proposed solution is to include a script that clones the eeps markdown folder then render them directly as local files.
then you can rerun the script to sync with the eeps repo. this is a good solution because if the eeps repo ever goes down, there's still a copy in the website repo.

[hichemfantar]

@garazdawi should we go through with this? most of the hard work is done already

[garazdawi]

Hello! Sorry for the delay in answering.

My main concern regarding this is long-term maintainance, I like the new design and don't have any opinion on the tooling. We need to have a website that we either can maintain ourselves or can trust in the cummunity to maintain over the next decade or so. Therefore we need to get more people involved in this in order for us to not have to rely on you, nor that you will have to feel any pressure to keep maintaining it long after you have lost interest.

So if you can gather some more people that want to help out, preferably people that are active in the Erlang community already, we can start working on converting the site.

If you don't want to/cannot gather more people to join, then maybe a compromise would be possible? Can we convert only the css+html to the new layout, but keep the current jekyll tooling? That was we can maintain the site while still getting a new look and feel.

[hichemfantar]

thanks for the detailed response. feel free to cc anyone you think might be interested in working on the project.

also the current setup reduces the number of technologies from ruby, jekyll, and nodejs to simply next/node. it greatly simplifies the dev process and is much more customizable since it relies on MDX which is markdown that is easily customisable with JSX.

should i focus on the erlang forums to find collaborators or are there other channels you recommend?

[garazdawi]

should i focus on the erlang forums to find collaborators or are there other channels you recommend?

I would start there atleast. Maybe ask on the Elixir forums as well, as it is a larger forum and there might be people there that are interested in helping out.

[asabil]

Funnily enough, my friend @jprieur and I, were just talking about whether we should put in some time to try to help improving the Erlang website.

My personal feedback on this is that the approach @hichemfantar went with is very good, and would strongly recommend pursuing something similar. I believe the website should be relatively easy to maintain as it is mostly (extended) markdown documents, and seems much easier to work with than the current Jekyll setup.

Styling wise, I would personally reduce some of the effects, such as the one on hover over the logo and the download button.

[hichemfantar]

a potential contributor suddenly appears!
Thanks for the feedback, about the logo and cta button effects, they're pretty enough to improve the feel of the website and subtle enough not to distract.

for example, the logo hover effect is to properly convey to the user that they're hovering over the logo and that it's clickable (good ux).
there's very few cta buttons like the download button so the animation gives it a little life.

these little things give the website some character and it doesn't feel like just another static site.

also the animations can be disabled when the user has reduced motion settings in their OS