VGMdb
Go Back   VGMdb Forums > VGMdb Site Related > Questions and Comments
Register FAQ Calendar Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Search this Thread Display Modes
  #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
  #2  
Old Feb 17, 2019, 01:41 AM
Phonograph's Avatar
Phonograph Phonograph is offline
Senior Member
 
Join Date: Jun 2010
Location: 5.342.482.337.666
Posts: 3,795
Default

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.
Reply With Quote
  #3  
Old Feb 17, 2019, 02:50 PM
Jorge24 Jorge24 is offline
Junior Member
 
Join Date: Sep 2013
Posts: 6
Default 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.
Reply With Quote
  #4  
Old Feb 17, 2019, 10:45 PM
Gigablah's Avatar
Gigablah Gigablah is offline
VGMdb Administrator
 
Join Date: May 2007
Posts: 2,397
Default

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.
Reply With Quote
  #5  
Old Feb 18, 2019, 06:57 AM
Jorge24 Jorge24 is offline
Junior Member
 
Join Date: Sep 2013
Posts: 6
Default

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.
Reply With Quote
  #6  
Old Feb 18, 2019, 09:04 AM
Datschge's Avatar
Datschge Datschge is offline
Trusted Editor
 
Join Date: Mar 2008
Posts: 700
Default

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.
Reply With Quote
  #7  
Old Feb 18, 2019, 01:53 PM
dancey's Avatar
dancey dancey is offline
Trusted Editor
 
Join Date: Dec 2007
Location: New Jersey
Posts: 1,255
Default

Quote:
Originally Posted by Datschge View Post
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.
I run 2560x1440x2 on my home PC and it is for this reason that I run my browser in half-width snap mode so it only takes up 1280x1440. If you don't want to zoom the page, just use Windows edge snapping by dragging the window to the corner to make it either 1x1 (one quadrant), 1x2 (two quadrant vertical).

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).
Reply With Quote
  #8  
Old Feb 18, 2019, 04:23 PM
Razakin's Avatar
Razakin Razakin is online now
Trusted Editor
 
Join Date: Sep 2007
Location: Hämeenlinna, Finland
Posts: 592
Default

Quote:
Originally Posted by dancey View Post
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).
Yes, this please.

Otherwise, this new update to show notes earlier looks good.
__________________
vgmdb - serious business, only.
Reply With Quote
Reply

Tags
gui, interface, site

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

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