Progressive disclosure widgets for very long pages

I'm facing this challenge with my personal portfolio: how to make a long case study more user friendly to compensate for too much content that causes a lot of horizontal scrolling.

Current website prototype: https://daniel-portfolio.netlify.com/case/blacktrax-website

I tried this:

  • Reducing text - Worked for some sections, but ended up cutting details important to the case, despite my case having half the height size of Simon Pan's Uber's case study.
  • Reducing white space is still being worked, but I don't want to reach a point which I need to sacrifice presentation. My design Goal is to create something between Simon Pan's long form model and a marketing landing page.
  • Replacing images for videos (working in progress in some sections)
  • Progressive disclosure

In the case of progressive disclosure I would like to know your opinion on these widgets and their usability:

Bootstrap 4 http://getbootstrap.com/docs/3.3/css/#tables-contextual-classes enter image description here


Smartisan OS https://www.smartisan.com/os/#/powerful enter image description here


Smartisan OS-6 https://www.smartisan.com/os/#/6-x

enter image description here

Note: It seems that they are turned off for mobile on these websites Also, if there is documented research on those types of widgets?

Tags: