search

AndBible / and-bible

AndBible: Bible Study
https://andbible.org
GNU General Public License v3.0
600 stars 198 forks source link

Fresh new layout for homepage (andbible.github.io) #1608

Closed tuomas2 closed 3 years ago

BryceSteuer commented 3 years ago

I was just thinking along these lines this morning, and was going to suggest this. But how providential, you have already.

tuomas2 commented 3 years ago

PR to https://github.com/AndBible/andbible.github.io would be appreciated :-)

tuomas2 commented 3 years ago

Oops I forgot that we use template in this main repo, see play/homepage_template.html . compile_description.py is used to compile it with latest content.

BryceSteuer commented 3 years ago

Are you thinking mostly changes in the css/styling without major changes in the actual content?

I'm very comfortable working with html/css, I've worked also a bit with js and C#, but I don't feel as comfortable working with those.

tuomas2 commented 3 years ago

I'd like primarily to get new layout.

Content is slightly updated after 4.0 is released. I think Google Play description is main content and tutorial videos and related graphics are useful content. But I'm open to improvements.

@agrogers might have ideas for changes to content?

agrogers commented 3 years ago

The site content is pretty good already. Making the header more beautiful would be good. Links to the new features video. And some compelling screenshots is all I would add.

On Sat, 21 Aug 2021, 3:17 am Tuomas Airaksinen, @.***> wrote:

I'd like primarily to get new layout.

Content is slightly updated after 4.0 is released. I think Google Play description is main content and tutorial videos and related graphics are useful content. But I'm open to improvements.

@agrogers https://github.com/agrogers might have ideas for changes to content?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AndBible/and-bible/issues/1608#issuecomment-902839925, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKGTJWHT4ZLQF5OWMZV4X3T52E3FANCNFSM5CQTO73A .

tuomas2 commented 3 years ago

If you @BryceSteuer will try to make a facelift then :-) Can you estimate when you would have time to do it?

BryceSteuer commented 3 years ago

I should be able to do it in the next two weeks. I have a big standardized test to take next week, and after that I'll be free. It should only take 3-5 hours in my estimation anyway. Do you have a preferred time schedule you want it done by?

tuomas2 commented 3 years ago

Well we will release as soon as we get tutorial videos from @agrogers and some translations finalize :-) If we get it before release, great, but if not, it's okay also a few weeks after too.

BryceSteuer commented 3 years ago

@agrogers Could you provide me with some good screenshots of AB major features for the webpage? Perhaps each category that you discuss in the promo video.

BryceSteuer commented 3 years ago

