Make better use of horizontal space

[jacobthill]

As a DLME user I would like larger breakpoints so that when I view the DLME app on my widescreen monitor it is more visually appealing.

On wider screens there is a lot of empty horizontal space

Consider adopting the latest Bootstrap breakpoints.

[ggeisler]

I believe we have two main options here.

Option 1 - Migrate to Bootstrap 5

This will give us BS5's additional xxl breakpoint of 1400px. It would require considerable work than Option 2 below, and realistically should be done in Spotlight, which might also require some work in Stanford Exhibits to ensure everything looks good there after the upgrade. But this option also benefits the entire Spotlight community (including Stanford Exhibits) rather than just DLME.

Option 2 - Add a new, wider breakpoint to DLME

This is likely a much simpler option, although it only benefits DLME. We would add a new breakpoint to DLME that will provide users who have wide viewports with more (or sometimes, larger) content horizontally compared to the current maximum viewport in DLME. If we pursue this option, I suggest we use 1400px as the new breakpoint, to match the widest breakpoint added in BS5. That might make any customization we do invisible to existing DLME users when we do eventually migrate to BS5. I’m also not sure there is much value to going any wider with the new breakpoint; a wider value will create very long text lines on the home and about pages, and might require much more customization work if we wanted to add additional columns for tiles on the home, browse landing page, and search results gallery view pages.

Customization details

Whichever option we go with, much of the DLME site should just work with the wider content area. Assuming that with whatever option we use the new breakpoint is 1400px, that gives us a new max-width container of 1320px, up from our current max of 1140px (which is what the current 1200px xl breakpoint gives us). Page elements will have more width to utilize, but usually that won't require any specific updates (e.g., paragraph text will just flow wider before breaking to a new line, but we don't have to do anything for that to happen). As noted below, there might be a few elements that need specific adjusting (e.g., through a media query). Here's a screenshot of the homepage with a 1400px breakpoint and the resulting 1320px content area:

Below are my thoughts on how each page on the DLME site would be affected by a 1400px breakpoint. There will probably be additional details to work out, but that'll be easier to do when the work is underway.

Global

• Sidebars will now have additional space for their content. Sidebars should now be ~330px wide, minus the usual 15px padding on either side.
• The main content area of pages with sidebars will be wider. The #content area on pages with a sidebar should now be ~990px, minus the usual 15px padding on either side. This will enable content area elements like browse category tiles and gallery view result item tiles to be wider, and text paragraphs to be wider.

Home

• To take advantage of the wider content area, I suggest we increase the width of the browse category thumbnails in this breakpoint to 290px wide (and thus I think ~217.5px height).

Explore landing page

• To take advantage of the wider content area, the browse category tiles should be larger in this breakpoint, but I believe they might resize to fill the space automatically. In any case, the tiles should be proportionally larger, to more or less have the same whitespace between them as they currently do.

Search results, Browse category details page, Item details page, About pages

• I don’t think any element-specific changes are needed to these pages. Their content should just flow to take advantage of the wider content area.

Statistics page

• Again, I don’t think any page-specific changes are needed; the tables will just be wider with more room for the data on each row.
• We could use the extra width to put the Data Contributors and Item Contributors tables side-by-side, similar to the two Items tables below them, but many of the Institution and Countries values in those tables will then wrap to two lines, so I don’t think it is worth it.

[mwerla]

@ggeisler Thanks for all the ideas. Few comments from my side:

• Option 1 vs Option 2 - I would prefer Option 1 (Migrate to Bootstrap 5) as more sustainable in the long term and beneficial for the broader community. But if it will be not feasible for the duration of this development cycle, Option 2 (adding new breakpoint) is acceptable as well.
• New breakpoint at 1400 - I checked the DLME usage data in GA from the 1st of November till yesterday.

It seems that around 12% of users have screen resolution significantly higher than 1400, and that is mostly 1920px.

I was trying to find good examples of pages that look like search results with thumbnails and utilize bigger resolutions. On Amazon, the search results are utilizing full width, but more static content sections are limited to around 1500px area:

