Planning Website Development for Fossify

[meenbeese]

TODO:

• Discuss relevant ideas
• Find the right technologies
• Make initial design or draft
• Collect feedback and improve
• Prepare the final website

How should we move ahead?
@naveensingh @inson1 @ronniedroid @meenbeese

[inson1]

copied from the issue :)
@ronniedroid Hey naveensingh liked your comment, so maybe you may try something?
First we should do disscussion about ideas. So you or someone else doesnt do something, that we wouldnt use :)

Would static website be enough? With GoHugo or Jekyll? Or?

It should be Open source.
Homepage/Index page with all the apps, links to their github, f-drod, google play.
Support/donate page with Support/donate options (+ and their fees, so supporters could choose)
Links to social media + github, f-drod, google play in footer.
With blog with rss.
More languages support with Hosted Weblate.

Something like the last one. https://www.simplemobiletools.com/

Or do you have better ideas? Please share them. :)

[ronniedroid]

Hey,

I think the roadmap @meenbeese set is good.

We could start by having a discord/matrix/telegram call if you like, or at least instant chat on one of those platforms so we can brain-storm some ideas.

From my part, here is what I have in mind so far.

Use Astro + Preact Islands for Interactivity + Open-Props for CSS to build the website.

A Home page showcasing:

• Simple header with logo and links to the apps page, blog, team page, github. search bar and light dark toggle.
• Hero section.
• The vision and mission of the project.
• The list of the top apps and a short description for each.
• A timeline/road-map of the project.
• The latest blog posts.
• List of top contributor(s) of the month.
• Sponsors (if we can get any).
• Footer with links to all the above.

Apps page

• A search bar to filter the list of apps.
• List all the apps with short description

App page

What we will need here imo is, I am sure we can find even more stuff to put here.

• Screenshots of the app
• Rating and stuff from google play store
• Current version
• How many stars it has on Github
• Testimonials
• Download links

blog

Self explanatory, we just list all the blog posts here.

Team page

I am not sure about this one, but here we can list the core members (when we have some)
and the a list of all the contributors.

[inson1]

@ronniedroid you are missing imo
blog with rss
how mch are the fees with donation methods
More languages support with Hosted Weblate
"List all the apps with short description" + all the features

And yes Team page is good idea

Rating and stuff from google play store
How many stars it has on Github
List of top contributor(s) of the month.
Sponsors (if we can get any)
Current versions
"List all the apps with short description" + all the features

Can we get it dynamically?

Is github hosting enough?

What about analytics? open source non invasive Do we want it? (motomo, Plausible, goat counter etc.)

[ronniedroid]

rss with astro is very easy, just add an integration and you are done.

I did not understand the second part.

I think all the features should be listed in the apps individual pages.

I know we can get the github starts and stuff free, not sure about play store, their should be an API.

I believe github hosting is more than enough.

I don't think we need or should have analytics, our analytics will be our play store downloads and rating plus github stars.

[inson1]

@ronniedroid

I did not understand the second part.

Did you mean this?

how mch are the fees with donation methods

I want to see how much are the fees for each donation option. For example Buy Me a Coffee 5% fees, Paypal is maybe free? bank transfer it depends - some longer text, Patreon also 5%, price of bitcoin, monero transaction at the moment

Maybe even calculator for what is the best option for me how much I want donate + some check boxes
(but yea calculator is overkill and too much)

[ronniedroid]

Ummm, sure why not.

[meenbeese]

What about analytics? open source non invasive Do we want it? (motomo, Plausible, goat counter etc.)

Analytics is a no-go in my opinion. The project was just forked to keep it pure and libre. It is also the least of our concerns now, the actual apps are not even published yet. Don't you agree?

[meenbeese]

We could start by having a discord/matrix/telegram call if you like, or at least instant chat on one of those platforms so we can brain-storm some ideas.

SMT had a read-only Telegram channel with a modest 4000 members. Maybe we can start one of our own? Then we can create a small group chat once all of us have joined.

[ronniedroid]

TBH, we won't be able to go anywhere if we have a lot of people working and having suggestions for the website.

I would recommend if we three plus @naveensingh could have a chat about it.

Or if you @naveensingh likes the ideas discussed here, he can give us the green light and I will make a mock-up.