How exactly do I get to editing the html and css? Do I need to do a clone or something? (sorry, I haven't done really any collab on github before). Once I'm in a place where I can edit, I should be fine from there

tuomas2 commented 3 years ago

Are you familiar with git? Clone homepage repo https://github.com/AndBible/andbible.github.io and make pull request against it.

tuomas2 commented 3 years ago

You can do changes directly there. I can change it to template later (play/homepage_template.html on this repository, which is usually used to update homepage).

BryceSteuer commented 3 years ago

Ok, so from the homepage repo I can change the css, but can you specify how I ought to edit the html from the template page? Sorry for the confusion

agrogers commented 3 years ago

I'm hoping to have initial videos finished this week - before Saturday. I will share the screenshots I have been taking tomorrow.

On Sun, 22 Aug 2021, 8:46 am Bryce Steuer, @.***> wrote:

Ok, so from the homepage repo I can change the css, but can you specify how I ought to edit the html from the template page?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AndBible/and-bible/issues/1608#issuecomment-903184935, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKGTJUGXN4YL363VMDDIKDT6AUC7ANCNFSM5CQTO73A .

tuomas2 commented 3 years ago

@BryceSteuer if you want to edit template html directly, you must fork & clone main repository (this repo) and edit play/homepage_template.html . I'm using make tx-pull to fetch translations and compile descriptions from template, which also complies homepage_template.html for me in final form.

But if this is too technical, you can just edit the homepage repo, make a pull request, and I will extract new template file when you are done. As long as you don't do a lot of changes to content blocks, it will be easy task to do that.

BryceSteuer commented 3 years ago

I need to be able to see how the project webpage is going to look before I finish, if that's possible. I can have a rough outline of how I want the layout (and I do), but I never know if it looks good until I run it. Is there any way I can do this?

tuomas2 commented 3 years ago

You mean you need to be able to show how page looks like locally?

how about going with your google chrome to file:///full_path_to/homepage/index.html ?

tuomas2 commented 3 years ago

Selection_182

BryceSteuer commented 3 years ago

How are you getting that path homepage/index.html? image

BryceSteuer commented 3 years ago

I have index.html (1 kb file) in the and-bible.io cloned repo but it just redirects me to andbible.github.io. It's not local like the screenshot.

tuomas2 commented 3 years ago

Are you familiar with git? Fork homepage repo https://github.com/AndBible/andbible.github.io and make pull request against it.

I was thinking that you just edit this directly.

BryceSteuer commented 3 years ago

Ok, I'm making progress in it. https://github.com/BryceSteuer/and-bible Also the css. @timbze offered to teach me some Git, so that should help a lot. This is quite a learning experience, but I'm glad for it!

BryceSteuer commented 3 years ago

@agrogers No pressure, but do you have those screenshots yet?

BryceSteuer commented 3 years ago

I'm pretty much done except for some finishing touches - and the screenshots and YT video. However, I will be in another city without my computer until next Monday, so I will do PR either then or Tuesday Lord willing. The data I asked about on Telegram was for an idea to put it up on the webpage.

agrogers commented 3 years ago

Hi Bryce

I will try to get some screenshots together this evening.

Tuomas, where is a good place to store these? I can just email them? But maybe it is good to have a repository of screenshots that show off the best features. I would like you guys to add some tablet screenshots - any maybe some videos. My sister's tablet is really low res so not so good for screenshotting.

Thanks Andrew

www.TenOutOfTen.org https://www.TenOutOfTen.org @.*** (+61) 0477 174 193 (Australia) (+95) 09 250018669 (Myanmar)

On Wed, 1 Sept 2021 at 08:06, Bryce Steuer @.***> wrote:

I'm pretty much done except for some finishing touches - and the screenshots and YT video. However, I will be in another city without my computer until next Monday, so I will do PR either then or Tuesday Lord willing. The data I asked about on Telegram was for an idea to put it up on the webpage.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AndBible/and-bible/issues/1608#issuecomment-909679058, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKGTJWMF3Y5IV376WQ3JP3T7VG7JANCNFSM5CQTO73A .

tuomas2 commented 3 years ago

Maybe for now just google drive or google photos, but when it comes to google play store pics, see #1127.

Homepage repo can have more pics than play if needed.

agrogers commented 3 years ago

Hi Bryce

I have uploaded screenshots and videos i have been using for the videos here: https://drive.google.com/drive/folders/1YsrELQbLnjmbhFHurx5sfvVXRZaIyZNL?usp=sharing

You should be able to get plenty of images from there.

BryceSteuer commented 3 years ago

Thanks a lot. those are good.

BryceSteuer commented 3 years ago

As for the videos, are those to be on youtube or do you think those should be embedded in the page itself (that would slow down the page significantly I think).

tuomas2 commented 3 years ago

I don't think embedding youtube videos will slow site down (like we currently have).

BryceSteuer commented 3 years ago

I meant it might slow down if I embed the .mp4 via

tuomas2 commented 3 years ago

that is bad idea to host mp4s. we use YouTube currently for that.

BryceSteuer commented 3 years ago

So you will put those mp4s together in a YT playlist? Should I wait for that or PR to andbible.github.io now?

agrogers commented 3 years ago

Hi Bryce. Yes, the videos are going up to youtube and into playlists. So that will be fine. Finalising that today.

www.TenOutOfTen.org https://www.TenOutOfTen.org @.*** (+61) 0477 174 193 (Australia) (+95) 09 250018669 (Myanmar)

On Wed, 8 Sept 2021 at 07:50, Bryce Steuer @.***> wrote:

So you will put those mp4s together in a YT playlist? Should I wait for that or PR to andbible.github.io now?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AndBible/and-bible/issues/1608#issuecomment-914651651, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKGTJUE6GOTNVGWHRTBG3LUA2CLLANCNFSM5CQTO73A .

BryceSteuer commented 3 years ago

Sorry, I want to be clear (not that you were unclear, but my understanding is). So should I PR now, or wait until the playlist link is ready so I can add that as well before the PR? If I need to wait for the link, I can just PR probably tomorrow afternoon,depending on when its ready.

agrogers commented 3 years ago

Um, good question. Two pull requests shouldn't be a problem. Would be good to see what you have done as soon as we can.

www.TenOutOfTen.org https://www.TenOutOfTen.org @.*** (+61) 0477 174 193 (Australia) (+95) 09 250018669 (Myanmar)

On Wed, 8 Sept 2021 at 08:21, Bryce Steuer @.***> wrote:

Sorry, I want to be clear (not that you were unclear, but my understanding is). So should I PR now, or wait until the playlist link is ready so I can add that as well before the PR?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AndBible/and-bible/issues/1608#issuecomment-914665880, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKGTJUUISFXSAP4NUTM5ZDUA2GAHANCNFSM5CQTO73A .

tuomas2 commented 3 years ago

Yes; it might be good idea to provide even screenshots of the worked layout so that we can provide comments. But PR's are cheap and you can always improve after creating intial PR.

BryceSteuer commented 3 years ago

Alright, sounds good. I will be out of home for a few hours this morning, then I should be able to PR when I get back Lord willing.

BryceSteuer commented 3 years ago

I might be able to do it quickly now but I wouldn't be able to provide lengthy descriptions and discussions about it until later. But now I will provide a few screenshots. image image image image image

There were only two major actual content changes - both of which can be reversed if they are undesirable - first the statistics counter at the page top, then adding the new features of v.4 to the features list. Apart from that (and the new screenshots) all content is pretty much the same.

agrogers commented 3 years ago

Great. Looking good.

On Wed, 8 Sep 2021, 11:41 pm Bryce Steuer, @.***> wrote:

I might be able to do it quickly now but I wouldn't be able to provide lengthy descriptions and discussions about it until later. But now I will provide a few screenshots. [image: image] https://user-images.githubusercontent.com/48736452/132520153-0509e9fc-9de9-4bab-b85d-070c509174ce.png [image: image] https://user-images.githubusercontent.com/48736452/132520230-773a67d7-2fc6-41bf-afee-a3301765945c.png [image: image] https://user-images.githubusercontent.com/48736452/132520288-57e9e3f8-17a9-4239-b903-e90cfbc99e9d.png [image: image] https://user-images.githubusercontent.com/48736452/132520342-823042e8-2c45-461f-8a1a-f0d04739daea.png [image: image] https://user-images.githubusercontent.com/48736452/132520411-af54906f-0522-4258-b526-898f15ca1503.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AndBible/and-bible/issues/1608#issuecomment-915249373, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKGTJU7P5DEEH5ZV7P6Q3TUA5RXBANCNFSM5CQTO73A .

tuomas2 commented 3 years ago

How did you get the number 150000 for users?

tuomas2 commented 3 years ago

I cleaned up the PR so that font awesome is used from CDN

This is not so urgent that we have to do it today. Basically it looks quite good, but there are some things that we most likely want still to improve.

https://github.com/AndBible/andbible.github.io/pull/3

If you or anyone wants to improve it, please base your work (and make your pull request) towards this branch https://github.com/AndBible/andbible.github.io/tree/improve/webpage_upgrade

BryceSteuer commented 3 years ago

@tuomas2 I had seen at one point about a year ago that installs from Google Play was "120,000+", and I know there are many more installs from other platforms. I think I should add a "+" after each number to indicate that is the least amount suspected. i.e. 150,000+ users 700+ languages, etc.

BryceSteuer commented 3 years ago

Another minor issue is the .ico file showing up in the title. It is not transparent. View from in tab: image

Then view from out of tab image

I tried convert ico to svg, but it ends up distorting the image because of the gradients.

BryceSteuer commented 3 years ago

"but there are some things that we most likely want still to improve."

Anyone want to say what else might need improvement? Any input would be valuable.

agrogers commented 3 years ago

I haven't had a chance to look at it yet. Will let you know when I have.

On Sat, 11 Sep 2021, 4:49 am Bryce Steuer, @.***> wrote:

"but there are some things that we most likely want still to improve."

Anyone want to say what else might need improvement? Any input would be valuable.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AndBible/and-bible/issues/1608#issuecomment-917132840, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKGTJRKBBHO5GMMGVTMDTDUBJHMJANCNFSM5CQTO73A .

BryceSteuer commented 3 years ago

Should I just pr now then? Or have you not seen it yet?

agrogers commented 3 years ago

Sorry Bryce. I still haven't got to it yet. I have not had much time for AB over the last couple of weeks. I will have a look at it tonight after work.

www.TenOutOfTen.org https://www.TenOutOfTen.org @.*** (+61) 0477 174 193 (Australia) (+95) 09 250018669 (Myanmar)

On Wed, 22 Sept 2021 at 07:23, Bryce Steuer @.***> wrote:

Should I just pr now then? Or have you not seen it yet?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AndBible/and-bible/issues/1608#issuecomment-924395112, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKGTJXJRPPJH2FLGKLEJLTUDDZT3ANCNFSM5CQTO73A .

agrogers commented 3 years ago

Hi Bryce. Managed to get it on my PC tonight. I am still finding my way around Github as well. A few things I noticed. I will include images below for these things. Maybe it looks different on your system?

  1. The header doesn't work so well on a mobile device. Did you use the Chrome option to view it as though it is on a mobile? That is where I can see the issue. The solution is probably to make the header font smaller on different devices. I have done a lot of Wordpress but very little raw webpage design. But it looks like you have some media css entries so you are half way there.
  2. The subtitle probably needs some work as well. Too large again.
  3. What happens to the 'Discover' sidebar on smaller screens? It seemed to just disappear for me.
  4. It looked like the Discover sidebar has almost the same functionality as the round buttons along the bottom. I like those images - perhaps the icon inside could be a little bigger. Just add a font-size of say 20px to the icon.
  5. I feel like those bottom icons could replace the rectangular buttons in the sidebar. And possibly just include the text under the circular icon.
  6. When i hover over the menu options at the top something changes which causes the text to move slightly. Text shouldnt move when hovering i dont think.
  7. The new videos are available now. So you could link to those.
  8. Might be nice to also link directly to more than 1 video or playlist.
  9. The old screenshots probably need to go. I have some new ones but not here on this computer. There are lots of videos in the Drive folder i gave you a link to. You can grab screenshots from those videos as well.
  10. It would be nice if the screenshots worked like a gallery where we could click on them and see them in bigger format. I have no idea how to do that outside of Wordpress (or Joomla). I guess it would need a JS library or something. Not so important for desktop viewing but they are very small for mobile devices.
  11. I would only show 3 or at most 4 of the same type of screenshot. So 3 colors, 3 fonts, 3 maps etc would be enough.
  12. The official title is now "Bible Study App". I guess we should have that as the main heading.
  13. The tag line i have been using is "The only study Bible you need." Might be good to include it.
  14. You could reduce the "By And Bible Open Source Project" text size quite a lot. It should stay at the top though so people see it.
  15. I would probably increase the line-height to 1.7em. Feels a bit better to me.
  16. The black dots between the menu items might look better in white. Perhaps just as a vertical bar?
  17. I like the counters at the top. Can you put a comma in the larger numbers? eg 1,800 not 1800
  18. The "Study the Bible...." at the top could be centered

Ok, there are some thoughts for you. Well done on getting that together. Not easy building these things from scratch. Like I said, i have never done that before!

image image image