|
#1
|
|||
|
|||
Blank Space (gap) between tracklist and notes section
I noticed a small UI issue in several album sites such as:
https://vgmdb.net/album/18604 https://vgmdb.net/album/22630 There is a large gap between the Tracklist section and the Notes section. Depending the size of your screen or window, the notes section might be pushed down so much that it's easy to confuse the user into thinking that there is not a notes section. UPDATE: Added more pictures that show the issue and some pics of my suggestion: https://imgur.com/a/ClI3Pb9 The first 3 pics show the current style VGMdb uses that creates the gap that breaks the user's reading flow. The last 4th and 5th picture show what my suggestion would look like to fix the reading gap while keeping the site aesthetically pleasing. This gap not only looks weird but it breaks the reading flow of the website. For the web developer of VGMdb: From what I can see, the gap occurs because in the HTML, the Tracklist td uses valign="top" and the Notes section uses valign="bottom So when the right column (where you can find the sections for Related Albums, Covers, Stats, etc) is vertically longer than the tracklist, the entire site gets longer vertically. Since Notes section is aligned to the bottom, it gets pushed down all the way down until it reaches the same point as the bottom of the right column. After changing alignment of the Notes td to "top", the height value of the Tracklist td must also be changed to 100% so that the Notes section has room to move up. Finally you can change the Notes div top padding to 30px if you want to increase the space between the Tracklist and Notes a little bit. Hope that helps, Jorge Last edited by Jorge24; Feb 17, 2019 at 03:41 PM. |
#2
|
||||
|
||||
if you don't have that between tracklist and notes, you will get it between notes and footer
and it could look uglier like a lot of internet sites that have few articles with a long menu beside Last edited by Phonograph; Feb 19, 2019 at 05:57 AM. |
#3
|
|||
|
|||
I see what you mean but look at the difference
Here is a screenshot of what it would look like with my changes:
https://imgur.com/D3yusRw https://imgur.com/IPiXs0r Here is what it looks like currently: https://imgur.com/JtJquZh https://imgur.com/R44EgnG Do you still think it looks better as it is right now? I think the gap between tracklist and notes breaks the reading flow of the user. However, a gap between Notes and footer doesn't affect the reading flow because there isn't anything to read there. I think the webpage is more aesthetically pleasing after my changes too if you extend the background color of the notes section like I did in the screenshot above. Don't you agree? P.S. I know I didn't add the rounded corners to the notes section in my suggestion screenshot but adding so should not be a problem. For the devs: to extend the background color of the notes section until the footer you have to: go to the div in the Notes section that has the background color #2F364F and in the CSS write "height:96.5%" Then go to tbody and in the CSS write "height:100%" Last edited by Jorge24; Feb 17, 2019 at 03:13 PM. |
#4
|
||||
|
||||
Thanks for the suggestions. I moved the notes up, and removed the lighter background color entirely. Let me know what you think.
Edit: restored the background color after some preliminary feedback. |
#5
|
|||
|
|||
Looks awesome, thank you! I think removing the background color entirely might look good and would certainly improve the contrast between the font and the BG color although then other parts of the site would have to be changed if you want to keep it consistent.
Where I think the album page could really improve is in maximizing the use of space. Due to the nature of the type of information there are many areas of empty space. This type of info (tracklist, Album specs, stats, etc) is very vertical (tall and narrow), however, the section boxes are mostly wide so the info doesn't fit very efficiently. Here is a pic to show what I mean. The read areas are wasted space and the green ones where stuff could go. https://imgur.com/TLbj2Xr As you see in the pic, maybe there could be 2 columns in the right sidebar instead of just one (that the quick fix). A better option (thought it may require more work) is to shorten the album info area where the Catalog Number & Release Date and add another section next to it. Maybe you could have Album Info on the left and Album Stats right next to it. Same goes for the tracklist and notes sections. You could have the Album Covers next to Notes and the related albums next to Tracks (just an example). With fewer sections on the sidebar there would be less scrolling and it would look neater when you dont have a long narrow section of content that keeps extending way beyond the Notes section (in some cases). By reducing the width of the tracklist section, it will also be easier to see which track length belongs to which track. Of course, there has to be balance so it won't look cluttered (maybe limit of 2 sections per row?) but it would certainly improve the user experience. That way there would also be more room for sidebars to do what they are good at doing: navigation and shortcuts rather than to display information. For example, having the ability to add or remove albums to your collection right there from the sidebar (without jumping to another page, like how you add items to a wishlist in Amazon) would be really good use of the sidebar. Same goes for being able to add and remove from wishlist from the sidebar. Maybe the sidebar could let you add albums to different groups within your wishlist such as "to buy soon" or "to buy later" or "to check out later (for albums that look interesting but you haven't listened to yet)" Last edited by Jorge24; Feb 18, 2019 at 07:01 AM. |
#6
|
||||
|
||||
The current design of vgmdb is essentially optimized for a width of around 1024px. With 2543px (that's an odd number) you are using far above Full HD width in your screenshots, so of course there's bound to be underutilized space (I'd personally suggest to zoom in honestly). One comparably easy CSS fix that is to have the boxes set as inline-blocks that can line up horizontally sufficient horizontal space permitting.
|
#7
|
||||
|
||||
Quote:
On my wishlist for forever would be to make the Notes section use a monospace font. It would make readability much better and it would allow people to more easily align elements if they try to match the insert formatting (which I have all but stopped trying to do for a few years because of this). |
#8
|
||||
|
||||
Quote:
Otherwise, this new update to show notes earlier looks good.
__________________
vgmdb - serious business, only.
|
Tags |
gui, interface, site |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
SRCL-5026: Space Venus starring Morning Musume Original Soundtrack Space Lagoon Passp | CyberSkull | Album Discussions | 0 | Apr 29, 2016 04:14 PM |
Section 8 Original Soundtrack Recording | Myrkul | Album Discussions | 0 | Feb 18, 2012 11:26 AM |
Default Tracklist | Xenofan 29A | Questions and Comments | 2 | Nov 17, 2010 12:21 PM |
New Section on Album Pages | Secret Squirrel | News and Announcements | 17 | Nov 27, 2009 07:24 AM |
Tracklist (translations?) | Aero-R | Questions and Comments | 2 | Feb 25, 2009 05:58 AM |