Any web developers out there that can help us rework the Kontalk website?

Hi everyone,

As Kontalk is evolving and growing, we want to offer a new modern webpage design to better communicate what this application is about.

As you probably know, the Kontalk developers are already busy developing this unique messaging application. So we thought this would be a great opportunity to get the community involved.

Do you have any web development skills? Would you be interested in helping us implement what we have in mind?

Kontalk unfortunately can’t offer any financial reward, but you will be listed in the contributors and forever have our community’s gratitude!

What we are currently considering for the new site:

  • It should be a single-page site
  • Demonstrate both Android and Desktop clients
  • Explain simply and elegantly what sets Kontalk apart from other messengers

I am in the process of preparing the text for everything and I can even draw a mockup if needed, but unfortunately do not have the technical skills to implement such a change.

Your help is welcome! :blush: :slight_smile:

3 Likes

@tetris4 If you’re willing to make a low-fi mockup, I can work on the actual code and design :slight_smile:

1 Like

Thanks @grvrulz, we’ll get on it, along with some ideas on what we would like to show off.

1 Like

hi there
i can help you also
let me know some layout and basic ideas on layout so i can work on that

1 Like

Ok I have something.

Quickly put, the website should emphasize why Kontalk is different from other projects.

  • easy to use and based on mobile phone numbers
  • community-driven project
  • run by volunteers to provide a stable network and to provide as much network coverage as possible
  • based on open standards
  • fully open source (both client and server)
  • clients for Android and J2SE
  • takes part in the XMPP federation

Page-based approach

Single page (as in single HTML file) website. Multiple sections covering a whole page (as in browser viewport) per section (something like http://getbootstrap.com/, maybe with different backgrounds for each section). The site should be HTML5 compliant and fully responsive.

Here is a first version of a mockup, below I explain the sections: https://astra.casaricci.it/public/kontalk_mockup_v1.odg

Section 1

Logo + slogan and one or two sentences about the distributed/community-driven part.
Example (all text centered):

[LOGO]
A new way of communicating.
Safe and easy instant messaging. Run by the community, for the community. Fully open source.

I was thinking of colouring the first sentence in green (like the lock in the logo) and the second sentence in blue (like the balloon in the logo). Let me know what do you think about that. I tried to put that in the mockup anyway.

Section 2

Download links, with 3 big boxes for Android, iOS (with a question mark or something to
quickly explain that we are looking for developers) and desktop.
The boxes should contain a screenshot for each platform (except iOS of course). Under each box, we can (and probably should) use the already existing buttons in kontalk.org for the links to Google Play, F-Droid, and GitHub desktop client release page.

Section 3

Why it’s different:

  • run by the community for the community (more emphasis on distribution and collaboration)
  • funded by donations: self-sustainable
  • fully open source: auditable by anyone
  • based on open standards: contributes to interoperability
  • easy as SMS but with the power of an e-mail

Those concepts could be represented with an icon (representing that concept) with a short text underneath.

Section 4:

Technical aspects:

  • based on XMPP (and part of the federation; link to something of XMPP)
  • strong asymmetric encryption based on OpenPGP (will switch to OMEMO/OTR/whatever soon)
  • both servers and clients open source (with a link to the Kontalk Docker server repository)

This section could use a carousel much like the bottom part of kontalk.org.

Footer

Mainly links to socials, copyright notice, and some other links. Similar in layout to the current footer in kontalk.org

1 Like

Maybe easy to translate to make it international as possible?!

Yes we should handle that from the beginning. But that’s a technical aspect that can be handled separately from the design IMO. We’ll take care of it and probably use Weblate for translating as well.

It’s great to see people stepping up, thanks @grvrulz @karthikindia! Do you think you can work something out from @daniele_athome’s post? We can then build, adjust and expand on that with further ideas.

Sure i can do it, Please assign tasks for all contributors so that it will be easy to work on their specific part.

1 Like

Thanks for helping @karthikindia.
Well, there are really no specific task to assign to multiple people. Whoever wants can take the proposal in my previous post and start developing a prototype page. It can’t really be splitted among several people IMHO.
If you need more information I’ll be happy to provide it.

2 Likes

Hi

I am working on that - http://kontalk.karthik.sg/

I felt that it can b done in wordpress where we can untegrate blog and
forum with the same theme

kindly check and let me know your feedback

Regards
Karthik

1 Like

That is great @karthikindia! It seems to follow closely the guidelines @daniele_athome provided. I know he is busy atm, but am sure he will get back to you asap with more feedback.

Are you thinking to use some specific set for the missing icons?