View Single Post
  #1  
Old Feb 16, 2019, 07:31 PM
Jorge24 Jorge24 is offline
Junior Member
 
Join Date: Sep 2013
Posts: 6
Exclamation 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.
Reply With Quote