Polish National Digital Library is also utilizing full width of the screen, but the space for search results thumbnails is limited to slightly more than 1500px:

[mwerla]

So, to sum up, I would like to get your thoughts about the two alternatives of what we could do in addition to upgrading 1200px breakpoint to 1400px breakpoint:

• We add 1920px breakpoint with dedicated design
• We add "anything above 1440px" option where we introduce different styling only on pages where it is really beneficial to utilize full-screen width.

We could also combine both approaches, and make 1920px breakpoint design plus utilize full-screen with where justified.

And where the full-screen width use would be justified? I think the main affected page could be the content view:

[mwerla]

@ggeisler Regarding your ideas of changes that could be made on different pages types, in general I agree, besides the extra idea of full-width (or almost full-width) utilization on the item page that I described above.

[jacobthill]

@ggeisler do you have thoughts on implementing one larger break point for DLME to cover users above 1400px?

[ggeisler]

@jacobthill I'm still working my way through the issues I've been tagged on recently. I haven't forgotten anything. I just have to balance this work with other work and outages. I hope to get to everything remaining by the end of the week.

[jacobthill]

@ggeisler ok thank you

[ggeisler]

@mwerla @jacobthill I appreciate the ideas and examples @mwerla posted above, but I am struggling to see how it really adds value to worry about doing anything beyond the already proposed 1440px breakpoint.

Any page on the site where we have text, that text will have to be constrained in width for readability purposes. We'll probably have to do this with the new 1440px breakpoint already, and we would certainly have to do that for any new breakpoint larger than 1440px. So I worry about pages like the homepage, where theoretically adding one more visible tile to the sliders would be nice, but also might look odd since we'd have to constrain the width of the intro text above them for readability.

Basically I agree with @mwerla's last comment above that I believe essentially says the item page is only page worth considering doing something. However, even there I'm not sure it is worth explicitly adding a new, extra-large breakpoint.

I say this because we'll have to constrain the width of the text elements (e.g. in @mwerla's example above, the Description value is much too long; if the title of that item was longer we'd have to do the same thing with it). So it's really just about giving the user with a very wide browser the ability to take advantage of that width and see more of the image in the Mirador viewer. I agree this would be a very good thing. But that user can already do that by using the full-screen icon in the viewer. For example, here I used the viewer's full-screen feature with DLME on my external monitor and I get a great, wide view of the item, 2560px wide:

In other words, the main place a user with a wide browser window would benefit from DLME utilizing the full width of that browser is when looking at a IIIF image in the viewer. And we already support that through Mirador's full-screen feature. So do we really want to dedicate developer effort towards doing anything else related to a breakpoint wider than 1440px?

[mwerla]

Hi @ggeisler. I agree, with the full-screen view in Mirador, the benefits would be really minimal compared to the effort needed. So I'd say - let's do the 1440px only.

[marlo-longley]

Leaving this update as of 3/3/2022. We reviewed the new breakpoint via #1507 but ultimately decided not to ship this until we update to Bootstrap 5. @ggeisler made some comments about the new breakpoint that I am pasting here:

Overall, the new breakpoint works well. Facets are a bit wider (nice for the Date range facet, in particular), more space for the tables on the Contributors page, and the Explore landing pages adjust well (tiles expand to maintain small gutters). I noticed only three areas of concern:

• As discussed, the homepage tiles don’t scale at the wider breakpoint, so they have unpleasantly large gutters. I’d suggest we could live with this if Marcin is okay with it.

• We probably will need to limit long line lengths, because they do get long at this breakpoint. However, this is pretty minor. I think we can ignore the long lines in the homepage intro paragraph (limiting it throws off the balance of things and creates a distracting “hole” at the top-right of the page). The text occurrences I think do need adjusting are the metadata fields in the item detail view and the text on the About pages. I can make a PR for those myself so no extra developer time would be needed to deal with this.

• [number of columns per row issue that was fixed via Blacklight PR]

[corylown]

Jacob checked with Wayne and we can postpone this work until Spotlight is updated to use bootstrap 5. Does not need to be completed in the Spring 2023 work cycle.