RP Photonics Website: Redesigned for Less Scrolling, Better Orientation, More to Discover

Until recently, every encyclopedia article began with a box holding everything one might want to know about the article: its definition, its category, the concept tree showing where the topic sits among its neighbors, the related topics, the DOI and the citation buttons. Each item was useful. Together they had an unfortunate effect — on a typical screen, the first section of an article began roughly a screenful below the title. A similar problem occurred in our Buyer's Guide pages on product categories.

All of that has moved into a new sidebar — a narrow column at the left of the text. It holds the table of contents, which marks the section you are reading and opens up its subsections as you reach them; the concept tree, showing where a topic sits among more general and more specific ones — the trees introduced in an earlier article; the related topics; and, at the foot of the panel, the DOI and citation code, out of the way but always within reach.

Above the text there now remains only what identifies the article: the title, the author, the definition and the category. The first section of an article such as lasers now begins about 340 pixels down instead of about 900, and a Buyer's Guide page reaches its supplier logos after about 330 pixels instead of 770. You arrive at the content instead of scrolling past its description.

The sidebar has a second purpose, and for me it is the more interesting one. While you read, it keeps showing you what lies around the topic — the neighbouring concepts in the tree, the related articles — so that following a thread is one glance and one click away rather than a new search.

That matters because the encyclopedia is only part of what is here. There are tutorials running over ten or more parts, on fiber amplifiers, passive fiber optics, modeling and pulse amplification; there are case studies working through concrete problems quantitatively; there is this Spotlight series; and there is the Buyer's Guide with its expert-curated supplier lists and its own buyer-oriented technical background sections. All of them now carry the same navigation. A tutorial part, for instance, shows the full list of parts in its sidebar, so you always see where you are in the whole and can jump to any other part.

If you have only ever used the encyclopedia, the new sidebar is a good way to notice the rest.

Our pages use what is called responsive design: the same page has to work on a small or wide desktop monitor, on a notebook, on a tablet held either way, and on a phone — screens differing a lot in width. The navigation therefore takes three forms:

• on a sufficiently wide window, a sidebar column beside the text
• when space is insufficient for the sidebar, a narrow rail at the left edge, carrying a small map of the article with one mark per section and the current one highlighted; touching or clicking it opens the panel over the text, so that the text itself never jumps
• on a phone, a bar at the top of the page, where it is out of the way of your thumb

You can also set the width of the panel yourself by dragging its right-hand edge, and your choice is remembered on your next visit.

Getting this right took more work than one might expect, and a few of the problems may be worth mentioning, since they show what such a redesign really involves.

Line length. Text is hard to read when the lines are too long — around 60 to 75 characters is comfortable. On a wide screen, some of our pages ran to about 140 characters per line. So the layout now protects a minimum line length, and it is stated in characters rather than in pixels, so that the rule keeps its meaning if the type size is ever changed. The sidebar may take space only as long as that minimum is kept.

Nothing that flickers. The width at which each element gives way is calculated from that same minimum rather than chosen by eye. Before we did that, slowly narrowing a window made the sidebar collapse and reappear more than once — the kind of restlessness that is hard to name but easy to feel.

Nothing lost. The material that moved had to remain reachable: the citation code and the DOI are still on every article, the concept trees are still complete, and printing a page still produces the whole of it, without the navigation.

Every page type. Encyclopedia articles, Buyer's Guide pages, tutorials, case studies, blog postings, and the software and consulting pages each had their own arrangement. They now share one, which is what makes the site feel of a piece rather than a collection of parts — and each of them was checked at a range of window widths, from a wide monitor down to a phone.

The changes are visible throughout the website, and I would be glad to hear how they work for you: whether the sidebar helps you find your way through longer articles, whether it leads you to material you would not otherwise have found, and whether anything has become harder to reach. Feedback is always welcome, be it through our contact page or e.g. as a LinkedIn message.