Platform selection mechanism on documentation website
I am working on a website that hosts technical documentation. Some pages have sections of content that are specific to certain host operating systems, hardware configurations, etc. In total there are currently two or three options, each with three or four potential values (e.g. "Operating System" might have "Windows", "Mac OS" and "Linux"). I am currently attempting to figure out where the selection control should go and how it should operate on both PC and mobile.
Each page has some sections that are platform-dependent and some that are not. So, one of the options is to have tabs on each section and make that section visually distinct from the rest of the content. Presumably, clicking the tab on one section would change all the other sections as well. The problem I see here is that small sections of content that changes will lead to odd-looking tab areas, and having subsections that differ based on multiple separate options will end up with nested tab areas that look weird.
download bmml source – Wireframes created with Balsamiq Mockups
Note that there would likely be multiple of those tabbed sections scattered throughout the page; there may only be one, or there could be three or four.
The alternative is page-wide selection. I could have a control in the header or otherwise at the top of the page that changes the content of the page in-place, and not differentiate between platform-specific and generic content. This would essentially make it seem like there were multiple versions of the page. With this model, I would need to figure out a few specifics: I need to find an easy-to-use control that is noticeable and obvious yet small enough to hold all the option items while not taking up too much page space. I also would need to adapt this UI for mobile, which might be difficult as it needs to be easily visible without taking up the whole screen.
Note that in this mockup, the body of controls at the top might actually be expanded from a dropdown, and could be in the nav bar instead of below the page title. The idea here is that there is a set of controls at the top, and the combination of options selected changes the content on the rest of the page.
What is the most natural and easy-to-use mechanism to have here? Would the clarity of tabs outweigh their clunkiness, or would some sort of global option be best? Or maybe there is a different possibility? One of the big problems that I am struggling with is how to keep the controls usable in a small window or on mobile.