[ronniedroid]

We also need to know what the official color of the project will be.

We will need a logo for the project

And new icons for all the apps.

[naveensingh]

Hey guys, I haven't had the time to check this yet. I'll reply with what I think later. Short reply: All the suggestions are great but it all seems (?) like too much work to get it running any time soon. If we add too many things the website itself will become another project that requires maintenance.

@ronniedroid do you have enough free time to implement the suggested ideas?

Also, is all that even possible with GitHub hosting? Or are we going to need third party hosting?

[meenbeese]

TBH, we won't be able to go anywhere if we have a lot of people working and having suggestions for the website.

I previously meant only making a group chat for the three of us + @naveensingh. Having a channel was only a tangential idea, sorry for the confusion.

We also need to know what the official color of the project will be.

I assumed the official color would be the green color here?

We will need a logo for the project

We can use mock logos until they are finalized.

[ronniedroid]

I can dedicate 1 to 2 hours a day for this.

I also agree that we should start very small, i will be able to implement all of this in 2 to 3 weeks if we have the design ready.

With Astro, everything is static, so yes, github us enough.

I can keep maintaining the website for as long as I can.

[naveensingh]

@ronniedroid Sounds good. Let's focus on the essential features first like home page, about section, list of apps, contributors and the donate or support development section etc. Preferably in small steps so that if the apps are released before the website is complete, users visiting the website would at least get some info about Fossify. Currently it's pretty much empty: http://fossify.org (the https certificate still isn't generated)

Other features like stars from the Play Store are not that important.

@meenbeese I picked that color with same intention. We could do a poll for that too. Icon and artwork related discussion will be in FossifyOrg/General-Discussion#4

I'll be back a few hours later.

[naveensingh]

We'll chat more about designs later.

To avoid slowness and confusion, I'm requesting any new members entering this thread to not comment here unless you think you have something very important to say about the project website.

[ronniedroid]

@naveensingh can you please sign in to penpot and make a team for us there?

Let me know when/if you do so and I will share my email address with you to add me to the team.

This is better than me designing locally and sharing the files with you, in penpot we can collaboratively work on the design. And it is FOSS too so all good.

[ronniedroid]

I made a color palette based on the green color from the FOSS icon @meenbeese linked.

I am following the 10/30/60 rule for this palette to make sure the website looks pleasing to look at.

I made sure that the contrast looks good on both light and dark modes, made a css file and took some screenshots to visualize.

Anyone who has experience in design and colors is welcome to comment and give feedback.
@naveensingh you too please, let me know if you like the colors or not.

color palette

Dark and Light Pallets

Light palette

10 on 30

30 on background

foreground on background

Dark palette

10 on 30

30 on background

foreground on background

[naveensingh]

@ronniedroid please share your email and @inson1 @meenbeese as well if you guys want to join

[ronniedroid]

@naveensingh mine is

[email protected]

[naveensingh]

@ronniedroid thank you for putting in the work here. The main organization icon color can be slightly changed if you have a better version but let's try to keep it close to green. Also, take a look at these example icons: FossifyOrg/General-Discussion#4 (comment)

[naveensingh]

@ronniedroid invited you

[ronniedroid]

I will wait until we decide on the icon colors, then will add some basic design elements to penpots and start the actual design next week.

[naveensingh]

astro is very easy

Question 🤚

I'm not familiar with it, is it flexible in terms of UI? Can we design/place everything where we want or does it come with specific templates?

Yep, I gotta take a look at it.

[ronniedroid]

It is very flexible and we can do whatever we want.

[naveensingh]

Great :)

