Redesign Abella home page

[amerikan]

Hi, I don't know how open would you be in re-designing the current Abella home page, I just think it can be improved to make it easier to find things.

I had never used Abella before, but for one of my classes we had several assignments based on Abella so that's how I began to use it. It was a little confusing where to find things because even though everything is in one page it takes a while to find what I was looking for due to the fact that the links are found within sentences rather say, just a button. I think there's room for improvement.

I would be more than happy to volunteer some of my time to help with it. Here are some open source homepage examples that I like which can give good ideas how to organize the content:

• https://reactjs.org/
• https://vuejs.org/
• https://flow.org/
• https://www.haskell.org/
• https://www.python.org/
• https://ocaml.org/
• http://phoenixframework.org/
• https://swift.org/about/
• https://angular.io/
• https://rethinkdb.com/
• https://redis.io/
• https://socket.io/
• https://www.ruby-lang.org/en/
• https://yarnpkg.com/lang/en/
• https://gruntjs.com
• https://laravel.com/

[chaudhuri]

Redoing the Abella web-site is long past overdue. If you want to mock something up, please go ahead.

[amerikan]

@chaudhuri Right off the bat, there are 2 ways we can do this. One, it can be a single page with go-to anchor links within the same page or various pages for each section. Not sure what approach you prefer. I've seen both for open source projects depending on length of content. I think for Abella, due to the numerous content, multiple page would be better.

As far as the sections go, currently there are these on the website:

• Description
• Download
• Documentation
• Support
• Some Relevant Publications
• Contributors
• History
• Funding

I feel like some of these could be combined as such:

• Main (landing page)
  • Brief description (blurb)
  • Encompass purpose, uses, and main features
  • Download button
• About
  • Detailed description
  • History
  • Funding
  • Some Relevant Publications
• Documentation
  • Installation info
  • Reference Guide
  • Examples/Walkthroughs
• Support
  • Github issues
  • mailing list
• Try (link to Abella online editor)
• Community
  • Github source code
  • Contributors

The above is just to get started, we can refine it.

[amerikan]

Hello @chaudhuri here's my first mock-up. What do you think? A lot of the text is just placeholder.

Edit: here are 2 additional mock-ups. One for pages that will require a sidebar such as documentation and walkthroughs. And then a full width one which can be used for pages that require little content.

[ThatDaleMiller]

Thanks, @amerikan, for these images of a revised website for Abella. What you sent looks quite good and modern. A few questions:

1. Is it the case that the formatting of this website is responsive to mobile phones, etc? That's probably the default these days.

2. I like the new logo but we need to be careful about branding issues: maybe others are attached to the older logo?

3. Presumably, the sources for such a revised website would find its way to the main GitHub repository so that others will be able to edit and revise it.

   -Dale

[amerikan]

Hi @ThatDaleMiller:

When I first started to use abella for university work, I found it difficult and cumbersome to go through the current site's documentation. It just seems the information was all over the place, so often I found myself lost. The main reason why I wanted to do this is to make it easier for future users to find things on it. But to answer your questions:

1. Is it the case that the formatting of this website is responsive to mobile phones, etc? That's probably the default these days.

Yes, you're right, in today's web, responsive design is the way to go and should be a goal. If we use an existing css framework such as bootstrap or bulma (https://bulma.io/) that is very straightforward to do.

2. I like the new logo but we need to be careful about branding issues: maybe others are attached to the older logo?

I didn't put too much time into designing the logo. I think it can be further improve, but just wanted to slap it on there to start a conversation about it. All I knew is that I wanted the A in Abella to look like a lambda for obvious reasons :)

3. Presumably, the sources for such a revised website would find its way to the main GitHub repository so that others will be able to edit and revise it.

Since it was referring to abella-prover.org I thought it was appropriate to post on this repo, but if you feel it would be better on the other that is fine with me. Can you open an issue on the main repo and I'll start posting onto that one.

Thanks!

[ThatDaleMiller]

Thanks for this explanation of what you have put together. I certainly look forward to seeing a more modern organization imposed on the Abella website. Since I don't consider myself as a developer but only a user of the Abella repository, I'm hoping that one of hte developer can help with opening an issue on the main repo, etc.