Redesign the single episode page
swilgosz opened this issue · 22 comments
Overview
We need to redesign the episode page to better present all the elements of the episode.
Elements of the episode:
- Youtube Embed Video
- title
- Content
- Special Thanks component
- Sponsoring button
- Newsletter subscription
- Episode metadata: CreatedAt - Tags - Author
- Resources, important links, Source Code github Link
- Notes (code snippets)
- Social Sharing icons (floating?)
- Consider the floating table of contents.
Suggestions
I've thought about having different views:
- Notes, where you hide content, and only list code snippets.
- Text, where you show the full, text content.
- Video should be placed on top of the screen if it's added to an episode
- Cover image should be placed on top in case there is no video attached.
Acceptance criteria:
- Use material-ui comonents
- Use existing fonts and colors or suggest complete sets of colors/google-fonts to replace all on the page.
- Mobile/Tablet/desktop screens.
Resources:
Finally got to work on some of the requirements here. but will look at other requirements again. wanted to upload some part for you to look at. Any comments please feel free to add as well :-). https://www.figma.com/file/oqXt7Zs22iQuOjq5hhoruc/Hanami-Wireframe?node-id=407%3A35
Youtube Embed Video
title
Content
Special Thanks component
Sponsoring button
Newsletter subscription
I've added
Episode metadata: CreatedAt - Tags - Author
Consider the floating table of contents.
Social Sharing icons (floating?)
Resources, important links, Source Code github Link
Notes (code snippets)
here are the comments of where each point is located.
I'll try to come back to where floating could be again.
keep you updated again.
feel free to take a look at the new update from this link here https://www.figma.com/file/oqXt7Zs22iQuOjq5hhoruc/Hanami-Wireframe?node-id=430%3A3
@armgit5 Thank you! I love the progress and added some comments. I'd love you to not focus too much on the home page for now, the single episode page is the most priority :). But thanks for the idea of the landing page's newsletter section, appreciated!
Thank you for your comments on figma file as well :-) I'll take a look at the comments and focus more on the single episode page :-) will get back to you more again...
I've tried to make a few changes on Blog articles, codes and comments sections here
feel free to take a look or give some suggestions via this link :-) https://www.figma.com/file/oqXt7Zs22iQuOjq5hhoruc/Hanami-Wireframe?node-id=407%3A35
will check on all feedbacks and will come back to you :-)
I've fixed the video to show on every sections and fixed the article's meta information on all sections.
I was wondering to move the sharing buttons on the left side so it'd give more space for ads and sponsors on the right hand side.... what do you think about it.
@armgit5 don't bother with sharing buttons too much - I'll definitely use the ready-to-use plugin for sharing :). But yes, buttons on the left side are much better, this is also how it's done ATM.
Thank you!
that sounds good @swilgosz :-) please let me know if there is anything or any other comments as well :-)
I'll try to think about responsive look on mobile devices for the blog as well. will get back to you again :-)
just came up with a responsive design. wanted to see what you think about it.... any suggestions or comments please let me know :-)
@armgit5 thank you, it looks great! The only thing I'd change is the rails tag. Not sure what was your idea, but episodes may have multiple tags. I'm not even sure if I'd like to display them on mobile. (maybe some kind of toggle list, or display them at thebottom of the article).
I'll take a look at and revert back to you :-)
I've just been looking around and got some ideas.
- have just tried to compare with medium article and I saw some tags on the bottom of the article and just decided to make tag into collapsible...
- or would you like to move a tag collapsible underneath article, codes, and comments buttons like this...
Hey, tags in the bottom seem more natural to me. I don't want users to see tags in the first place, but rather the content:)
got it, I will the bottom tags collapsible on the design then :-) please let me know if there is anything else I can help or any other ideas as well... :-)
I think this concept is pretty much ready, now I am concerned mostly how to impement it or find the one willing to do it:)
Thank you for all your help!
It's definitely my pleasure :-) Cannot wait until how the website will look like now :-) Please still feel free to let me know if there is anything you'd still like to change or add in the future as well :-)
Thank you!
@armgit5 I'd call it done! I took a lot of inspirations from your design when implementing my current single episode/article view in https://hanamimastery.com !
It just takes time and I'm applying your ideas one after the other, adjusting whenever requirements change a bit.
- Tag cloud at the bottom of the episode
- Code & Notes view
Those will appear on the website in the future.
Thank you for all your help!