Create a landing page for the project

[iSoron]

Our domain loophabits.org currently shows a blank screen. It would be nice to have a simple landing page for the app, containing some descriptions, screenshots and links to Google Play / Github. The descriptions can be copied from the Google Play page. A high resolution version of the screenshots is available in our repository.

Since I am hosting this on GitHub Pages, it has to be a static website.

[nickdbush]

I'd love to help with this! Would that be OK? I'm guessing you'd like to see designs first?

[iSoron]

Hi Nick, it would be great if you could help! If anyone else wants to post alternative designs too, so we can try different ideas, please feel free.

[atchyutn]

Hello @iSoron, I have recently started using your app. I was very impressed with the features it have. After that I had noticed its an open source project and wished to add my contribution. Being a web developer I found this feature which I can do. Can you please let me know if still available to develop?

[nickdbush]

I don't mind, as I've got quite a lot going on at the moment. Here's where I'd got up to design wise until I had to stop:

If you'd like to work on this together @atchyutn, drop me an email

[atchyutn]

Hello @nickdbush, This so cool! :ok_hand: I'm not an expert but a beginner, I can help you along if its okay for you. I wish to share some of my ideas.

Will drop an email with my thoughts and we can move further.

Thank you for the opportunity. :smile:

[padamczewski]

I really like the app and would like to contribute as well :smile:

@nickdbush @atchyutn: What's the status of the stuff that you were working on? It would be good to see some code to get a better idea of what you wanna achieve.

[RayBB]

@nickdbush have you worked on this at all?

I'm willing to build this but would like some guidance on the design. I could make a simple page as shown in the mockups but I think we may want a little more. @iSoron any thoughts?

[chennemann]

What are the requirements that should be met for the landing page? Maybe that would be something we should decide on.

[yohannd1]

Hello. Just remembering this issue (if it was forgotten or something). We currently do not have any information about how the landing page should be. Are there any, @iSoron ?

[flashblaze]

@iSoron I have created a basic landing page. Let me know what you think https://loop-habit-tracker.flashblaze.now.sh Right now the repo is private, and I'll be making that public soon.

Edit: made the repo public

[gundalow]

@FlashBlaze wow, very clean and profesional looking page.

[flashblaze]

@gundalow thanks. Glad you like it.

[chennemann]

@FlashBlaze I like the page. But I think the animations take too long. I would make them probably twice as fast.

[flashblaze]

@chennemann thanks for the feedback, I'll look into it.

[c33s]

my personal opinion is that such a simple content page should be working without javascipt. the "error" message "This app works best with JavaScript enabled." feels like a little like joke on a page without content.

if i view the source i see that all the content is there, all html tags are there but hidden via css per default. the defaut setting sould always visible if no javascript is active. javascript should provide eyecandy but not having it should not lock me out of the content.

also people using open source software also often don't want to be tracked, so the use of google fonts and the embedding of the playstore image directly from the google servers is not really good. serving it from the same server as the webpage is a more user privacy resprecting approach.

i assume that, as there is the GDPR in the Eu, using images and fonts this ways counts as tracking and would require a privacy statement.

[flashblaze]

@c33s I never thought that way. Thanks for pointing these things out.

1. So do you recommend downloading the font and then using it instead of using google fonts?
2. The same should go for images too right? By downloading the content instead of linking to other sources?
3. Thanks for pointing out that the content is not visible if js is disabled. I'll have to look into it.

Great feedback. Thanks a lot.

[c33s]

@FlashBlaze

1. yes, simple download the font to the server which ships the webpage and use them from there (of course they are still google fonts but shipped from your server instead the google server). of course cdns can make things load faster but they are very bad for tacking not being tracked and also build a centralized internet ("single" point of failure). just imagine the servers from google, amazon and microsoft are down. then nearly the whole internet stops working, because a lot of people rely on them.
2. yes exactly
3. this would be awesome. showing no content if no javascript is enabled is a disease of our time. one of my old smartphones most of the time gets killed by the load of javascript it has to execute (open the side to look for a phone number. seeing the phone number for just a sec just to be replaced by a whitescreen. waiting about a minute to execute all javascript. site is visible again). i myself use ublock origin and umatrix but nearly no webpage works out of the box if you have strict defaults. also pages sometimes accessing 30+(!) other domains on access (most of them are tracker and/or ads)

thank you for you kind reply. most of the time when i give such feedback i only get flamed :)

[flashblaze]

@c33s no no, thank you. These were some great tips and I'll definitely implement these.

[adrienbeau]

simple download the font to the server which ships the webpage and use them from there

Make sure the font license allows such a redistribution though. Some attribution or link to license or author may be needed, depending on the font.

[c33s]

Roboto Mono is under the apache license

https://github.com/google/fonts/blob/master/apache/robotomono/LICENSE.txt
https://fonts.google.com/specimen/Roboto+Mono

[flashblaze]

@c33s @chennemann apart from the javascript is disabled, I have made some optimizations and I think it is a bit faster than before. Would love to hear your opinions again.

@iSoron any changes / opinions would be helpful

Thanks

[chennemann]

thanks for your contribution. the animations are good now. In the attached screenshot you can see one additional problem that I found. the text does not scale correctly in all elements. (I'm currently only on my smartphone so I don't have a good way to test it). and the other thing is more subjective. I'm not really sure about the cards to display the text. it seems to be kinda off. unfortunately I don't know how to do it better. I did not test the things @c33s mentioned.

[flashblaze]

@chennemann what phone are you using? I'll look into the issue. Wasn't aware of it.

[Kedar-K]

Hello @iSoron I have been using your app for a long time and it's absolutely awesome. Yesterday I noticed that it was open-source and coming across issues I found this interesting as I am a web developer and don't have any idea about android. I thought I could contribute it in some way. I am not sure about the current progress of this webpage but I just designed a quick and rough layout. There is a lot that we can improve in this design including

1. Fonts
2. Images
3. Mockups

4. Change design elements if required, etc

   and make it more beautiful. please let me know your thoughts on this.

[Kedar-K]

@chennemann what phone are you using? I'll look into the issue. Wasn't aware of it.

@FlashBlaze I guess the issue is not with kind of phone, its browser. If you see at the top of image you can notice that it's neither chrome or any other browser but it looks like link has been opened from seperate application. For ex. When you open link on Twitter app or Facebook app it doesn't take us to proper browser like chrome instead page opens in same application.

[chrrris1987]

Hello @iSoron I have been using your app for a long time and it's absolutely awesome. Yesterday I noticed that it was open-source and coming across issues I found this interesting as I am a web developer and don't have any idea about android. I thought I could contribute it in some way. I am not sure about the current progress of this webpage but I just designed a quick and rough layout. There is a lot that we can improve in this design including

1. Fonts
2. Images
3. Mockups
4. Change design elements if required, etc

and make it more beautiful. please let me know your thoughts on this.

I love this! I came across this topic and I'm just checking out the designs. What made me download this app was definitely the widgets. I would recommand to show this on the page.

Like @FlashBlaze you made a nice animation where you can see this widget feature. Love that! (Would choose another font though.)

@nickdbush Love that 'Make those habits stick' on the first page! Also a nice and short design, which is easy to read

[Kedar-K]

@chrrris1987 displaying widgets would be cool, thanks for idea. I have lot of changes on my mind that we can do including fonts. Waiting for @iSoron 's approval so that i can start developing it.

[iSoron]

We now have a very basic landing page at https://loophabits.org/. The landing page source code has also been added to our github repository, under landing/. Pull requests with either minor enhancements or completely new designs are very welcome.