Responsive progressive disclosure for content website page (Long-form layout)

by Daniel Vianna   Last Updated January 31, 2018 22:16 PM

I'm currently designing my own portfolio using the long-form layout (similar to Simon Pan). I am adding a disclosure widget to ease the pain of scrolling too much, so the user can go specifically to a particular section. I created two versions for the mobile/tablet which the widget is located at the bottom and one for desktop which the widget is located on the right side. I would like to know if this is the best location to place the widget for the desktop version or if everything should be placed at the bottom?

I also haven't seen this pattern being used often for long-form layout. Apple used this in their approach with the Mac Pro micro-site but I don't know how successful this was - I know there were some complaints more related to the way they have done it (hacking the scrolling of the browser). Another solution that I've seen also used by apple is a "read more" button that pulls an overlay, but I'm not sure if this approach is also good for my case or whether I can apply to all sections that I have considering that the amount of content on my sections is not consistent.

Note: this is a prototype in Webflow and the final version will be more refined and coded from scratch Note: the mobile/tablet version is not ready yet so please check the screenshot

desktop version

enter image description here

Related Questions

Progressive disclosure widgets for very long pages

Updated November 26, 2018 00:16 AM

The value of "Show less"

Updated August 19, 2015 19:07 PM