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

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

One of the my ideas is to use another navigation layer for case study subsections. Either as a side navigation or a top nav sub-navigation.

References: 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

closed as unclear what you're asking by RobbyReindeer, Ken Mohnkern, locationunknown, Shreyas Tripathy, Devin Nov 29 '18 at 22:00

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Can you elaborate on the horizontal scrolling problem? Because I don’t understand how the widgets above solve this. – jazZRo Nov 26 '18 at 7:38
  • It's quite hard to extract exactly what it is you're asking. – RobbyReindeer Nov 26 '18 at 14:50
  • It's actually vertical scrolling (typo). The idea of the widget is to make main sections of the case (Discovery - Research - Design - Outcome) more accessible if the reader wants to jump to a specific section. I would also allow the reader to get an idea of how many sections they still need to go through until the case is done. – Daniel Vianna Nov 26 '18 at 20:04
  • So, are you asking whether document outline is a good solution to help user manage long pages? developer.mozilla.org/en-US/docs/Web/Guide/HTML/… If so, please edit your post to contain the question. – locationunknown Nov 27 '18 at 6:32

I think you can solve your problem improving typography and separating your text in smaller paragraphs. As you can see in http://simonpan.com/work/uber, there is a lot of text, but it is so well organized that it is easy to read. You could use a bigger font size, and insert some quote phrases between longer paragraphs, like in this image from the same page:

enter image description here

  • That will certainly help. But I will still have a lot of scrolling. Question: when you read his case, did you actually read the whole thing from beginning to end like you were reading a book or did you scan the page? – Daniel Vianna Nov 27 '18 at 4:02
  • 1
    I scanned the page, and read the parts that caught my attention, like the titles, quotes, and enumerated lists. About the scrolling, It can get tiresome, but if you keep the content interesting, avoiding repetition, adding some animations, keeping the user intriged about what comes next, I'm sure they will at least scan the whole page. – Aline Nov 27 '18 at 11:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.