Tidsskriftet - The Journal of the Norwegian Medical Association

Tidsskriftet's mission as a peer-reviewed scientific journal is to spread its content to its members and the international scientific community. To achieve this, Tidsskriftet needed a robust and flexible CMS that could handle advanced publication workflow with XML-import, displacement of tables and integration towards multiple scientific systems like Pubmed, DOI and Orcid. Tidsskriftet wanted to serve the complex content in a clean and carefully designed article template on desktop and mobile. 

For the administrative side of things, the editorial team should be able to use the platform intuitively without getting bogged down with traditional CMS’s structural limitations.
 

Requirements

• Import and streamline 50.000+ articles in XML-format from the pre-press agency database through API.
• Most content is imported using XML from the pre-press agency as scientific articles created in MS Word. Tidsskriftet needed to inputs articles directly in the editor.
• Create a single robust and speedy template with collapse functionality on mobiles for structured articles.
• Due to site-wide banners, Tidsskriftet did not want a fully fluid-responsive website, but two separate designs at different breakpoints - 980px and higher for large screens/tablets and a another specific design for mobiles.
• On-the-fly PDF-generation of the articles that can contain download-date
• XML-generation for data exchange with Pubmed (US.gov search service) and other scientific services like Crossref.
• Fine tunes-search
• Very SEO-friendly pages with low load speed, lazy-loaded ads, and schema-data for Google and Google Scholar
• “What you see is what you get” frontpage editing based on the creation of rows.

Goals and Outcomes

Ramsalt is a very competent web agency, able to do complex customization and a very stable website.
- Einar Ryvarden, Digital/Product manager at Tidsskriftet

An easy to use WYSIWYG-content editing experience - The Gutenberg editor

Back in 2016 when Tidsskriftet.no launched on Drupal 7, the best editorial experience to offer was to use CKEditor 4 in conjunction with multi-layered Paragraphs. But with the Drupal 9 upgrade, Ramsalt had a much better option to go with, Gutenberg.

While the Gutenberg editor integration with Drupal was in the early adaptation and infancy phase, Ramsalt joined forces with the Drupal community to fit this amazing editor into Drupal by diving deep into the Gutenberg core itself, allocating resources to fix, improve and integrate new features into the Drupal Gutenberg module.

With Ramsalt opting in for Gutenberg, there were lots of challenges to face, to name a few:

• Importing badly HTML markup content data into Gutenberg blocks
• Migrating previously created CKEditor/Paragraphs based Drupal 7 content into Gutenberg
• Making a custom in-house Swiss army knife of a landing page builder with Gutenberg

Advanced article navigation

Throughout the years, Ramsalt and Tidsskriftet have done a lot of UX development. A formal, full-fledged scientific article demands the display of a number of pieces of information that are not available in ordinary content/articles-templates. They are:

• Reference numbers in article-text and a reference list on the bottom of the article
• Article history: Submit date, accept date, issue date, publish date online and on older articles page-numbers
• Author-information (employer, short bio, conflict of interest statement, possibly with Orcid-IDs 
• DOI-number - an international ID-number
• Keywords - the involved health-specialty, fx neurology
• Large, zoomable image
• HTML-table
• Corrections to the article or a formal retractions-notice

All this information has through trial and error been packaged into a user-friendly interface on desktop and mobile, partly hiding less-used information inside collapsed panels and functions.

Two types of articles have a given structure with eight main parts. The display on mobile creates a collapsed version of the article where the reader can access any part of the article from the first screen.

Information is entered into these functions and the page is created completely automatically from the imported article XML. 
 

Fast article indexing and search result relevance

The search on Tidsskriftet is a carefully tuned interface for serving the different types of uses and the medical doctors separated across 51 officially denoted medical specialties. 

Leveraging Apache Solr that provides reliable, scalable and to the point search results in conjunction with Drupal’s great SearchAPI/facets, Ramsalt has created a searching tool that fine-grained the data, based on the user preferences while maintaining a sufficient caching method to serve the results in the fastest possible way. The search has fx. turned off stemming as this creates an unwanted, imprecise and unscientific search.

Component-based design

Ramsalt is interested in developing component-based design systems, and using tools such as Pattern Lab and Storybook for that, since it is easy to maintain for the long term and keeps the design language consistent across all projects. 

For this, Ramsalt have developed and contributed their own in-house base theme, Bootstrap Storybook that keeps the traditional Drupal best practices and applies various decoupling techniques with a lot of goodies for easy development and great out of box performance, accessibility and SEO while providing a canvas to keep track of our components using today’s hottest UI component library, StorybookJS

Performance, Caching, Accessibility and SEO-friendly structure

A speedy website is important in order to create a good user experience. But SEO is also an important driver. Tidsskriftet receives a large portion of its visitors from Google, so the project has invested significantly in SEO.

To ensure load speed, the project has implemented:

• Responsive image conversions to webp format 
• Prioritization of necessary asset loads
• Leveraging Critical CSS techniques
• Compressed and gzipped assets
• Proper caching

Tidsskriftet has achieved significant revenue from serving custom advertising. These banners are a challenge towards load speed. Tidsskriftet has therefore implemented lazy-loading of the ads. Tidsskriftet has also implemented a fixed ad-position for the top page banner in order to avoid penalties from the new CLS measurements Google soon will take into account.

Although some performance was sacrificed for UX, Ramsalt was able to bring it right back up where it was needed and shared the acquired knowledge in a popular four-part Drupal optimization series.

Keeping things simple UI-wise while bolstering up the necessary information

The trick with scientific journals is that you need to provide all the necessary information, credits and references but also keep the classical layout of traditional papers that focus on the content while maintaining an easy-to-read experience for the visitors.

To achieve such a goal and keep the bounce rate low, the design noise was minimized, taking advantage of properly selected and sized typography, differentiating sections and contents with minimal efforts to keep the consistency of the design while not sidetracking the audiences off of the main subject.
 

Long-term code maintainability

To keep things maintainable, Ramsalt took Drupal’s roots to heart and make every part of the website as modular as it gets, making the theme as component-based as possible as well, documenting every step of the way to make sure the open-source promise of long-term cost-efficiency remains true.