Proposal: Redesign Erlang Website with Modern Design Principles

[hichemfantar]

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