We're currently designing a portfolio website. On the front page, we have a navigation which takes the user to Home, Work, Information, Blog. On this front page, we'd also have a series of images showcasing the latest projects, presented chronologically like a blog.

The Work page would have a very long list of projects for the user to view. (Up to 30). We anticipate the user will be using this Work page as a central navigation to view different projects pages. Would such a central page be best as an JavaScript overlay, or as a separate HTML page altogether?

  • There's no one right answer to this. It depends on too many particulars of your specific solution. That said, if you go with overlays, be sure they work comfortably on touch screen devices (many do not).
    – DA01
    Aug 27, 2013 at 17:54
  • 1
    Javascript is part of the implementation. Some developers may prefer overlays to be implemented using CSS. By "Javascript Overlay", do you mean an "overlay"?
    – Izhaki
    Aug 27, 2013 at 20:50

3 Answers 3


If you expect the user to explore many projects then the back and forthe of having different pages would offer a very disconnected experience. I think you can keep the user on the same page, and have persistant navigation (of project list) to allow them to switch the projects easily.

Also, overlay is just one option, it could also be displayed within the layout transitioning to a different one. For example, have a look at this and click on one of the results. You'll see the map growing and taking up more space to display details and the layout changing to allow for the rest of the listing to still be accessed. Scrolling is designed to respond to this.

  • Yeah, we feel it could be a bit of a disconnect. We're going to have a link underneath each project, for < Previous and Next >. Another simple option for the user to scroll through the projects.
    – tmyie
    Aug 27, 2013 at 18:17
  • "explore many projects then the back and forthe" the converse of that, though, is that if they are all overlays, I may not be able to quickly pop them all into individual tabs.
    – DA01
    Sep 26, 2013 at 22:13

If I understand the term "Javascript Overlay" correctly (a modal overlay) then it would be interesting to see any arguments for such a practice. Just to make sure I get this right, what will trigger the showing of the overlay?

An overlay typically has strong link to the parent page and follows a user journey with a Parent > Child > Parent flow.


Overlay may be appropriate when:

  • You need to grab the user attention.
  • You want to focus the user on a particular item.
  • It will be beneficial for users to see parts of the parent window.
  • When a quick user action is needed followed by quick return to the parent page, but the action requires additional information that may be too much for the parent page.

Cons of modal overlays

  • Confusing Back Behaviour - users may thing that back will take them back to the parent window.
  • No Browser Bookmarking

Given that in your case it is a central navigation page, users may wish to bookmark it.

Perhaps you should consider having the list of projects as a side bar, or as a menu item. But I would say that an overlay for such a key page in the application is not a standard.

  • With model overlays you can really see much of the parent page, if the use does want info from the parent page or perhaps to view the details of multiple children, the user needs an ability to Ctrl+Click (or mobile long click) to open details in a new tab. Oct 27, 2013 at 8:57

My thought is that 30 items lends itself to its own page. Perhaps in a year you will have 60 or more such projects, so maybe this list is expected to grow, or be pruned back to stay at 30 items. In either case, I think it deserves full-page treatment.

For a portfolio, your work should have salience. It's the primary reason for even having a portfolio site.

The full-page directory of projects also provides order to the collection by allowing you to present a thumbnail or small gallery for each project, some descriptive text, and a title, which might be harder to do in an overlay without getting crowded.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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