I'll let you know when I'm done with the icon colors (or if you guys have any color suggestions, now's the time)

[inson1]

There is also the fact some browsers or extensions auto block all JS, even from the primary domain. It would be ideal if the website worked at least on a basic level for those users as well. I find it really really annoying when I visit a website and get a white screen or a broken site because everything relies on JS, then I have to figure out which script domain is actually the important one if I wanna use it.

by @hayleethegamer

[ronniedroid]

We will not have this issue, astro builds everything to be static.
This actually one of the reasons I picked astro.

[ronniedroid]

I changed the colors a bit, Now they all work when it comes to contrast.

Fossify Colors and Brand Penpot Workspace

The color values for the Light and Dark palette can be found in the Fosiffy Penpot workspace linked above.

Light palette

Dark palette

[ronniedroid]

BTW, I have published this file as a library, meaning we can import it into any other file we create.

For example, when I create the Website-design file, I can just import it as a library and have all the colors, logos, fonts and any other assets I have set with it into the website file.

[inson1]

I would add team page and I agree with Dark/Light switch

[naveensingh]

@inson1 My point is, unless Fossify gets full-time developers (for now, that's a pipe dream because full-time developers deserve to be paid), keeping track of who belongs to the "team list" and who belongs to the "contributors list" is just additional work. So why not treat everyone as a contributor? Nobody receives special treatment that way.

[ronniedroid]

I agree about the team page, and we can wait until we have a list sponsors and active contributors before we activate that section.

Yes, you click an icon and the app screenshot and relevant info shows.

Yes, if we don't have an apps page, we can add the links and ratings of the apps below the top features.

I don't like the light/dark Icon too, I just put it there as a placeholder for now.

We can go very simple and type "Light, Dark" or we can use an svg icon.

We can actually switch the state of the icon without JS, but dark mode switching needs JS. Unless we use the :has() css method, in which case it won't work for a lot of users as browser support is not perfect yet. But it is very simple JS anyways.

[naveensingh]

@ronniedroid

Yes, you click and icons and the app screenshot and relevant info shows.

Cool!

Yes, if we don't have an apps page, we can add the links and ratings of the apps below the top features.

Do you want to add it? I thought it would just be more work for not many benefits (or am I missing something?)

We can actually switch the state of the icon without JS, but dark mode switching needs JS. Unless we use the :has() css method, in which case it won't work for a lot of users as browser support is not perfect yet. But it is very simple JS anyways.

Ok then, we'll use JS where it is needed but not so much that everything breaks if someone disables it on their browser.

I will update the org logo and add app icons soon...

[ronniedroid]

Thanks!

No you are right, we don't really need it, but if I have time, I probably will add it later because it does make sense and would be good for SEO.

Yes, I too don't like to use JS for everything, great thing about astro is, there is zero JS by default. We will just add it where it is needed.

Great!

[ronniedroid]

OK so a few questions.

Do we add the list of top contributors now?
Do we have sponsors?

Who will write our mission and vision?

Who will write the about us page's content?

I made some more updates BTW, let me know if you like them.

[naveensingh]

@ronniedroid

Do we add the list of top contributors now?

Yes. Contributors list is located at https://github.com/FossifyOrg/Commons/blob/29795d5afafa86e00e8f67248a3ea7ebfd00b4fe/commons/src/main/res/values/donottranslate.xml#L43 and I haven't updated it yet. The list contains GitHub usernames so if you agree, we can link the contributor avatars to GitHub profiles.

The current contributor avatar size looks a little too big. Ideally, we should at least include the top 10 contributors there.

Do we have sponsors?

We have individual sponsors. Check https://github.com/sponsors/FossifyOrg, https://github.com/sponsors/naveensingh for reference. There are also some members on Patreon but I don't know if you can see them. Let me know if you need a complete list.

I'm not sure how many sponsors should be up there and how to sort them. Ideas are welcome.

Who will write our mission and vision?

I think 'mission' and 'vision' are pretty closely related but I get that they are separated there to organize what we stand for.

Drafts:

Our Mission:
"To empower individuals and communities with accessible, privacy-focused, and ad-free mobile applications. Fossify is committed to building upon the legacy of the no longer maintained SimpleMobileTools, reviving and advancing the ideals of simplicity and user privacy in mobile technology. Our mission is to ensure that quality, open-source software remains available to everyone, promoting digital freedom and inclusivity."

Our Vision:
"To be the leading advocate and provider of open-source, community-driven mobile applications that prioritize user privacy and simplicity. Fossify envisions a future where mobile technology enhances lives without compromising privacy or bombarding users with ads. We aspire to create a global community of individuals who collaborate, innovate, and benefit from free and open-source software, fostering a more secure, user-centric digital landscape."

Alternatively:

Our Mission: 
Building privacy-first mobile apps for everyone. Fossify revives the legacy of @SimpleMobileTools, crafting open-source tools that are ad-free and easy to use. We empower individuals and communities with technology that respects their privacy and keeps things simple.

Our Vision: 
Imagine a world where mobile apps enhance our lives without invading our privacy. That's what Fossify strives for. We envision a thriving community of people working together to create free, open-source apps that benefit everyone. Join us and build a more secure, user-friendly digital future, one app at a time.

You can edit these as you see fit.

Who will write the about us page's content?

I'll have to think about this one. Anyone is welcome to write it as everything is out in the open but do mention that Fossify is a fork of SimpleMobileTools and keep any mention of the SMT sale and discussion to an absolute minimum.

@ronniedroid if you need this ASAP, please copy/paste the small description from the organization README and modify it as needed.

I made some more updates BTW, let me know if you like them

Yes, I like them, a lot. Two things:

• The Google Play and F-Droid badges look slightly too small.
• Can we add one or two more links in the footer? See https://github.com/orgs/FossifyOrg/discussions/12.

Thanks!

[ronniedroid]

Thanks, I will try and link to their github avatars. Yes it is a bit big because I didn't know how many top contributors we have.

A complete list of sponsors is not necessary. You should chose at which donation amount does one's avatar and name show on the project website and only share those with me. Github by default tells me I have to donate $100 monthly to get that privilege/perk?

Thanks for the mission and vision, I will read and review them later.

I will try to churn something up tomorrow using the already available org description.

I am glad you like them 😊:

• I will increase the size and see how they look.
• Yes, sure I can, just send me the links and I will add them when I start coding.

You and the community are welcome!

Should I start coding it? Did you check the mobile layout? I have yet to finish that one, but everything will be almost the same but on a single column.

[naveensingh]

Github by default tells me I have to donate $100 monthly to get that privilege/perk?

Right, that complicates things. Since this limitation disqualifies all current Fossify sponsors, I think I'll remove that perk. Let's just always display the top 10 sponsors on the website. I'll send you a list.

Should I start coding it?

Yes, please but don't loose any sleep over it. It's not something that must be done ASAP.

Did you check the mobile layout?

Yes, I did. Regarding all layouts, I was wondering what goes in the big rectangle on the top-right side?

[ronniedroid]

Ok, send me the list and I will add them and make it easy to update.

Don't worry about it, I don't own a laptop (on purpose) and rarely take my work laptop with me home.

There goes an image, maybe a collage of the top apps (Hopefully in the future we will have a team and we can put a group photo of them 😄

[ronniedroid]

@naveensingh Two way to not have to use JS to toggle between light and dark modes

• Not having a toggle for the dark/light modes, but only following the users system/browser preference.
• Using the :has() css method, which does have good browser support, but it is not 100% and the toggle won't work on older browsers.

I was thinking about it today and I think this is the only JS we will have, and we can eliminate it with the above options, what do you say?

Edit: Using :has() won't need JS if we don't save the user preference. If we do we will need a little JS.

[Secret-chest]

Not having a toggle for the dark/light modes, but only following the users system/browser preference.

Not all OSes support this.

[ronniedroid]

Not all OSes support this.

Even if some OS/DE does not support that, all browsers do support that. At least all OSes and Browsers that matter do support it.

[Secret-chest]

Even if some OS/DE does not support that, all browsers do support that. At least all OSes and Browsers that matter do support it.

Chromium only supports it if your DE does. Some don't.

[ronniedroid]

Well, I guess sucks for people using chromium on OSes that do not support datk-mode preference.

Most likely those people don't care about dark mode anyway.

[meenbeese]

Not having a toggle for the dark/light44 modes, but only following the users system/browser preference.

Not all OSes support this.

The web is fragmented, not everything is supported everywhere. If something has like 90% support or more, then it is generally safe to use.

[ronniedroid]

You can track the progress here: https://ronniedroid.github.io/fossifyorg.github.io/

[Secret-chest]

Nice!

[ronniedroid]

I need help collecting all the data for each app.

If someone is willing to help, here is how you can do it.

Create two .json files for each app, each containing the following json.

{
  "name": "app name",
  "desc": "app description",
  "features": [
    "feature one",
    "feature two"
  ]
}

{
  "play": "url, play store link",
  "fdroid": "url, f-droid link",
  "github": "url, github link"
}

I am putting links in a different file because links don't get translated and can be reused.

For the description, chose the short github repo description over the readme description IMO.

Please try to put same number of features for all apps as much as possible, and don't put more than 4 features, if you really have to, 5.

Thanks in advance.

[ronniedroid]

Please test the carousel in the our products section on different physical screen sizes and report back.

[ronniedroid]

@naveensingh I need the list of sponsors. Send it when you can.

[naveensingh]

@ronniedroid Sorry, yes. I'll send it to you soon. I'm a little busy currently (not with the project).

[naveensingh]

@ronniedroid

Not having a toggle for the dark/light modes, but only following the users system/browser preference.

Ok, let's follow system/browser preference.

Regarding app metadata, please use placeholders for now and I'll update them later.

Carousel:

Works okay on desktops and large screens but doesn't look great on mobile phones:

The app screenshot + links look a bit too small.

Can we make the app icon list scrollable instead of showing them in a grid?
Alternatively, if it's not complicated, we could simplify it like simplemobiletools.com with two arrows and show the currently selected app's icon + name in the middle.

Potential bug: When clicked, text on the website has a cursor (|) as if it's mutable.

[ronniedroid]

@naveensingh

Ok, let's follow system/browser preference.

I already added a button to toggle dark and light mode, but it's easy to remove it. if a user disables JS, the button stops working and that's it.

Regarding app metadata, please use placeholders for now and I'll update them later.

I will add as much as I can and leave the rest for you.

Carousel:

Works okay on desktops and large screens but doesn't look great on mobile phones:
The app screenshot + links look a bit too small.

Agreed.

Can we make the app icon list scrollable instead of showing them in a grid?
Alternatively, if it's not complicated, we could simplify it like simplemobiletools.com with two arrows and show the >currently selected app's icon + name in the middle.

What if, on mobile, I remove the details and only keep the screenshot and the app name as you said, but with no arrows, just let the user flick through them (Which the user can now) and hide the app Icon's too.
Example: https://harikar-astro.netlify.app/#projects

Potential bug: When clicked, text on the website has a cursor (|) as if it's mutable.

Will investigate, thank you.

PS: I bricked the website for now, will fix later.

[naveensingh]

@ronniedroid

I already added a button to toggle dark and light mode

Ok, let's leave it then.

What if, on mobile, I remove the details and only keep the screenshot and the app name as you said, but with no arrows, just let the user flick through them (Which the user can now) and hide the app Icon's too.

Sounds good.

I think the app store and GitHub links should be in a vertical list. We can use Github's text logo so it is more rectangular and doesn't look out of place with the app store badges or simply a black button with GitHub text:

There is no Octocat as we are not allowed to customize the official logo.

[ronniedroid]

Great

BTW, the website is fully and easily translatable.

Can already test the arabic translation by appending /ar to the url.

[min7-i]

Please test the carousel in the our products section on different physical screen sizes and report back.

On desktop browsers the behavior of the scrollbar is a bit weird:

Firefox	Chrome
I see the default scrollbar with arrows and I have to press the right arrow twice to see the next app. Going back (left arrow) works with one click.	Depending on how far you move the scrollbar it doesn't switch to the next app, but only moves the visible content slightly to the left or right.
firefox_2024-01-19.221302-850.mp4	chrome_2024-01-19.221549-428.mp4

A minor thing I noticed on mobile (firefox) is that the carousel is not fully centered, but slightly closer to the right border.

mobile screenshot

[ronniedroid]

On desktop browsers the behavior of the scrollbar is a bit weird:

The intended use on desktop is to use the app icons to go to a specific app, not the scroll bar, I though I had the scroll bar hidden on desktop 😅

In Chrom (even though this won't matter) the app is not switching because I have enabled scroll snapping to male sure the app is always centered.

A minor thing I noticed on mobile (firefox) is that the carousel is not fully centered, but slightly closer to the right border.

Yes, I noticed that too, it is because of the scroll-padding-start I think, will fix tomorrow.

Thanks for the testing.

[ronniedroid]

Fixed!

[ronniedroid]

#6 Poll request opened, fingers crossed.