v2.ocaml.org
v2.ocaml.org copied to clipboard
ocaml
Aligning Videos section of Learn page horizontally instead of vertically to make page more beautiful
https://user-images.githubusercontent.com/57635473/113746519-0ac17700-9724-11eb-8773-b25b0e5cd26c.mp4
We can make 'Online Courses, Slides & Videos', 'Industrial Users' and 'Success Stories' sections horizontal. So that page looks more spacious and beautiful. We can take the reference of the 'Documentation page' where the 'videos' section is aligned horizontally. I have attached the video of both pages to have a look at this. @patricoferris
How does the top of the site look like when aligning the videos horizontally?
The page stucture we currently have :
Now here with diagrams I have proposed a solution to avoid clusttering on the page
We can use sliders and align everything horizontally. Kindly have a look on the proposed solution diagram.
If I understand correctly, you've made one category per block. Is that right? Why have you drafted several blocks when "Code example" is selected? What would be the other blocks? And similar for "Tutorials and FaQ"?
oh my bad, Don't care about other blocks. Also, I wanted to show you that there is total of six sections on the learn page.
Here is the link for reference: https://www.ocaml.org/learn/
Now all sections can be displayed as a menu using sliders like the image below:
when the user wants to access the contents of any section he/she will click on that section and the content will render as shown in the below pic:(For the time being, ignore two blocks of code examples as it will be one block only and the same goes for tutorials and faq)
similarly, when the user clicks on the videos section all videos will be shown horizontally.
Don't worry about code examples and tutorials and FAQ as they will render one block only after clicking.
@shreyaswikriti these are some interesting ideas (and very excellently displayed).
I think this more interactive home page is going to be pretty difficult to implement for our site (it is very static) and we're not using a lot of Javascript either so that makes it a little harder too!
We can make 'Online Courses, Slides & Videos', 'Industrial Users' and 'Success Stories' sections horizontal.
The idea of having the sections horizontal could work, or perhaps we could just make the videos horizontal and the Industrial Users and Success Stories could be vertical, because I completely agree that it feels quite squished on smaller displays. What do you think?
I think this more interactive home page is going to be pretty difficult to implement for our site (it is very static) and we're not using a lot of Javascript either so that makes it a little harder too!
If that's the case then we can make the last three sections horizontal.
The idea of having the sections horizontal could work, or perhaps we could just make the videos horizontal and the Industrial Users and Success Stories could be vertical because I completely agree that it feels quite squished on smaller displays. What do you think?
I think it would be better if all the last three sections will be made horizontal and I don't think this will create an issue for smaller displays. Even on the documentation page, the videos section has been made horizontal and that's looking much better.Here is the link for reference: link We can follow a similar procedure for Learn page too.
@patricoferris, If this is fine I would like to work on this.
@shreyaswikriti All 6 sections are vertical at the moment (code, tutorials etc) so it'd be a bit weird if only the last three sections (videos, sucess stories etc) are horizontal in my opinion. Happy to hear your thoughts on this!
Hi @gs0510 actually I was also thinking about the same idea so I would like to put up some points here. I believe that it doesn't matter because the section (including code examples, tutorials, books) as a whole is horizontally aligned.
So the section (including industrial users, videos, and stories) will be horizontally aligned in a block.
We can add some light background color to show the difference between blocks like this-
I hope you are getting what I'm trying to say. This way we can manage the space equally also.
@gs0510, In the documentation page, the videos section is aligned horizontally and I am proposing to use this idea because the Doc page is looking better than learn where all sections are cluttered. Here I am attaching both page's links to see the difference. Learn page Documentation page